joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
184 lines (181 loc) • 8.69 kB
JavaScript
/**
*
* @api {} JwEvaluate 评价控件
*
* @apiParams {String} className 样式类名
* @apiParams {Object} evaluateSettings 评价配置信息
* @apiParams {Function} changeData 返回填写的评价数据
* @apiParams {Array<Element> | Element} action 自定义底部操作按钮
*
* @apiSuccessExample {json} 使用案例:
import { JwEvaluate } from "joywok-material-components"
<JwEvaluate
className="evaluate-dialog-content"
evaluateSettings={evaluateSettings}
changeData={self.changeEvaluateData.bind(self)}
action={[
<div key={1} className="cancel" onClick={self.closeEvaluate.bind(self)}>取消</div>,
<div className="submit disabled" onClick={self.saveEvaluate.bind(self)}>提交评价</div>
]}
/>
*/
import React from 'react';
import ReactDOM from 'react-dom';
import TextField from '@material-ui/core/TextField';
import {DataLength} from '../constants';
require('./style/index.css');
class JwEvaluate extends React.Component{
constructor(props) {
super(props);
this.state = {
evaluateSettings: props.evaluateSettings,
tagsArr: [],
evaluateData: {
content: '',
rate: props.evaluateSettings.default_score || 0,
tags: '',
process_tags: ''
}
};
}
componentWillReceiveProps(nextProps) {
this.setState({
evaluateSettings: nextProps.evaluateSettings
});
}
setData(val, key){
let newEvaluateData = {...this.state.evaluateData};
let tagsArr = [...this.state.tagsArr];
if(key == 'content' && DataLength(val) > this.state.evaluateSettings.contentMax) return;
if(key == 'tags'){
if(tagsArr.indexOf(val) !== -1){
tagsArr.splice(tagsArr.indexOf(val), 1);
} else {
tagsArr = [...tagsArr, ...[val]];
}
newEvaluateData[key] = (tagsArr.join(",")).replace(/^,+/,"").replace(/,+$/,"");
} else {
if (newEvaluateData[key] == val + '') return;
newEvaluateData[key] = val + '';
if(key == 'rate'){
tagsArr = [];
newEvaluateData['tags'] = '';
}
}
this.setState({
tagsArr: tagsArr,
evaluateData: newEvaluateData
});
this.props.changeData(newEvaluateData);
}
getIcon(color, type) {
if(type == 1) {
return <svg t="1632745348998" class="icon" viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3551" width="25" height="24"><path d="M236.082356 1023.966721a41.171995 41.171995 0 0 1-24.745863-8.191734 42.366623 42.366623 0 0 1-16.170141-41.598648l58.963417-306.720698L13.284263 441.713644A42.067966 42.067966 0 0 1 2.233956 397.64041a41.811974 41.811974 0 0 1 35.369517-28.287081L360.280986 337.055712 495.060606 25.257846A41.726644 41.726644 0 0 1 533.331362 0c16.639459 0 31.614973 9.94101 38.228091 25.257846l134.822285 311.627205 322.762843 32.254952a41.811974 41.811974 0 0 1 35.369518 28.287081 42.067966 42.067966 0 0 1-11.092973 44.030569l-240.930837 225.869992 59.219409 306.763364a42.238627 42.238627 0 0 1-16.212806 41.683978 41.171995 41.171995 0 0 1-44.243896 3.285227l-277.921634-148.304514-277.708308 148.304514a41.769309 41.769309 0 0 1-19.540698 4.906507z" fill={"#" + color} p-id="3552"></path></svg>
} else if(type == 2) {
return <svg t="1632793723351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3579" width="25" height="22"><path d="M740.84352 81.92C897.2288 81.92 1024 209.1008 1024 365.89568c0 259.23584-512 603.50464-512 603.50464S0 637.5424 0 365.89568C0 170.68032 126.7712 81.92 283.11552 81.92c94.208 0 177.3568 46.32576 228.88448 117.26848A282.33728 282.33728 0 0 1 740.84352 81.92z" fill={"#" + color} p-id="3580"></path></svg>
}
}
render(){
let self = this;
let { evaluateData } = this.state;
let evaluateSettings = self.state.evaluateSettings ? self.state.evaluateSettings : {};
let scoreArr = new Array(5);
let style1 = {};
let style2 = {};
if(evaluateSettings && evaluateSettings.primaryColor){
style1 = {
"border": '1px solid #' + evaluateSettings.primaryColor.fg,
"color": '#' + evaluateSettings.primaryColor.fg
}
style2 = {
"background": "#" + evaluateSettings.primaryColor.fg,
"opacity": "0.1"
}
}
let prompt = evaluateSettings.default_prompt || '';
let tags = [];
if (evaluateSettings.tag_score_config) {
switch (evaluateData.rate) {
case '1':
prompt = evaluateSettings.tag_score_config.score_1 && evaluateSettings.tag_score_config.score_1.prompt || '';
tags = evaluateSettings.tag_score_config.score_1 && evaluateSettings.tag_score_config.score_1.tags || [];
break;
case '2':
prompt = evaluateSettings.tag_score_config.score_2 && evaluateSettings.tag_score_config.score_2.prompt || '';
tags = evaluateSettings.tag_score_config.score_2 && evaluateSettings.tag_score_config.score_2.tags || [];
break;
case '3':
prompt = evaluateSettings.tag_score_config.score_3 && evaluateSettings.tag_score_config.score_3.prompt || '';
tags = evaluateSettings.tag_score_config.score_3 && evaluateSettings.tag_score_config.score_3.tags || [];
break;
case '4':
prompt = evaluateSettings.tag_score_config.score_4 && evaluateSettings.tag_score_config.score_4.prompt || '';
tags = evaluateSettings.tag_score_config.score_4 && evaluateSettings.tag_score_config.score_4.tags || [];
break;
case '5':
prompt = evaluateSettings.tag_score_config.score_5 && evaluateSettings.tag_score_config.score_5.prompt || '';
tags = evaluateSettings.tag_score_config.score_5 && evaluateSettings.tag_score_config.score_5.tags || [];
break;
}
}
let liClass = '';
if (tags && tags.length % 2 !== 0) {
liClass = 'fullWidth'
}
return (
<div className={this.props.className + " write-evaluate-container"}>
<div className="write-evaluate-content">
<div className="evaluate-score">
<div className="evaluate-score-icon">
{
_.map(scoreArr, function(item,index){
if(index + 1 > evaluateData.rate){
return <span className="score-icon" onClick={(e) => self.setData(index + 1, 'rate')}> {self.getIcon('e7e7e7', evaluateSettings.score_shape)} </span>
} else {
return <span className="score-icon" onClick={(e) => self.setData(index + 1, 'rate')}> {self.getIcon(evaluateSettings.primaryColor.fg, evaluateSettings.score_shape)} </span>
}
})
}
</div>
<p>{prompt}</p>
</div>
<ul className="evaluate-label-list">
{
_.map(tags, (item, index) => {
return <li className={(tags.length == index + 1) ? (evaluateData.tags.indexOf(item.id) !== -1 ? liClass + " active" : liClass) : (evaluateData.tags.indexOf(item.id) !== -1 ? "active" : "")} style={evaluateData.tags.indexOf(item.id) !== -1 ? style1 : {}} onClick={(e)=>self.setData(item.id, 'tags')}>{item.name}<span style={evaluateData.tags.indexOf(item.id) !== -1 ? style2 : {}}></span></li>
})
}
</ul>
{
evaluateSettings.processed_flag == 1 && <div className="evaluate-solve">
<div className="title">{i18n("evaluate.label.problem.is.solve")}</div>
<ul className="solve-label-list">
{
_.map(evaluateSettings.process_tags, (item) => {
return <li className={item.id == evaluateData.process_tags ? "active" : ""} style={item.id == evaluateData.process_tags ? style1 : {}} onClick={(e)=>self.setData(item.id, 'process_tags')}>{item.name}<span style={item.id == evaluateData.process_tags ? style2 : {}}></span></li>
})
}
</ul>
</div>
}
{
evaluateSettings.content_flag == 1 && <TextField
multiline
fullWidth
rows={5}
value={evaluateData.content || ''}
className="solve-textarea"
variant="outlined"
onChange={(e)=>self.setData(e.target.value, 'content')}
placeholder={i18n("label.usergroup.group.placeholder") + '…'}
/>
}
</div>
<div className="evaluate-footer">
{ self.props.action && self.props.action }
</div>
</div>
)
}
}
export default JwEvaluate;