react-questionnair

62 | {type === 'textarea' ? ( 63 |

71 |           ) : (
72 |             <input {...otherProps}
73 |               type={type || 'text'}
74 |               name={name}
75 |               maxLength={maxLength}
76 |               disabled={disabled}
77 |               onChange={this.handleChange}
78 |               onBlur={this.handleBlur}
79 |               style={style}
80 |               className="wowjoy-input__inner"
81 |             />
82 |           )}
83 |       </div>
84 |     );
85 |   }
86 | }
87 | 
88 | export default Input;

--------------------------------------------------------------------------------
/libs/Input/index.less:
--------------------------------------------------------------------------------
 1 | :global {
 2 | 	.wowjoy-input {
 3 | 		overflow: hidden;
 4 | 		width: 100%;
 5 | 		height: 100%;
 6 | 		flex: 1;
 7 | 		z-index: 5;
 8 | 		display: inline-block;
 9 | 	}
10 | 	.wowjoy-input__inner {
11 |         width: 100%;
12 | 		height: 36px;
13 | 		border: 1px solid #ddd;
14 | 		outline: none;
15 | 		transition: all .3s;
16 | 		padding-left: 11px;
17 | 		font-size: 14px;
18 | 		color: rgb(102, 102, 102);
19 | 		&:focus {
20 | 			border-color: #06AEA6;
21 | 		}
22 | 	}
23 | 	.wowjoy-textarea__inner {
24 | 		width: 100%;
25 | 		border: 1px solid #ddd;
26 | 		outline: none;
27 | 		transition: all .3s;
28 | 		padding: 0 11px;
29 | 		font-size: 14px;
30 | 		color: rgb(102, 102, 102);
31 | 		&:focus {
32 | 			border-color: #06AEA6;
33 | 		}
34 | 	}
35 | }
36 |

--------------------------------------------------------------------------------
/libs/Radio/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.less';
 3 | 
 4 | class Radio extends React.PureComponent {
 5 | 
 6 |   handleChange = (e) => {
 7 |     const {
 8 |       onChange,
 9 |     } = this.props;
10 |     if (onChange) {
11 |       onChange(e);
12 |     };
13 |   }
14 | 
15 |   render() {
16 |     const {
17 |       defaultChecked,
18 |       value,
19 |       name,
20 |       label,
21 |       style,
22 |     } = this.props;
23 |     return (
24 |       <label className="wowjoy-radio" style={style}>
25 |         <input
26 |           type="radio"
27 |           name={name}
28 |           value={value}
29 |           defaultChecked={defaultChecked}
30 |           onChange={this.handleChange}
31 |           style={{ display: 'none' }}/>
32 |         <span className="wowjoy-radio__inner"></span>
33 |         <span className="wowjoy-radio__text">{label}</span>
34 |       </label>
35 |     );
36 |   }
37 | }
38 | 
39 | export default Radio;

--------------------------------------------------------------------------------
/libs/Radio/index.less:
--------------------------------------------------------------------------------
 1 | :global {
 2 | 	.wowjoy-radio {
 3 | 		cursor: pointer;
 4 | 		display: inline-block;
 5 | 	}
 6 | 	input[type='radio']:checked {
 7 | 		&+.wowjoy-radio__inner {
 8 | 			border-color: #06aea6;
 9 | 			&:before {
10 | 				content: '';
11 | 				background: #06aea6;
12 | 				width: 8px;
13 | 				height: 8px;
14 | 				border-radius: 50%;
15 | 				position: absolute;
16 | 				top: 50%;
17 | 				left: 50%;
18 | 				transform: translate(-50%, -50%);
19 | 			} 
20 | 		}
21 | 	}
22 | 	.wowjoy-radio__inner {
23 | 		position: relative;
24 | 		display: inline-block;
25 | 		width: 16px;
26 | 		height: 16px;
27 | 		border-radius: 50%;
28 | 		background: #fff;
29 | 		border: 1px solid #DBDBDB;
30 | 		vertical-align: sub;
31 | 		margin-right: 5px;
32 | 	}
33 | 	.wowjoy-radio__text {
34 | 		display: inline-block;
35 | 	    max-width: 80%;
36 | 	    vertical-align: top;
37 | 		word-break: break-all;
38 | 	}
39 | }

--------------------------------------------------------------------------------
/libs/Shake/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.less';
 3 | 
 4 | class ShakeTransition extends React.PureComponent {
 5 |   state = {
 6 |     shake: false,
 7 |   }
 8 | 
 9 |   componentWillReceiveProps(nextProps) {
10 |     if (nextProps.shake !== this.props.shake) {
11 |       this.setState({
12 |         shake: true,
13 |       });
14 |       this.timerID = setTimeout(() => this.triggerShake(), 1000);
15 |     };
16 |   }
17 | 
18 |   triggerShake = () => {
19 |     this.setState({
20 |       shake: false,
21 |     });
22 |   }
23 | 
24 |   componentWillUnmount() {
25 |     clearTimeout(this.timerID);
26 |   }
27 | 
28 |   render() {
29 |     const {
30 |       children,
31 |     } = this.props;
32 |     const {
33 |       shake,
34 |     } = this.state;
35 |     return (
36 |       <div className={`shake-transition ${shake ? 'shaked' : ''}`}>
37 |         {this.props.children}
38 |       </div>
39 |     );
40 |   }
41 | }
42 | 
43 | export default ShakeTransition;

--------------------------------------------------------------------------------
/libs/Shake/index.less:
--------------------------------------------------------------------------------
 1 | //animate
 2 | @keyframes shake {
 3 |   from, to {
 4 |     transform: translate3d(0, 0, 0);
 5 |   }
 6 | 
 7 |   10%, 30%, 50%, 70%, 90% {
 8 |     transform: translate3d(-8px, 0, 0);
 9 |   }
10 | 
11 |   20%, 40%, 60%, 80% {
12 |     transform: translate3d(8px, 0, 0);
13 |   }
14 | }
15 | .shake-transition {
16 |   height: 100%;
17 |   width: 100%;
18 | }
19 | .shaked {
20 |   animation-name: shake;
21 |   animation-duration: 1s;
22 |   animation-fill-mode: both;
23 | }
24 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-questionnair",
 3 |   "version": "v1.0.1",
 4 |   "description": "",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "dev": "node bin/dev-server",
 8 |     "build": "webpack --config webpack/webpack.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "babel-core": "^6.26.3",
14 |     "babel-loader": "^7.1.4",
15 |     "babel-preset-es2015": "^6.24.1",
16 |     "babel-preset-react": "^6.24.1",
17 |     "babel-preset-stage-1": "^6.24.1",
18 |     "react": "^16.4.1",
19 |     "react-dom": "^16.4.1"
20 |   },
21 |   "devDependencies": {
22 |     "babel-eslint": "^8.2.6",
23 |     "css-loader": "^0.28.11",
24 |     "file-loader": "^1.1.11",
25 |     "html-webpack-plugin": "^3.2.0",
26 |     "less": "^3.0.4",
27 |     "less-loader": "^4.1.0",
28 |     "style-loader": "^0.21.0",
29 |     "url-loader": "^1.0.1",
30 |     "webpack": "^4.15.0",
31 |     "webpack-cli": "^3.0.8",
32 |     "webpack-dev-server": "^3.1.4"
33 |   }
34 | }
35 |

--------------------------------------------------------------------------------
/react-questionnair.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pandly/react-questionnair/6a7f3c7a563826b59fcb6f7b55ac7b9971a2c0f7/react-questionnair.png

--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pandly/react-questionnair/6a7f3c7a563826b59fcb6f7b55ac7b9971a2c0f7/src/.DS_Store

--------------------------------------------------------------------------------
/src/Questionnair/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import QuestionnairContent from '../QuestionnairContent';
  3 | import QuestionnairEditor from '../QuestionnairEditor';
  4 | import QuestionnairSiderbar from '../QuestionnairSiderbar';
  5 | import DragSort from 'libs/DragSort/index.js';
  6 | import ShakeTransition from 'libs/Shake';
  7 | import Input from 'libs/Input';
  8 | import uuid from 'utils/utils';
  9 | import './index.less';
 10 | 
 11 | class Questionnair extends React.PureComponent {
 12 |   constructor(props) {
 13 |     super(props);
 14 |     this.editorsEl = [];
 15 |     this.scaleId = '';
 16 |     this.sign = false;
 17 |   }
 18 | 
 19 |   state = {
 20 |     editors: [],
 21 |     questionnairTitle: '问卷标题',
 22 |     curMoveItem: null,
 23 |     drag: false,
 24 |     scrollTo: 0,
 25 |     newEditor: true,
 26 |   }
 27 | 
 28 |   updateEditors = (callback) => {
 29 |     this.state.editors.some((data, index) => {
 30 |       if (data.isFirst && data.isEditor) {
 31 |         this.state.editors.splice(index, 1)
 32 |         return true;
 33 |       } else if (!data.isFirst && data.isEditor) {
 34 |         data.isEditor = false;
 35 |         return true;
 36 |       };
 37 |     });
 38 |     callback(this.state.editors);
 39 |   }
 40 |   /*
 41 |    * 判断是否有处于编辑状态的题目, activeEditorIndex // -1,没有处于编辑状态的题目
 42 |    * 如果有处于编辑状态的题目，则激活该编辑器抖动
 43 |    */
 44 |   isThereEditor = () => {
 45 |     const activeEditorIndex = this.state.editors.findIndex(data => data.isEditor === true);
 46 |     if (activeEditorIndex !== -1) {
 47 |       let editors = JSON.parse(JSON.stringify(this.state.editors));
 48 |       editors[activeEditorIndex].editorShake = uuid();
 49 |       this.setState({
 50 |         editors,
 51 |       });
 52 |       return true;
 53 |     } else {
 54 |       return false;
 55 |     };
 56 |   }
 57 | 
 58 |   createEditor = (type) => {
 59 |     if (this.isThereEditor()) {
 60 |       return;
 61 |     }
 62 |     const editor = {
 63 |       questionId: uuid(), //id
 64 |       type: type, //类型
 65 |       title: '', //题目
 66 |       required: false, //是否必填
 67 |       remark: false, //是否有备注
 68 |       remarkText: '', //备注内容
 69 |       options: ['选项', '选项'], //选项(只有radio,checkbox,select有,其余尽量给个空数组)
 70 |       rows: 1, //选项占的行数
 71 |       textareaHeight: 3, //多行文本高度
 72 |       maxLength: 50, //单行文本限制的字数
 73 |       otherOption: false, //是否有其他选项
 74 |       otherOptionForwards: '其他', //”其他“项文本(前)
 75 |       otherOptionBackwards: '', //”其他“项文本(后)
 76 |       completionForwards: '题目：', //填空题文本(前)
 77 |       completionBackwards: '', //填空题文本(后)
 78 |       isEditor: true, //编辑状态还是已编辑状态
 79 |       isFirst: true, //是否是新创建的
 80 |       editorShake: '',
 81 |     };
 82 |     this.setState(prevState => ({
 83 |       editors: [...prevState.editors, editor],
 84 |     }));
 85 |   }
 86 | 
 87 |   dragEditorByOutline = (editors) => {
 88 |     const {
 89 |       onDrag,
 90 |     } = this.props;
 91 |     this.setState({
 92 |       editors,
 93 |     }, () => {
 94 |       if (onDrag) {
 95 |         this.updateEditors(onDrag);
 96 |       };
 97 |     });
 98 |   }
 99 | 
100 |   locateEditor = (index) => {
101 |     this.setState({
102 |       scrollTo: this.editorsEl[index].offsetTop,
103 |     });
104 |   }
105 | 
106 |   cancelEdit = (index) => {
107 |     let editors = JSON.parse(JSON.stringify(this.state.editors));
108 |     editors[index].isFirst ? editors.splice(index, 1) : editors[index].isEditor = false;
109 |     this.setState({
110 |       editors,
111 |     });
112 |   }
113 | 
114 |   confirmEdit = (index, newEditor) => {
115 |     const {
116 |       onConfirm,
117 |     } = this.props;
118 |     let editors = JSON.parse(JSON.stringify(this.state.editors));
119 |     editors.splice(index, 1, newEditor);
120 |     this.setState({
121 |       editors,
122 |     }, () => {
123 |       if (onConfirm) {
124 |         this.updateEditors(onConfirm);
125 |       };
126 |     });
127 |   }
128 | 
129 |   againEdit = (index) => {
130 |     if (this.isThereEditor()) {
131 |       return;
132 |     }
133 |     let editors = JSON.parse(JSON.stringify(this.state.editors));
134 |     editors[index].isEditor = true;
135 |     this.setState({
136 |       editors,
137 |     });
138 |   }
139 | 
140 |   copyEdit = (index) => {
141 |     const {
142 |       onCopy,
143 |     } = this.props;
144 |     let editors = JSON.parse(JSON.stringify(this.state.editors));
145 |     const copyEditor = {
146 |       ...this.state.editors[index],
147 |       questionId: uuid(),
148 |     };
149 |     editors.splice(index + 1, 0, copyEditor);
150 |     this.setState({
151 |       editors,
152 |     }, () => {
153 |       if (onCopy) {
154 |         this.updateEditors(onCopy);
155 |       };
156 |     });
157 |   }
158 | 
159 |   removeEdit = (index) => {
160 |     const {
161 |       onRemove,
162 |     } = this.props;
163 |     let editors = JSON.parse(JSON.stringify(this.state.editors));
164 |     editors.splice(index, 1);
165 |     this.setState({
166 |       editors,
167 |     }, () => {
168 |       if (onRemove) {
169 |         this.updateEditors(onRemove);
170 |       };
171 |     });
172 |   }
173 | 
174 |   handleDragMove = (editors, from, to) => {
175 |     this.setState({
176 |       curMoveItem: to,
177 |       editors,
178 |       drag: true,
179 |     });
180 |   }
181 | 
182 |   handleDragEnd = () => {
183 |     const {
184 |       onDrag,
185 |     } = this.props;
186 |     this.setState({
187 |       curMoveItem: null,
188 |       drag: false,
189 |     }, () => {
190 |       if (onDrag) {
191 |         this.updateEditors(onDrag);
192 |       };
193 |     });
194 |   }
195 |   //标记事件
196 |   handleSgin = (sign) => {
197 |     const {
198 |       onSign,
199 |     } = this.props;
200 |     if (onSign) {
201 |       onSign(sign);
202 |     };
203 |   }
204 |   //问卷标题失焦事件
205 |   blurTitle = (title) => {
206 |     const {
207 |       onSaveTitle,
208 |     } = this.props;
209 |     if (onSaveTitle) {
210 |       onSaveTitle(title);
211 |     };
212 |   }
213 | 
214 |   render() {
215 |     const {
216 |       editors,
217 |       drag,
218 |       editorShake,
219 |       scrollTo,
220 |       questionnairTitle,
221 |     } = this.state;
222 |     //如果有编辑状态的题目则禁止拖动
223 |     const hasEditor = editors.some(data => data.isEditor === true);
224 |     const canDrag = hasEditor ? false : true;
225 |     const isFirst = editors.length !== 0 && editors[editors.length - 1].isFirst;
226 |     const editorsEl = editors.map((editor, index) => {
227 |       return (
228 |         <div
229 |           className="drag-wrapper"
230 |           ref={el => this.editorsEl[index] = el}
231 |           key={editor.questionId}>
232 |           <QuestionnairEditor
233 |             index={index}
234 |             curMoveItem={this.state.curMoveItem}
235 |             editor={editor}
236 |             drag={drag}
237 |             handleConfirm={this.confirmEdit}
238 |             handleCancel={this.cancelEdit}
239 |             handleEdit={this.againEdit}
240 |             handleRemove={this.removeEdit}
241 |             handleCopy={this.copyEdit}
242 |           />
243 |         </div>
244 |       );
245 |     });
246 |     return (
247 |       <div className="questionnair">
248 |         <QuestionnairSiderbar
249 |           editors={editors}
250 |           onSelectEditor={this.createEditor}
251 |           onDragOutline={this.dragEditorByOutline}
252 |           onClickOutline={this.locateEditor}
253 |         />
254 |         <QuestionnairContent
255 |           isFirst={isFirst}
256 |           scrollTo={scrollTo}
257 |           questionnairSign={this.sign}
258 |           questionnairTitle={questionnairTitle}
259 |           onBlurTitle={this.blurTitle}
260 |           onChangeSign={this.handleSgin}>
261 |             {editorsEl.length !== 0 && (
262 |               <DragSort
263 |                 draggable={canDrag}
264 |                 data={editors}
265 |                 onDragEnd={this.handleDragEnd}
266 |                 onDragMove={this.handleDragMove}>
267 |                   {editorsEl}
268 |               </DragSort>
269 |             )}
270 |         </QuestionnairContent>
271 |       </div>
272 |     );
273 |   }
274 | }
275 | 
276 | export default Questionnair;

--------------------------------------------------------------------------------
/src/Questionnair/index.less:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | 	user-select: none;
 4 | 	font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 5 | }
 6 | .questionnair {
 7 | 	display: flex;
 8 | 	width: 100%;
 9 | 	height: 100%;
10 | 	background: #f0f0f0;
11 | }
12 | :global {
13 | 	.title-inner {
14 | 		width: 700px;
15 | 	    height: 45px;
16 | 		margin: 0 auto;
17 | 	    background: #fff;
18 | 	    display: flex;
19 | 	    justify-content: center;
20 | 	    align-items: center;
21 | 	    border: 1px solid transparent;
22 | 	}
23 | }

--------------------------------------------------------------------------------
/src/QuestionnairAnswer/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const QuestionnairAnswer = ({
 4 |   answer
 5 | }) => {
 6 |   return (
 7 |     <div style={{ minHeight: 60 }}>
 8 |       <div style={{ color: '#666' }}>{`${index + 1}.${answer.type === 'input' ? answer.completionForwards : answer.title + ':'}`}</div>
 9 |       <div style={{ paddingLeft: 12, color: '#151515' }}>{typeof answer.answer[answer.type] !== 'string' ? (
10 |         typeof answer.answer[answer.type].optionValue !== 'string' ? (
11 |           answer.answer[answer.type].optionValue.map((item, index) => {
12 |             return (
13 |               item && <span key={index} style={{ marginRight: 15 }}>{item}</span>
14 |             )
15 |           })
16 |         ) : answer.answer[answer.type].optionValue
17 |       ) : answer.answer[answer.type]}</div>
18 |     </div>
19 |   );
20 | }
21 | 
22 | export default QuestionnairAnswer;

--------------------------------------------------------------------------------
/src/QuestionnairAnswer/index.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pandly/react-questionnair/6a7f3c7a563826b59fcb6f7b55ac7b9971a2c0f7/src/QuestionnairAnswer/index.less

--------------------------------------------------------------------------------
/src/QuestionnairContent/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import './index.less'
  3 | import Input from 'libs/Input'
  4 | import Default from 'assets/scale_default.png'
  5 | 
  6 | class QuestionnairContent extends React.PureComponent {
  7 |   state = {
  8 |     questionnairSign: false,
  9 |     questionnairTitle: '问卷标题',
 10 |   }
 11 |   //新增题目时内容页滚动到底部
 12 |   componentDidUpdate() {
 13 |     if (this.scrollBottom) {
 14 |       const scrollHeight = this.content.scrollHeight;
 15 |       this.page.scrollTo(0, scrollHeight);
 16 |     };
 17 |     if (this.scrollTo) {
 18 |       this.page.scrollTo(0, this.scrollTo);
 19 |     };
 20 |   }
 21 | 
 22 |   componentWillReceiveProps(nextProps) {
 23 |     if (nextProps.isFirst) {
 24 |       this.scrollBottom = true;
 25 |     } else {
 26 |       this.scrollBottom = false;
 27 |     };
 28 |     if (nextProps.scrollTo !== this.props.scrollTo) {
 29 |       this.scrollTo = nextProps.scrollTo;
 30 |     } else {
 31 |       this.scrollTo = false;
 32 |     };
 33 |     this.setState({
 34 |       questionnairSign: nextProps.questionnairSign,
 35 |       questionnairTitle: nextProps.questionnairTitle,
 36 |     });
 37 |   }
 38 | 
 39 |   handleSign = () => {
 40 |     const {
 41 |       onChangeSign
 42 |     } = this.props;
 43 |     this.setState(prevState => ({
 44 |       questionnairSign: !prevState.questionnairSign,
 45 |     }), () => {
 46 |       onChangeSign(this.state.questionnairSign);
 47 |     });
 48 |   }
 49 | 
 50 |   handleChange = (e) => {
 51 |     this.setState({
 52 |       questionnairTitle: e.target.value,
 53 |     });
 54 |   }
 55 | 
 56 |   handleBlur = () => {
 57 |     const {
 58 |       onBlurTitle
 59 |     } = this.props;
 60 |     if (onBlurTitle) {
 61 |       onBlurTitle(this.state.questionnairTitle);
 62 |     };
 63 |   }
 64 | 
 65 |   render() {
 66 |     const {
 67 |       questionnairSign,
 68 |       questionnairTitle,
 69 |     } = this.state;
 70 |     const questionnairtitleEl = (
 71 |       <div className='title-inner'>
 72 |         <Input
 73 |           value={questionnairTitle}
 74 |           onChange={this.handleChange}
 75 |           onBlur={this.handleBlur}
 76 |           style={{
 77 |             height: 45,
 78 |             borderColor: 'transparent',
 79 |             textAlign: 'center',
 80 |             fontSize: 18,
 81 |             color: '#666',
 82 |             fontFamily: 'PingFangSC-Medium'
 83 |           }}
 84 |           className='title-input' />
 85 |       </div>
 86 |     );
 87 |     return (
 88 |       <div className='questionnair-page' ref={el => this.page = el}>
 89 |         <div className='questionnair-page-banner'>
 90 |           <div className='banner-text' onClick={this.handleSign} style={{ color: questionnairSign ? '#FFBF47' : '' }}>
 91 |             <i className="iconfont icon-dengpao"></i>
 92 |             <span style={{ marginLeft: 6 }}>{questionnairSign ? '取消标记' : '标记'}</span>
 93 |           </div>
 94 |         </div>
 95 |         <div className='questionnair-page-title'>
 96 |           {questionnairtitleEl}
 97 |         </div>
 98 |         <div className='questionnair-page-content' ref={el => this.content = el}>
 99 |           {/*如果组件没有子节点，this.props.children返回false*/}
100 |           {this.props.children || (
101 |             <div className='questionnair-page-default'>
102 |               <img src={Default} style={{ width: 130 }}/>
103 |               <div className='page-default-text'>您还没有添加题目哦，请点击左侧控件开始出题吧</div>
104 |             </div>
105 |           )}
106 |         </div>
107 |       </div>
108 |     );
109 |   }
110 | }
111 | 
112 | export default QuestionnairContent;

--------------------------------------------------------------------------------
/src/QuestionnairContent/index.less:
--------------------------------------------------------------------------------
 1 | .questionnair-page {
 2 | 	flex: 1;
 3 | 	background: #fff;
 4 | 	box-shadow: 0 3px 4px 0 rgba(202,202,202,0.50);
 5 | 	margin-left: 20px;
 6 | 	overflow: auto;
 7 | 	position: absolute;
 8 | 	left: 170px;
 9 | 	right: 20px;
10 | 	top: 20px;
11 | 	bottom: 20px;
12 | 	width: 1000px;
13 | 	margin: auto;
14 | }
15 | .questionnair-page-banner {
16 | 	height: 46px;
17 | 	width: 700px;
18 | 	margin: 0 auto;
19 | 	border-bottom: 1px solid #DBDBDB;
20 | 	display: flex;
21 | 	align-items: center;
22 | 	justify-content: flex-end;
23 | }
24 | .banner-text {
25 | 	cursor: pointer;
26 | 	display: inline-block;
27 | 	color: #999;
28 | }
29 | .questionnair-page-title {
30 | 	margin: 10px 0;
31 |     width: 100%;
32 |     padding: 10px 0;
33 |     border-top: 1px solid transparent;
34 |     border-bottom: 1px solid transparent;
35 |     &:hover {
36 |     	border-color: #DBDBDB;
37 |     	background: #FAFAFA;
38 |     	:global {
39 |     		.title-inner {
40 | 	    		border-color: #DBDBDB;
41 | 	    	}
42 |     	};
43 |     }
44 | }
45 | .questionnair-page-content {
46 | 	width: 100%;
47 | }
48 | .questionnair-page-default {
49 | 	display: flex;
50 | 	align-items: center;
51 | 	justify-content: center;
52 | 	flex-direction: column;
53 |     position: absolute;
54 |     top: 45%;
55 |     left: 50%;
56 |     transform: translate(-50%, -50%);
57 | }
58 | .page-default-text {
59 | 	font-size: 16px;
60 | 	color: #999;
61 | 	margin-top: 20px;
62 | }

--------------------------------------------------------------------------------
/src/QuestionnairEditor/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Input from 'libs/Input';
  3 | import Checkbox from 'libs/Checkbox';
  4 | import Radio from 'libs/Radio';
  5 | import Dropdown from 'libs/Dropdown';
  6 | import Button from 'libs/Button';
  7 | import ContentEditable from 'libs/ContentEditable';
  8 | import ShakeTransition from 'libs/Shake';
  9 | import Dialog from 'libs/Dialog';
 10 | import uuid from 'utils/utils';
 11 | import './index.less';
 12 | 
 13 | const rowOptions = [1, 2, 3, 4];
 14 | 
 15 | class QuestionnairEditor extends React.PureComponent {
 16 |   constructor(props) {
 17 |     super(props);
 18 |     this.temp = '';
 19 |     this.otherOptionInput = '';
 20 |   }
 21 | 
 22 |   static defaultProps = {
 23 |     acitveAnswer: false,
 24 |   }
 25 | 
 26 |   state = {
 27 |     toggleMutiOption: false,
 28 |     editor: {
 29 |       ...this.props.editor,
 30 |     },
 31 |     hover: false,
 32 |     inputShake: false,
 33 |     optionShake: [],
 34 |     hasOption: [],
 35 |     hasTitle: true,
 36 |     dialogVisible: false,
 37 |     mutiOption: '',
 38 |     otherOptionInput: '',
 39 |     otherOptionForwards: '',
 40 |   }
 41 |   /* 首先有点乱。。。
 42 |    * 由于每次每个题目的操作实际上都是在操作整个题目数组，题目数组交给了题目组件的父组件来管理
 43 |    * 所以每次题目操作完以后更新父组件的题目数组，父组件更新会触发题目组件的componentWillReceiveProps生命周期函数
 44 |    */
 45 |   componentWillReceiveProps(nextProps) {
 46 |     /*
 47 |      * 每次只能编辑一个题目，所以触发再次添加题目的操作，将会引起当前题目的抖动
 48 |      * 连续点击产生连续抖动的效果，所以创建一个变量editorShake，来标志表格需要抖动
 49 |      * 由于是更新数组，为了在抖动的效果下保留之前填写的数据，所以比较之前和新的editorShake是否相同
 50 |      * 如果不同则说明只是要产生抖动，只更新editorShake变量
 51 |      */
 52 |     if (nextProps.editor.editorShake !== this.props.editor.editorShake) {
 53 |       this.setState({
 54 |         editor: {
 55 |           ...this.state.editor,
 56 |           editorShake: nextProps.editor.editorShake,
 57 |         },
 58 |       });
 59 |     } else {
 60 |       this.setState({
 61 |         editor: {
 62 |           ...this.state.editor,
 63 |           ...nextProps.editor,
 64 |         },
 65 |       });
 66 |     };
 67 |   }
 68 | 
 69 |   switchEditor = (type) => {
 70 |     switch (type) {
 71 |       case 'radio':
 72 |         return '单选题';
 73 |       case 'dropdown':
 74 |         return '下拉题';
 75 |       case 'checkbox':
 76 |         return '多选题';
 77 |       case 'textarea':
 78 |         return '多行文本题';
 79 |       case 'text':
 80 |         return '单行文本题';
 81 |       case 'input':
 82 |         return '填空题';
 83 |       default:
 84 |         return '错误';
 85 |     };
 86 |   }
 87 | 
 88 |   handleChange = (e, index) => {
 89 |     let value = e.target ? e.target.value : e;
 90 |     let key = e.target.name;
 91 |     let checked = e.target.checked;
 92 |     if (key === 'title' && value) {
 93 |       //控制题目input边框颜色
 94 |       this.setState({
 95 |         hasTitle: true,
 96 |       });
 97 |     };
 98 |     if (key === 'options') {
 99 |       let {
100 |         options,
101 |       } = this.state.editor;
102 |       let {
103 |         hasOption,
104 |       } = this.state;
105 |       hasOption[index] = true;
106 |       this.setState({
107 |         hasOption: [...hasOption],
108 |       })
109 |       let optionsTemp = options.concat();
110 |       optionsTemp[index] = value;
111 |       value = optionsTemp;
112 |     };
113 |     if (key === 'required' || key === 'remark') {
114 |       value = checked;
115 |     };
116 |     if (key === 'maxLength') {
117 |       value = parseInt(value);
118 |     };
119 |     this.setState(prevState => ({
120 |       editor: {
121 |         ...prevState.editor,
122 |         [key]: value,
123 |       },
124 |     }));
125 |   }
126 |   //填写答案时触发的事件
127 |   handleAnswerChange = (e, index) => {
128 |     let {
129 |       type,
130 |     } = this.state.editor;
131 |     let value = e.target.value;
132 |     this.optionIndex = e.target.dataset.index;
133 |     if (value === 'undefined') {
134 |       value = this.otherOptionValue;
135 |     };
136 |     if (type === 'checkbox') {
137 |       let valueIn = this.answer.checkbox.optionValue.includes(value);
138 |       let indexIn = this.answer.checkbox.optionIndex.includes(this.optionIndex);
139 |       this.answer.checkbox.optionValue[this.optionIndex] = valueIn ? null : value;
140 |       this.answer.checkbox.optionIndex[this.optionIndex] = indexIn ? null : this.optionIndex;
141 |       this.answer.checkbox.otherOptionValue = this.otherOptionValue;
142 |     } else if (type === 'radio') {
143 |       this.answer[type] = {
144 |         optionValue: value,
145 |         optionIndex: this.optionIndex,
146 |         otherOptionValue: this.otherOptionValue,
147 |       };
148 |     } else {
149 |       this.answer[type] = value;
150 |     };
151 |     const answerEditor = {
152 |       ...this.state.editor,
153 |       answer: this.answer,
154 |     };
155 |     this.props.onAnswer(answerEditor, this.props.index);
156 |   }
157 |   //填写radio、checkbox'其他'选项时触发的方法
158 |   handleOtherOptionInputChange = (e) => {
159 |     const {
160 |       type,
161 |       otherOptionForwards,
162 |       otherOptionBackwards,
163 |     } = this.state.editor;
164 |     this.otherOptionValue = e.target.innerHTML;
165 |     this.allValue = otherOptionForwards + this.otherOptionValue + otherOptionBackwards;
166 |     this.optionIndex = e.target.dataset.index;
167 |     if (type === 'checkbox') {
168 |       const length = this.answer.checkbox.optionValue.length;
169 |       this.answer.checkbox.optionValue[length - 1] = this.answer.checkbox.optionValue[length - 1] === null ? null : this.allValue;
170 |       this.answer.checkbox.otherOptionValue = this.allValue;
171 |     } else if (type === 'radio') {
172 |       this.answer[type] = {
173 |         optionValue: this.allValue,
174 |         optionIndex: this.optionIndex,
175 |         otherOptionValue: this.allValue,
176 |       };
177 |     } else {
178 |       this.answer[type] = this.allValue;
179 |     };
180 |     const answerEditor = {
181 |       ...this.state.editor,
182 |       answer: this.answer,
183 |     };
184 |     this.props.onAnswer(answerEditor, this.props.index);
185 |   }
186 |   //新增选项
187 |   createOption = () => {
188 |     this.setState(prevState => ({
189 |       editor: {
190 |         ...prevState.editor,
191 |         'options': [...prevState.editor.options, ''],
192 |       },
193 |     }));
194 |   }
195 |   //删除选项
196 |   deleteOption = (index) => {
197 |     let options = [...this.state.editor.options];
198 |     options.splice(index, 1);
199 |     this.setState(prevState => ({
200 |       editor: {
201 |         ...prevState.editor,
202 |         options,
203 |       },
204 |     }));
205 |   }
206 |   /*
207 |    * 以下都是有关于批量编辑的事件
208 |    */
209 |   //点击打开批量编辑的弹窗
210 |   handleMutiOption = () => {
211 |     this.setState({
212 |       dialogVisible: true,
213 |       mutiOption: this.state.editor.options.join('\n'),
214 |     });
215 |   }
216 |   //批量编辑textarea中的change
217 |   handleMutiTextarea = (e) => {
218 |     this.mutiTextareaValue = e.target.value;
219 |     this.setState({
220 |       mutiOption: e.target.value,
221 |     });
222 |   }
223 |   //关闭批量编辑的弹窗
224 |   closeDialog = () => {
225 |     this.setState({
226 |       dialogVisible: false,
227 |     });
228 |   }
229 |   //打开批量编辑的弹窗
230 |   confirmDialog = () => {
231 |     const options = this.mutiTextareaValue.split('\n');
232 |     this.setState(prevState => ({
233 |       dialogVisible: false,
234 |       editor: {
235 |         ...prevState.editor,
236 |         options,
237 |       },
238 |     }));
239 |   }
240 |   //确认
241 |   confirm = () => {
242 |     const {
243 |       index,
244 |       handleConfirm,
245 |     } = this.props;
246 |     const {
247 |       editor,
248 |       inputShake,
249 |     } = this.state;
250 |     if (!editor.title && editor.type !== 'input') {
251 |       this.setState(prevState => ({
252 |         inputShake: !prevState.inputShake,
253 |         hasTitle: false,
254 |       }));
255 |       return;
256 |     };
257 |     //判断选项是否为空
258 |     if (['radio', 'checkbox', 'dropdown'].includes(editor.type)) {
259 |       let empty = editor.options.some((item, index) => {
260 |         if (item === '') {
261 |           this.setState(prevState => {
262 |             prevState.optionShake[index] = !prevState.optionShake[index];
263 |             prevState.hasOption[index] = false;
264 |             return {
265 |               optionShake: [...prevState.optionShake],
266 |               hasOption: [...prevState.hasOption],
267 |             }
268 |           })
269 |           return true;
270 |         }
271 |       })
272 |       if (empty) {
273 |         return;
274 |       }
275 |     };
276 |     const newEditor = {
277 |       ...editor,
278 |       isEditor: false,
279 |       isFirst: false,
280 |     };
281 |     if (handleConfirm) {
282 |       handleConfirm(index, newEditor);
283 |     };
284 |     this.isFirst = false;
285 |     this.temp = JSON.parse(JSON.stringify(this.state.editor));
286 |   }
287 |   //取消
288 |   cancel = () => {
289 |     const {
290 |       index,
291 |       handleCancel,
292 |     } = this.props;
293 |     if (handleCancel) {
294 |       handleCancel(index);
295 |     };
296 |     this.setState({
297 |       editor: this.temp,
298 |     });
299 |   }
300 |   //编辑
301 |   edit = () => {
302 |     const {
303 |       index,
304 |       handleEdit,
305 |     } = this.props;
306 |     if (handleEdit) {
307 |       handleEdit(index);
308 |     };
309 |   }
310 |   //复制
311 |   copy = () => {
312 |     const {
313 |       index,
314 |       handleCopy,
315 |     } = this.props;
316 |     if (handleCopy) {
317 |       handleCopy(index);
318 |     };
319 |   }
320 |   //删除
321 |   remove = () => {
322 |     const {
323 |       index,
324 |       handleRemove,
325 |     } = this.props;
326 |     if (handleRemove) {
327 |       handleRemove(index);
328 |     };
329 |   }
330 |   //鼠标进入
331 |   mouseEnter = () => {
332 |     if (!this.props.drag && !this.props.acitveAnswer) {
333 |       this.setState({
334 |         hover: true,
335 |       });
336 |     };
337 |   }
338 |   //鼠标离开
339 |   mouseLeave = () => {
340 |     if (!this.props.drag && !this.props.acitveAnswer) {
341 |       this.setState({
342 |         hover: false,
343 |       });
344 |     };
345 |   }
346 |   disableEnter = (event) => {
347 |     if (event.which == 13) {
348 |       event.cancelBubble = true;
349 |       event.preventDefault();
350 |       event.stopPropagation();
351 |     };
352 |   }
353 |   render() {
354 |     const {
355 |       index,
356 |       curMoveItem,
357 |       drag,
358 |       acitveAnswer,
359 |     } = this.props;
360 |     const {
361 |       toggleMutiOption,
362 |       editor,
363 |       hover,
364 |       inputShake,
365 |       optionShake,
366 |       hasOption,
367 |       hasTitle,
368 |       dialogVisible,
369 |       mutiOption,
370 |     } = this.state;
371 |     let {
372 |       type,
373 |       isEditor,
374 |       title,
375 |       required,
376 |       remark,
377 |       remarkText,
378 |       options,
379 |       rows,
380 |       textareaHeight,
381 |       maxLength,
382 |       otherOption,
383 |       otherOptionForwards,
384 |       otherOptionBackwards,
385 |       completionForwards,
386 |       completionBackwards,
387 |       editorShake,
388 |       answer,
389 |     } = editor;
390 |     this.answer = answer && JSON.parse(JSON.stringify(answer));
391 |     this.otherOptionValue = answer && this.answer[type].otherOptionValue;
392 |     /*
393 |      *
394 |      * 以下元素为编辑状态下的元素
395 |      *
396 |      */
397 |     //编辑状态下的题目
398 |     const ediTitleEl = (
399 |       <div className="editor-row">
400 |         <label className="editor-row-title">题目</label>
401 |         <div className="editor-row-content">
402 |           <ShakeTransition shake={inputShake}>
403 |             <Input
404 |               name={'title'}
405 |               value={title}
406 |               onChange={this.handleChange}
407 |               style={{
408 |                 borderColor: hasTitle ? '' : 'red'
409 |               }}
410 |             />
411 |           </ShakeTransition>
412 |         </div>
413 |       </div>
414 |     );
415 |     //编辑状态下的选项框
416 |     const optionsArr = options.map((option, index) => {
417 |       return (
418 |         <div className="editor-row" key={index}>
419 |           <label className="editor-row-title">
420 |             <i className="iconfont icon-xuanxiangicon"></i>
421 |           </label>
422 |           <div className="editor-row-content">
423 |             <ShakeTransition shake={optionShake[index]}>
424 |               <Input
425 |                 index={index}
426 |                 name={'options'}
427 |                 value={option}
428 |                 onChange={this.handleChange}
429 |                 style={{
430 |                   borderColor: hasOption[index] === false ? 'red' : ''
431 |                 }}
432 |               />
433 |             </ShakeTransition>
434 |           </div>
435 |           <i className="iconfont icon-chachaicon" onClick={() => this.deleteOption(index)}></i>
436 |         </div>
437 |       )
438 |     });
439 |     //编辑状态下的选项框和新建框
440 |     const ediOptionsEl = (
441 |       <div>
442 |         { optionsArr }
443 |         <div className="editor-row">
444 |           <div className="editor-row-content">
445 |             <div className="editor-create-option" onClick={this.createOption}>
446 |               <i className="iconfont icon-xinjianxuanxiangicon"></i>
447 |               <span style={{ color: '#999' }}>新建选项</span>
448 |             </div>
449 |           </div>
450 |           <i className="iconfont icon-chachaicon" style={{ visibility: 'hidden' }}></i>
451 |         </div>
452 |       </div>
453 |     );
454 |     //编辑状态下的”其他“选项
455 |     const ediOtherOptionsEl = (
456 |       <div className="editor-row">
457 |         <div className="editor-row-content">
458 |           <div className="other-option-wrapper">
459 |             <ContentEditable
460 |               name={'otherOptionForwards'}
461 |               html={otherOptionForwards}
462 |               onChange={this.handleChange}
463 |               onKeyPress={this.disableEnter}
464 |             />
465 |             <div className="other-fill">
466 |               <div className="other-fill-inner">____</div>
467 |             </div>
468 |             <ContentEditable
469 |               style={{ flex: 1 }}
470 |               name={'otherOptionBackwards'}
471 |               html={otherOptionBackwards}
472 |               onChange={this.handleChange}
473 |               onKeyPress={this.disableEnter}
474 |             />
475 |           </div>
476 |         </div>
477 |         <i className="iconfont icon-chachaicon" onClick={() => this.handleChange({target: {value: false, name: 'otherOption'}})}></i>
478 |       </div>
479 |     );
480 |     //编辑状态下的填空题
481 |     const ediCompletionEl = (
482 |       <div className="editor-row">
483 |         <label className="editor-row-title">内容</label>
484 |         <div className="editor-row-content">
485 |           <div className="other-option-wrapper">
486 |             <ContentEditable
487 |               name={'completionForwards'}
488 |               html={completionForwards}
489 |               onChange={this.handleChange}
490 |               onKeyPress={this.disableEnter}
491 |             />
492 |             <div className="other-fill">
493 |               <div className="other-fill-inner">____</div>
494 |             </div>
495 |             <ContentEditable
496 |               style={{ flex: 1 }}
497 |               name={'completionBackwards'}
498 |               html={completionBackwards}
499 |               onChange={this.handleChange}
500 |               onKeyPress={this.disableEnter}
501 |             />
502 |           </div>
503 |         </div>
504 |       </div>
505 |     );
506 |     //添加"其他"选项 | 批量编辑
507 |     const ediCtrlOptionsEl = (
508 |       <div className="options-control">
509 |         <button
510 |           className="control-button"
511 |           style={{
512 |             color: otherOption ? '#CCC' : '#45A8E6',
513 |             cursor: otherOption ? 'not-allowed' : 'pointer',
514 |             fontSize: 14
515 |           }}
516 |           disabled={otherOption}
517 |           onClick={() => this.handleChange({target: {value: true, name: 'otherOption'}})}>
518 |             添加“其他”选项
519 |         </button>
520 |         <span style={{ margin: '0 10px' }}>|</span>
521 |         <button
522 |           className="control-button"
523 |           style={{
524 |             color: toggleMutiOption ? '#CCC' : '#45A8E6',
525 |             cursor: toggleMutiOption ? 'not-allowed' : 'pointer',
526 |             fontSize: 14
527 |           }}
528 |           disabled={toggleMutiOption}
529 |           onClick={() => this.handleMutiOption()}>
530 |             批量编辑
531 |         </button>
532 |       </div>
533 |     );
534 |     /*
535 |      *
536 |      * 以下元素为填写状态下的元素
537 |      *
538 |      */
539 |     //填写状态下的填空
540 |     const subCompletionEl = (
541 |       <div className="subject-other-option">
542 |         <span>{completionForwards}</span>
543 |         <div
544 |           className='other-option-input'
545 |           onInput={this.handleOtherOptionInputChange}
546 |           onKeyPress={this.disableEnter}
547 |           contentEditable
548 |           dangerouslySetInnerHTML={{ __html: answer && this.answer[type] }}>
549 |         </div>
550 |         <span>{completionBackwards}</span>
551 |       </div>
552 |     );
553 |     //填写状态下的单选、多选其他选项
554 |     const subOtherOptionsEl = (
555 |       <div className="subject-other-option">
556 |         <span>{otherOptionForwards}</span>
557 |         <div
558 |           className='other-option-input'
559 |           onInput={this.handleOtherOptionInputChange}
560 |           onKeyPress={this.disableEnter}
561 |           contentEditable
562 |           dangerouslySetInnerHTML={{ __html: this.otherOptionInput }}>
563 |         </div>
564 |         <span>{otherOptionBackwards}</span>
565 |       </div>
566 |     );
567 |     //填写状态下的单选、多选
568 |     const optionsCom = otherOption ? options.concat('undefined') : options;
569 |     const subRadioEl = (
570 |       <div className="radio-group">
571 |         {optionsCom.map((data, index) => {
572 |           return (
573 |             <label
574 |               className="wowjoy-radio"
575 |               style={{ width: `${100/parseInt(rows)}%`, marginBottom: 8 }}
576 |               key={uuid()}>
577 |               <input
578 |                 type="radio"
579 |                 name="radio"
580 |                 data-index={index}
581 |                 value={data}
582 |                 defaultChecked={answer && this.answer.radio.optionIndex === index+''}
583 |                 onChange={this.handleAnswerChange}
584 |                 style={{ display: 'none' }}/>
585 |               <span className="wowjoy-radio__inner"></span>
586 |               <span className="wowjoy-radio__text">
587 |                 {data === 'undefined' ? (
588 |                   <div className="subject-other-option">
589 |                     <span>{otherOptionForwards}</span>
590 |                       <div
591 |                         data-index={index}
592 |                         className='other-option-input'
593 |                         onInput={this.handleOtherOptionInputChange}
594 |                         onKeyPress={this.disableEnter}
595 |                         contentEditable
596 |                         dangerouslySetInnerHTML={{ __html: this.otherOptionValue }}>
597 |                       </div>
598 |                     <span>{otherOptionBackwards}</span>
599 |                   </div>
600 |                 ) : data}
601 |               </span>
602 |             </label>
603 |           )
604 |         })}
605 |       </div>
606 |     );
607 |     const subCheckboxEl = (
608 |       <div className="checkbox-group">
609 |         {optionsCom.map((data, index) => {
610 |           return (
611 |             <label
612 |               className="wowjoy-checkbox"
613 |               key={uuid()}
614 |               style={{ width: `${100/parseInt(rows)}%`, marginBottom: 8 }}>
615 |               <input
616 |                 type="checkbox"
617 |                 name="checkbox"
618 |                 value={data}
619 |                 data-index={index}
620 |                 defaultChecked={answer && this.answer.checkbox !== '' && this.answer.checkbox.optionIndex.includes(index+'')}
621 |                 onChange={this.handleAnswerChange}
622 |                 style={{ display: 'none' }}/>
623 |               <span className="wowjoy-checkbox__inner"></span>
624 |               <span className="wowjoy-checkbox__text">
625 |               {data === 'undefined' ? (
626 |                 <div className="subject-other-option">
627 |                   <span>{otherOptionForwards}</span>
628 |                     <div
629 |                       data-index={index}
630 |                       className='other-option-input'
631 |                       onInput={this.handleOtherOptionInputChange}
632 |                       onKeyPress={this.disableEnter}
633 |                       contentEditable
634 |                       dangerouslySetInnerHTML={{ __html: this.otherOptionValue }}>
635 |                     </div>
636 |                   <span>{otherOptionBackwards}</span>
637 |                 </div>
638 |               ) : data}
639 |               </span>
640 |             </label>
641 |           )
642 |         })}
643 |       </div>
644 |     );
645 |     //填写状态下的下拉框
646 |     const subDropdownEl = (
647 |       <select
648 |         defaultValue={ answer && this.answer[type] }
649 |         onChange={this.handleAnswerChange}>
650 |           {options.map((option, index) => {
651 |             return <option key={index} value={option}>{option}</option>
652 |           })}
653 |       </select>
654 |     );
655 |     const optionsEl = type === 'dropdown' ? subDropdownEl : (type === 'radio' ? subRadioEl : subCheckboxEl);
656 |     //填写状态下的单行文本、多行文本
657 |     const subTextEl = (
658 |       <input
659 |         defaultValue={ answer && this.answer[type] }
660 |         className="subject-input"
661 |         style={{ height: 36 }}
662 |         onChange={this.handleAnswerChange}
663 |         maxLength={maxLength} />
664 |     );
665 |     const subTextareaEl = (
666 |       <textarea
667 |         defaultValue={ answer && this.answer[type] }
668 |         className="subject-input"
669 |         name={'textarea'}
670 |         onChange={this.handleAnswerChange}
671 |         rows={textareaHeight} />
672 |     );
673 |     return (
674 |       /*
675 |        * 想了很多交互，最终认为还是将编辑模块和题目模块放在一起实现起来相对方便点，虽然这样造成的后果是代码很臃肿。。。
676 |        * 如果不这样做，组件之间的传值问题将会变得错综复杂
677 |        * 后期有时间再仔细想想看看能不能有更优的办法
678 |        */
679 |       <div className="questionnair-item">
680 |         {isEditor ? (
681 |           <ShakeTransition shake={editorShake}>
682 |             <div className="questionnair-editor">
683 |               <div className="questionnair-editor-inner">
684 |                 <div className="editor-type">
685 |                   <i className="iconfont icon-Q-icon"></i>
686 |                   <span className="editor-type-text">{this.switchEditor(type)}</span>
687 |                 </div>
688 |                 {'input' === type ? ediCompletionEl : ediTitleEl}
689 |                 <div className="editor-row">
690 |                   <div className="editor-row-content">
691 |                     <Checkbox
692 |                       name={'required'}
693 |                       defaultChecked={required}
694 |                       label={'必填'}
695 |                       onChange={this.handleChange}
696 |                       style={{
697 |                         marginRight: 15
698 |                       }}
699 |                     />
700 |                     <Checkbox
701 |                       name={'remark'}
702 |                       defaultChecked={remark}
703 |                       label={'备注'}
704 |                       onChange={this.handleChange}
705 |                       style={{
706 |                         marginRight: 15
707 |                       }}
708 |                     />
709 |                     {remark && (
710 |                       <Input
711 |                         name={'remarkText'}
712 |                         value={remarkText || ''}
713 |                         onChange={this.handleChange}
714 |                       />
715 |                     )}
716 |                   </div>
717 |                 </div>
718 |                 {['radio', 'dropdown', 'checkbox'].includes(type) && ediOptionsEl}
719 |                 {otherOption && ediOtherOptionsEl}
720 |                 {['radio', 'checkbox'].includes(type) && ediCtrlOptionsEl}
721 |                 {['radio', 'checkbox'].includes(type) && (
722 |                   <div className="editor-adv">
723 |                     <span className="adv-option">
724 |                       每行显示
725 |                       <Dropdown
726 |                         name={'rows'}
727 |                         value={rows}
728 |                         options={rowOptions}
729 |                         onChange={this.handleChange}/>
730 |                       个选项
731 |                     </span>
732 |                   </div>
733 |                   )}
734 |                 {'text' === type && (
735 |                   <div className="editor-adv">
736 |                     <span className="adv-option">
737 |                       最多填写
738 |                       <Input
739 |                         width={50}
740 |                         margin={'0 10px'}
741 |                         type={"number"}
742 |                         name={'maxLength'}
743 |                         value={maxLength}
744 |                         onChange={this.handleChange} />
745 |                       字
746 |                     </span>
747 |                   </div>
748 |                 )}
749 |                 {'textarea' === type && (
750 |                   <div className="editor-adv">
751 |                     <span className="adv-option">
752 |                       文本框高度
753 |                       <Input
754 |                         width={50}
755 |                         margin={'0 10px'}
756 |                         type={"number"}
757 |                         name={'textareaHeight'}
758 |                         value={textareaHeight}
759 |                         onChange={this.handleChange} />
760 |                       行
761 |                     </span>
762 |                   </div>
763 |                 )}
764 |                 <div className="editor-button">
765 |                   <Button type="primary" onClick={this.confirm}>确定</Button>
766 |                   <Button type="cancel" onClick={this.cancel}>取消</Button>
767 |                 </div>
768 |               </div>
769 |               <Dialog
770 |                 visible={dialogVisible}
771 |                 title="批量修改"
772 |                 onCancel={this.closeDialog}
773 |                 onConfirm={this.confirmDialog}>
774 |                 <Input
775 |                   type="textarea"
776 |                   value={mutiOption}
777 |                   onChange={this.handleMutiTextarea}
778 |                   rows={6} />
779 |               </Dialog>
780 |             </div>
781 |           </ShakeTransition>
782 |         ) : (
783 |           <div
784 |             className="questionnair-subject"
785 |             style={{
786 |               background: drag ? '' : (hover ? '#F5F5F5' : '#fff'),
787 |               borderTopColor: (drag && index === 0) ? '#dbdbdb' : '',
788 |               borderBottomColor: drag ? '#dbdbdb' : '',
789 |               cursor: acitveAnswer ? '' : 'move'
790 |             }}
791 |             onMouseEnter={this.mouseEnter}
792 |             onMouseLeave={this.mouseLeave}>
793 |               <div className="questionnair-subject-inner" style={{ margin: acitveAnswer ? '' : '0 auto'}}>
794 |                 <div className="subject-row">
795 |                   <span>{index + 1}.</span>
796 |                   {'input' === type ? subCompletionEl : (<span>{title}</span>)}
797 |                   {required && <span className="subject-title-require">*</span>}
798 |                 </div>
799 |                 {remark && <div className="subject-row subject-remarks">{remarkText}</div>}
800 |                 <div className="subject-row">
801 |                   {['radio', 'dropdown', 'checkbox'].includes(type) && optionsEl}
802 |                   {type === 'text' && subTextEl}
803 |                   {type === 'textarea' && subTextareaEl}
804 |                 </div>
805 |               </div>
806 |               {!acitveAnswer && (
807 |                 <div
808 |                   className="subject-control-mask"
809 |                   style={{
810 |                     background: curMoveItem === index ? 'rgba(245,245,245,0.3)' : ''
811 |                   }}>
812 |                 </div>
813 |               )}
814 |               <div
815 |                 className="subject-control-bar"
816 |                 style={{ transform: drag ? '' : (hover ? 'translateX(0)' : '') }}>
817 |                 <div className="control-bar-inner">
818 |                   <div className="control-bar-button" onClick={this.edit}>
819 |                     <i className="iconfont icon-grey_bianji"></i>
820 |                   </div>
821 |                   <div className="control-bar-button" onClick={this.copy}>
822 |                     <i className="iconfont icon-grey_fuzhi"></i>
823 |                   </div>
824 |                   <div className="control-bar-button" onClick={this.remove}>
825 |                     <i className="iconfont icon-grey_shanchu"></i>
826 |                   </div>
827 |                 </div>
828 |               </div>
829 |           </div>
830 |         )}
831 |       </div>
832 |     );
833 |   }
834 | }
835 | 
836 | export default QuestionnairEditor;

--------------------------------------------------------------------------------
/src/QuestionnairEditor/index.less:
--------------------------------------------------------------------------------
  1 | :global{
  2 | 	//编辑框样式
  3 | 	.questionnair-item {
  4 | 		width: 100%;
  5 | 	}
  6 | 	.questionnair-editor {
  7 | 		width: 100%;
  8 | 		background: #f5f5f5;
  9 | 		position: relative;
 10 | 		font-size: 14px;
 11 | 	}
 12 | 	.questionnair-editor-inner {
 13 | 		width: 700px;
 14 | 		margin: 0 auto;
 15 | 		padding: 15px 0;
 16 | 		color: #666;
 17 | 		margin-bottom: 20px;
 18 | 	}
 19 | 	.editor-type-text {
 20 | 		font-family: PingFangSC-Medium;
 21 | 		font-size: 16px;
 22 | 		margin-left: 10px;
 23 | 	}
 24 | 	.editor-row {
 25 | 		display: flex;
 26 | 		align-items: center;
 27 | 		margin: 15px 0;
 28 | 		position: relative;
 29 | 	}
 30 | 	.editor-row-title {
 31 | 		position: absolute;
 32 | 		left: 0;
 33 | 		text-align: right;
 34 | 		width: 32px;
 35 | 	}
 36 | 	.editor-row-content {
 37 | 		flex: 1;
 38 | 		display: flex;
 39 | 		align-items: center;
 40 | 		margin-left: 40px;
 41 | 		height: 36px;
 42 | 	}
 43 | 	.other-option-wrapper {
 44 | 		width: 100%;
 45 | 		background: #fff;
 46 | 		padding: 0 11px;
 47 | 		border: 1px solid #ddd;
 48 | 		display: flex;
 49 | 		transition: all .3s;
 50 | 		&:focus-within {
 51 | 			border-color: #06aea6;
 52 | 		}
 53 | 	}
 54 | 	.other-option {
 55 | 		outline: none;
 56 | 		height: 36px;
 57 | 		line-height: 36px;
 58 | 	}
 59 | 	.other-fill {
 60 | 		width: 30px;
 61 | 		height: 36px;
 62 | 	    padding-top: 5px;
 63 | 	}
 64 | 	.other-fill-inner {
 65 | 		height: 25px;
 66 | 		padding-top: 3px;
 67 | 		border: 1px solid transparent;
 68 | 		cursor: pointer;
 69 | 		transition: all .3s;
 70 | 		&:hover{
 71 | 			border-color: #45A8E6;
 72 | 		}
 73 | 	}
 74 | 	.other-option-input {
 75 | 		border-bottom: 1px solid;
 76 | 	    min-width: 80px;
 77 | 	    display: inline-block;
 78 | 	    padding: 0 5px;
 79 | 	    outline: none;
 80 | 	    cursor: text;
 81 | 	}
 82 | 	.editor-create-option {
 83 | 		width: 100%;
 84 | 		height: 36px;
 85 | 		border: 1px dashed #ddd;
 86 | 		display: flex;
 87 | 		align-items: center;
 88 | 		cursor: pointer;
 89 | 	}
 90 | 	.options-control {
 91 | 		margin-left: 38px;
 92 | 		margin-bottom: 15px;
 93 | 	}
 94 | 	.control-button {
 95 | 		border: none;
 96 | 		background: #F5F5F5;
 97 | 		padding: 0;
 98 | 		cursor: pointer;
 99 | 		outline: none;
100 | 	}
101 | 	.editor-button {
102 | 		width: 100%;
103 | 		text-align: center;
104 | 	}
105 | 	.editor-adv {
106 | 		width: 100%;
107 | 		border-top: 1px solid #DBDBDB;
108 | 		padding: 20px 0;
109 | 		display: flex;
110 | 	}
111 | 	.adv-option {
112 | 		display: flex;
113 | 		align-items: center;
114 | 		margin-right: 60px;
115 | 		font-size: 12px;
116 | 	}
117 | 	.editor-input-number {
118 | 		width: 54px;
119 | 		height: 36px;
120 | 		border: 1px solid #ddd;
121 | 		outline: none;
122 | 		margin: 0 10px;
123 | 		padding-left: 11px;
124 | 	}
125 | 	//题目样式
126 | 	.questionnair-subject {
127 | 		position: relative;
128 | 		width: 100%;
129 | 		padding: 20px 0;
130 | 		overflow: hidden;
131 | 		min-height: 144px;
132 | 		border: 1px dashed transparent;
133 | 	}
134 | 	.questionnair-subject-inner {
135 | 		width: 700px;
136 | 	}
137 | 	.subject-row {
138 | 		margin-bottom: 8px;
139 | 		width: 100%;
140 | 	}
141 | 	.subject-title-require {
142 | 		color: red;
143 | 		vertical-align: middle;
144 | 		margin-left: 5px;
145 | 	}
146 | 	.subject-remarks {
147 | 		font-size: 12px;
148 | 		color: #999;
149 | 	}
150 | 	.subject-control-mask {
151 | 		position: absolute;
152 | 		top: 0;
153 | 		bottom: 0;
154 | 		left: 0;
155 | 		right: 0;
156 | 		z-index: 2;
157 | 	}
158 | 	.subject-control-bar {
159 | 		width: 48px;
160 | 	    background: #ededed;
161 | 	    position: absolute;
162 | 	    top: 0;
163 | 	    bottom: 0;
164 | 	    right: 0;
165 | 	    transform: translateX(100%);
166 | 	    transition: transform .2s;
167 | 	    z-index: 3;
168 | 	    display: flex;
169 | 	    align-items: center;
170 | 	}
171 | 	.control-bar-inner {
172 | 		width: 100%;
173 | 		height: 144px;
174 | 	    display: flex;
175 | 	    flex-direction: column;
176 | 	}
177 | 	.control-bar-button {
178 | 		width: 100%;
179 | 		cursor: pointer;
180 | 		flex: 1;
181 | 		display: flex;
182 | 		justify-content: center;
183 | 		align-items: center;
184 | 		&:hover {
185 | 			i {
186 | 				color: #06aea6;
187 | 			}
188 | 		}
189 | 	}
190 | 	.subject-other-option {
191 | 		display: inline-block;
192 | 	}
193 | 	.subject-input {
194 | 		outline: none;
195 | 		border: 1px solid #DDDDDD;
196 | 		width: 100%;
197 | 		resize: none;
198 | 		padding: 0 11px;
199 | 	}
200 | 	.wowjoy-radio {
201 | 		cursor: pointer;
202 | 		display: inline-block;
203 | 	}
204 | 	input[type='radio']:checked {
205 | 		&+.wowjoy-radio__inner {
206 | 			border-color: #06aea6;
207 | 			&:before {
208 | 				content: '';
209 | 				background: #06aea6;
210 | 				width: 8px;
211 | 				height: 8px;
212 | 				border-radius: 50%;
213 | 				position: absolute;
214 | 				top: 50%;
215 | 				left: 50%;
216 | 				transform: translate(-50%, -50%);
217 | 			} 
218 | 		}
219 | 	}
220 | 	.wowjoy-radio__inner {
221 | 		position: relative;
222 | 		display: inline-block;
223 | 		width: 16px;
224 | 		height: 16px;
225 | 		border-radius: 50%;
226 | 		background: #fff;
227 | 		border: 1px solid #DBDBDB;
228 | 		vertical-align: sub;
229 | 		margin-right: 5px;
230 | 	}
231 | 	.wowjoy-radio__text {
232 | 		display: inline-block;
233 | 	    max-width: 80%;
234 | 	    vertical-align: top;
235 | 		word-break: break-all;
236 | 	}
237 | 	.wowjoy-checkbox {
238 | 		cursor: pointer;
239 | 		display: inline-block;
240 | 	}
241 | 	input[type='checkbox']:checked {
242 | 		&+.wowjoy-checkbox__inner {
243 | 			border-color: #06aea6;
244 | 			&:before {
245 | 				content: '\2713';
246 | 				color: #06aea6;
247 | 				position: absolute;
248 | 				top: 50%;
249 | 				left: 50%;
250 | 				transform: translate(-50%, -50%);
251 | 			} 
252 | 		}
253 | 	}
254 | 	.wowjoy-checkbox__inner {
255 | 		position: relative;
256 | 		display: inline-block;
257 | 		width: 16px;
258 | 		height: 16px;
259 | 		background: #fff;
260 | 		border: 1px solid #DBDBDB;
261 | 		vertical-align: sub;
262 | 		margin-right: 5px;
263 | 	}
264 | 	.wowjoy-checkbox__text {
265 | 		display: inline-block;
266 | 	    max-width: 80%;
267 | 	    vertical-align: top;
268 | 		word-break: break-all;
269 | 	}
270 | };
271 |

--------------------------------------------------------------------------------
/src/QuestionnairSiderbar/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import DragSort from 'libs/DragSort';
  3 | import './index.less';
  4 | 
  5 | const tabs = [{
  6 |   name: '题目控件',
  7 | }, {
  8 |   name: '问题大纲',
  9 | }, ];
 10 | 
 11 | const subjects = [{
 12 |   name: '单选题',
 13 |   type: 'radio',
 14 |   icon: 'icon-danxuanicon',
 15 | }, {
 16 |   name: '下拉题',
 17 |   type: 'dropdown',
 18 |   icon: 'icon-xialaicon',
 19 | }, {
 20 |   name: '多选题',
 21 |   type: 'checkbox',
 22 |   icon: 'icon-duoxuan-icon',
 23 | }, {
 24 |   name: '单行文本题',
 25 |   type: 'text',
 26 |   icon: 'icon-danhangicon',
 27 | }, {
 28 |   name: '多行文本题',
 29 |   type: 'textarea',
 30 |   icon: 'icon-duohangicon',
 31 | }, {
 32 |   name: '填空题',
 33 |   type: 'input',
 34 |   icon: 'icon-tiankongtiicon',
 35 | }, ];
 36 | 
 37 | class QuestionnairSiderbar extends React.PureComponent {
 38 |   state = {
 39 |     tabIndex: 0,
 40 |     curMoveItem: null,
 41 |     editors: [],
 42 |   };
 43 | 
 44 |   componentWillReceiveProps(nextProps) {
 45 |     this.setState({
 46 |       editors: nextProps.editors,
 47 |     })
 48 |   }
 49 | 
 50 |   toggleTab = (index) => {
 51 |     this.setState({
 52 |       tabIndex: index,
 53 |     })
 54 |   }
 55 | 
 56 |   switchIcon = (type) => {
 57 |     switch (type) {
 58 |       case 'radio':
 59 |         return 'icon-danxuanicon';
 60 |       case 'dropdown':
 61 |         return 'icon-xialaicon';
 62 |       case 'checkbox':
 63 |         return 'icon-duoxuan-icon';
 64 |       case 'textarea':
 65 |         return 'icon-duohangicon';
 66 |       case 'text':
 67 |         return 'icon-danhangicon';
 68 |       case 'input':
 69 |         return 'icon-tiankongtiicon';
 70 |     }
 71 |   }
 72 | 
 73 |   handleDragMove = (editors, from, to) => {
 74 |     const {
 75 |       onDragOutline,
 76 |     } = this.props;
 77 |     if (onDragOutline) {
 78 |       onDragOutline(editors)
 79 |     }
 80 |     this.setState({
 81 |       curMoveItem: to,
 82 |       editors,
 83 |     })
 84 |   }
 85 | 
 86 |   handleDragEnd = () => {
 87 |     this.setState({
 88 |       curMoveItem: null,
 89 |     })
 90 |   }
 91 | 
 92 |   clickOutline = (index) => {
 93 |     const {
 94 |       onClickOutline,
 95 |     } = this.props;
 96 |     if (onClickOutline) {
 97 |       onClickOutline(index)
 98 |     }
 99 |   }
100 | 
101 |   render() {
102 |     this.tabs = [];
103 |     const {
104 |       onSelectEditor,
105 |     } = this.props;
106 |     const {
107 |       tabIndex,
108 |       editors,
109 |       curMoveItem,
110 |     } = this.state;
111 |     return (
112 |       <div className='questionnair-siderbar'>
113 |         <div className='siderbar-tab'>
114 |             {tabs.map((data, index) => {
115 |               return (
116 |                 <div
117 |                   key={data.name}
118 |                   className={`tab-item ${tabIndex === index && 'tab-item-active'}`}
119 |                   onClick={() => this.toggleTab(index)}
120 |                   ref={(tab) => tab && this.tabs.push(tab)}>
121 |                     {data.name}
122 |                 </div>
123 |               )
124 |             })}
125 |         </div>
126 |         <div className='siderbar-menu'>
127 |           <div className='siderbar-menu-content' style={{ display:  0 !== tabIndex && 'none' }}>
128 |             {subjects.map((data, index) => {
129 |               return (
130 |                 <div
131 |                   key={data.name}
132 |                   className='siderbar-menu-editors'
133 |                   onClick={() => onSelectEditor(data.type)}>
134 |                     <i className={ `iconfont ${data.icon} siderbar-menu-icon`}></i>
135 |                   <span>{data.name}</span>
136 |                 </div>
137 |               )
138 |             })}
139 |           </div>
140 |           <div className='siderbar-menu-content' style={{ display:  1 !== tabIndex && 'none', paddingTop: 12 }}>
141 |             <DragSort
142 |               draggable={true}
143 |               data={editors}
144 |               onDragEnd={this.handleDragEnd}
145 |               onDragMove={this.handleDragMove}>
146 |               {editors.map((data, index) => {
147 |                 return (
148 |                   <div
149 |                     className='siderbar-menu-summary'
150 |                     onClick={() => this.clickOutline(index)}
151 |                     style={{
152 |                       border: 'none',
153 |                       cursor: 'move'
154 |                     }}
155 |                     key={data.questionId}>
156 |                     <i className={`iconfont ${this.switchIcon(data.type)} siderbar-menu-icon`}></i>
157 |                     {data.type === 'input' ? (
158 |                       <span className='summary-text'>{data.completionForwards}____{data.completionBackwards}</span>
159 |                     ) : (
160 |                       <span className='summary-text'>{data.title}</span>
161 |                     )}
162 |                     <div
163 |                       className='summary-drag-mask'
164 |                       style={{
165 |                         background: curMoveItem === index ? 'rgba(245,245,245,0.50)' : ''
166 |                       }}>
167 |                     </div>
168 |                   </div>
169 |                 )
170 |               })}
171 |             </DragSort>
172 |           </div>
173 |         </div>
174 |       </div>
175 |     )
176 |   }
177 | }
178 | 
179 | export default QuestionnairSiderbar;

--------------------------------------------------------------------------------
/src/QuestionnairSiderbar/index.less:
--------------------------------------------------------------------------------
 1 | .questionnair-siderbar {
 2 | 	position: absolute;
 3 | 	bottom: 20px;
 4 | 	top: 20px;
 5 | 	left: 20px;
 6 | 	width: 210px;
 7 | 	display: flex;
 8 | 	flex-direction: column;
 9 | }
10 | .siderbar-tab {
11 | 	width: 100%;
12 | 	height: 30px;
13 | 	display: flex;
14 | 	position: relative;
15 | 	z-index: 1;
16 | }
17 | .tab-item {
18 | 	flex: 1;
19 | 	text-align: center;
20 | 	height: 30px;
21 | 	line-height: 30px;
22 | 	color: #666;
23 | 	background: #F7F7F7;
24 | 	border: 1px solid #e8e8e8;
25 | 	cursor: pointer;
26 | }
27 | .tab-item-active {
28 | 	box-shadow: 0 0 4px 0 rgba(202,202,202,0.50);
29 | 	border: 1px solid transparent;
30 | 	background: #fff;
31 | 	position: relative;
32 | 	&:before {
33 | 		content: '';
34 | 		position: absolute;
35 | 	    top: -1px;
36 | 	    left: -1px;
37 | 	    right: -1px;
38 | 	    height: 2px;
39 | 	    background-color: #06AEA6;
40 | 	    z-index: 1;
41 | 	}
42 | }
43 | .siderbar-menu {
44 | 	flex: 1;
45 | 	box-shadow: 0 3px 4px 0 rgba(202,202,202,0.50);
46 | 	background: #fff;
47 | 	z-index: 2;
48 | }
49 | .siderbar-menu-content {
50 | 	width: 100%;
51 | }
52 | .siderbar-menu-icon {
53 | 	margin-right: 10px;
54 | }
55 | .siderbar-menu-editors {
56 | 	width: 168px;
57 | 	height: 36px;
58 | 	border: 1px solid #06AEA6;
59 | 	color: #06AEA6;
60 | 	padding-left: 8px;
61 | 	margin: 15px auto;
62 | 	cursor: pointer;
63 | 	display: flex;
64 | 	align-items: center;
65 | 	position: relative;
66 | }
67 | .siderbar-menu-summary {
68 | 	width: 100%;
69 | 	height: 36px;
70 | 	color: #06AEA6;
71 | 	padding-left: 30px;
72 | 	padding-right: 10px;
73 | 	margin: 0 auto;
74 | 	cursor: pointer;
75 | 	display: flex;
76 | 	align-items: center;
77 | 	position: relative;
78 | }
79 | .summary-text {
80 | 	overflow: hidden;
81 | 	text-overflow: ellipsis;
82 | 	white-space: nowrap; 
83 | }
84 | .summary-drag-mask {
85 | 	position: absolute;
86 | 	top: 0;
87 | 	left: 0;
88 | 	right: 0;
89 | 	bottom: 0;
90 | }
91 |

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Questionnair from './Questionnair';
2 | import Editor from './QuestionnairEditor';
3 | import Answer from './QuestionnairAnswer';
4 | import 'assets/iconfonts/iconfont.css';
5 | 
6 | Questionnair.Editor = Editor;
7 | Questionnair.Answer = Answer;
8 | 
9 | export default Questionnair;

--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   render,
 4 | } from 'react-dom';
 5 | import Questionnair from './index.js';
 6 | 
 7 | const index = require('./index');
 8 | 
 9 | const renderDom = (Component) => {
10 |   render(
11 |     <Component />,
12 |     document.getElementById('app')
13 |   );
14 | };
15 | renderDom(Questionnair);
16 | if (module.hot) {
17 |   module.hot.accept('./index', () => {
18 |     const QuestionnairEl = index.default;
19 |     renderDom(QuestionnairEl);
20 |   });
21 | }

--------------------------------------------------------------------------------
/utils/utils.js:
--------------------------------------------------------------------------------
 1 | export default function uuid() {
 2 |   const s = [];
 3 |   const hexDigits = '0123456789abcdef';
 4 |   for (let i = 0; i < 36; i += 1) {
 5 |     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
 6 |   }
 7 |   s[14] = '4';
 8 |   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
 9 |   const id = s.join('');
10 |   return id;
11 | }

--------------------------------------------------------------------------------
/webpack/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 |   entry: [
 7 |     'webpack-dev-server/client?http://localhost:9090',
 8 |     'webpack/hot/only-dev-server',
 9 |     path.resolve(__dirname, '../src/main.js'),
10 |   ],
11 |   //指定入口文件，程序从这里开始编译,__dirname当前所在目录
12 |   output: {
13 |     path: path.resolve(__dirname, '../dist'),
14 |     filename: 'bundle.js'
15 |   },
16 |   resolve: {
17 |     extensions: ['.js', '.jsx'],
18 |     alias: {
19 |       'libs': path.resolve(__dirname, '../libs'),
20 |       'assets': path.resolve(__dirname, '../assets'),
21 |       'utils': path.resolve(__dirname, '../utils'),
22 |     }
23 |   },
24 |   module: {
25 |     rules: [{
26 |       test: /\.(js|jsx)$/,
27 |       loader: ['babel-loader'],
28 |       exclude: /node_modules/
29 |     }, {
30 |       test: /\.less$/,
31 |       use: [
32 |         'style-loader', {
33 |           loader: 'css-loader?modules',
34 |           options: {
35 |             importLoaders: 1
36 |           }
37 |         },
38 |         'less-loader'
39 |       ]
40 |     }, {
41 |       test: /\.css$/,
42 |       use: [
43 |         'style-loader', //模块运行时，使用<style>标签将所有计算好的css样式插入到html文件的<head>中
44 |         'css-loader' //为了从JavaScript模块中import一个CSS 文件
45 |       ]
46 |       /*
47 |        * webpack loader的执行顺序是从右到左
48 |        * webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签
49 |        * 因此应该把style-loader放在css-loader的前面
50 |        */
51 |     }, {
52 |       test: /\.(png|svg|jpg|gif)$/,
53 |       loader: 'url-loader',
54 |       options: {
55 |         limit: 10000,
56 |       }
57 |       /*
58 |        * url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
59 |        * 在使用css-loader时，url('')
60 |        * 或者在使用html-loader时，<img src='' />
61 |        * 或者在js文件中，import from ''
62 |        * webpack都会在src文件中找到图片文件，处理并添加到output目录
63 |        */
64 |     }, {
65 |       test: /\.(woff|woff2|eot|ttf|otf)$/,
66 |       loader: 'url-loader',
67 |       options: {
68 |         limit: 10000,
69 |       }
70 |       /*
71 |        * file-loader可以接收并加载任何文件处理并添加到output目录
72 |        */
73 |     }, ]
74 |   },
75 |   devtool: 'cheap-module-eval-source-map',
76 |   plugins: [
77 |     new HtmlWebpackPlugin({
78 |       filename: 'index.html',
79 |       template: 'index.html',
80 |       inject: true
81 |     }),
82 |     new webpack.HotModuleReplacementPlugin(),
83 |     new webpack.NamedModulesPlugin()
84 |   ],
85 | }

--------------------------------------------------------------------------------