antd#Radio TypeScript Examples

ExampleCustomScreen = () => {
    const mainStore = useMainStore();

    const [contentDisplayMode, setContentDisplayMode] = useState(mainStore.contentDisplayMode);

    const handleContentDisplayModeChange = useCallback((e: RadioChangeEvent) => {
        if (Object.values(ContentDisplayMode).includes(e.target.value)) {
            mainStore.contentDisplayMode = e.target.value;
            setContentDisplayMode(mainStore.contentDisplayMode);
        }
    }, [mainStore, setContentDisplayMode]);

    return (
        <>
            <h2>
                Example Custom Screen
            </h2>
            <Divider/>
            <div>
                <div><code>ContentDisplayMode:</code></div>
                <Radio.Group onChange={handleContentDisplayModeChange} value={contentDisplayMode}>
                    <Space direction='vertical'>
                        <Radio value={ContentDisplayMode.ActivateExistingTab}>
                            <code>ContentDisplayMode.ActivateExistingTab</code>
                        </Radio>
                        <Radio value={ContentDisplayMode.AlwaysNewTab}>
                            <code>ContentDisplayMode.AlwaysNewTab</code>
                        </Radio>
                        <Radio value={ContentDisplayMode.NoTabs}>
                            <code>ContentDisplayMode.NoTabs</code>
                        </Radio>
                    </Space>
                </Radio.Group>
            </div>
        </>
    )
}

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

    return (
      <RadioGroup
        {...filterAttributes(uiProps, 'options')}
        defaultValue={config.default as RadioGroupProps['defaultValue']}
        value={this.props.value}
        onChange={(e) => {
          this.props.onChange?.(e.target.value);
        }}
      >
        { (this.options as RadioOptionType[])?.map((option, i) => {
          if (typeof option === 'string') {
            option = { label: option, value: option };
          }
          return (
            <Radio key={i} value={option.value} style={option.style} disabled={option.disabled}>
              { option.label }
              { option.description && (
              <Popover content={option.description}>
                <QuestionCircleOutlined style={{ margin: '0 8px' }} />
              </Popover>
              ) }
            </Radio>
          );
        }) }
      </RadioGroup>
    );
  }

function URLMatching({
    step,
    sendStep,
}: {
    step: ActionStepType
    sendStep: (stepToSend: ActionStepType) => void
}): JSX.Element {
    const handleURLMatchChange = (e: RadioChangeEvent): void => {
        sendStep({ ...step, url_matching: e.target.value })
    }
    return (
        <Radio.Group
            buttonStyle="solid"
            onChange={handleURLMatchChange}
            value={step.url_matching || 'contains'}
            size="small"
        >
            <Radio.Button value="contains">contains</Radio.Button>
            <Radio.Button value="regex">matches regex</Radio.Button>
            <Radio.Button value="exact">matches exactly</Radio.Button>
        </Radio.Group>
    )
}

MutationForm = () => {
  return (
    <>
      <Form.Item
        label="How do mutations in this gene cause the disease?"
        name="mutationType"
        rules={[
          {
            required: true,
            message: 'Please select one of the options',
          },
        ]}
      >
        <Radio.Group>
          <Radio value={MutationType.LEADS_TO_LOSS}>
            {mutationsTypesMap[MutationType.LEADS_TO_LOSS]}
          </Radio>
          <Radio value={MutationType.LEADS_TO_GAIN}>
            {mutationsTypesMap[MutationType.LEADS_TO_GAIN]}
          </Radio>
          <Radio value={MutationType.LEADS_TO_MORE}>
            {mutationsTypesMap[MutationType.LEADS_TO_MORE]}
          </Radio>
          <Radio value={MutationType.NOT_SURE}>
            {mutationsTypesMap[MutationType.NOT_SURE]}
          </Radio>
        </Radio.Group>
      </Form.Item>
    </>
  )
}

ModeSelect = ({ onChange, value }: ModeSelectProps) => {
  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={value}
        options={[
          { label: 'desktop', value: 'desktop' },
          { label: 'mobile', value: 'mobile' },
        ]}
        buttonStyle="solid"
        optionType="button"
      />
    </>
  );
}

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;
}

export default function App() {
	const [isPreview,setIsPreview]=useState(false)
	return (
		<BrickProvider
									 config={config}
									 warn={(msg: string) => {
										 message.warning(msg)
									 }}
		>
			<div className={styles['wrapper']}>
				<ToolBar />
				<div className={styles['content']}>
						<AllComponents />
					<div className={styles['canvas-container']}>
						<Radio.Group defaultValue={'0'} style={{marginBottom:20}}
												 onChange={(e)=>setIsPreview(e.target.value==='1')}>
							<Radio.Button value={'0'}>
								编辑
							</Radio.Button>
							<Radio.Button value='1'>
								预览
							</Radio.Button>
						</Radio.Group>
						{isPreview?<PreviewPanel/>:<DesignPanel />}

					</div>
					<Resizable
						enable={RIGHT_ENABLE}
						defaultSize={{ width: '150px', height: '100%' }}
						className={styles['props-shadow']}
					>
						<SettingsPanel />
					</Resizable>
				</div>
			</div>
		</BrickProvider>
	)
}

RadioButton = ({
  value,
  customCSS,
}: {
  value: GraphThemeEnum;
  customCSS?: string;
}) => {
  let singleSelectOptions = Object.keys(GraphThemeEnum).map(
    (k) => GraphThemeEnum[k as GraphThemeEnum]
  );
  if (!customCSS) {
    singleSelectOptions = singleSelectOptions.filter(
      (option) => option !== GraphThemeEnum.Custom
    );
  }
  const ideDispatch = ideHooks.useIDEAppDispatch();
  return (
    <Radio.Group
      onChange={(e) => {
        updateGraphTheme(e.target.value);
        ideDispatch(ideSlice.actions.setGraphTheme(e.target.value));
      }}
      value={value}
    >
      <Space direction="vertical">
        {singleSelectOptions.map((option) => (
          <Radio key={option} value={option}>
            {option}
          </Radio>
        ))}
      </Space>
    </Radio.Group>
  );
}

describe("BrickBook", () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it("should work when shallow rendering", async () => {
    const wrapper = shallow(
      <BrickBook
        stories={[]}
        storyId="fake-story-of-correct"
        storyType="brick"
      />
    );
    wrapper.find(Radio.Group).invoke("onChange")({ target: { value: "json" } });
    await (global as any).flushPromises();
    expect(wrapper.find(BrickDemo).at(0).prop("mode")).toBe("json");
    expect(wrapper.find(BrickDemo).length).toBe(1);
  });

  it("should work when render as default language", async () => {
    mount(
      <BrickBook stories={[]} storyId="fake-story-of-slots" storyType="brick" />
    );
    expect(applyPageTitle).toBeCalledWith("Fake Story of Slots Zh");
  });

  it("should render nothing if story not found", () => {
    const wrapper = shallow(
      <BrickBook stories={[]} storyId="not-existed-story" storyType="brick" />
    );
    expect(wrapper.html()).toBe(null);
  });
});

RadioGroup = React.forwardRef(
  (radioProps: {
    options: Array<{ name: string; value: string }>;
    value: string;
    disabled?: boolean;
    onChange: (e: any) => void;
  }) => {
    const { options, onChange, value, disabled } = radioProps;

    return (
      <Radio.Group buttonStyle="solid" size="small" value={value} onChange={onChange} disabled={disabled}>
        {options.map(({ value: v, name }) => (
          <Radio.Button key={v} value={v}>
            {name}
          </Radio.Button>
        ))}
      </Radio.Group>
    );
  },
)

nodeConfigMap.set('data-mapping', [
  {
    label: '保留原字段',
    key: 'config.keepSourceData',
    styles: {
      lg: { span: 24 },
      md: { span: 24 },
      sm: { span: 24 },
    },
    formStyle: {
      wrapperCol: { span: 24 },
      labelCol: { span: 24 },
    },
    component: (
      <Radio.Group>
        <Radio value={true}>是</Radio>
        <Radio value={false}>否</Radio>
      </Radio.Group>
    ),
  },
  {
    label: '转换规则',
    key: 'config.keepSourceData',
    styles: {
      lg: { span: 24 },
      md: { span: 24 },
      sm: { span: 24 },
    },
    formStyle: {
      wrapperCol: { span: 24 },
      labelCol: { span: 24 },
    },
    component: <Button>编辑</Button>,
  },
]);

export default function index() {
  const namePrefix = ['options', 'legend'];

  return (
    <Panel header='Legend'>
      <>
        <Form.Item noStyle label='' name={[...namePrefix, 'displayMode']}>
          <Radio.Group buttonStyle='solid'>
            <Radio.Button value='table'>开启</Radio.Button>
            <Radio.Button value='hidden'>关闭</Radio.Button>
          </Radio.Group>
        </Form.Item>
        {/*目前只有 table 形态的 legend，后面支持 list 形态后再打开下面的位置设置*/}
        {/* <Form.Item noStyle shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'displayMode']) !== _.get(curValues, [...namePrefix, 'displayMode'])}>
          {({ getFieldValue }) => {
            if (getFieldValue([...namePrefix, 'displayMode']) === 'list') {
              return (
                <Form.Item label='位置' name={[...namePrefix, 'placement']}>
                  <Radio.Group buttonStyle='solid'>
                    <Radio.Button value='right'>right</Radio.Button>
                    <Radio.Button value='bottom'>bottom</Radio.Button>
                  </Radio.Group>
                </Form.Item>
              );
            }
            return null;
          }}
        </Form.Item> */}
      </>
    </Panel>
  );
}

RadioGroup = Radio.Group

CartFinalPriceTable: FC<PropTypes> = props => {
  const { dataSource, recommend } = props;
  const [discountPrice, setDiscountPrice] = useState<number>(0);
  const [defaultChecked, setDefaultChecked] = useState('unApplied');
  const couponData = useSelector(couponTypeSelector);
  const isNotRecommend: boolean = recommend.recommend === 'unApplied';

  // 자동 추천 기능
  useEffect(() => {
    setDefaultChecked(recommend.recommend);
    if (recommend.recommend === 'rate') {
      setDiscountPrice(dataSource.rateDiscountPrice);
    }
    if (recommend.recommend === 'amount') {
      setDiscountPrice(dataSource.amountDiscountPrice);
    }
    if (recommend.recommend === 'unApplied') {
      setDiscountPrice(0);
    }
  }, [dataSource, recommend]);

  const handleChange = useCallback(
    (event: RadioChangeEvent) => {
      setDefaultChecked(event.target.value);
      if (event.target.value === 'rate') {
        setDiscountPrice(dataSource.rateDiscountPrice);
      }
      if (event.target.value === 'amount') {
        setDiscountPrice(dataSource.amountDiscountPrice);
      }
      if (event.target.value === 'unApplied') {
        setDiscountPrice(0);
      }
    },
    [setDiscountPrice, dataSource],
  );

  return (
    <>
      {couponData ? (
        <Radio.Group
          value={defaultChecked}
          buttonStyle="solid"
          style={{ margin: '25px 50px 0 60px' }}
          onChange={handleChange}
        >
          <Radio value={'unApplied'} disabled={isNotRecommend}>
            쿠폰 미적용
          </Radio>
          <Radio value={couponData.rate.type} disabled={isNotRecommend}>
            {couponData.rate.title}
          </Radio>
          <Radio value={couponData.amount.type} disabled={isNotRecommend}>
            {couponData.amount.title}
          </Radio>
        </Radio.Group>
      ) : (
        ''
      )}
      <Descriptions bordered style={{ margin: '10px 50px 0 50px' }}>
        <Descriptions.Item label="총 상품 금액" span={2}>
          <PriceLabel value={dataSource.totalPrice} />
        </Descriptions.Item>
        <Descriptions.Item label="상품 할인 금액">
          <PriceLabel value={discountPrice} />
        </Descriptions.Item>
        <Descriptions.Item label="최종 가격" span={3}>
          <PriceLabel
            value={dataSource.totalPrice - discountPrice}
            large={true}
          />
        </Descriptions.Item>
      </Descriptions>
    </>
  );
}

RadioGroup = Radio.Group

function TypeSwitcher({
    step,
    sendStep,
}: {
    step: ActionStepType
    sendStep: (stepToSend: ActionStepType) => void
}): JSX.Element {
    const handleChange = (e: RadioChangeEvent): void => {
        const type = e.target.value
        if (type === '$autocapture') {
            sendStep({ ...step, event: '$autocapture' })
        } else if (type === 'event') {
            sendStep({ ...step, event: '' })
        } else if (type === '$pageview') {
            sendStep({
                ...step,
                event: '$pageview',
                url: step.url,
            })
        }
    }

    return (
        <div className={`type-switcher${step.event === undefined ? ' unselected' : ''}`}>
            <Radio.Group
                buttonStyle="solid"
                onChange={handleChange}
                value={
                    step.event === '$autocapture' || step.event === '$pageview' || step.event === undefined
                        ? step.event
                        : 'event'
                }
            >
                <Radio.Button value="$autocapture">Autocapture</Radio.Button>
                <Radio.Button value="event">Custom event</Radio.Button>
                <Radio.Button value="$pageview">Page view</Radio.Button>
            </Radio.Group>
        </div>
    )
}

describe("ObjectAttrArr", () => {
  it("should work", () => {
    const props = {
      value: defaultValue,
      onChange: jest.fn(),
    };
    const wrapper = mount(<ObjectAttrArr {...props} />);
    expect(wrapper.find("Select").at(0).props().value.length).toBe(0);
  });

  it("should change regex", () => {
    const props = {
      value: defaultValue,
      onChange: jest.fn(),
    };
    const wrapper = shallow(<ObjectAttrArr {...props} />);
    wrapper.find("Input").at(0).invoke("onChange")({ target: { value: "d" } });
    expect(props.onChange).toBeCalledWith({
      ...defaultValue,
      regex: "d",
    });
  });

  it("should change mode", () => {
    const props = {
      value: defaultValue,
      onChange: jest.fn(),
    };
    const wrapper = shallow(<ObjectAttrArr {...props} />);
    wrapper.find(Radio.Group).at(0).invoke("onChange")({
      target: { value: "tag" },
    });
    expect(props.onChange).toBeCalledWith({
      ...defaultValue,
      mode: "tag",
    });
  });

  it("should change default", () => {
    const props = {
      value: defaultValue,
      onChange: jest.fn(),
    };
    const wrapper = shallow(<ObjectAttrArr {...props} />);
    wrapper.find(Select).at(0).invoke("onChange")([1, 2, 3], null);
    expect(props.onChange).toBeCalledWith({
      ...defaultValue,
      default: [1, 2, 3],
    });
  });
});

render() {
    const { dataSource, tableMode } = this.state;
    const {
      title,
      form,
      tableProps,
      textAreaProps,
      editDisabled,
      existKeys = [],
      onChange,
      isNeedTextArea = true,
      keyDisabled,
      disableAdd,
      isValueTextArea = false,
      disableDelete,
      validateField,
      maxLength,
    } = this.props;
    const tableData = dataSource;
    const textData = convertToTextData(dataSource);
    return (
      <div>
        <div className="flex justify-between items-center mb-3">
          <span className="key-value-title">{title || i18n.t('default:Information configuration')}</span>
          {isNeedTextArea ? (
            <Radio.Group size="small" value={tableMode ? 'key-value' : 'text'} onChange={this.toggleEditMode}>
              <Radio.Button value="text">{i18n.t('default:Text Mode')}</Radio.Button>
              <Radio.Button value="key-value">{i18n.t('default:Entry Mode')}</Radio.Button>
            </Radio.Group>
          ) : null}
        </div>
        {tableMode ? (
          <KeyValueTable
            data={tableData}
            editDisabled={editDisabled}
            keyDisabled={keyDisabled}
            existKeys={existKeys}
            form={form}
            disableAdd={disableAdd}
            disableDelete={disableDelete}
            addBtnText={allWordsFirstLetterUpper(i18n.t('common:add parameter'))}
            title={null}
            ref={(ref) => {
              this.table = ref;
            }}
            // 该组件认为删除 input-item 和改变 input-item 的值是同一种行为
            onChange={onChange}
            onDel={onChange}
            isTextArea={isValueTextArea}
            validate={validateField ? validateField.table : undefined}
            maxLength={maxLength}
            {...tableProps}
          />
        ) : (
          <div>
            {/* <div className="mb-4" style={{ display: 'flex', flexDirection: 'row-reverse', lineHeight: '28px' }}> */}
            {/*  {modeSwitch} */}
            {/* </div> */}
            <KeyValueTextArea
              data={textData}
              editDisabled={editDisabled}
              existKeys={existKeys}
              form={form}
              ref={(ref) => {
                this.textArea = ref;
              }}
              validate={validateField ? validateField.text : undefined}
              maxLength={maxLength}
              {...textAreaProps}
            />
          </div>
        )}
      </div>
    );
  }

function SaveAsModal(props: SaveAsModalProps) {
  const {
    form: { getFieldDecorator, validateFieldsAndScroll },
    visible,
    loading,
    onCancel,
    onSubmit,
    systemViews,
    customViews,
    companyViews,
    companyViewAuth,
    ...nextProps
  } = props

  const allNames = useMemo(() => { return [...systemViews, ...customViews, ...companyViews].map(item => (item.name)) }, [systemViews, customViews, companyViews])

  const onOk = useCallback(() => {
    validateFieldsAndScroll((errors: any, values: object) => {
      if (errors) return
      onSubmit && onSubmit(values)
    })
  }, [onSubmit])

  return (
    <Receiver>
      {(locale) => <Modal
        visible={visible}
        title={locale.viewSaveAs}
        onCancel={onCancel}
        centered
        destroyOnClose
        footer={
          <div>
            <Button size="small" icon="close-circle" onClick={onCancel}>
              {locale.cancel}
            </Button>
            <Button size="small" type="primary" icon="save" loading={loading} onClick={onOk}>
              {locale.save}
            </Button>
          </div>
        }
        {...nextProps}
      >
        <Form>
          <Form.Item label={locale.viewType} style={{marginBottom: 0}}>
            {getFieldDecorator('type', {
              initialValue: 'custom'
            })(
              <Radio.Group size="small" buttonStyle="solid">
                <Radio value="custom">{locale.customView}</Radio>
                { companyViewAuth && <Radio value="company">{locale.companyView}</Radio> }
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label={locale.viewName}>
            {getFieldDecorator('name', {
              rules: [
                {
                  message: locale.viewNameRepeat,
                  validator: function (rule: any, value: string = '', callback: Function) {
                    let res = value.trim()
                    if (!res) {
                      rule.message = locale.viewNameRequired
                      callback(true)
                    } else if (allNames.includes(res)) {
                      callback(true)
                    }
                    callback(undefined)
                  }
                }
              ],
            })(<Input placeholder={locale.viewNamePlaceholder} maxLength={500} autoComplete="off" />)}
          </Form.Item>
        </Form>
      </Modal>}
    </Receiver>
  )
}

TestDemo = ({
   rangePickerValue,
   salesData,
   isActive,
   handleRangePickerChange,
   loading,
   selectDate,
 }: {
  rangePickerValue: RangePickerValue;
  isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
  salesData: ISalesData[];
  loading: boolean;
  handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
  selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
}) => (
  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
    <div className={styles.salesCard}>
      <Tabs
        tabBarExtraContent={
          <div className={styles.salesExtraWrap}>
            <div className={styles.salesExtra}>
              <Radio.Group defaultValue="all">
                <Radio.Button value="all">
                  全部设备
                </Radio.Button>
                <Radio.Button value="online">
                  在线
                </Radio.Button>
                <Radio.Button value="stores">
                  离线
                </Radio.Button>
              </Radio.Group>
            </div>
            <RangePicker
              value={rangePickerValue}
              onChange={handleRangePickerChange}
              style={{ width: 256 }}
            />
          </div>
        }
        size="large"
        tabBarStyle={{ marginBottom: 24 }}
      >
        <TabPane
          tab={'设备数量'}
          key="sales"
        >
          <Row>
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <h4 className={styles.rankingTitle}>
                  物联网设备连接排行
                </h4>
                <Bar
                  height={295}
                  title={
                    '连接数量'
                  }
                  data={salesData}
                />
              </div>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </div>
  </Card>
)

RadioGroup = Radio.Group

OlUl: FC<{ keyName: string; form: FormInstance<Store>; showEditPropsData: any }> = memo(
  ({ keyName, form, showEditPropsData }) => {
    const [type, setType] = useState<string | undefined>(undefined);
    const ulType = [
      { label: '小圆点', value: 'disc' },
      { label: '空心圆圈', value: 'circle' },
      { label: '小方块', value: 'square' },
    ];
    const olType = [
      { label: '1', value: '1' },
      { label: 'A', value: 'A' },
      { label: 'I', value: 'I' },
    ];

    useEffect(() => {
      if (showEditPropsData[keyName]) {
        // 将数据流的数据同步一下
        setType(showEditPropsData[keyName].type);
      }
    }, [showEditPropsData, keyName]);

    const selectData = useMemo(() => {
      return type === 'ol' ? olType : ulType;
    }, [type]);

    return (
      <>
        <Form.Item label={null} name={[keyName, 'type']} style={{ marginBottom: '16px' }}>
          <Radio.Group
            onChange={(val) => {
              setType(val.target.value);
              form.setFieldsValue({
                [keyName]: {
                  attrType: undefined,
                },
              });
            }}
          >
            <Radio value={'ol'}>有序列表</Radio>
            <Radio value={'ul'}>无序列表</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label={'序列'} name={[keyName, 'attrType']} style={{ marginBottom: '16px' }}>
          <Selects data={selectData} valKey="value" valName="label" />
        </Form.Item>
        <Form.List name={[keyName, 'list']}>
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <Space
                  key={key}
                  style={{ display: 'flex', marginBottom: 8, justifyContent: 'space-around' }}
                  align="baseline"
                >
                  <Form.Item {...restField} name={[name, 'text']} style={{ marginBottom: '16px' }}>
                    <Input />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(name)} title="移除" />
                </Space>
              ))}
              <Form.Item style={{ marginBottom: '16px' }}>
                <Button onClick={() => add()} block icon={<PlusOutlined />}>
                  添加数据
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </>
    );
  },
)

export default function Background() {
  const { selectComponent, changeContainerPropsState } = useModel('bridge');
  const { backgroundImage, backgroundColor, backgroundSize, backgroundRepeat } = selectComponent?.containerProps ?? {};

  const [backgroundFillType, setBackgroundFillType] = useState(FILL_TYPE.color);

  return (
    <Descriptions column={1}>
      <Descriptions.Item label="填充">
        <div className="background">
          <Radio.Group
            size="small"
            options={[
              { label: '颜色填充', value: FILL_TYPE.color },
              { label: '背景图片', value: FILL_TYPE.image },
            ]}
            onChange={(e) => { setBackgroundFillType(e.target.value); }}
            value={backgroundFillType}
            optionType="button"
            buttonStyle="solid"
          />
        </div>
      </Descriptions.Item>
      {backgroundFillType === FILL_TYPE.color && (
        <Descriptions.Item label="填充颜色">
          <ColorPicker
            className="background-color"
            onChange={(value: string) => { changeContainerPropsState('backgroundColor', value); }}
            value={backgroundColor}
          />
        </Descriptions.Item>
      )}
      {backgroundFillType === FILL_TYPE.image && (
        <>
          <Descriptions.Item label="图片">
            <ImageUpload
              value={backgroundImage}
              onChange={(value) => { changeContainerPropsState('backgroundImage', value); }}
            />
          </Descriptions.Item>
          <Descriptions.Item label="尺寸">
            <Radio.Group
              style={{ marginTop: 4 }}
              size="small"
              options={[
                { label: '默认', value: 'initial' },
                { label: '充满', value: '100% 100%' },
                { label: '等比填充', value: 'contain' },
                { label: '等比覆盖', value: 'cover' },
              ]}
              onChange={(e) => { changeContainerPropsState('backgroundSize', e.target.value); }}
              value={backgroundSize ?? 'initial'}
              optionType="button"
              buttonStyle="solid"
            />
          </Descriptions.Item>
          <Descriptions.Item label="重复">
            <Radio.Group
              style={{ marginTop: 4 }}
              size="small"
              options={[
                { label: '默认', value: 'initial' },
                { label: '水平重复', value: 'repeat-x' },
                { label: '垂直重复', value: 'repeat-y' },
                { label: '不重复', value: 'no-repeat' },
              ]}
              onChange={(e) => { changeContainerPropsState('backgroundRepeat', e.target.value); }}
              value={backgroundRepeat ?? 'initial'}
              optionType="button"
              buttonStyle="solid"
            />
          </Descriptions.Item>
        </>
      )}
    </Descriptions>
  );
}

FromAdd: React.FC<{}> = props => {
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()

  const submitData = (values: any) => {
    setVisible(false)
    message.success('提交数据成功!!!')
    form.resetFields()
  }
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  }
  return (
    <>
      <Button
        onClick={() => setVisible(true)}
        size="large"
        type="primary"
        className="btn-bottom"
      >
        添加新数据
      </Button>
      <Modal
        title="提交数据"
        onCancel={() => setVisible(false)}
        visible={visible}
        footer={null}
      >
        <Form
          form={form}
          initialValues={{ ji: true, level: 2020 }}
          name="basic"
          onFinish={submitData}
          onFinishFailed={onFinishFailed}
          {...layout}
        >
          <Form.Item label="时间" name="time" rules={[{ required: true }]}>
            <DatePicker format="YYYY-MM-DD" />
          </Form.Item>
          <Form.Item label="赛事名称" name="title" rules={[{ required: true }]}>
            <Input placeholder="请输入赛事名称" />
          </Form.Item>
          <Form.Item label="赛事级别" name="ji" rules={[{ required: true }]}>
            <Radio.Group>
              <Radio value={true}>省赛</Radio>
              <Radio value={false}>校赛</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="年度" name="level" rules={[{ required: true }]}>
            <InputNumber max={2020} min={2010} />
          </Form.Item>
          <Form.Item label="学校" name="school" rules={[{ required: true }]}>
            <Input placeholder="请输入学校" />
          </Form.Item>
          <Form.Item label="地址" name="address" rules={[{ required: true }]}>
            <Input placeholder="请输入地址" />
          </Form.Item>
          <Form.Item label="描述信息" name="desc" rules={[{ required: true }]}>
            <Input placeholder="请输入描述信息" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button
                onClick={() => form.resetFields()}
                type="default"
                htmlType="reset"
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

palette = () => (
  <Palette>
    <Category name="Text">
      <Component name="Formatted Message">
        <Variant>
          <FormattedMessage />
        </Variant>
      </Component>
      <Component name="Heading">
        <Variant name="h1">
          <Typography.Title></Typography.Title>
        </Variant>
        <Variant name="h2">
          <Typography.Title level={2}></Typography.Title>
        </Variant>
        <Variant name="h3">
          <Typography.Title level={3}></Typography.Title>
        </Variant>
        <Variant name="h4">
          <Typography.Title level={4}></Typography.Title>
        </Variant>
        <Variant name="h5">
          <Typography.Title level={5}></Typography.Title>
        </Variant>
      </Component>
      <Component name="Text">
        <Variant>
          <Typography.Text></Typography.Text>
        </Variant>
        <Variant name="Secondary">
          <Typography.Text type="secondary"></Typography.Text>
        </Variant>
        <Variant name="Success">
          <Typography.Text type="success"></Typography.Text>
        </Variant>
        <Variant name="Warning">
          <Typography.Text type="warning"></Typography.Text>
        </Variant>
        <Variant name="Danger">
          <Typography.Text type="danger"></Typography.Text>
        </Variant>
        <Variant name="Disabled">
          <Typography.Text disabled></Typography.Text>
        </Variant>
      </Component>
    </Category>
    <Category name="Layout">
      <Component name="Divider">
        <Variant>
          <Divider />
        </Variant>
      </Component>

      <Component name="Grid">
        <Variant name="Simple Row">
          <Row></Row>
        </Variant>
        <Variant name="Two columns">
          <Row>
            <Col span={12}></Col>
            <Col span={12}></Col>
          </Row>
        </Variant>
        <Variant name="Three columns">
          <Row>
            <Col span={8}></Col>
            <Col span={8}></Col>
            <Col span={8}></Col>
          </Row>
        </Variant>
      </Component>

      <Component name="Space">
        <Variant>
          <Space />
        </Variant>
        <Variant name="Small">
          <Space size={"small"} />
        </Variant>
        <Variant name="Large">
          <Space size={"large"} />
        </Variant>
      </Component>
    </Category>
    <Category name="Controls">
      <Component name="Autocomplete">
        <Variant>
          <AutoComplete placeholder="input here" />
        </Variant>
      </Component>

      <Component name="Button">
        <Variant>
          <Button></Button>
        </Variant>
        <Variant name="Primary">
          <Button type="primary"></Button>
        </Variant>
        <Variant name="Link">
          <Button type="link"></Button>
        </Variant>
        <Variant name="Dropdown">
          <Dropdown
            trigger={["click"]}
            overlay={
              <Menu>
                <Menu.Item></Menu.Item>
                <Menu.Item></Menu.Item>
                <Menu.Item></Menu.Item>
              </Menu>
            }
          >
            <Button></Button>
          </Dropdown>
        </Variant>
      </Component>

      <Component name="Checkbox">
        <Variant>
          <Checkbox />
        </Variant>
      </Component>

      <Component name="Switch">
        <Variant>
          <Switch />
        </Variant>
      </Component>

      <Component name="Radio Group">
        <Variant>
          <Radio.Group>
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
          </Radio.Group>
        </Variant>
        <Variant name="Button">
          <Radio.Group>
            <Radio.Button value={1}>A</Radio.Button>
            <Radio.Button value={2}>B</Radio.Button>
            <Radio.Button value={3}>C</Radio.Button>
            <Radio.Button value={4}>D</Radio.Button>
          </Radio.Group>
        </Variant>
      </Component>

      <Component name="DatePicker">
        <Variant>
          <DatePicker />
        </Variant>
        <Variant name="Range">
          <DatePicker.RangePicker />
        </Variant>
      </Component>

      <Component name="TimePicker">
        <Variant>
          <TimePicker />
        </Variant>
        <Variant name="Range">
          <TimePicker.RangePicker />
        </Variant>
      </Component>

      <Component name="Input">
        <Variant>
          <Input />
        </Variant>
        <Variant name="Number">
          <InputNumber />
        </Variant>
      </Component>

      <Component name="Select">
        <Variant>
          <Select defaultValue="1">
            <Select.Option value="1">1</Select.Option>
            <Select.Option value="2">2</Select.Option>
          </Select>
        </Variant>
        <Variant name="Multiple">
          <Select defaultValue={["1"]} mode="multiple" allowClear>
            <Select.Option value="1">1</Select.Option>
            <Select.Option value="2">2</Select.Option>
          </Select>
        </Variant>
      </Component>

      <Component name="Link">
        <Variant>
          <Typography.Link href="" target="_blank"></Typography.Link>
        </Variant>
      </Component>

      <Component name="Slider">
        <Variant>
          <Slider defaultValue={30} />
        </Variant>
        <Variant name="Range">
          <Slider range defaultValue={[20, 50]} />
        </Variant>
      </Component>
    </Category>
    <Category name="Data Display">
      <Component name="Field">
        <Variant>
          <Field
            entityName={ENTITY_NAME}
            disabled={readOnlyMode}
            propertyName=""
            formItemProps={{
              style: { marginBottom: "12px" }
            }}
          />
        </Variant>
      </Component>
      <Component name="Card">
        <Variant>
          <Card />
        </Variant>
        <Variant name="With Title">
          <Card>
            <Card title="Card title">
              <p>Card content</p>
            </Card>
          </Card>
        </Variant>
        <Variant name="My custom card">
          <Card>
            <Card title="Card title">
              <p>Card content</p>
              <Avatar />
            </Card>
          </Card>
        </Variant>
      </Component>
      <Component name="Tabs">
        <Variant>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </Tabs.TabPane>
            <Tabs.TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </Tabs.TabPane>
            <Tabs.TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </Tabs.TabPane>
          </Tabs>
        </Variant>
        <Variant name="Tab Pane">
          <Tabs.TabPane></Tabs.TabPane>
        </Variant>
      </Component>
      <Component name="Collapse">
        <Variant>
          <Collapse defaultActiveKey="1">
            <Collapse.Panel
              header="This is panel header 1"
              key="1"
            ></Collapse.Panel>
            <Collapse.Panel
              header="This is panel header 2"
              key="2"
            ></Collapse.Panel>
            <Collapse.Panel
              header="This is panel header 3"
              key="3"
            ></Collapse.Panel>
          </Collapse>
        </Variant>
      </Component>
      <Component name="Image">
        <Variant>
          <Image width={200} src="" />
        </Variant>
      </Component>
      <Component name="Avatar">
        <Variant>
          <Avatar icon={<UserOutlined />} />
        </Variant>
        <Variant name="Image">
          <Avatar src="https://joeschmoe.io/api/v1/random" />
        </Variant>
      </Component>
      <Component name="Badge">
        <Variant>
          <Badge count={1}></Badge>
        </Variant>
      </Component>
      <Component name="Statistic">
        <Variant>
          <Statistic title="Title" value={112893} />
        </Variant>
      </Component>
      <Component name="Alert">
        <Variant name="Success">
          <Alert message="Text" type="success" />
        </Variant>
        <Variant name="Info">
          <Alert message="Text" type="info" />
        </Variant>
        <Variant name="Warning">
          <Alert message="Text" type="warning" />
        </Variant>
        <Variant name="Error">
          <Alert message="Text" type="error" />
        </Variant>
      </Component>
      <Component name="List">
        <Variant>
          <List
            bordered
            dataSource={[]}
            renderItem={item => <List.Item></List.Item>}
          />
        </Variant>
      </Component>
    </Category>
    <Category name="Icons">
      <Component name="Arrow">
        <Variant name="Up">
          <ArrowUpOutlined />
        </Variant>
        <Variant name="Down">
          <ArrowDownOutlined />
        </Variant>
        <Variant name="Left">
          <ArrowLeftOutlined />
        </Variant>
        <Variant name="Right">
          <ArrowRightOutlined />
        </Variant>
      </Component>
      <Component name="Question">
        <Variant>
          <QuestionOutlined />
        </Variant>
        <Variant name="Circle">
          <QuestionCircleOutlined />
        </Variant>
      </Component>
      <Component name="Plus">
        <Variant>
          <PlusOutlined />
        </Variant>
        <Variant name="Circle">
          <PlusCircleOutlined />
        </Variant>
      </Component>
      <Component name="Info">
        <Variant>
          <InfoOutlined />
        </Variant>
        <Variant name="Circle">
          <InfoCircleOutlined />
        </Variant>
      </Component>
      <Component name="Exclamation">
        <Variant>
          <ExclamationOutlined />
        </Variant>
        <Variant name="Circle">
          <ExclamationCircleOutlined />
        </Variant>
      </Component>
      <Component name="Close">
        <Variant>
          <CloseOutlined />
        </Variant>
        <Variant name="Circle">
          <CloseCircleOutlined />
        </Variant>
      </Component>
      <Component name="Check">
        <Variant>
          <CheckOutlined />
        </Variant>
        <Variant name="Circle">
          <CheckCircleOutlined />
        </Variant>
      </Component>
      <Component name="Edit">
        <Variant>
          <EditOutlined />
        </Variant>
      </Component>
      <Component name="Copy">
        <Variant>
          <CopyOutlined />
        </Variant>
      </Component>
      <Component name="Delete">
        <Variant>
          <DeleteOutlined />
        </Variant>
      </Component>
      <Component name="Bars">
        <Variant>
          <BarsOutlined />
        </Variant>
      </Component>
      <Component name="Bell">
        <Variant>
          <BellOutlined />
        </Variant>
      </Component>
      <Component name="Clear">
        <Variant>
          <ClearOutlined />
        </Variant>
      </Component>
      <Component name="Download">
        <Variant>
          <DownloadOutlined />
        </Variant>
      </Component>
      <Component name="Upload">
        <Variant>
          <UploadOutlined />
        </Variant>
      </Component>
      <Component name="Sync">
        <Variant>
          <SyncOutlined />
        </Variant>
      </Component>
      <Component name="Save">
        <Variant>
          <SaveOutlined />
        </Variant>
      </Component>
      <Component name="Search">
        <Variant>
          <SearchOutlined />
        </Variant>
      </Component>
      <Component name="Settings">
        <Variant>
          <SettingOutlined />
        </Variant>
      </Component>
      <Component name="Paperclip">
        <Variant>
          <PaperClipOutlined />
        </Variant>
      </Component>
      <Component name="Phone">
        <Variant>
          <PhoneOutlined />
        </Variant>
      </Component>
      <Component name="Mail">
        <Variant>
          <MailOutlined />
        </Variant>
      </Component>
      <Component name="Home">
        <Variant>
          <HomeOutlined />
        </Variant>
      </Component>
      <Component name="Contacts">
        <Variant>
          <ContactsOutlined />
        </Variant>
      </Component>
      <Component name="User">
        <Variant>
          <UserOutlined />
        </Variant>
        <Variant name="Add">
          <UserAddOutlined />
        </Variant>
        <Variant name="Remove">
          <UserDeleteOutlined />
        </Variant>
      </Component>
      <Component name="Team">
        <Variant>
          <TeamOutlined />
        </Variant>
      </Component>
    </Category>
    <Category name="Screens">
      <Component name="ExampleCustomScreen">
        <Variant>
          <ExampleCustomScreen />
        </Variant>
      </Component>
      <Component name="CustomEntityFilterTest">
        <Variant>
          <CustomEntityFilterTest />
        </Variant>
      </Component>
      <Component name="CustomFormControls">
        <Variant>
          <CustomFormControls />
        </Variant>
      </Component>
      <Component name="CustomDataDisplayComponents">
        <Variant>
          <CustomDataDisplayComponents />
        </Variant>
      </Component>
      <Component name="CustomAppLayouts">
        <Variant>
          <CustomAppLayouts />
        </Variant>
      </Component>
      <Component name="CustomControls">
        <Variant>
          <CustomControls />
        </Variant>
      </Component>
      <Component name="ErrorBoundaryTests">
        <Variant>
          <ErrorBoundaryTests />
        </Variant>
      </Component>
      <Component name="TestBlankScreen">
        <Variant>
          <TestBlankScreen />
        </Variant>
      </Component>
      <Component name="CarEditor">
        <Variant>
          <CarEditor />
        </Variant>
      </Component>
      <Component name="CarBrowserCards">
        <Variant>
          <CarBrowserCards />
        </Variant>
      </Component>
      <Component name="CarBrowserList">
        <Variant>
          <CarBrowserList />
        </Variant>
      </Component>
      <Component name="CarBrowserTable">
        <Variant>
          <CarBrowserTable />
        </Variant>
      </Component>
      <Component name="CarCardsGrid">
        <Variant>
          <CarCardsGrid />
        </Variant>
      </Component>
      <Component name="FavoriteCars">
        <Variant>
          <FavoriteCars />
        </Variant>
      </Component>
      <Component name="CarCardsWithDetails">
        <Variant>
          <CarCardsWithDetails />
        </Variant>
      </Component>
      <Component name="CarTableWithFilters">
        <Variant>
          <CarTableWithFilters />
        </Variant>
      </Component>
      <Component name="CarMasterDetail">
        <Variant>
          <CarMasterDetail />
        </Variant>
      </Component>
      <Component name="FormWizardCompositionO2O">
        <Variant>
          <FormWizardCompositionO2O />
        </Variant>
      </Component>
      <Component name="FormWizardEditor">
        <Variant>
          <FormWizardEditor />
        </Variant>
      </Component>
      <Component name="FormWizardBrowserTable">
        <Variant>
          <FormWizardBrowserTable />
        </Variant>
      </Component>
      <Component name="CarMultiSelectionTable">
        <Variant>
          <CarMultiSelectionTable />
        </Variant>
      </Component>
      <Component name="DatatypesTestEditor">
        <Variant>
          <DatatypesTestEditor />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserCards">
        <Variant>
          <DatatypesTestBrowserCards />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserList">
        <Variant>
          <DatatypesTestBrowserList />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserTable">
        <Variant>
          <DatatypesTestBrowserTable />
        </Variant>
      </Component>
      <Component name="DatatypesTestCards">
        <Variant>
          <DatatypesTestCards />
        </Variant>
      </Component>
      <Component name="AssociationO2OEditor">
        <Variant>
          <AssociationO2OEditor />
        </Variant>
      </Component>
      <Component name="AssociationO2OBrowserTable">
        <Variant>
          <AssociationO2OBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationO2MEditor">
        <Variant>
          <AssociationO2MEditor />
        </Variant>
      </Component>
      <Component name="AssociationO2MBrowserTable">
        <Variant>
          <AssociationO2MBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationM2OEditor">
        <Variant>
          <AssociationM2OEditor />
        </Variant>
      </Component>
      <Component name="AssociationM2OBrowserTable">
        <Variant>
          <AssociationM2OBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationM2MEditor">
        <Variant>
          <AssociationM2MEditor />
        </Variant>
      </Component>
      <Component name="AssociationM2MBrowserTable">
        <Variant>
          <AssociationM2MBrowserTable />
        </Variant>
      </Component>
      <Component name="CompositionO2OEditor">
        <Variant>
          <CompositionO2OEditor />
        </Variant>
      </Component>
      <Component name="CompositionO2OBrowserTable">
        <Variant>
          <CompositionO2OBrowserTable />
        </Variant>
      </Component>
      <Component name="CompositionO2MEditor">
        <Variant>
          <CompositionO2MEditor />
        </Variant>
      </Component>
      <Component name="CompositionO2MBrowserTable">
        <Variant>
          <CompositionO2MBrowserTable />
        </Variant>
      </Component>
      <Component name="DeeplyNestedTestEntityEditor">
        <Variant>
          <DeeplyNestedTestEntityEditor />
        </Variant>
      </Component>
      <Component name="DeeplyNestedO2MTestEntityTable">
        <Variant>
          <DeeplyNestedO2MTestEntityTable />
        </Variant>
      </Component>
      <Component name="DeeplyNestedO2MTestEntityEditor">
        <Variant>
          <DeeplyNestedO2MTestEntityEditor />
        </Variant>
      </Component>
      <Component name="IntIdEditor">
        <Variant>
          <IntIdEditor />
        </Variant>
      </Component>
      <Component name="IntIdBrowserTable">
        <Variant>
          <IntIdBrowserTable />
        </Variant>
      </Component>
      <Component name="IntIdBrowserCards">
        <Variant>
          <IntIdBrowserCards />
        </Variant>
      </Component>
      <Component name="IntIdBrowserList">
        <Variant>
          <IntIdBrowserList />
        </Variant>
      </Component>
      <Component name="IntIdentityIdCards">
        <Variant>
          <IntIdentityIdCards />
        </Variant>
      </Component>
      <Component name="IntIdentityIdEditor">
        <Variant>
          <IntIdentityIdEditor />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserTable">
        <Variant>
          <IntIdentityIdBrowserTable />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserCards">
        <Variant>
          <IntIdentityIdBrowserCards />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserList">
        <Variant>
          <IntIdentityIdBrowserList />
        </Variant>
      </Component>
      <Component name="StringIdCards">
        <Variant>
          <StringIdCards />
        </Variant>
      </Component>
      <Component name="StringIdMgtCardsEdit">
        <Variant>
          <StringIdMgtCardsEdit />
        </Variant>
      </Component>
      <Component name="StringIdBrowserCards">
        <Variant>
          <StringIdBrowserCards />
        </Variant>
      </Component>
      <Component name="StringIdBrowserList">
        <Variant>
          <StringIdBrowserList />
        </Variant>
      </Component>
      <Component name="StringIdBrowserTable">
        <Variant>
          <StringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="WeirdStringIdEditor">
        <Variant>
          <WeirdStringIdEditor />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserCards">
        <Variant>
          <WeirdStringIdBrowserCards />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserList">
        <Variant>
          <WeirdStringIdBrowserList />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserTable">
        <Variant>
          <WeirdStringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="BoringStringIdEditor">
        <Variant>
          <BoringStringIdEditor />
        </Variant>
      </Component>
      <Component name="BoringStringIdBrowserTable">
        <Variant>
          <BoringStringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="TrickyIdEditor">
        <Variant>
          <TrickyIdEditor />
        </Variant>
      </Component>
      <Component name="TrickyIdBrowserTable">
        <Variant>
          <TrickyIdBrowserTable />
        </Variant>
      </Component>
    </Category>
  </Palette>
)

private renderAttributeComponent(schema: DTGComponentPropertySchema, index: number, parentIndex: number) {
    const currentValue = (this.props.value || [])[parentIndex] || {};
    const options = schema['ui:props']?.options as LabeledValue[] || this.props.fieldOptions || [];
    if (schema['ui:type'] === 'radio') {
      return (
        <Radio.Group
          style={{ width: '100%' }}
          defaultValue={schema.default}
          value={currentValue[schema.name]}
          onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
        >
          {
            options?.map(
              (option, i) =>
                <Radio key={i} value={option.value}>{ option.label }</Radio>,
            )
          }
        </Radio.Group>
      );
    }
    if (schema['ui:type'] === 'input') {
      return (
        <Input
          style={{ width: '100%' }}
          defaultValue={schema.default as string}
          value={currentValue[schema.name] as string}
          placeholder={schema['ui:props']?.placeholder as string}
          onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'text') {
      return (
        <Input.TextArea
          style={{ width: '100%' }}
          autoSize={schema['ui:autoSize']}
          defaultValue={schema.default as string}
          value={currentValue[schema.name] as string}
          placeholder={schema['ui:props']?.placeholder as string}
          onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'auto-complete') {
      return (
        <AutoComplete
          style={{ width: '100%' }}
          defaultValue={schema.default as string}
          value={currentValue[schema.name] as string}
          options={options}
          onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'number') {
      return (
        <InputNumber
          style={{ width: '100%' }}
          min={schema['ui:minium']}
          max={schema['ui:maximum']}
          step={schema['ui:step']}
          defaultValue={Number(schema.default)}
          value={Number(currentValue[schema.name])}
          onChange={value => this.changeColumnItem(schema.name, Number(value), parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'switch') {
      const value = typeof currentValue[schema.name] === 'undefined' ? schema.default : currentValue[schema.name];
      return (
        <Switch
          checked={value as boolean}
          checkedChildren={schema['ui:checkedContent']}
          unCheckedChildren={schema['ui:unCheckedContent']}
          onChange={checked => this.changeColumnItem(schema.name, checked, parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'select') {
      const formattedValue = (schema['ui:mode'] === 'multiple' || schema['ui:mode'] === 'tags') && !Array.isArray(currentValue[schema.name]) ? [currentValue[schema.name]] : currentValue[schema.name];
      return (
        <Select
          showSearch
          style={{ width: '100%' }}
          mode={schema['ui:mode']}
          defaultValue={schema.default as SelectValue}
          value={formattedValue as SelectValue}
          options={options}
          onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
        />
      );
    }
    if (schema['ui:type'] === 'array-list') {
      return (
        <ArrayComponent
          theme={this.props.theme}
          schema={schema}
          value={currentValue[schema.name] as Record<string, unknown>[] | undefined}
          onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
          onValidate={msg => this.props.onValidate?.(msg)}
        />
      );
    }
    return null;
  }

DayPane: React.FC<TProps> = props => {
  const { value, onChange } = props;
  const [currentRadio, setCurrentRadio] = useState(1);
  const [from, setFrom] = useState(1);
  const [to, setTo] = useState(10);
  const [offsetFrom, setOffsetFrom] = useState(1);
  const [offset, setOffset] = useState(1);
  const [lateDay, setLateDay] = useState(1);
  const [selected, setSelected] = useState(['1']);

  useEffect(() => {
    if (value === '*') {
      setCurrentRadio(1);
    } else if (value === '?') {
      setCurrentRadio(2);
    } else if (value.indexOf('-') > -1) {
      setCurrentRadio(3);
      const [defaultFrom, defaultTo] = value.split('-');
      setFrom(parseInt(defaultFrom, 10));
      setTo(parseInt(defaultTo, 10));
    } else if (value.indexOf('/') > -1) {
      setCurrentRadio(4);
      const [defaultOffsetFrom, defaultOffset] = value.split('/');
      setOffsetFrom(parseInt(defaultOffsetFrom, 10));
      setOffset(parseInt(defaultOffset, 10));
    } else if (value.indexOf('W') > -1) {
      setCurrentRadio(5);
      setLateDay(parseInt(value.split('W')[0], 10));
    } else if (value.indexOf('L') > -1) {
      setCurrentRadio(6);
    } else {
      setCurrentRadio(7);
      setSelected(value ? value.split(',') : ['1']);
    }
  }, [value]);

  useEffect(() => {
    switch (currentRadio) {
      case 1:
        onChange('*');
        break;
      case 2:
        onChange('?');
        break;
      case 3:
        onChange(`${from}-${to}`);
        break;
      case 4:
        onChange(`${offsetFrom}/${offset}`);
        break;
      case 5:
        onChange(`${lateDay}W`);
        break;
      case 6:
        onChange('L');
        break;
      case 7:
        onChange(selected.join(','));
        break;
      default:
        break;
    }
  }, [currentRadio, from, to, offsetFrom, offset, lateDay, selected]);

  const onChangeRadio = useCallback(e => {
    setCurrentRadio(e.target.value);
  }, []);

  const onChangeFrom = useCallback(v => {
    setFrom(v || 1);
  }, []);

  const onChangeTo = useCallback(v => {
    setTo(v || 1);
  }, []);

  const onChangeOffsetFrom = useCallback(v => {
    setOffsetFrom(v || 1);
  }, []);

  const onChangeOffset = useCallback(v => {
    setOffset(v || 1);
  }, []);

  const onChangeLateDay = useCallback(v => {
    setLateDay(v || 1);
  }, []);

  const onChangeSelected = useCallback(v => {
    setSelected(v.length !== 0 ? v : ['1']);
  }, []);

  const checkList = useMemo(() => {
    const disabled = currentRadio !== 7;
    const checks = [];
    for (let i = 1; i < 32; i++) {
      checks.push(
        <Col key={i} span={3}>
          <Checkbox disabled={disabled} value={i.toString()}>
            {i}
          </Checkbox>
        </Col>,
      );
    }
    return checks;
  }, [currentRadio, selected]);

  return (
    <RadioGroup name="radiogroup" value={currentRadio} onChange={onChangeRadio}>
      <Radio style={radioStyle} value={1}>
        每一日
      </Radio>

      <Radio style={radioStyle} value={2}>
        不指定
      </Radio>

      <Radio style={radioStyle} value={3}>
        周期从&nbsp;
        <InputNumber
          disabled={currentRadio !== 3}
          min={1}
          max={23}
          value={from}
          size="small"
          onChange={onChangeFrom}
          style={{ width: 100 }}
        />
        &nbsp;-&nbsp;
        <InputNumber
          disabled={currentRadio !== 3}
          min={1}
          max={23}
          value={to}
          size="small"
          onChange={onChangeTo}
          style={{ width: 100 }}
        />
        &nbsp;日，每日执行一次
      </Radio>

      <Radio style={radioStyle} value={4}>
        从&nbsp;
        <InputNumber
          disabled={currentRadio !== 4}
          min={1}
          max={23}
          value={offsetFrom}
          size="small"
          onChange={onChangeOffsetFrom}
          style={{ width: 100 }}
        />
        &nbsp;日开始， 每&nbsp;
        <InputNumber
          disabled={currentRadio !== 4}
          min={1}
          max={23}
          value={offset}
          size="small"
          onChange={onChangeOffset}
          style={{ width: 100 }}
        />
        &nbsp;日执行一次
      </Radio>

      <Radio style={radioStyle} value={5}>
        每月&nbsp;
        <InputNumber
          disabled={currentRadio !== 5}
          min={1}
          max={31}
          value={lateDay}
          size="small"
          onChange={onChangeLateDay}
          style={{ width: 100 }}
        />
        &nbsp;号最近的那个工作日
      </Radio>

      <Radio style={radioStyle} value={6}>
        本月最后一天
      </Radio>

      <Radio value={7}>
        指定
        <br />
        <CheckboxGroup value={selected} onChange={onChangeSelected}>
          <Row> {checkList}</Row>
        </CheckboxGroup>
      </Radio>
    </RadioGroup>
  );
}

export function ActionsTable(): JSX.Element {
    const { currentTeam } = useValues(teamLogic)
    const { actions, actionsLoading } = useValues(actionsModel({ params: 'include_count=1' }))
    const { loadActions } = useActions(actionsModel)
    const [searchTerm, setSearchTerm] = useState('')
    const [filterByMe, setFilterByMe] = useState(false)
    const { user } = useValues(userLogic)

    const columns: LemonTableColumns<ActionType> = [
        {
            title: 'Name',
            dataIndex: 'name',
            width: '30%',
            sorter: (a: ActionType, b: ActionType) => ('' + a.name).localeCompare(b.name),
            render: function RenderName(name, action: ActionType, index: number): JSX.Element {
                return (
                    <Link data-attr={'action-link-' + index} to={urls.action(action.id)} className="row-name">
                        {name || <i>Unnnamed action</i>}
                    </Link>
                )
            },
        },
        {
            title: 'Type',
            key: 'type',
            render: function RenderType(_, action: ActionType): JSX.Element {
                return (
                    <span>
                        {action.steps?.length ? (
                            action.steps.map((step) => (
                                <div key={step.id}>
                                    {(() => {
                                        let url = stripHTTP(step.url || '')
                                        url = url.slice(0, 40) + (url.length > 40 ? '...' : '')
                                        switch (step.event) {
                                            case '$autocapture':
                                                return 'Autocapture'
                                            case '$pageview':
                                                switch (step.url_matching) {
                                                    case 'regex':
                                                        return (
                                                            <>
                                                                Page view URL matches regex <strong>{url}</strong>
                                                            </>
                                                        )
                                                    case 'exact':
                                                        return (
                                                            <>
                                                                Page view URL matches exactly <strong>{url}</strong>
                                                            </>
                                                        )
                                                    default:
                                                        return (
                                                            <>
                                                                Page view URL contains <strong>{url}</strong>
                                                            </>
                                                        )
                                                }
                                            default:
                                                return (
                                                    <>
                                                        Event: <strong>{step.event}</strong>
                                                    </>
                                                )
                                        }
                                    })()}
                                </div>
                            ))
                        ) : (
                            <i>Empty – set this action up</i>
                        )}
                    </span>
                )
            },
        },
        createdByColumn() as LemonTableColumn<ActionType, keyof ActionType | undefined>,
        createdAtColumn() as LemonTableColumn<ActionType, keyof ActionType | undefined>,
        ...(currentTeam?.slack_incoming_webhook
            ? [
                  {
                      title: 'Webhook',
                      dataIndex: 'post_to_slack',
                      sorter: (a: ActionType, b: ActionType) => Number(a.post_to_slack) - Number(b.post_to_slack),
                      render: function RenderActions(post_to_slack): JSX.Element | null {
                          return post_to_slack ? <CheckOutlined /> : null
                      },
                  } as LemonTableColumn<ActionType, keyof ActionType | undefined>,
              ]
            : []),
        {
            width: 0,
            render: function RenderActions(_, action) {
                return (
                    <More
                        overlay={
                            <>
                                <LemonButton type="stealth" to={urls.action(action.id)} fullWidth>
                                    Edit
                                </LemonButton>
                                <LemonButton
                                    type="stealth"
                                    to={
                                        combineUrl(
                                            urls.insightNew({
                                                insight: InsightType.TRENDS,
                                                interval: 'day',
                                                display: ChartDisplayType.ActionsLineGraphLinear,
                                                actions: [
                                                    {
                                                        id: action.id,
                                                        name: action.name,
                                                        type: 'actions',
                                                        order: 0,
                                                    },
                                                ],
                                            })
                                        ).url
                                    }
                                    fullWidth
                                >
                                    Try out in Insights
                                </LemonButton>
                                <LemonSpacer />
                                <LemonButton
                                    type="stealth"
                                    style={{ color: 'var(--danger)' }}
                                    onClick={() =>
                                        deleteWithUndo({
                                            endpoint: api.actions.determineDeleteEndpoint(),
                                            object: action,
                                            callback: loadActions,
                                        })
                                    }
                                    fullWidth
                                >
                                    Delete action
                                </LemonButton>
                            </>
                        }
                    />
                )
            },
        },
    ]
    let data = actions
    if (searchTerm && searchTerm !== '') {
        data = searchActions(data, searchTerm)
    }
    if (filterByMe) {
        data = data.filter((item) => item.created_by?.uuid === user?.uuid)
    }

    return (
        <div data-attr="manage-events-table">
            <EventPageHeader activeTab={EventsTab.Actions} />
            <div>
                <div />
                <div className="tutorial-container">
                    <div className="t-element">
                        <div>
                            <img src={imgGrouping} alt="" />
                        </div>
                        <div>
                            <div className="title">Multiple grouping</div>
                            <div className="description">Group multiple sets of events into a single action.</div>
                        </div>
                    </div>
                    <div className="t-element">
                        <div>
                            <img src={imgStandardized} alt="" />
                        </div>
                        <div>
                            <div className="title">Clean &amp; standardized data</div>
                            <div className="description">
                                Keep your actions the same, even if your product or data changes.
                            </div>
                        </div>
                    </div>
                    <div className="t-element">
                        <div>
                            <img src={imgRetroactive} alt="" />
                        </div>
                        <div>
                            <div className="title">Retroactive</div>
                            <div className="description">
                                We'll retroactively update your actions to match any past events.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Input.Search
                placeholder="Search for actions"
                allowClear
                enterButton
                style={{ maxWidth: 600, width: 'initial', flexGrow: 1, marginRight: 12 }}
                onChange={(e) => {
                    setSearchTerm(e.target.value)
                }}
            />
            <Radio.Group buttonStyle="solid" value={filterByMe} onChange={(e) => setFilterByMe(e.target.value)}>
                <Radio.Button value={false}>All actions</Radio.Button>
                <Radio.Button value={true}>My actions</Radio.Button>
            </Radio.Group>
            <div className="mb float-right">
                <NewActionButton />
            </div>
            <LemonTable
                columns={columns}
                loading={actionsLoading}
                rowKey="id"
                pagination={{ pageSize: 100 }}
                data-attr="actions-table"
                dataSource={data}
                defaultSorting={{
                    columnKey: 'created_by',
                    order: -1,
                }}
                emptyState="The first step to standardized analytics is creating your first action."
            />
        </div>
    )
}

export function DemoApp() {
  const footerDataSource = [
    {
      confirmedCount: 50000,
      curedCount: 4500,
      deadCount: 1500,
      provinceName: '全国1月总计(mock)',
      updateTime: '2020-01-31',
    },
    {
      confirmedCount: 60000,
      curedCount: 3400,
      deadCount: 800,
      provinceName: '全国2月总计(mock)',
      updateTime: '2020-02-29',
    },
  ]

  const [hasHeader, setHasHeader] = useState(true)
  const [isStickyHeader, setIsStickyHeader] = useState(true)
  const [hasData, setHasData] = useState(true)
  const [hasFooter, setHasFooter] = useState(true)
  const [limitSize, setLimitSize] = useState(true)
  const [isStickyFooter, setIsStickyFooter] = useState(true)
  const [useOuterBorder, setUseOuterBorder] = useState(false)
  const [hasStickyScroll, setHasStickyScroll] = useState(true)
  const [hasCustomScrollbar, setHasCustomScrollbar] = useState(true)
  const [leftLock, setLeftLock] = useState(true)
  const [rightLock, setRightLock] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [useBigData, setUseBigData] = useState(false)
  const [useRotate, setUseRotate] = useState(false)
  const [useScale, setUseScale] = useState(false)
  const [cellCount, setCellCount] = useState(20)
  const [theme, setTheme] = useState('default')
  const [showControlGrid, toggle] = useReducer((s: boolean) => !s, true)

  const appDivRef = useRef<HTMLDivElement>()

  useEffect(() => {
    const appDiv = appDivRef.current
    const handle = setInterval(() => {
      requestAnimationFrame(() => {
        setCellCount(appDiv.querySelectorAll('td, th').length)
      })
    }, 500)

    return () => {
      clearInterval(handle)
    }
  }, [])

  let BaseTableComponent = BaseTable
  if (theme === 'default-dark') {
    BaseTableComponent = DarkBaseTable
  } else if (theme == 'antd') {
    BaseTableComponent = AntdBaseTable as any
  } else if (theme == 'antd-dark') {
    BaseTableComponent = AntdBaseTable as any
  } else if (theme === 'hippo') {
    BaseTableComponent = HippoBaseTable as any
  }

  const style1 = limitSize
    ? { overflow: 'auto', maxHeight: 400, maxWidth: 600, margin: '5vh auto' }
    : { marginTop: 'clamp(30px, 20vh, 100px)', marginBottom: 'clamp(100px, 100vh, 400px)' }

  const style2 = {
    transform: `rotate(${useRotate ? '20deg' : '0'}) scale(${useScale ? 0.85 : 1})`,
  }

  if (typeof document === 'undefined') {
    return null
  }

  return (
    <AppDivAppDiv ref={appDivRef} className={cx({ 'has-custom-scrollbar': hasCustomScrollbar })}>
      <div style={{ background: '#f2f2f2', padding: 16 }}>
        <Typography>
          <h4>
            ali-react-table 自定义表格结构示例
            <Button onClick={toggle} size="small" style={{ marginLeft: 8 }}>
              展开/收起控制面板
            </Button>
          </h4>
          <p>
            组件提供了丰富的选项用于调整表格的结构，部分结构可以通过 <code>props.xxx</code>{' '}
            快速调整；而其他结构需要通过覆盖表格的样式进行调整。
          </p>
        </Typography>

        {showControlGrid && (
          <div className="control-grid">
            <div className="item">
              <Switch checked={hasHeader} onChange={setHasHeader} />
              <code>props.hasHeader</code>
              <div>是否展示表头</div>
            </div>
            <div className="item">
              <Switch checked={isStickyHeader} onChange={setIsStickyHeader} />
              <code>props.isStickyHeader</code>
              <div>表头是否使用粘性定位</div>
            </div>
            <div className="item">
              <Switch checked={isStickyFooter} onChange={setIsStickyFooter} />
              <code>props.isStickyFooter</code>
              <div>表格页脚是否使用粘性定位</div>
            </div>
            <div className="item">
              <Switch checked={hasStickyScroll} onChange={setHasStickyScroll} />
              <code>props.hasStickyScroll</code>
              <div>表格是否包含横向粘性滚动条</div>
            </div>
            <div className="item">
              <Switch checked={useOuterBorder} onChange={setUseOuterBorder} />
              <code>props.useOuterBorder</code>
              <div>是否使用来自外层 div 的边框代替单元格的外边框</div>
            </div>
            <div className="item">
              <Switch checked={hasData} onChange={setHasData} />
              <code>props.dataSource=[...]</code>
              <div>表格是否有数据</div>
            </div>
            <div className="item">
              <Switch checked={hasFooter} onChange={setHasFooter} />
              <code>props.footerDataSource=[...]</code>
              <div>表格页脚是否有数据</div>
            </div>
            <div className="item">
              <Switch checked={limitSize} onChange={setLimitSize} />
              <div>
                将表格尺寸限制为 <code>600*400</code>
              </div>
            </div>
            <div className="item">
              <Switch checked={hasCustomScrollbar} onChange={setHasCustomScrollbar} />
              <div>使用自定义样式的滚动条</div>
              <div>（通过 styled-components 覆盖样式进行实现）</div>
            </div>
            <div className="item">
              <Switch checked={leftLock} onChange={setLeftLock} />
              <div>左侧锁列</div>
            </div>
            <div className="item">
              <Switch checked={rightLock} onChange={setRightLock} />
              <div>右侧锁列</div>
            </div>
            <div className="item">
              <Switch checked={isLoading} onChange={setIsLoading} />
              <div>数据加载动画</div>
            </div>
            <div className="item">
              <Switch checked={useBigData} onChange={setUseBigData} />
              <div>大数据量</div>
            </div>
            <div className="item">
              <Switch checked={useRotate} onChange={setUseRotate} />
              <div>
                <code>transform="rotate(20deg)"</code>
              </div>
            </div>
            <div className="item">
              <Switch checked={useScale} onChange={setUseScale} />
              <div>
                <code>transform="scale(0.85)"</code>
              </div>
            </div>
            <div className="item">
              <Radio.Group value={theme} onChange={(e) => setTheme(e.target.value)} size="small">
                <Radio.Button value="default">默认</Radio.Button>
                <Radio.Button value="default-dark">暗色</Radio.Button>
                <Radio.Button value="antd">antd</Radio.Button>
                <Radio.Button value="antd-dark">antd 暗色</Radio.Button>
                <Radio.Button value="hippo">盒马</Radio.Button>
              </Radio.Group>
              <div>表格主题</div>
            </div>
          </div>
        )}

        <div style={{ marginTop: '1rem' }}>
          <div>当前表格中单元格的数量：{cellCount} （包括 th 与 td，每隔 500ms 更新）</div>
        </div>
      </div>

      <BaseTableComponent
        className={cx('bordered', 'compact', { dark: theme.includes('dark') })}
        isStickyHeader={isStickyHeader}
        isStickyFooter={isStickyFooter}
        isLoading={isLoading}
        style={{ ...style1, ...style2 }}
        useOuterBorder={useOuterBorder}
        hasStickyScroll={hasStickyScroll}
        stickyScrollHeight={hasCustomScrollbar ? 10 : 'auto'}
        hasHeader={hasHeader}
        columns={[
          { code: 'provinceName', name: '省份', width: 150, lock: leftLock },
          { code: 'cityName', name: '城市', width: 150 },
          ...repeat<ArtColumn>(
            [
              { code: 'confirmedCount', name: '确诊', width: 100, render: amount, align: 'right' },
              { code: 'curedCount', name: '治愈', width: 100, render: amount, align: 'right' },
              { code: 'deadCount', name: '死亡', width: 100, render: amount, align: 'right' },
            ],
            useBigData ? 40 : 10,
          ),
          { code: 'updateTime', name: '更新时间', width: 150, lock: rightLock },
        ]}
        dataSource={hasData ? (useBigData ? repeat(dataSource, 5) : dataSource) : []}
        footerDataSource={hasFooter ? footerDataSource : []}
      />
    </AppDivAppDiv>
  )
}