main
parent
05fb19c521
commit
af1fd4e98a
@ -1,104 +1,83 @@
|
||||
import React from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as appPropTypes from './appPropTypes';
|
||||
import * as stateActions from '../redux/stateActions';
|
||||
import { Appear } from './transitions';
|
||||
|
||||
const Notifications = ({ notifications, onClick }) => {
|
||||
console.log("notifications", notifications);
|
||||
const chatwarpRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div data-component='Notifications' style={{
|
||||
width: '383px',
|
||||
background: '#F6F7F9',
|
||||
borderRadius: '8px',
|
||||
margin: '48px 30px 19px 0px'
|
||||
}}>
|
||||
<div className='chatTitle'>聊天</div>
|
||||
useEffect(() => {
|
||||
if (chatwarpRef.current) {
|
||||
chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
|
||||
}
|
||||
}, [notifications]);
|
||||
|
||||
<div className='chatwarp'>
|
||||
{
|
||||
notifications.map((notification) => {
|
||||
return (
|
||||
<div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
|
||||
{
|
||||
// 类型是否是用户发送的消息
|
||||
notification.type == 'userMessage' ?
|
||||
<div style={{marginTop: 36}}>
|
||||
{
|
||||
notification.isMe ?
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
|
||||
<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
|
||||
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
|
||||
{notification.text}
|
||||
</div>
|
||||
</div> :
|
||||
<>
|
||||
<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
|
||||
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
|
||||
{notification.text}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div> :
|
||||
<div style={{width: '100%', margin: '20px 0', textAlign: 'center'}}>
|
||||
{notification.text}
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div data-component='Notifications' style={{
|
||||
width: '383px',
|
||||
background: '#F6F7F9',
|
||||
borderRadius: '8px',
|
||||
margin: '48px 30px 19px 0px'
|
||||
}}>
|
||||
<div className='chatTitle'>聊天</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
// 信息提示动画
|
||||
// <Appear key={notification.id} duration={250}>
|
||||
// <div
|
||||
// className={classnames('notification', notification.type)}
|
||||
// onClick={() => onClick(notification.id)}
|
||||
// >
|
||||
// <div className='icon' />
|
||||
|
||||
// <div className='body'>
|
||||
// <If condition={notification.title}>
|
||||
// <p className='title'>{notification.title}</p>
|
||||
// </If>
|
||||
|
||||
// <p className='text'>{notification.text}</p>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Appear>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className='chatwarp' ref={chatwarpRef}>
|
||||
{
|
||||
notifications.map((notification) => (
|
||||
<div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
|
||||
{
|
||||
notification.type === 'userMessage' ?
|
||||
<div style={{marginTop: 36}}>
|
||||
{
|
||||
notification.isMe ?
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
|
||||
<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
|
||||
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
|
||||
{notification.text}
|
||||
</div>
|
||||
</div> :
|
||||
<>
|
||||
<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
|
||||
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
|
||||
{notification.text}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div> :
|
||||
<div style={{width: '100%', margin: '30px 0', textAlign: 'center'}}>
|
||||
{notification.text}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Notifications.propTypes =
|
||||
{
|
||||
notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
|
||||
onClick: PropTypes.func.isRequired
|
||||
Notifications.propTypes = {
|
||||
notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
|
||||
onClick: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { notifications } = state;
|
||||
|
||||
return { notifications };
|
||||
const { notifications } = state;
|
||||
return { notifications };
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
onClick: (notificationId) => {
|
||||
dispatch(stateActions.removeNotification(notificationId));
|
||||
}
|
||||
};
|
||||
return {
|
||||
onClick: (notificationId) => {
|
||||
dispatch(stateActions.removeNotification(notificationId));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const NotificationsContainer = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Notifications);
|
||||
|
||||
export default NotificationsContainer;
|
||||
|
||||
Loading…
Reference in new issue