12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import React, { Component } from 'react';
- import './index.less';
- import Assets from '@src/components/Assets';
- function getKey(type, index, selected, answer) {
- return `${(selected[type] || [])[index] ? 'selected' : ''} ${(answer[type] || [])[index] ? 'true' : 'false'}`;
- }
- export default class AnswerSelect extends Component {
- constructor(props) {
- super(props);
- const select = [];
- for (let i = 0; i < props.list.length; i += 1) {
- select[i] = false;
- }
- let index = -1;
- const { selected = {}, answer = {}, type } = props;
- let result = true;
- (selected[type] || []).forEach((row, i) => {
- if (row) index = i;
- if (row !== answer[type][i]) result = false;
- });
- if (index === -1) {
- (answer[type] || []).forEach((row, i) => {
- if (row) index = i;
- });
- }
- this.state = { selecting: false, select, index, result };
- }
- onChange(index) {
- const { onChange } = this.props;
- const { select } = this.state;
- for (let i = 0; i < select.length; i += 1) {
- select[i] = false;
- }
- select[index] = true;
- if (onChange) onChange(select);
- this.close();
- this.setState({ index });
- }
- open() {
- this.setState({ selecting: true });
- }
- close() {
- this.setState({ selecting: false });
- }
- render() {
- const { selecting, index, result } = this.state;
- const { list = [], show, selected = {}, answer = {}, type, fix } = this.props;
- const title = list.length > 0 && index >= 0 ? list[index] : ' ';
- return (
- <div className="answer-select">
- <div hidden={!selecting} className="mask" onClick={() => this.close()} />
- <div className={`select-warp ${show ? (result ? 'true' : 'false') : ''}`}>
- <div className="text" onClick={() => this.open()}>
- {` ${title}`}
- <Assets name="chooser_icon" />
- </div>
- <div className={`select-body ${selecting ? 'select' : ''}`}>
- {list.map((item, i) => {
- return (
- <div className={`item ${getKey(type, i, selected, answer)} ${show ? 'show' : ''}`} onClick={() => !fix && this.onChange(i)}>
- <div className="icon" />{item}
- </div>
- );
- })}
- </div>
- </div>
- </div>
- );
- }
- }
|