_renderAsMatrix()

in src/ui/editor/complex/AMatrix.tsx [111:174]

• 53 lines of code
• 9 McCabe index (conditional complexity)

  _renderAsMatrix(){
    let data = super.getValue() ?? {};
    
    // const minX = this.props.schema.matrix?.minX ?? 1;
    // const minY = this.props.schema.matrix?.minY ?? 1;
    
    const style = {};
    const xx = MUtil.standardFields(this.props.schema.matrix?.x);
    const yy = MUtil.standardFields(this.props.schema.matrix?.y);
    const yyClosed = yy.map(e=>e.value);

    if(this.props.schema.matrix?.open) {
      yy.push({value:"", label:this.props.schema.matrix.open.label});
    }

    let trs:JSX.Element[] = [];
    let titleRow = [<td key={"空的格子"}></td>];
    for(let x of xx) {
      titleRow.push(<td key={x.value?.toString()} style={style}>{x.label}</td>);
    }
    trs.push(<tr key={"标题"}>{titleRow}</tr>);

    const openKey = _openKey(data, yyClosed);
    for(let y of yy) {
      let dataRow:JSX.Element[] = [];
      let key: string|undefined = y.value?.toString();
      
      if(y.value) { // 候选项
        dataRow.push(<td key={y.value + ":label"}>{y.label}</td>);
      } else { // 开放选项
        dataRow.push(<td key={"open:label"} className="AMatrixOpenTd">
          {y.label}
          <UnderlineInputBox defaultValue={openKey} disabled={_.isNil(openKey)} onChange={(v)=>{
            const openKeyOnClick = _openKey(data, yyClosed);
            const str = v.target.value;
            const matchEnum = yy.find(e=>e.value === str);
            if(matchEnum){ // 不能让用户输入了某个枚举值
              alert("请不要直接输入，您可以勾选 " + (matchEnum.label ?? matchEnum.value)); // TODO 用校验解决此问题，chrome解析不了反撇号
            } else {
              this._inputBoxValue = str;
              super.changeValue(this._inputBoxValue);
              if(!_.isNil(openKeyOnClick)) {
                const prev = data[openKeyOnClick];
                delete data[openKeyOnClick];
                data[this._inputBoxValue] = prev;
              }
              super.changeValue(data);
            }
          }}/>
        </td>);

        // 开放选项的key不固定
        key = openKey;
      }

      for(let x of xx) {
        const checked = CompactArray.indexOf(MUtil.get(data, key), x.value) >= 0; // _.isNil(key) ? false : data[key] === x.value || data[key]?.includes(x.value);
        dataRow.push(<td key={x.value?.toString()} style={style}><Radio key={x.value?.toString()} checked={checked} onChange={(vv)=>{
          if(vv.target.checked) {
            this._setDataForKey(data, y.value?.toString(), x.value?.toString(), yyClosed);
          }
          super.changeValue(data);
        }}/></td>);
      }