sourcecode/front/project/www/routes/paper/process/base/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import { Checkbox } from 'antd';
import Assets from '@src/components/Assets';
import { formatSeconds, formatSecond, getMap } from '@src/services/Tools';
import Button from '../../../../components/Button';
import Navigation from '../../../../components/Navigation';
import Answer from '../../../../components/Answer';
import Calculator from '../../../../components/Calculator';
import AnswerSelect from '../../../../components/AnswerSelect';
import AnswerTable from '../../../../components/AnswerTable';
import Editor from '../../../../components/Editor';
import { QuestionType } from '../../../../../Constant';

const QuestionTypeMap = getMap(QuestionType, 'value');

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCalculator: false,
      disorder: false,
      order: [],
      step: 0,
      answer: {},
      modal: null,
    };
  }

  onChangeQuestion(index, value) {
    const { question = {}, answer = {} } = this.state;
    answer.questions[index] = { [question.type]: value };
    this.setState({ answer });
  }

  onChangeAwa(value) {
    const { answer = {} } = this.state;
    answer.awa = value;
    this.setState({ answer });
  }

  showConfirm(title, desc, cb) {
    this.showModal('confirm', title, desc, cb);
  }

  showToast(title, desc, cb) {
    this.showModal('toast', title, desc, cb);
  }

  showModal(type, title, desc, cb) {
    this.setState({ modal: { type, title, desc, cb } });
  }

  checkAnswer() {
    const { question, answer } = this.state;
    let result = null;
    if (question.type === 'awa' && !answer.awa) result = 'Please answer the question first.';
    if (result) return this.showToast(null, result);
    return true;
  }

  hideModal(b) {
    if (b) {
      const { modal = {} } = this.state;
      if (modal.cb) modal.cb();
    }
    this.setState({ modal: null });
  }

  formatStrem(text) {
    if (!text) return '';
    const { question = { content: {} } } = this.state;
    const { table = {}, questions = [] } = question.content;
    text = text.replace(/#select#/g, "<span class='#select#' />");
    text = text.replace(/#table#/g, "<span class='#table#' />");
    setTimeout(() => {
      const selectList = document.getElementsByClassName('#select#');
      const tableList = document.getElementsByClassName('#table#');
      for (let i = 0; i < selectList.length; i += 1) {
        ReactDOM.render(
          <AnswerSelect list={questions[i].select} onChange={v => this.onChangeQuestion(i, v)} />,
          selectList[i],
        );
      }
      for (let i = 0; i < tableList.length; i += 1) {
        ReactDOM.render(<AnswerTable list={table.header} columns={table.header} data={table.data} />, tableList[i]);
      }
    }, 1);
    return text;
  }

  next() {
    const { flow } = this.props;

    if (this.checkAnswer()) {
      flow.next();
    }
  }

  render() {
    const { modal } = this.state;
    const { scene, paper } = this.props;
    let content = null;
    switch (scene) {
      case 'start':
        content = paper.paperModule === 'examination' ? this.renderExaminationStart() : this.renderExerciseStart();
        break;
      case 'relax':
        content = this.renderRelax();
        break;
      default:
        content = this.renderDetail();
        break;
    }
    return <div id='paper-process-base'>
      {content}
      {modal ? this.renderModal() : ''}
    </div>;
  }

  renderContent() {
    const { question = { content: {} } } = this.props;
    const { step } = this.state;
    const { steps = [] } = question.content;
    return (
      <div className="block block-content">
        {steps.length > 0 && <Navigation list={question.content.steps} active={step} onChange={() => { }} />}
        <div className="text">{this.formatStrem(steps.length > 0 ? steps[step].stem : question.stem)}</div>
      </div>
    );
  }

  renderAnswer() {
    const { question = { content: {} } } = this.props;
    const { questions = [], type } = question.content;
    if (type === 'inline') return '';
    return (
      <div className="block block-answer">
        {question.questionType === 'awa' && <Editor onChange={v => this.onChangeAwa(v)} />}
        {questions.map((item, index) => {
          return (
            <div>
              <div className="text m-b-2">{item.description}</div>
              <Answer
                list={item.select}
                type={type}
                direction={question.direction}
                onChange={v => this.onChangeQuestion(index, v)}
              />
            </div>
          );
        })}
      </div>
    );
  }

  renderDetail() {
    const { paper, userQuestion, question = { content: {} }, singleTime, stageTime, flow } = this.state;
    const { showCalculator } = this.state;
    const { typeset = 'one' } = question.content;
    return (
      <div className="layout">
        <div className="fixed">
          {QuestionTypeMap[question.questionType].long}
          <Assets
            className="calculator-icon"
            name="calculator_icon"
            onClick={() => this.setState({ showCalculator: !showCalculator })}
          />
          <Assets className="collect-icon" name="collect_icon" />
        </div>
        <Calculator show={showCalculator} />
        <div className="layout-header">
          <div className="title">{paper.title}</div>
          <div className="right">
            <div className="block">
              <Assets name="timeleft_icon" />
              Time left {formatSecond(stageTime || singleTime)}
            </div>
            <div className="block">
              <Assets name="subjectnumber_icon" />
              {userQuestion.no} of {paper.questionNumer}
            </div>
          </div>
        </div>
        <div className={`layout-body ${typeset}`}>
          {this.renderContent()}
          {this.renderAnswer()}
        </div>
        <div className="layout-footer">
          <div className="help">
            <Assets name="help_icon" />
            Help
          </div>
          <div className="full">
            <Assets name="fullscreen_icon" onClick={() => flow.toggleFullscreen()} />
          </div>
          <div className="next" onClick={() => this.next()}>
            Next
            <Assets name="next_icon" />
          </div>
        </div>
      </div>
    );
  }

  renderExaminationStart() {
    const { disorder } = this.state;
    const { paper, flow } = this.props;
    return (
      <div className="start">
        <div className="bg" />
        <div className="fixed-content">
          <div className="title">{paper.title}</div>
          <div className="desc">
            <div className="block">
              <div className="desc-title">
                <Assets name="subject_icon" />
                题目总数
              </div>
              <div className="desc-info">{paper.questionNumer}</div>
            </div>
            <div className="block">
              <div className="desc-title">
                <Assets name="time_icon" />
                建议用时
              </div>
              <div className="desc-info">{formatSeconds(paper.time)}</div>
            </div>
          </div>
          <div className="tip">
            <Checkbox className="m-r-1" checked={disorder} onChange={() => this.setState({ disorder: !disorder })} />
            题目选项乱序显示
          </div>
          <div className="submit">
            <Button size="lager" radius onClick={() => flow.start({ disorder })}>
              开始练习
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderExerciseStart() {
    const { disorder } = this.state;
    const { paper, flow } = this.props;
    return (
      <div className="start">
        <div className="bg" />
        <div className="fixed-content">
          <div className="title">{paper.title}</div>
          <div className="desc">
            <div className="block">
              <div className="desc-title">
                <Assets name="subject_icon" />
                题目总数
              </div>
              <div className="desc-info">{paper.questionNumber}</div>
            </div>
            <div className="block">
              <div className="desc-title">
                <Assets name="time_icon" />
                建议用时
              </div>
              <div className="desc-info">{formatSeconds(paper.time)}</div>
            </div>
          </div>
          <div className="tip">
            <Checkbox className="m-r-1" checked={disorder} onChange={() => this.setState({ disorder: !disorder })} />
            题目选项乱序显示
          </div>
          <div className="submit">
            <Button size="lager" radius onClick={() => flow.start({ disorder })}>
              开始练习
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderRelax() {
    return <div />;
  }

  renderModal() {
    const { modal } = this.state;
    return (
      <div className="modal">
        <div className="mask" />
        <div className="body">
          <div className="title">{modal.title}</div>
          <div className="desc">{modal.desc}</div>
          {modal.type === 'confirm' ? (
            <div className="btn-list">
              <div className="btn" onClick={() => this.hideModal(true)}>
                <span className="t-d-l">Y</span>es
              </div>
              <div className="btn" onClick={() => this.hideModal(false)}>
                <span className="t-d-l">N</span>o
              </div>
            </div>
          ) : (<div className="btn-list">
            <div className="btn" onClick={() => this.hideModal(true)}>
              <span className="t-d-l">O</span>k
              </div>
          </div>)}
        </div>
      </div>
    );
  }
}