antd#Select TypeScript Examples

LanguageSwitcher = observer((props: LanguageSwitcherProps) => {
  const intl = useIntl();
  const mainStore = useMainStore();

  const handleChange = useCallback(
    (locale: string) => runInAction(() => (mainStore.locale = locale)),
    [mainStore]
  );

  if (localesStore.localesInfo.length === 1) {
    return null; // Do not show LanguageSwitcher if there is only a single locale option
  }

  return (
    <Select
      defaultValue={mainStore.locale ?? undefined}
      onChange={handleChange}
      size="small"
      style={props.style}
      bordered={false}
      className={props.className}
      dropdownMatchSelectWidth={false}
      aria-label={intl.formatMessage({ id: "a11y.select.LanguageSwitcher" })}
    >
      {localesStore.localesInfo.map(({ locale, caption }) => (
        <Select.Option key={locale} value={locale}>
          {caption}
        </Select.Option>
      ))}
    </Select>
  );
})

render() {

        return (
            <div className="ui-background">
                <Form layout="inline" onFinish={this.submitForm}>
                    <Form.Item name='assetCode' label={('资产方编号')}>
                        <Input />
                    </Form.Item>

                    <Form.Item name='assetName' label={('资产方名称')}>
                        <Input />
                    </Form.Item>

                    <Form.Item name='contract' label={('签约主体')}>
                        <Select style={{ width: 180 }}>
                            <Select.Option value="lucky">lucky</Select.Option>
                            <Select.Option value="dog">dog</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name='signDate' label={('签约时间')}>
                        <RangePicker format='YYYY年MM月DD HH:mm:ss' />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit"> 查询 </Button>
                    </Form.Item>

                </Form>
            </div>

        )
    }

EntitySelect: React.FC<Props> = ({ entities, onSelectChange }: Props) => {
  return (
    <div className={styles['select-container']}>
      <div className={styles['select-title']}> 
        <FormattedMessage id={"addons.DataTools.selectEntity"}/>
      </div>
      <Select
        className={styles['select']}
        onChange={onSelectChange}
      >
        {entities.map(({entityName, className}: EntityNamesInfo) => {
          return (
            <Select.Option
              value={entityName}
              key={entityName}
            >
              {getEntityOptionCaption({entityName, className})}
            </Select.Option>
          )
        })}
      </Select>
    </div>
  )
}

public render() {
    const config = this.props.schema;
    const uiProps = this.props.schema['ui:props'] || {};

    return (
      <Select
        {...uiProps}
        showSearch
        allowClear={uiProps.allowClear as boolean}
        style={{ width: 240, ...uiProps.style }}
        mode={uiProps.mode as 'multiple' | 'tags'}
        defaultValue={config.default as SelectValueType}
        value={this.formattedValue}
        options={(this.options as SelectOptionType[] || [])}
        onChange={(value) => {
          const formattedValue = this.transform(value);
          this.props.onChange?.(formattedValue);
          if (config.validate) {
            const res = config.validate(formattedValue);
            (res instanceof Promise ? res : Promise.resolve(res))
              .then((message) => {
                this.props.onValidate?.(message);
                return message;
              })
              .catch((error) => { throw error; });
          }
        }}
      />
    );
  }

WeekSelect: React.FC = props => {
  return (
    <Select size="small" {...props}>
      {Object.entries(weekOptions).map(([weekCode, weekName]) => {
        return (
          <Select.Option key={weekCode} value={weekCode}>
            {weekName}
          </Select.Option>
        );
      })}
    </Select>
  );
}

export function IntervalFilter({ disabled }: InvertalFilterProps): JSX.Element {
    const { insightProps } = useValues(insightLogic)
    const { interval } = useValues(intervalFilterLogic(insightProps))
    const { setInterval } = useActions(intervalFilterLogic(insightProps))
    const options = Object.entries(intervals).map(([key, { label }]) => ({
        key,
        value: key,
        label:
            key === interval ? (
                <>
                    <CalendarOutlined /> {label}
                </>
            ) : (
                label
            ),
    }))
    return (
        <Select
            bordered
            disabled={disabled}
            defaultValue={interval || 'day'}
            value={interval || undefined}
            dropdownMatchSelectWidth={false}
            onChange={setInterval}
            data-attr="interval-filter"
            options={options}
        />
    )
}

FieldSelect = React.memo(
  React.forwardRef<RefSelectProps, IProps>(({ className, fields, ...props }, ref) => {
    return (
      <Select {...props} ref={ref} showSearch className={`ant-ext-sb__selectField ${className}`}>
        {fields
          .sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()))
          .map((f) => (
            <Select.Option value={f.key} key={f.key} className="ant-ext-sb__fieldOption">
              <FieldOption field={f} />
            </Select.Option>
          ))}
      </Select>
    );
  })
)

getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}

SelectItem = (props) => {
  const { data, dataName, onChange } = props;

  return (
    <Select
      allowClear={true}
      placeholder="全部"
      style={{ width: '150px' }}
      onChange={(value) => {
        onChange({
          key: dataName,
          value: value,
        });
      }}
    >
      {map(data, (item) => (
        <Select.Option key={`${item}`} value={item}>
          {`${item}`}
        </Select.Option>
      ))}
    </Select>
  );
}

SelectField: React.FC<IProps> = props => {
  const { label = '箭头', value, onChange, options = [], width } = props
  return (
    <div className="group">
      <label>{label}</label>
      <Select
        size="small"
        value={value}
        style={{
          width,
          height: FormItemHeight,
        }}
        getPopupContainer={trigger => trigger.parentNode}
        optionFilterProp="children"
        onChange={(v: string) => {
          onChange?.(v)
        }}
        filterOption={(input, option) => {
          const { label: text = '' } = option
          if (typeof text === 'string') {
            return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
          return text.toString().indexOf(input.toLowerCase()) >= 0
        }}
        options={options}
      />
    </div>
  )
}

DepartmentSelect: FC<{
    value?: string,
    onChange?: (value?: string) => void,
    optional?: boolean  
}> = memo(({value, onChange, optional = false}) => {

    const data = useTypedPreloadedQuery(DEPARTMENT_OPTIONS_QUERY, DEPARTMENT_OPTIONS_INITIAL_QUERY_RERFENCE);

    const onSelectChange = useCallback((v: string) => {
        if (onChange !== undefined) {
            const selectedValue = v !== "" ? v : undefined;
            if (value !== selectedValue) {
                onChange(selectedValue);
            }
        }
    }, [value, onChange]);

    return (
        <Select value={value ?? ""} onChange={onSelectChange}>
            {
                optional &&
                <Select.Option value=""><span className={NO_DATA}>--Unspecified--</span></Select.Option>
            }
            {
                data.options.edges.map(edge => 
                    <Select.Option key={edge.node.id} value={edge.node.id}>{edge.node.name}</Select.Option>
                )
            }
        </Select>
    );
})

EnumComponent = forwardRef(function Component(
  props: EnumComponentPropsType,
  ref: any,
) {
  const { enumData, ...rest } = props;
  return (
    <Select
      ref={ref}
      style={{ width: '100%', height: 24 }}
      className={styles.select}
      showSearch
      allowClear
      {...rest}
    >
      {map(enumData, (item, index) => {
        let key = '',
          label = '';
        if (isObject(item)) {
          ({ key, label } = item);
        } else {
          key = label = item;
        }
        return (
          <Option value={key} key={index}>
            <Tooltip overlayStyle={{ zIndex: 1800 }} title={label}>
              {label}
            </Tooltip>
          </Option>
        );
      })}
    </Select>
  );
})

function SelectionTypeFormItem() {
  const onSelectionChange = (option: string) => {
    postVSCodeMessage({
      type: LookupViewMessageEnum.onValuesChange,
      data: { category: "selection", type: option },
      source: DMessageSource.webClient,
    });
  };
  const selectionModifierChoices = Object.keys(LookupSelectionTypeEnum)
    .filter((key) => key !== "none")
    .map((key) => OptionWithTooltip(key));

  return (
    <>
      <Form.Item
        name="selection"
        label="Selection"
        tooltip="Determine the behavior of selected text in the active editor when creating a new note using lookup"
      >
        <Select allowClear onChange={onSelectionChange} placeholder="None">
          {selectionModifierChoices}
        </Select>
      </Form.Item>
    </>
  );
}

describe("NumberValidatorInput", () => {
  it("should work", () => {
    const props = {
      value: [
        { method: "gt", value: 10 },
        { method: "lt", value: 20 },
      ],
      onAdd: jest.fn(),
      onRemove: jest.fn(),
      onChange: jest.fn(),
    };
    const wrapper = shallow(<NumberValidatorInput {...props} />);

    wrapper.find(Select).at(0).invoke("onChange")("gte", undefined);
    expect(props.onChange.mock.calls[0][0]).toEqual([
      { method: "gte", value: 10 },
      { method: "lt", value: 20 },
    ]);

    act(() => {
      wrapper.find(".iconBtn").last().simulate("click");
    });

    expect(props.onAdd).toHaveBeenCalled();

    act(() => {
      wrapper.find(".iconBtn").at(0).simulate("click");
    });

    expect(props.onRemove).toHaveBeenCalledWith(0);

    wrapper.find(InputNumber).at(0).invoke("onChange")(12);

    expect(props.onChange.mock.calls[1][0]).toEqual([
      { method: "gt", value: 12 },
      { method: "lt", value: 20 },
    ]);
  });
});

selectSetting = (onChange: any, value: any) => (
    <Select
        value={value}
        onChange={onChange}
        style={{ width: '100px' }}
        placeholder="请选择"
    >
        <Select.Option value="mode">mode</Select.Option>
        <Select.Option value="headers">headers</Select.Option>
        <Select.Option value="credentials">credentials</Select.Option>
    </Select>
)

registChartControl = () => {
  registControl('groupSelect', ({ selectedGroup, groups, handleChange, title, width }: any) => {
    return (
      <div className="chart-selector">
        <span>{title}</span>
        <Select
          className="my-3"
          value={selectedGroup || groups[0]}
          style={{ width: width || 200 }}
          onChange={handleChange}
        >
          {map(groups, (item) => (
            <Option value={item} key={item}>
              {item}
            </Option>
          ))}
        </Select>
      </div>
    );
  });

  registControl('timeRangeSelect', () => {
    return (
      <div className="chart-time-selector">
        <span>{i18n.t('charts:select time range')}：</span>
        <TimeSelector inline defaultTime={24} />
      </div>
    );
  });
}

render() {
        return (
            <Form className="ui-background" layout="inline" onFinish={this.onFinish}>
                <Form.Item name='assetCode' label={('编号')}>
                    <Input />
                </Form.Item>

                <Form.Item name='assetName' label={('名称')}>
                    <Input />
                </Form.Item>

                <Form.Item name='contract' label={('主体')}>
                    <Select style={{ width: 180 }}>
                        <Select.Option value="lucky">lucky</Select.Option>
                        <Select.Option value="dog">dog</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item name='signDate' label={('时间')}>
                    <DatePicker.RangePicker format='YYYY年MM月DD HH:mm:ss' />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit"> 查询 </Button>
                </Form.Item>
            </Form>
        )
    }

/**
 * It is taking from antd library.
 */
function YearSelect<DateType>(props: SharedProps<DateType>) {
  const intl = useIntl();
  const {
    fullscreen,
    validRange,
    generateConfig,
    locale,
    prefixCls,
    value,
    onChange,
    divRef,
  } = props;

  const year = generateConfig.getYear(value || generateConfig.getNow());

  let start = year - YearSelectOffset;
  let end = start + YearSelectTotal;

  if (validRange) {
    start = generateConfig.getYear(validRange[0]);
    end = generateConfig.getYear(validRange[1]) + 1;
  }

  const suffix = locale && locale.year === '年' ? '年' : '';
  const options: { label: string; value: number }[] = [];
  for (let index = start; index < end; index++) {
    options.push({ label: `${index}${suffix}`, value: index });
  }

  return (
    <Select
      size={fullscreen ? undefined : 'small'}
      options={options}
      value={year}
      className={`${prefixCls}-year-select`}
      onChange={numYear => {
        let newDate = generateConfig.setYear(value, numYear);

        if (validRange) {
          const [startDate, endDate] = validRange;
          const newYear = generateConfig.getYear(newDate);
          const newMonth = generateConfig.getMonth(newDate);
          if (
            newYear === generateConfig.getYear(endDate) &&
            newMonth > generateConfig.getMonth(endDate)
          ) {
            newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
          }
          if (
            newYear === generateConfig.getYear(startDate) &&
            newMonth < generateConfig.getMonth(startDate)
          ) {
            newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
          }
        }

        onChange(newDate);
      }}
      getPopupContainer={() => divRef!.current!}
      aria-label={intl.formatMessage({id: "a11y.select.Year"})}
    />
  );
}

{ Option } = Select

{ Option } = Select

export function PropertySelect({
    optionGroups,
    value: propertyOption,
    onChange,
    placeholder,
    autoOpenIfEmpty,
    delayBeforeAutoOpen,
    dropdownMatchSelectWidth = true,
}: Props): JSX.Element {
    const [search, setSearch] = useState(false as string | false)
    const { reportPropertySelectOpened } = useActions(eventUsageLogic)
    return (
        <SelectGradientOverflow
            showSearch
            autoFocus={autoOpenIfEmpty && !propertyOption?.value}
            defaultOpen={autoOpenIfEmpty && !propertyOption?.value}
            delayBeforeAutoOpen={delayBeforeAutoOpen}
            placeholder={placeholder}
            data-attr="property-filter-dropdown"
            labelInValue
            value={propertyOption || undefined}
            onSearch={(value) => {
                setSearch(value)
            }}
            filterOption={() => {
                return true // set to avoid ant.d doing its own filtering
            }}
            onChange={(_: null, selection) => {
                const { value: val, type } = selection as SelectionOptionType
                onChange(type, val.replace(/^(event_|person_|element_)/gi, ''))
            }}
            style={{ width: '100%' }}
            dropdownMatchSelectWidth={dropdownMatchSelectWidth}
            onDropdownVisibleChange={(open) => {
                if (open) {
                    reportPropertySelectOpened()
                }
            }}
        >
            {optionGroups.map(
                (group) =>
                    group.options?.length > 0 && (
                        <Select.OptGroup key={group.type} label={group.label}>
                            {searchItems(group.options, search, group.type).map((option, index) => (
                                <Select.Option
                                    key={`${group.type}_${option.value}`}
                                    value={`${group.type}_${option.value}`}
                                    type={group.type}
                                    data-attr={`prop-filter-${group.type}-${index}`}
                                >
                                    <PropertyKeyInfo
                                        value={option.value}
                                        type={group.type == 'element' ? group.type : undefined}
                                    />
                                </Select.Option>
                            ))}
                        </Select.OptGroup>
                    )
            )}
        </SelectGradientOverflow>
    )
}

RelativeInput: React.FC<BaseProps> = React.memo(({ value, onChange }) => {
  const { t } = useTranslation(I18nKey);
  const [parts, setParts] = useState<IDatePart>({ part: DateParts.HOUR, diff: 1, op: "-" });

  useEffect(() => {
    if (!isDate(value)) {
      setParts(getDateParts(value) || { part: DateParts.HOUR, diff: 1, op: "-" });
    }
  }, [value]);

  const setPart = useCallback(
    (key: keyof IDatePart, value: AnyObject) => {
      const newParts = { ...parts, [key]: value };
      setParts(newParts);
      onChange && onChange(`${newParts.part}${newParts.op}${newParts.diff}`);
    },
    [parts, onChange]
  );

  return (
    <Input.Group compact>
      <InputNumber
        min={1}
        onChange={(v) => setPart("diff", v)}
        value={parts.diff}
        style={{ width: 80 }}
      />
      <Select
        onChange={(v) => setPart("part", v.toString())}
        value={parts.part}
        style={{ width: 120 }}
      >
        {Object.values(DateParts)
          .slice(1)
          .map((key) => (
            <Select.Option key={key} value={key}>
              {t(`label.${key}`)}
            </Select.Option>
          ))}
      </Select>
      <Select onChange={(v) => setPart("op", v.toString())} value={parts.op} style={{ width: 120 }}>
        <Select.Option value="-">{t("label.-")}</Select.Option>
        <Select.Option value="+">{t("label.+")}</Select.Option>
      </Select>
    </Input.Group>
  );
})

{ Option } = Select

{ Option } = Select

Option = Select.Option

CreateRelationModal = (props: Props) => {
  const { visible, sourceEntity, targetEntity, onOk, onCancel } = props
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
  const [form] = Form.useForm()

  const handleOK = () => {
    form.validateFields().then(values => {
      setConfirmLoading(true)
      const cb = () => {
        setConfirmLoading(false)
      }
      onOk({ ...values, cb })
    })
  }

  return (
    <Modal
      title="关联模型"
      visible={visible}
      confirmLoading={confirmLoading}
      wrapClassName="create-relation-container"
      okText="确定"
      cancelText="取消"
      onOk={handleOK}
      onCancel={onCancel}
      mask={false}
      centered
      destroyOnClose={true}
    >
      <Form form={form}>
        <Form.Item
          {...formItemLayout}
          name="SOURCE_GUID"
          label="SOURCE_GUID"
          rules={[{ required: true }]}
          initialValue={`${sourceEntity?.entityName || ''}(${sourceEntity?.entityId || ''})`}
        >
          <Input />
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          name="TARGET_GUID"
          label="TARGET_GUID"
          rules={[{ required: true }]}
          initialValue={`${targetEntity?.entityName || ''}(${targetEntity?.entityId || ''})`}
        >
          <Input />
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          name="RELATION_TYPE"
          label="选择关联关系"
          rules={[{ required: true }]}
          initialValue={'N:1'}
        >
          <Select placeholder="请选择关联关系">
            <Select.Option value="N:1">多对一</Select.Option>
            <Select.Option value="1:N">一对多</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
}

{ Option } = Select

// NOTE: keeping this around until we decide that we really don't want it.
// function NoteTypeFormItem() {
//   const onNoteChange = (option: string) => {
//     postVSCodeMessage({
//       type: LookupViewMessageEnum.onValuesChange,
//       data: { category: "note", type: option },
//       source: DMessageSource.webClient,
//     });
//   };
//   const noteModifierChoices = Object.keys(LookupNoteTypeEnum).map((key) => {
//     return <Option value={key}>{key}</Option>;
//   });
//   return (
//     <>
//       <Form.Item name="note" label="Note Type">
//         <Select allowClear onChange={onNoteChange} placeholder="None">
//           {noteModifierChoices}
//         </Select>
//       </Form.Item>
//     </>
//   );
// }

function EffectTypeFormItem() {
  const effectModifierChoices = Object.keys(LookupEffectTypeEnum).map((key) =>
    OptionWithTooltip(key)
  );
  const onEffectChange = (option: string) => {
    postVSCodeMessage({
      type: LookupViewMessageEnum.onValuesChange,
      data: { category: "effect", type: option },
      source: DMessageSource.webClient,
    });
  };
  return (
    <>
      <Form.Item
        name="effect"
        label="Effect Type"
        tooltip="Various lookup effects"
      >
        <Select
          allowClear
          mode="multiple"
          onChange={onEffectChange}
          placeholder="None"
        >
          {effectModifierChoices}
        </Select>
      </Form.Item>
    </>
  );
}

// @ts-ignore
export default function PropertyPanel(nodeData, updateproperty, hidePropertyPanel) {
  const getApproveList = () => {
    const approveUserOption: JSX.Element[] = []
    approveUser.forEach((item: IApproveUser) => {
      approveUserOption.push(<Select.Option value={item.value}>{item.label}</Select.Option>);
    });
    const approveSelect = <Form.Item className="form-property" label="审核节点类型" name="approveType">
      <Select>
        {approveUserOption}
    </Select>
    </Form.Item>
    return approveSelect;
  }
  const getApiUrl = () => {
    const Api = <Form.Item label="API" name="api">
      <Input />
    </Form.Item>
    return Api;
  }
  const onFormLayoutChange = (value: any, all: any) => {
    approveUser.forEach(item => {
      if (item.value === value.approveType) {
        value['approveTypeLabel'] = item.label;
      }
    })
    updateproperty(nodeData.id, value,);
  }
  return (
    <div>
      <h2>属性面板</h2>
      <Form
        key={nodeData.id}
        layout="inline"
        initialValues={nodeData.properties}
        onValuesChange={onFormLayoutChange}
      >
        <span className="form-property">类型：<span>{nodeData.type}</span></span>
        <span className="form-property">文案：<span>{nodeData.text?.value}</span></span>
        {nodeData.type==="approver" ? getApproveList() : ''}
        {nodeData.type === "jugement" ? getApiUrl() : ''}
      </Form>
      <div>
        <h3>......</h3>
        <h3>业务属性可根据需要进行自定义扩展</h3>
      </div>
      <div className="property-panel-footer">
        <Button
          className="property-panel-footer-hide"
          type="primary"
          icon={<DownOutlined/>}
          onClick={hidePropertyPanel}>
          收起
        </Button>
      </div>
    </div>
  )
}