@ant-design/icons#PlusOutlined TypeScript Examples

BtnTitle = ({value}: BtnTitleProps) => {
  const intl = useIntl();

  if (value == null || value.length === 0) {
    return (
      <span>
        <PlusOutlined />
        <FormattedMessage id='jmix.nestedEntityField.addEntities' />
      </span>
    );
  }

  return (
    <>
      {constructTitle(value, intl)}
    </>
  );
}

public render() {
    return (
      <div className={styles['array-component-container']}>
        { (this.props.value || []).map((item, index) => this.renderFormItem(item, index)) }
        <Button
          icon={<PlusOutlined />}
          onClick={() => {
            const value: Record<string, unknown>[] = [
              ...this.props.value || [],
              {},
            ];
            this.props.onChange?.(value);
          }}
        >
          添加
        </Button>
      </div>
    );
  }

export function ActionsList(): JSX.Element {
    const { allActions, sortedActions, allActionsLoading, searchTerm } = useValues(actionsLogic)
    const { setSearchTerm } = useActions(actionsLogic)

    const { newAction } = useActions(actionsTabLogic)

    return (
        <>
            <Input.Search
                allowClear
                autoFocus
                placeholder="Search"
                value={searchTerm}
                style={{
                    paddingBottom: '4px',
                }}
                onChange={(e) => setSearchTerm(e.target.value)}
            />
            <div className="actions-list">
                <Row className="actions-list-header">
                    <Button type="primary" size="small" onClick={() => newAction()} style={{ float: 'right' }}>
                        <PlusOutlined /> New Action
                    </Button>
                </Row>
                {true || (allActions.length === 0 && allActionsLoading) ? (
                    <div className="text-center mt mb">
                        <Spinner />
                    </div>
                ) : (
                    <ActionsListView actions={sortedActions} />
                )}
            </div>
        </>
    )
}

NewItem = () => {
  const history = useHistory();
  const { path } = useRouteMatch();
  const onClick = () => {
    history.push(`${path}/template/new`);
  };

  return (
    <PreviewContainer>
      <div className="newTemplate">
        <PlusOutlined style={{ fontSize: '40px' }} />
      </div>
      <div className="hoverItem alwaysActive">
        <div className="content">
          <Button onClick={onClick} size="large" type="primary" className="btn-choose">
            New Template
          </Button>
        </div>
      </div>
      <div>
        <img src={newTemplate} alt="img new template" />
      </div>
    </PreviewContainer>
  );
}

IconTest: FC = () => {
  const { elements, ref } = useElements();

  return (
    <TestLayout elements={elements}>
      <div id="icons" ref={ref}>
        <PlusOutlined />
      </div>
    </TestLayout>
  );
}

EditableLinkGroup: React.FC<EditableLinkGroupProps> = (props) => {
  const { links, linkElement, onAdd } = props;
  return (
    <div className={styles.linkGroup}>
      {links.map((link) =>
        createElement(
          linkElement,
          {
            key: `linkGroup-item-${link.id || link.title}`,
            to: link.href,
            href: link.href,
          },
          link.title,
        ),
      )}
      <Button size="small" type="primary" ghost onClick={onAdd}>
        <PlusOutlined /> 添加
      </Button>
    </div>
  );
}

TaskList: FC<{ keyName: string }> = memo(({ keyName }) => {
  return (
    <>
      <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, 'check']}
                  style={{ marginBottom: '16px' }}
                  valuePropName="checked"
                >
                  <Checkbox></Checkbox>
                </Form.Item>
                <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>
    </>
  );
})

PanelList: React.FC<PanelListProps> = ({ metrics }) => {
  const [panelList, setPanelList] = useState<PanelMeta[]>([{ id: generateID(), defaultPromQL: decodeURIComponent(getUrlParamsByName('promql')) }]);
  // 添加一个查询面板
  function addPanel() {
    setPanelList((a) => [
      ...panelList,
      {
        id: generateID(),
      },
    ]);
  }

  // 删除指定查询面板
  function removePanel(id) {
    setPanelList(panelList.reduce<PanelMeta[]>((acc, panel) => (panel.id !== id ? [...acc, { ...panel }] : acc), []));
  }

  return (
    <>
      {panelList.map(({ id, defaultPromQL = '' }) => (
        <Panel key={id} metrics={metrics} defaultPromQL={defaultPromQL} removePanel={() => removePanel(id)} />
      ))}
      <div className='add-prometheus-panel'>
        <Button size='large' onClick={addPanel}>
          <PlusOutlined />
          新增一个查询面板
        </Button>
      </div>
    </>
  );
}

ResidentActions: React.FC<IResidentActionsProps> = (props) => {
    const intl = useIntl()
    const { minified } = props
    const ResidentAppealMessage = intl.formatMessage({ id: 'ResidentAppeal' })

    return (
        <Dropdown
            overlay={ResidentAppealDropdownOverlay}
            placement={minified ? 'bottomRight' : 'bottomCenter'}
            trigger={RESIDENT_ACTIONS_OPEN_DROPDOWN_TRIGGERS}
        >
            {
                minified
                    ? (<Button type={'sberGradient'} icon={<PlusOutlined />} shape={'circle'}/>)
                    : (
                        <Button type={'sberGradient'} icon={<PlusOutlined />}>
                            {ResidentAppealMessage}
                        </Button>
                    )
            }
        </Dropdown>
    )
}

ScriptLibrary: React.FC = () => {
  const enterpriseScriptRef = useRef<any>({})
  return (
    <div className={styles.scriptLibrary}>
      <PageContainer
        fixedHeader
        header={{
          title: '企业话术库',
        }} extra={[
        <Button
          type="dashed"
          icon={<PlusOutlined style={{fontSize: 16, verticalAlign: '-3px'}}/>}
          style={{marginRight: 6}}
          onClick={() => {
            enterpriseScriptRef.current.createEnterpriseScript()
          }}
        >
          新建话术
        </Button>
      ]}

      >
        <EnterpriseScript
          ref={enterpriseScriptRef}
        />
      </PageContainer>

    </div>
  );
}

export default function Dashboard() {
  return (
    <PageHeader
      ghost={true}
      title="Dashboard"
      extra={[
        <Link to="/create">
          <Button icon={<PlusOutlined />} type="primary">
            New survey
          </Button>
        </Link>,
      ]}
    >
      <DashboardHelper />
    </PageHeader>
  );
}

export function AddButton({
  dataSource: { items, icon, callback },
}: AddButtonProps) {
  return items.length < 2 ? (
    <Tooltip title={items[0].text} placement="bottom">
      <ToolbarButton
        size="small"
        icon={icon || <PlusOutlined />}
        onClick={callback}
      />
    </Tooltip>
  ) : (
    <Dropdown
      getPopupContainer={triggerNode =>
        triggerNode.parentElement as HTMLElement
      }
      trigger={['click']}
      overlay={
        <Menu onClick={callback}>
          {items.map(({ key, text }) => (
            <Menu.Item key={key}>{text}</Menu.Item>
          ))}
        </Menu>
      }
    >
      <ToolbarButton size="small" icon={icon || <PlusOutlined />} />
    </Dropdown>
  );
}

/**
 * Component to add participants to an empty Question Group
 */
export default function EmptyGroupList({
  onClick,
}: {
  onClick: () => void;
}): ReactElement {
  return (
    <EmptyGroupListContainer
      onClick={onClick}
      selected={false}
      data-cy={`queue-list-item-question-group`}
    >
      <EmptyGroupListText>Add Students</EmptyGroupListText>
      <PlusOutlined style={{ paddingRight: "16px" }} />
    </EmptyGroupListContainer>
  );
}

NewCollectionCell: React.FunctionComponent<Props> = ({ onCreate }) => {
  return (
    <TableData>
      <Button type="primary" ghost onClick={onCreate}>
        <PlusOutlined />
        New Collection
      </Button>
    </TableData>
  );
}

DownloadManagerMenu = ({ onCreate, onClear }: DownloadManagerMenuProps) => {
  return (
    <div className={styles['menu-container']}>
      <Button type='text' icon={<PlusOutlined />} onClick={onCreate}>
        新建下载
      </Button>
      <Button type='text' icon={<DeleteOutlined />} onClick={onClear}>
        清空已完成
      </Button>
    </div>
  )
}

/**
 * 注册【新增】事件
 */
registerAction('add', (props, record, searchTable) => {
  return {
    type: 'primary',
    icon: <PlusOutlined />,
    onClick: () => {
      searchTable.formRef?.current?.add(
        { ...props.params, ...record },
        {
          onSuccess: (res: any) => {
            success(props.successMsg || props.children + locale.action.success)
            searchTable.tableRef.current.refresh()
            // 请求完成回调
            if (props.onFinish) {
              props.onFinish(res)
            }
          }
        }
      )
    },
    ...props
  }
})

EditableTags: React.FC<EditableTagsProps> = (p) => {
    const [inputVisible, setInputVisible] = useState(false);
    const [value, setValue] = useState("");
    const confirmInput = () => {
        setInputVisible(false);
        setValue("");
        p.onCreated && p.onCreated(value)
    };
    const inputRef = useRef<Input>(null);

    useEffect(() => {
        if (inputVisible) {
            inputRef.current?.focus()
        }
    }, [inputVisible]);

    return <>
        <Input
            hidden={!inputVisible}
            ref={inputRef}
            className={"tag-input"}
            size={"small"}
            value={value}
            onChange={e => setValue(e.target.value)}
            onBlur={e => confirmInput()}
            onPressEnter={e => confirmInput()}
        /> {!inputVisible ? <Tag
        className={"site-tag-plus"}
        onClick={e => {
            setInputVisible(!inputVisible)
        }}
    ><span><PlusOutlined/> Add Tag</span></Tag> : ""}
    </>
}

EntityFilter = ({entityName, onFilterApply, className}: EntityFilterProps) => {
  const intl = useIntl();
  const [form] = useForm();
  const metadata = useMetadata();
  const [selectedProperty, setSelectedProperty] = useState<string>();
  const [availableProperties, setAvailableProperties] = useState<string[]>(getAvailableProperties(metadata.entities, entityName));

  const availablePropertiesOptions = availableProperties.map(propertyName => ({
    label: <Msg entityName={entityName} propertyName={propertyName}/>,
    value: propertyName,
  }));

  const onAddProperty = (add: (defaultValue: JmixEntityFilter) => void) => {
    add({[selectedProperty!]: {_eq: ""}});
    setSelectedProperty(undefined);
  };

  const onFilterChange = (changedFields: any) => {
    const filter: (JmixEntityFilter[] | undefined) = changedFields.find((field: any) => field?.name[0] === "filter")?.value;
    if (Array.isArray(filter)) {
      setAvailableProperties(getAvailableProperties(metadata.entities, entityName, getProperties(filter)));
    }
  }

  return (
    <Form
      validateMessages={createAntdFormValidationMessages(intl)}
      layout="vertical"
      form={form}
      className={className}
      onFieldsChange={onFilterChange}
    >
      <Form.List name="filter">
        {((fields, {add, remove}) => (
          <Space direction="vertical" size="middle">
            <Space direction="horizontal" align="end">
              <Form.Item label="Filters" style={{marginBottom: 0}}>
                <Select
                  showSearch
                  style={{width: 200}}
                  placeholder={intl.formatMessage({id: "jmix.entityFilter.selectFilter"})}
                  value={selectedProperty}
                  onSelect={setSelectedProperty}
                  options={availablePropertiesOptions}
                />
              </Form.Item>
              <Button
                icon={<PlusOutlined/>}
                disabled={selectedProperty === undefined}
                onClick={() => onAddProperty(add)}
              >
                {intl.formatMessage({id: "jmix.entityFilter.addFilter"})}
              </Button>
            </Space>
            {fields.map(field => {
              const propertyName = getProperty(form.getFieldValue(["filter", field.name]));
              return (
                <Form.Item
                  key={field.key}
                  label={<Msg entityName={entityName} propertyName={propertyName}/>}
                  style={{marginBottom: 0}}
                >
                  <Space direction="horizontal">
                    <Form.Item name={[field.name, propertyName, "_eq"]} noStyle>
                      <Input placeholder={intl.formatMessage({id: "jmix.entityFilter.enterFilterValue"})}/>
                    </Form.Item>
                    <CloseOutlined onClick={() => remove(field.name)}/>
                  </Space>
                </Form.Item>
              )
            })}
            <Button type="primary" onClick={() => onFilterApply?.(form.getFieldValue("filter"))}>
              {intl.formatMessage({id: "jmix.entityFilter.applyFilter"})}
            </Button>
          </Space>
        ))}
      </Form.List>
    </Form>
  )
}

export function NewActionButton(): JSX.Element {
    const [visible, setVisible] = useState(false)
    const [appUrlsVisible, setAppUrlsVisible] = useState(false)

    return (
        <>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)} data-attr="create-action">
                New Action
            </Button>
            <Modal
                visible={visible}
                style={{ cursor: 'pointer' }}
                onCancel={() => {
                    setVisible(false)
                    setAppUrlsVisible(false)
                }}
                title="Create new action"
                footer={[
                    appUrlsVisible && (
                        <Button key="back-button" onClick={() => setAppUrlsVisible(false)}>
                            Back
                        </Button>
                    ),
                    <Button
                        key="cancel-button"
                        onClick={() => {
                            setVisible(false)
                            setAppUrlsVisible(false)
                        }}
                    >
                        Cancel
                    </Button>,
                ]}
            >
                {!appUrlsVisible && (
                    <Row gutter={2} justify="space-between">
                        <Col xs={11}>
                            <Card
                                title="Inspect element on your site"
                                onClick={() => setAppUrlsVisible(true)}
                                size="small"
                            >
                                <div style={{ textAlign: 'center', fontSize: 40 }}>
                                    <SearchOutlined />
                                </div>
                            </Card>
                        </Col>
                        <Col xs={11}>
                            <Card
                                title="From event or pageview"
                                onClick={() => {
                                    router.actions.push(urls.createAction())
                                }}
                                size="small"
                            >
                                <div style={{ textAlign: 'center', fontSize: 40 }} data-attr="new-action-pageview">
                                    <EditOutlined />
                                </div>
                            </Card>
                        </Col>
                    </Row>
                )}
                {appUrlsVisible && <AuthorizedUrlsTable />}
            </Modal>
        </>
    )
}

export default function ProgramDetails() {
  const router = useRouter()
  const { id } = router.query
  let workspaceId
  let programId
  if (id) [workspaceId, programId] = id as string[]
  const programQuery = useQuery(
    ['program', programId],
    () =>
      axios.get(`/workspaces/${workspaceId}/programs/${programId}`),
    { retry: 0, enabled: Boolean(workspaceId && programId) },
  )
  const [isAddProjectVisible, setIsAddProjectVisible] =
    useState(false)
  const hideAddProjectBtn = () => setIsAddProjectVisible(false)
  const program = programQuery?.data?.data?.program
  const ProgramTitle = (
    <PageHeading
      title={program?.name}
      description={program?.description}
      renderEdit={() => program && <EditProgram program={program} />}
    />
  )
  return (
    <AppLayout
      title={ProgramTitle}
      selectedKey={`program_${program?.programId}`}
    >
      {programQuery.isLoading ? (
        <Skeleton />
      ) : (
        <ProgramDetailsLayout>
          {programQuery.isError ? (
            <Result
              status="500"
              title="Program can not be found"
              subTitle="Sorry, something went wrong."
              extra={<BackToHome />}
            />
          ) : (
            <MainContent direction="vertical" size={16}>
              <Button
                onClick={() => setIsAddProjectVisible(true)}
                icon={<PlusOutlined />}
              >
                Add Project
              </Button>
              <OTTable
                program={program}
                isAddProjectVisible={isAddProjectVisible}
                hideAddProjectBtn={hideAddProjectBtn}
              />
            </MainContent>
          )}
        </ProgramDetailsLayout>
      )}
    </AppLayout>
  )
}

static note2TreeDatanote({
    noteId,
    noteDict,
    showVaultName,
    applyNavExclude = false,
  }: {
    noteId: string;
    noteDict: NotePropsByIdDict;
    showVaultName?: boolean;
    applyNavExclude: boolean;
  }): DataNode | undefined {
    const note = noteDict[noteId];
    if (_.isUndefined(note)) {
      return undefined;
    }
    if (applyNavExclude && note.custom?.nav_exclude) {
      return undefined;
    }

    const vname = VaultUtils.getName(note.vault);
    let icon;
    if (note.schema) {
      icon = <BookOutlined />;
    } else if (note.fname.toLowerCase() === TAGS_HIERARCHY_BASE) {
      icon = <NumberOutlined />;
    } else if (note.stub) {
      icon = <PlusOutlined />;
    }

    let title: any = note.title;
    if (showVaultName) title = `${title} (${vname})`;

    if (note.fname.startsWith(TAGS_HIERARCHY)) {
      title = (
        <span>
          <NumberOutlined />
          {title}
        </span>
      );
    }

    return {
      key: note.id,
      title,
      icon,
      children: TreeUtils.sortNotesAtLevel({
        noteIds: note.children,
        noteDict,
        reverse: note.custom?.sort_order === "reverse",
      })
        .map((noteId) =>
          TreeViewUtils.note2TreeDatanote({
            noteId,
            noteDict,
            showVaultName,
            applyNavExclude,
          })
        )
        .filter(isNotUndefined),
    };
  }

SortableFormData: React.FC<Props> = () => {
  const { onChangeRunningData, runningData, dataPath } = useContext(FormModuleContext)
  const list = get(runningData, dataPath);

  const onSortEnd = useCallback(
    ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
      if (!runningData) return;
      const sortList = cloneDeep(list);
      const res = arrayMove(sortList, oldIndex, newIndex);
      const newData = set(runningData, dataPath, res)
      onChangeRunningData?.(newData)
    },
    [dataPath, list, onChangeRunningData, runningData],
  )

  const onMinus = useCallback(
    (index) => {
      if (!runningData) return;
      const sortList = cloneDeep(list);
      const res = sortList.filter((item: any, elIndex: number) => (index !== elIndex))
      const newData = set(runningData, dataPath, res)
      onChangeRunningData?.(newData)
    },
    [dataPath, list, onChangeRunningData, runningData],
  )

  const onPlus = useCallback(
    () => {
      if (!runningData) return;
      const sortList = cloneDeep(list);
      sortList.push({
        "title": "名称",
        "width": "100%"
      });
      const newData = set(runningData, dataPath, sortList)
      onChangeRunningData?.(newData)
    },
    [dataPath, list, onChangeRunningData, runningData],
  )

  return (
    <div>
      <Row>
        <Col><Button onClick={onPlus} icon={<PlusOutlined />}>增加项</Button></Col>
      </Row><br />
      <FormData onSortEnd={onSortEnd} onMinus={onMinus} list={list} />
    </div>
  )
}

VisualFormItem: React.FC<IVisualFormItemProps> = (props) => {
  const { type, desc } = props;

  return (
    <React.Fragment>
      <div className={styles.itemHeader}>
        <span className={styles.itemTitleText}>{type}</span>
        <span className={styles.itemDescText}>{desc}</span>
      </div>
      <Form.List name={type}>
        {(fields, { add, remove }) => (
          <React.Fragment>
            {fields.map((field) => (
              <Space key={field.key} align={'baseline'}>
                <Form.Item
                  {...field}
                  label={'key'}
                  name={[field.name, 'key']}
                  fieldKey={[field.fieldKey, 'key']}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  {...field}
                  label={'value'}
                  name={[field.name, 'value']}
                  fieldKey={[field.fieldKey, 'value']}
                >
                  <Input />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}
            <Form.Item>
              <Button
                block={true}
                type={'dashed'}
                icon={<PlusOutlined />}
                onClick={() => add()}
              >
                新增
              </Button>
            </Form.Item>
          </React.Fragment>
        )}
      </Form.List>
    </React.Fragment>
  );
}

index = () => {
    const actionRef = useRef<ActionType>();
    return (
        <PageContainer>
            <Card>
                <ProTable<GithubIssueItem>
                    columns={columns}
                    actionRef={actionRef}
                    request={async (params = {}, sort, filter) => {
                        console.log(sort, filter);
                        return request<{
                            data: GithubIssueItem[];
                        }>('https://proapi.azurewebsites.net/github/issues', {
                            params,
                        });
                    }}
                    editable={{
                        type: 'multiple',
                    }}
                    columnsState={{
                        persistenceKey: 'pro-table-singe-demos',
                        persistenceType: 'localStorage',
                    }}
                    rowKey="id"
                    search={{
                        labelWidth: 'auto',
                    }}
                    form={{
                        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                        syncToUrl: (values, type) => {
                            if (type === 'get') {
                                return {
                                    ...values,
                                    created_at: [values.startTime, values.endTime],
                                };
                            }
                            return values;
                        },
                    }}
                    pagination={{
                        pageSize: 5,
                    }}
                    dateFormatter="string"
                    headerTitle="高级表格"
                    toolBarRender={() => [
                        <Button key="button" icon={<PlusOutlined />} type="primary">
                            新建
                        </Button>,
                        <Dropdown key="menu" overlay={menu}>
                            <Button>
                                <EllipsisOutlined />
                            </Button>
                        </Dropdown>,
                    ]}
                />
            </Card>
        </PageContainer>
    );
}

render () {
        const { 
            total, 
            pageNo, 
            pageSize, 
            loading, 
            dataSource, 
            columns, 
            visible, 
            title,
            textBtn,
            currentRowData 
        } = this.state;
        const { Option } = Select;

        return (
            <DocumentTitle title={'首页'}>
                <div className="home-container">
                    <Header curActive={'active'} />

                    <div className="content clearfix">
                        <div className="list">
                            <h2>任务列表</h2>
                            <div className="list-right">
                                <Space size="middle">
                                    <Select size="large" onChange={ this.handleChange } style={{ width: 160 }} allowClear placeholder="请筛选任务状态">
                                        <Option value=''>全部</Option>
                                        <Option value={ 0 }>待办</Option>
                                        <Option value={ 1 }>完成</Option>
                                        <Option value={ 2 }>删除</Option>
                                    </Select>
                                    <Button type="primary" size="large" onClick={ this.addTask }><PlusOutlined /> 添加任务</Button>
                                </Space>
                            </div>
                        </div>
                        
                        <Table 
                            bordered
                            rowKey={ record => record.id  } 
                            dataSource={ dataSource } 
                            columns={ columns }
                            loading={ loading }
                            pagination={ false } 
                        />
                        <Pagination
                            className="pagination"
                            total={ total }
                            style={{ display: loading && total === 0 ? 'none' : '' }}
                            showTotal={total => `共 ${total} 条数据`}
                            onChange={ this.changePage }
                            current={ pageNo }
                            showSizeChanger={ false }
                            defaultPageSize={ pageSize }
                            hideOnSinglePage={ false }
                        />
                    </div>

                    <Footer />

                    <AddEditTaskForm
                        title={ title }
                        textBtn={ textBtn } 
                        visible={ visible }
                        currentRowData={ currentRowData }
                        onSubmitDrawer={ this.onSubmit }
                        onCloseDrawer={ this.onClose }
                    />
                   
                </div>
            </DocumentTitle>
        )
    }

ArrayComponents = {
  CircleButton,
  TextButton,
  AdditionIcon: () => <PlusOutlined />,
  RemoveIcon: () => <DeleteOutlined />,
  MoveDownIcon: () => <DownOutlined />,
  MoveUpIcon: () => <UpOutlined />
}

Children = (props: Props) => {

    const childLayout = [
        { i: 'd', x: 6, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
        { i: 'e', x: 8, y: 0, w: 1, h: 2 }
    ]
    const [edit, setEdit] = useState<boolean>(false);

    const [layout, setLayout] = useState<any[]>(childLayout);

    return (
        <Fragment>

            <GridLayout
                className="layout"
                layout={layout}
                cols={12}
                rowHeight={30}
                isDraggable={edit}
                isResizable={edit}
                width={1200}>
                {
                    layout.map(i => <div key={i.i} style={{ backgroundColor: '#69E2D4' }}>{i.i}</div>)
                }
            </GridLayout>
            <div className={styles.layoutOption}>
                {edit ?
                    <div style={{ float: 'right' }}>

                        <Tooltip title="新增" style={{ float: 'right' }}>
                            <Button
                                type="danger"
                                shape="circle"
                                size="large"
                                onClick={() => {
                                    layout.push({ i: Math.random(), x: 8, y: 7, w: 4, h: 4 })
                                    setLayout([...layout]);
                                }}
                            >
                                <PlusOutlined />
                            </Button>
                        </Tooltip>
                        <div style={{ float: 'right', marginLeft: 10 }}>
                            <Tooltip title="保存" >
                                <Button
                                    type="primary"
                                    shape="circle"
                                    size="large"
                                    onClick={() => {
                                        setEdit(false)
                                    }}
                                >
                                    <SaveOutlined />
                                </Button>
                            </Tooltip>
                        </div>
                    </div> :
                    <div style={{ float: 'right', textAlign: 'center' }}>
                        <Tooltip title="编辑" >
                            <Button
                                type="danger"
                                shape="circle"
                                size="large"
                                onClick={() => {
                                    setEdit(true)
                                    props.edit()
                                }}
                            >
                                <EditOutlined />
                            </Button>
                        </Tooltip>
                    </div>
                }
            </div>
        </Fragment >
    )
}

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 ImageUpload(props: IProps) {
  const { value, onChange } = props;
  const handleDelete = function(){
    onChange('');
  };

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const customRequest = async function(options:any){
    const fileName = `${uuidv4()}.png`;
    await ossClient.put(`design/${fileName}`, options.file);
    onChange(`https://scorpio-design.lxzyl.cn/design/${fileName}`);
    options.onSuccess(null, options.file);
  };

  return (
    <div className="picture-uploader">
      <Upload
        listType="picture-card"
        showUploadList={false}
        // onChange={handleChange}
        customRequest={customRequest}
      >
        {value ? (
          <div className="picture-uploader-img-container">
            <img src={value} alt="avatar" style={{ width: '100%' }} />
          </div>
        ) : uploadButton}
      </Upload>
      {
        value && <div className="delete-img" onClick={handleDelete}><CloseOutlined /></div>
      }
    </div>

  );
}