_renderAsDropdownList()

in src/ui/editor/complex/AMatrix.tsx [184:224]


  _renderAsDropdownList(){
    let data = super.getValue() ?? {};
    const xx = MUtil.standardFields(this.props.schema.matrix?.x);
    const yy = MUtil.standardFields(this.props.schema.matrix?.y);

    const getLabelLength = (e?:MEnumField) => e ? (e.label ?? e.value?.toString()).length : 0;
    const maxXLen = _.maxBy(xx, getLabelLength);
    const maxYLen = _.maxBy(yy, getLabelLength);

    const sameLine = (getLabelLength(maxXLen) + getLabelLength(maxYLen)) < 19;  // 超过19个字符就要折行
    const toOption = (x:any) => {return {label: x.label??x.value, value: x.value}};

    let jsx = [];

    if(this.props.schema.matrix?.minX === 1) { // 每行只能选一个,可以渲染成一组下拉框
      const options = xx.map(toOption);
      for(let y of yy) {
        jsx.push(
          <div key={y.value?.toString()} className={sameLine ? "AMatrix_DropdownList_sameLine" : "AMatrix_DropdownList_wrap"}>
            <span key="label" style={{width: MUtil.antdTextWidth(maxYLen?.label ?? maxXLen?.value?.toString())}}>{y.label ?? y.value}</span>
            <SelectBox key="selector" data={data[y.value?.toString()]} options={options} onChange={(v)=>{
              data[y.value?.toString()] = v;
              super.changeValue(data);
            }}/>
          </div> 
        )
      }
    } else if(this.props.schema.matrix?.minY ===1){
      const options = yy.map(toOption);
      const x2y:any = _.invert(data);
      for(let x of xx) {
        jsx.push(
          <div key={x.value?.toString()} className={sameLine ? "AMatrix_DropdownList_sameLine" : "AMatrix_DropdownList_wrap"}>
            <span key="label" style={{width: MUtil.antdTextWidth(maxXLen?.label)}}>{x.label ?? x.value}</span>
            <SelectBox key="selector" data={x2y[x.value?.toString()]} options={options} onChange={(v)=>{
              x2y[x.value?.toString()] = v;
              super.changeValue(_.invert(x2y));
            }}/>
          </div> 
        )
      }