yapi/client/components/ProjectCard/ProjectCard.js

88 lines
2.7 KiB
JavaScript
Raw Normal View History

2017-08-11 19:30:12 +08:00
import './ProjectCard.scss';
import React, { Component } from 'react';
2017-08-23 10:36:24 +08:00
import { Card, Icon, Tooltip } from 'antd';
2017-08-19 15:18:55 +08:00
import { connect } from 'react-redux'
2017-08-22 20:04:15 +08:00
import { delFollow, addFollow } from '../../reducer/modules/follow';
2017-08-19 15:18:55 +08:00
// import { Link } from 'react-router-dom';
2017-08-11 19:30:12 +08:00
import PropTypes from 'prop-types';
2017-08-22 17:26:53 +08:00
import { withRouter } from 'react-router';
2017-08-22 20:44:16 +08:00
import { debounce } from '../../common';
2017-08-23 15:25:35 +08:00
import constants from '../../constants/variable.js';
2017-08-10 15:36:35 +08:00
2017-08-19 15:18:55 +08:00
@connect(
2017-08-22 20:04:15 +08:00
state => {
return {
uid: state.user.uid
}
2017-08-19 15:18:55 +08:00
},
{
2017-08-22 20:04:15 +08:00
delFollow,
addFollow
2017-08-19 15:18:55 +08:00
}
)
2017-08-20 17:22:04 +08:00
@withRouter
2017-08-11 17:47:25 +08:00
class ProjectCard extends Component {
2017-08-10 15:36:35 +08:00
constructor(props) {
super(props);
2017-08-22 20:44:16 +08:00
this.add = debounce(this.add, 400);
this.del = debounce(this.del, 400);
2017-08-10 15:36:35 +08:00
}
static propTypes = {
2017-08-19 15:18:55 +08:00
projectData: PropTypes.object,
2017-08-22 20:04:15 +08:00
uid: PropTypes.number,
inFollowPage: PropTypes.bool,
2017-08-19 15:18:55 +08:00
callbackResult: PropTypes.func,
2017-08-20 17:22:04 +08:00
history: PropTypes.object,
2017-08-22 20:04:15 +08:00
delFollow: PropTypes.func,
addFollow: PropTypes.func
2017-08-19 15:18:55 +08:00
}
del = () => {
2017-08-22 20:04:15 +08:00
const id = this.props.projectData.projectid || this.props.projectData._id;
2017-08-19 15:18:55 +08:00
this.props.delFollow(id).then((res) => {
if (res.payload.data.errcode === 0) {
this.props.callbackResult();
2017-08-23 10:36:24 +08:00
// message.success('已取消关注!'); // 星号已做出反馈 无需重复提醒用户
2017-08-19 15:18:55 +08:00
}
});
}
2017-08-22 20:04:15 +08:00
add = () => {
const { uid, projectData } = this.props;
const param = {
uid,
projectid: projectData._id,
projectname: projectData.name,
2017-08-23 21:01:50 +08:00
icon: projectData.icon || constants.PROJECT_ICON[0],
color: projectData.color || constants.PROJECT_COLOR.blue
2017-08-22 20:04:15 +08:00
}
this.props.addFollow(param).then((res) => {
if (res.payload.data.errcode === 0) {
this.props.callbackResult();
2017-08-23 10:36:24 +08:00
// message.success('已添加关注!'); // 星号已做出反馈 无需重复提醒用户
2017-08-22 20:04:15 +08:00
}
});
2017-08-10 15:36:35 +08:00
}
render() {
2017-08-22 20:04:15 +08:00
const { projectData, inFollowPage } = this.props;
2017-08-10 15:36:35 +08:00
return (
2017-08-19 15:18:55 +08:00
<div className="card-container">
2017-08-22 16:03:39 +08:00
<Card bordered={false} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
2017-08-23 15:25:35 +08:00
<Icon type={projectData.icon || 'star-o'} className="ui-logo" style={{ backgroundColor: constants.PROJECT_COLOR[projectData.color] || constants.PROJECT_COLOR.blue }} />
2017-08-22 16:03:39 +08:00
<h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
2017-08-11 19:30:12 +08:00
</Card>
2017-08-22 20:08:21 +08:00
<div className="card-btns" onClick={projectData.follow || inFollowPage ? this.del : this.add}>
2017-08-22 20:04:15 +08:00
<Tooltip placement="rightTop" title={projectData.follow || inFollowPage ? '取消关注' : '添加关注'}>
2017-08-22 20:08:21 +08:00
<Icon type={projectData.follow || inFollowPage ? 'star' : 'star-o'} className="icon"/>
2017-08-19 15:18:55 +08:00
</Tooltip>
</div>
</div>
2017-08-10 15:36:35 +08:00
)
}
}
2017-08-11 17:47:25 +08:00
export default ProjectCard