import React from 'react';
|
import QuestionnairContent from '../QuestionnairContent';
|
import QuestionnairEditor from '../QuestionnairEditor';
|
import QuestionnairSiderbar from '../QuestionnairSiderbar';
|
import DragSort from '../../libs/DragSort/index.js';
|
import ShakeTransition from '../../libs/Shake';
|
import Input from '../../libs/Input';
|
import uuid from '../../utils/utils';
|
import './index.scss';
|
|
class Questionnair extends React.PureComponent {
|
constructor(props) {
|
super(props);
|
this.editorsEl = [];
|
this.scaleId = '';
|
this.sign = false;
|
}
|
|
state = {
|
editors: [
|
// {
|
// questionId: 'afaa9e6d672c56418199a8a62a4152c2d74f',
|
// type: 'radio',
|
// title: '单选题',
|
// required: true,
|
// remark: true,
|
// remarkText: '（此题关于一个很有深度的问题）',
|
// options: ['选项1', '选项2'],
|
// scores: [1, 0],
|
// rows: 1,
|
// textareaHeight: 3,
|
// maxLength: 50,
|
// otherOption: true,
|
// otherOptionForwards: '其他',
|
// otherOptionBackwards: '22222',
|
// completionForwards: '题目：',
|
// completionBackwards: '',
|
// isEditor: false,
|
// isFirst: false,
|
// warnFlag: false,
|
// editorShake: ''
|
// }
|
],
|
questionnairTitle: '',
|
questionnairDescription: '',
|
curMoveItem: null,
|
drag: false,
|
scrollTo: 0,
|
newEditor: true
|
};
|
// UNSAFE_componentWillReceiveProps(nextProps) {
|
// console.log('nextProps', nextProps);
|
// this.setState({
|
// editors: nextProps.editors
|
// });
|
// }
|
componentDidMount() {
|
const { editors } = this.props;
|
this.setState({
|
editors
|
})
|
}
|
|
updateEditors = callback => {
|
this.state.editors.some((data, index) => {
|
if (data.isFirst && data.isEditor) {
|
this.state.editors.splice(index, 1);
|
return true;
|
} else if (!data.isFirst && data.isEditor) {
|
data.isEditor = false;
|
return true;
|
}
|
});
|
callback(this.state.editors);
|
};
|
/*
|
* 判断是否有处于编辑状态的题目, activeEditorIndex // -1,没有处于编辑状态的题目
|
* 如果有处于编辑状态的题目，则激活该编辑器抖动
|
*/
|
isThereEditor = () => {
|
const activeEditorIndex = this.state.editors.findIndex(
|
data => data.isEditor === true
|
);
|
if (activeEditorIndex !== -1) {
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
editors[activeEditorIndex].editorShake = uuid();
|
this.setState({
|
editors
|
});
|
return true;
|
} else {
|
return false;
|
}
|
};
|
|
createEditor = type => {
|
if (this.isThereEditor()) {
|
return;
|
}
|
const editor = {
|
questionId: uuid(), //id
|
type: type, //类型
|
title: '', //题目
|
required: false, //是否必填
|
remark: true, //是否有备注
|
remarkText: '', //备注内容
|
options: ['选项', '选项'], //选项(只有radio,checkbox,select有,其余尽量给个空数组)
|
scores: ['', ''], //选项对应的分数
|
rows: 1, //选项占的行数
|
textareaHeight: 3, //多行文本高度
|
maxLength: 50, //单行文本限制的字数
|
otherOption: false, //是否有其他选项
|
otherOptionForwards: '其他', //”其他“项文本(前)
|
otherOptionBackwards: '', //”其他“项文本(后)
|
completionForwards: '题目：', //填空题文本(前)
|
completionBackwards: '', //填空题文本(后)
|
isEditor: true, //编辑状态还是已编辑状态
|
isFirst: true, //是否是新创建的
|
warnFlag: [false, false], //警示标识
|
editorShake: ''
|
};
|
this.setState(prevState => ({
|
editors: [...prevState.editors, editor]
|
}));
|
};
|
|
dragEditorByOutline = editors => {
|
const { onDrag } = this.props;
|
this.setState(
|
{
|
editors
|
},
|
() => {
|
if (onDrag) {
|
this.updateEditors(onDrag);
|
}
|
}
|
);
|
};
|
|
locateEditor = index => {
|
this.setState({
|
scrollTo: this.editorsEl[index].offsetTop
|
});
|
};
|
|
cancelEdit = index => {
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
editors[index].isFirst
|
? editors.splice(index, 1)
|
: (editors[index].isEditor = false);
|
this.setState({
|
editors
|
});
|
};
|
|
confirmEdit = (index, newEditor) => {
|
const { onConfirm } = this.props;
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
editors.splice(index, 1, newEditor);
|
this.setState(
|
{
|
editors
|
},
|
() => {
|
if (onConfirm) {
|
this.updateEditors(onConfirm);
|
}
|
}
|
);
|
};
|
|
againEdit = index => {
|
if (this.isThereEditor()) {
|
return;
|
}
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
editors[index].isEditor = true;
|
this.setState({
|
editors
|
});
|
};
|
|
copyEdit = index => {
|
const { onCopy } = this.props;
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
const copyEditor = {
|
...this.state.editors[index],
|
questionId: uuid()
|
};
|
editors.splice(index + 1, 0, copyEditor);
|
this.setState(
|
{
|
editors
|
},
|
() => {
|
if (onCopy) {
|
this.updateEditors(onCopy);
|
}
|
}
|
);
|
};
|
|
removeEdit = index => {
|
const { onRemove } = this.props;
|
let editors = JSON.parse(JSON.stringify(this.state.editors));
|
editors.splice(index, 1);
|
this.setState(
|
{
|
editors
|
},
|
() => {
|
if (onRemove) {
|
this.updateEditors(onRemove);
|
}
|
}
|
);
|
};
|
|
handleDragMove = (editors, from, to) => {
|
this.setState({
|
curMoveItem: to,
|
editors,
|
drag: true
|
});
|
};
|
|
handleDragEnd = () => {
|
const { onDrag } = this.props;
|
this.setState(
|
{
|
curMoveItem: null,
|
drag: false
|
},
|
() => {
|
if (onDrag) {
|
this.updateEditors(onDrag);
|
}
|
}
|
);
|
};
|
//标记事件
|
handleSgin = sign => {
|
const { onSign } = this.props;
|
if (onSign) {
|
onSign(sign);
|
}
|
};
|
//问卷标题失焦事件
|
blurTitle = title => {
|
const { onSaveTitle } = this.props;
|
if (onSaveTitle) {
|
onSaveTitle(title);
|
}
|
};
|
|
render() {
|
const {
|
editors,
|
drag,
|
editorShake,
|
scrollTo,
|
questionnairTitle,
|
questionnairDescription
|
} = this.state;
|
|
const { submitQuestionTemp, btnLoading, initData } = this.props;
|
|
//如果有编辑状态的题目则禁止拖动
|
const hasEditor = editors.some(data => data.isEditor === true);
|
const canDrag = hasEditor ? false : true;
|
const isFirst = editors.length !== 0 && editors[editors.length - 1].isFirst;
|
const editorsEl = editors.map((editor, index) => {
|
return (
|
<div
|
className="drag-wrapper"
|
ref={el => (this.editorsEl[index] = el)}
|
key={editor.questionId}
|
>
|
<QuestionnairEditor
|
index={index}
|
curMoveItem={this.state.curMoveItem}
|
editor={editor}
|
drag={drag}
|
handleConfirm={this.confirmEdit}
|
handleCancel={this.cancelEdit}
|
handleEdit={this.againEdit}
|
handleRemove={this.removeEdit}
|
handleCopy={this.copyEdit}
|
/>
|
</div>
|
);
|
});
|
return (
|
<div className="questionnair">
|
<QuestionnairSiderbar
|
editors={editors}
|
onSelectEditor={this.createEditor}
|
onDragOutline={this.dragEditorByOutline}
|
onClickOutline={this.locateEditor}
|
submitQuestionTemp={submitQuestionTemp}
|
/>
|
<QuestionnairContent
|
editors={editors}
|
isThereEditor={this.isThereEditor}
|
isFirst={isFirst}
|
scrollTo={scrollTo}
|
questionnairSign={this.sign}
|
questionnairTitle={questionnairTitle}
|
questionnairDescription={questionnairDescription}
|
onBlurTitle={this.blurTitle}
|
onChangeSign={this.handleSgin}
|
submitQuestionTemp={submitQuestionTemp}
|
btnLoading={btnLoading}
|
initData={initData}
|
>
|
{editorsEl.length !== 0 && (
|
<DragSort
|
draggable={canDrag}
|
data={editors}
|
onDragEnd={this.handleDragEnd}
|
onDragMove={this.handleDragMove}
|
>
|
{editorsEl}
|
</DragSort>
|
)}
|
</QuestionnairContent>
|
</div>
|
);
|
}
|
}
|
|
export default Questionnair;
|
