You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.0 KiB
105 lines
3.0 KiB
import React 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);
|
|
|
|
return (
|
|
<div data-component='Notifications' style={{
|
|
width: '383px',
|
|
background: '#F6F7F9',
|
|
borderRadius: '8px',
|
|
margin: '48px 30px 19px 0px'
|
|
}}>
|
|
<div className='chatTitle'>聊天</div>
|
|
|
|
<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>
|
|
}
|
|
|
|
</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>
|
|
);
|
|
};
|
|
|
|
Notifications.propTypes =
|
|
{
|
|
notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
|
|
onClick: PropTypes.func.isRequired
|
|
};
|
|
|
|
const mapStateToProps = (state) => {
|
|
const { notifications } = state;
|
|
|
|
return { notifications };
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
onClick: (notificationId) => {
|
|
dispatch(stateActions.removeNotification(notificationId));
|
|
}
|
|
};
|
|
};
|
|
|
|
const NotificationsContainer = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Notifications);
|
|
|
|
export default NotificationsContainer;
|