antd#Icon TypeScript Examples

CouponTag: FC<PropTypes> = props => {
  const { label, color, tooltip } = props;

  return (
    <Tooltip title={tooltip} placement="bottom">
      <Tag color={color}>
        {label}
        <Icon
          type="question-circle"
          theme="twoTone"
          style={{ marginLeft: 3 }}
        />
      </Tag>
    </Tooltip>
  );
}

function renderMenu(
	config: any,
	key: string,
	enabled: string[],
	funMap: any,
	style: any,
) {
	const { title, icon, shortcutKey, props = {}, type } = config
	if (!isString(icon)) return createElement(icon, { key, ...props })
	const disabledColor = '#A4A4A4'
	const enabledColor = '#000'
	const isEnabled = enabled.includes(title)
	let func = undefined
	if (isEnabled) {
		func = funMap[title] || type
	}
	return (
		<Tooltip key={key} mouseEnterDelay={1} title={shortcutKey}>
			<div
				style={{ color: isEnabled ? enabledColor : disabledColor }}
				className={styles['icon-container']}
				onClick={func}
				key={key}
			>
				<Icon style={{ fontSize: 18 }} type={icon} />
				<span>{title}</span>
			</div>
		</Tooltip>
	)
}

GantIcon = (props: GantIconProps) => {
    const [RenderIcon, setRenderIcon] = useState(() => dynamicIcon)
    useEffect(() => {
        chain.set(props.type, setRenderIcon)
        return () => {
            chain.delete(props.type)
        };
    }, [RenderIcon, props.type])
    const icon = useMemo(() => {
        if (typeof props.type === 'string') {
            if (props.type.startsWith('http')) {
                return (
                    <Icon component={() => (<img src={props.type} alt="icon" className="ant-pro-sider-menu-icon" />)} />
                );
            }
            if (props.type.startsWith(props.perfix)) {
                return <RenderIcon {...props} type={props.type} />;
            }
            return <Icon {...props} type={props.type} />;
        }
        return <></>;
    }, [props.type, RenderIcon])
    return icon
}

componentDidMount() {
    this.getNotice();
    this.ws = getWebsocket(
      `notification`,
      `/notifications`,
      {}
    ).pipe(
      throttleTime(2000),
    ).subscribe(
      (resp: any) => {
        this.getNotice();
        notification.open({
          message: resp?.payload?.topicName,
          description: resp?.payload?.message,
          key: resp.payload.id,
          top: 60,
          btn: <Button
            type="primary"
            onClick={() => {
              this.service
                .read(resp.payload.id)
                .subscribe(() => {
                  notification.close(resp.payload.id)
                  this.getNotice();
                });
            }}
          >标记已读</Button>,
          icon: <Icon type="exclamation-circle" style={{ color: '#E23D38' }} />,
        });
      }
    );

  }

render() {
        let totalPath: string = this.props.location.pathname;
        let prefixArr: RegExpMatchArray = totalPath.match(/^\/[^/]*/) || [];

        return (
            <Spin spinning={false} style={{ maxHeight: window.innerHeight }}>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider collapsible>
                        <div className="logo">金融</div>
                        <Menu theme="dark"
                              defaultSelectedKeys={[ '/' ]}
                              defaultOpenKeys={[ '/Asset', '/Funder' ]}
                              mode="inline"
                              selectedKeys={[ prefixArr[0] ]}
                        >
                            <Menu.Item key={'/'}>
                                <Icon type="book"/>
                                <span>首页</span>
                                <Link to="/"></Link>
                            </Menu.Item>

                            <SubMenu key="/page" title={<span><Icon type="book"/>测试</span>}>
                                <Item key="/Details">
                                    <span>详情信息</span>
                                    <Link to="/Details"></Link>
                                </Item>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header style={{ background: '#fff', textAlign: 'center' }}>
                            <h1>金融</h1>
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Switch>
                                {/* 首页 */}
                                <Route exact path="/" component={Home}/>

                                {/* 对账管理 */}
                                <Route path="/Details" component={Details}/>

                            </Switch>
                        </Content>
                    </Layout>

                </Layout>
            </Spin>
        )
    }

ProductCard: FC<PropTypes> = props => {
  const { Meta } = Card;
  const { id, title, coverImage, price } = props.product;
  const { onClick } = props;
  const [carted, setCarted] = useState<boolean>(false);

  useEffect(() => {
    if (storageService.checkCart(id)) {
      setCarted(true);
    }
  }, [onClick]);

  const handleIconClick = useCallback(
    (id: ProductModel['id']) => {
      onClick(id);
      if (storageService.checkCart(id)) {
        setCarted(true);
      } else {
        setCarted(false);
      }
    },
    [onClick],
  );

  return (
    <Card
      style={{ width: 320, marginBottom: 10 }}
      cover={
        <div style={{ overflow: 'hidden', width: 320, height: 180 }}>
          <img
            alt={title}
            src={coverImage}
            style={{ width: '100%', height: 'auto' }}
          />
        </div>
      }
      actions={[
        <span>
          <PriceLabel value={price} strong={true} />
        </span>,
        <span
          onClick={() => handleIconClick(id)}
          style={carted ? { color: '#1890ff', fontWeight: 'bold' } : {}}
        >
          <Icon
            type="shopping-cart"
            style={{
              fontSize: '20px',
              marginRight: '4px',
            }}
          />
          {carted ? '빼기' : '담기'}
        </span>,
      ]}
      hoverable={true}
    >
      <Tooltip placement="bottom" title={title}>
        <Meta title={title} />
      </Tooltip>
    </Card>
  );
}

function SwitchPlatform(props: SwitchPlatformPropsType) {
	const { menus } = props
	const [isMobile, setIsMobile] = useState(false)
	const [mobileModel, setMobileModel] = useState(Object.keys(menus)[0])
	const [isVertical, setIsVertical] = useState(true)

	useEffect(() => {
		const size = isMobile ? [...menus[mobileModel]] : ['100%', '100%']
		!isVertical && size.reverse()
		changePlatform({
			isMobile,
			size,
		})
	}, [isMobile, isVertical, mobileModel])

	const renderMenu = useCallback(() => {
		return (
			<Menu
				selectedKeys={[mobileModel]}
				onClick={({ key }: any) => setMobileModel(key)}
			>
				{map(menus, (_, key) => {
					return <MenuItem key={key}>{key}</MenuItem>
				})}
			</Menu>
		)
	}, [mobileModel])

	const dropProps = isMobile ? {} : { visible: false }
	return (
		<div className={styles['switch-container']}>
			<Dropdown
				overlay={useMemo(() => renderMenu(), [mobileModel])}
				{...dropProps}
				trigger={['hover']}
			>
				<div
					className={styles['switch-platform']}
					onClick={() => setIsMobile(!isMobile)}
				>
					<Icon
						style={{ fontSize: 18 }}
						type={isMobile ? 'android' : 'windows'}
					/>
					<span>{isMobile ? 'mobile' : 'PC'}</span>
				</div>
			</Dropdown>
			{isMobile && (
				<Icon
					onClick={() => setIsVertical(!isVertical)}
					style={{ fontSize: 20 }}
					type={'sync'}
				/>
			)}
		</div>
	)
}

renderText = <P extends any>(getText?: GetText<P>) => (props) => {
  const { setEdit, allowEdit,emptyText = '暂无' } = props;

  const TextNode = React.memo(() => {
    const text = getText ? getText(props) : props.value;
    if (emptyTextArray.includes(text)) {
      return <span className={'gant-compose-noContent'}>{emptyText}</span>
    }
    return text
  })

  const Pen = React.memo(
    () => {
      let pen = null
      if (allowEdit) {
        pen = (
          <span className={'gant-compose-editPen'} onClick={() => setEdit(EditStatus.EDIT)}>
            <Icon type="edit" />
          </span>
        )
      }
      return pen
    }
  )

  const style: React.CSSProperties = {
    width: "100%"
  }
  if (allowEdit) {
    style.paddingRight = 15
  }

  return (
    <div className={classnames('gant-compose-readWrapper')} style={style}>
      <TextNode />
      <Pen />
    </div>
  )

}

AvatarDropdown: React.FC<GlobalHeaderRightProps> = props => {
  const onMenuClick = (event: ClickParam) => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }
    router.push(`/account/${key}`);
  };

  const [user, setUser] = useState<any>({});
  const service = new Service('user/detail');

  const {
    currentUser = {
      avatar: user.avatar || '',
      name: '',
    },
  } = props;

  useEffect(() => {
    const u = service.get().subscribe(resp => {
      setUser(resp);
      localStorage.setItem('user-detail', JSON.stringify(resp));
      // localStorage.setItem('tenants-admin', resp.tenants[0]?.adminMember);
    });
    return () => {
      u.unsubscribe();
    };
  }, [currentUser]);

  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {/* <Menu.Item key="center">
          <Icon type="user" />
            个人中心
        </Menu.Item> */}
      <Menu.Item key="settings">
        <Icon type="setting" />
        个人设置
      </Menu.Item>
      <Menu.Divider />

      <Menu.Item key="logout">
        <Icon type="logout" />
        退出登录
      </Menu.Item>
    </Menu>
  );
  return currentUser && currentUser.name ? (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={user.avatar} alt="avatar" />
        <span className={styles.name}>{currentUser.name}</span>
      </span>
    </HeaderDropdown>
  ) : (
    <Spin
      size="small"
      style={{
        marginLeft: 8,
        marginRight: 8,
      }}
    />
  );
}

public render() {
    const { source } = this.props;
    const { copied } = this.state;
    if (source === null) {
      return <EmptySourceCard />;
    } else {
      return (
        <Link to={`/sources/${source.id}`}>
          <StyledCard
            id={`source-${source.id}`}
            onMouseEnter={this.onMouseEnter}
            onMouseLeave={this.onMouseLeave}
          >
            <div style={{ flexShrink: 0 }}>
              <SourceIcon
                source={source.sourceDef.name}
                height={theme.iconSize.large}
                width={theme.iconSize.large}
              />
            </div>
            <Content>
              <Flex flexDirection="row" spaceBetween>
                <LabelDiv>{source.name}</LabelDiv>
              </Flex>
              {source.enabled && (
                <Flex flexDirection="row" spaceBetween>
                  <div>
                    <Check />
                    <EnabledText color={theme.color.green}>Enabled</EnabledText>
                  </div>
                  {copied ? (
                    <Text color={theme.color.grey300}>Write key copied</Text>
                  ) : null}
                </Flex>
              )}
              {!source.enabled && (
                <>
                  <Text color={theme.color.grey300}>Disabled</Text>
                </>
              )}
              <Flex
                spaceBetween
                className="m-h-sm"
                onClick={this.copyText}
                title="click to copy"
                style={{ minWidth: '300px' }}
              >
                <Text color={theme.color.grey300}>
                  Write key {source.writeKey}
                </Text>
                <div className="p-l-xs">
                  <Icon type="copy" style={{ color: theme.color.grey300 }} />
                </div>
              </Flex>
            </Content>
            <Flex
              flexDirection="row"
              alignItems="flex-end"
              style={{
                width: '1px',
                paddingRight: '35px',
                backgroundColor: 'red',
              }}
              id={`fake-source-${source!.id}`}
            />
          </StyledCard>
        </Link>
      );
    }
  }

export default function useRightContent(
  runtimeLayout: ILayoutRuntimeConfig,
  loading: boolean,
  initialState: any,
) {
  const rightContentRender = useCallback(() => {
    if (runtimeLayout.rightRender) {
      return runtimeLayout.rightRender(initialState);
    }

    const menu = (
      <Menu className="umi-plugin-layout-menu">
        <Menu.Item key="logout" onClick={runtimeLayout.logout}>
          <Icon type="logout" />
          退出登陆
        </Menu.Item>
      </Menu>
    );

    const avatar = (
      <span className="umi-plugin-layout-action umi-plugin-layout-account">
        <Avatar
          size="small"
          className="umi-plugin-layout-avatar"
          src={
            initialState?.avatar ||
            'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
          }
          alt="avatar"
        />
        <span className="umi-plugin-layout-name">{initialState?.name}</span>
      </span>
    );

    if (loading) {
      return (
        <div className="umi-plugin-layout-right">
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        </div>
      );
    }

    return (
      initialState && <div className="umi-plugin-layout-right">
        {runtimeLayout.logout ? (
          <Dropdown overlay={menu} overlayClassName="umi-plugin-layout-container">
            {avatar}
          </Dropdown>
        ) : (
            avatar
          )}
      </div>
    );
  }, [initialState, loading]);

  return rightContentRender;
}

function StyleSettings(props: StyleSettingsPropsType) {
	const {
		form: { getFieldDecorator },
	} = props
	const [openKeys, setOpenKeys] = useState<string | string[]>(
		map(cssConfig, (_, key) => key),
	)

	/**
	 * 折叠触发器
	 * @param openKeys
	 */

	const renderHeader = useCallback((key: string, isFold: boolean) => {
		return (
			<div className={styleSheet['fold-header']}>
				<span>{key}</span>
				<Icon
					className={isFold ? styleSheet.rotate180 : ''}
					style={{ marginLeft: '5px', transition: 'all 0.2s' }}
					type="caret-up"
				/>
			</div>
		)
	}, [])

	function renderColItem(config: any, field: string) {
		const {
			label,
			tip = '',
			labelPlace = 'left',
			span = 6,
			type,
			labelSpan = 4,
			valueSpan = 20,
			props = { size: 'small' },
		} = config
		return (
			<Col span={span} key={field}>
				<FormItem>
					<Row type="flex" justify="space-around" align="middle">
						{labelPlace === 'left' && (
							<Col style={{ fontSize: 12 }} span={labelSpan}>
								<Tooltip title={tip || field}>{label}</Tooltip>
							</Col>
						)}
						<Col span={valueSpan}>
							{getFieldDecorator(
								field,
								{},
							)(createElement(get(CSS_TYPE_TO_COMPONENT, type), props))}
							{labelPlace === 'bottom' && (
								<div className={styleSheet['bottom-label']}>
									<Tooltip placement="bottom" title={tip || field}>
										{label}
									</Tooltip>
								</div>
							)}
						</Col>
						<Col span={24 - labelSpan - valueSpan} />
					</Row>
				</FormItem>
			</Col>
		)
	}

	function renderFormItem(styles: any, key: string) {
		return (
			<Panel
				showArrow={false}
				className={styleSheet['panel-border']}
				header={renderHeader(key, openKeys.includes(key))}
				key={key}
			>
				<Row gutter={10}>{map(styles, renderColItem)}</Row>
			</Panel>
		)
	}

	return (
		<Form className={styleSheet['form-container']}>
			<Collapse
				activeKey={openKeys}
				style={{ margin: 0, backgroundColor: '#0000' }}
				bordered={false}
				onChange={(changeOpenKeys) => setOpenKeys(changeOpenKeys)}
			>
				{map(cssConfig, renderFormItem)}
			</Collapse>
		</Form>
	)
}

GantAnchor = (props: GantAnchorProps) => {
  let {
    list = [],
    content,
    fixedTop = 0,
    layout = 'vertical',
    onLayoutChange,
    minHeight = 400,
    className,
    style,
    getContainer = defaultContainer,
    ...nextProps
  } = props;
  const [stateMode, setStateMode] = useState(layout);
  const [currentId, setId] = useState(list.length ? list[0].id : ''); //当前选中id，进入页面默认选中第一
  const [leftArrowsShow, setLeftArrowsShow] = useState(false); //左侧箭头
  const [rightArrowsShow, setRightArrowsShow] = useState(false); //右侧箭头
  const [menuArrowsShow, setMenuArrowsShow] = useState(true);
  const [silderIdWidth, setSilderIdWidth] = useState(0); //List外层宽度
  const [contentWidth, setContentWidth] = useState(0); //List实际宽度
  const [isClickScroll, setIsClickScroll] = useState(false); //页面滚动判断是点击后的滚动还是手动的滚动
  let scrollHeight = 0; // 滚动的值
  let m2 = 0; // 对比时间的值
  let timer = null;
  const Data = useCallback(
    e => {
      m2 = getContainerScrollHeight(getContainer);
      if (m2 == scrollHeight) {
        if (isClickScroll) {
          setIsClickScroll(false);
        }
      }
    },
    [isClickScroll, setIsClickScroll, getContainer],
  );

  //   //滚动时触发
  const handleScroll = useCallback(
    e => {
      const fixedEle = document.getElementById('anchorBoxId'); //定位元素
      const fixedEleParent = document.querySelector('.gant-anchor-horAnchorOut'); //定位元素的父元素

      if (fixedEle && stateMode == 'horizontal') {
        clearTimeout(timer);
        timer = setTimeout(Data, 300);
        const menuboxhor = document.querySelector('.gant-submenu-menuboxhor'); //anchor的外层card
        const extraheight = menuboxhor ? menuboxhor['offsetHeight'] : 0;
        const container = getContainer();
        const isWindow = container == window;
        // 容器距离浏览器顶部的距离
        const containerScrollTop = isWindow
          ? 0
          : (container as Element)?.getBoundingClientRect?.()?.top;
        // 滚动条滚动的距离
        scrollHeight = getContainerScrollHeight(getContainer);
        if (fixedEle) {
          if (scrollHeight >= FIXED_HEIGHT + fixedTop + extraheight) {
            fixedEle.classList.add('gant-anchor-activeScroll');
            const active = document.querySelector('.gant-anchor-activeScroll');
            active['style'].top = `${fixedTop + containerScrollTop}px`;
            active['style'].width = `${fixedEleParent['offsetWidth']}px`;
          } else {
            fixedEle.classList.remove('gant-anchor-activeScroll');
          }
        }

        if (!isClickScroll) {
          //水平方向锚点跟随页面滚动高亮
          list.map(item => {
            if (!item.isInvalid) {
              const id = document.getElementById(item.id);
              let common = fixedTop + extraheight + FIXED_HEIGHT + containerScrollTop;
              if (id && id.getBoundingClientRect()) {
                let { top, height } = id.getBoundingClientRect();
                if (top <= common && top >= common - height) {
                  //这里的44是水平锚点条高度
                  setId(item.id);
                }
              }
            }
          });
        }
      }
    },
    [stateMode, setId, isClickScroll, list, getContainer],
  );

  //   //点击左右箭头
  const handleMobileTabs = useCallback(
    e => {
      const contentId = document.getElementById('contentId');
      const left = contentId.offsetLeft;
      const right = contentWidth - silderIdWidth + left;
      if (e == 'left') {
        if (left < 0 && left > -500) {
          contentId.style.left = '0px';
        } else if (left < -500) {
          contentId.style.left = `${left + 500}` + 'px';
        }
        const newLeft = contentId.offsetLeft;
        setLeftArrowsShow(newLeft == 0 ? false : true);
        setRightArrowsShow(true);
      } else {
        if (right > 0 && right < 500) {
          contentId.style.left = `${left - right}` + 'px';
        } else if (right >= 0 && right > 500) {
          contentId.style.left = `${left - 500}` + 'px';
        }
        const newRight = contentWidth - silderIdWidth + contentId.offsetLeft;
        setLeftArrowsShow(true);
        setRightArrowsShow(newRight == 0 ? false : true);
      }
    },
    [contentWidth, silderIdWidth, setLeftArrowsShow, setRightArrowsShow],
  );

  useEffect(() => {
    setStateMode(stateMode);
  }, [setStateMode]);

  useEffect(() => {
    const container = getContainer();
    container.addEventListener('scroll', handleScroll); //监听滚动
    return function cleanup() {
      container.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll, setIsClickScroll, getContainer]);

  useEffect(() => {
    const silderId = document.getElementById('silderId');
    const contentId = document.getElementById('contentId');
    const silderIdWidth = silderId ? silderId.offsetWidth : 0;
    const contentWidth = contentId ? contentId.offsetWidth : 0;
    setSilderIdWidth(silderIdWidth);
    setContentWidth(contentWidth);
    setRightArrowsShow(
      stateMode == 'horizontal' ? (silderIdWidth < contentWidth ? true : false) : false,
    );
    setMenuArrowsShow(
      stateMode == 'horizontal' ? (silderIdWidth < contentWidth ? true : false) : false,
    );
  }, [stateMode, setSilderIdWidth, setContentWidth, setRightArrowsShow, setMenuArrowsShow]);

  const getOffsetTop = useCallback((element: HTMLElement, container: any): number => {
    if (!element.getClientRects().length) {
      return 0;
    }

    const rect = element.getBoundingClientRect();

    if (rect.width || rect.height) {
      if (container === window) {
        container = element.ownerDocument!.documentElement!;
        return rect.top - container.clientTop;
      }
      return rect.top - (container as HTMLElement).getBoundingClientRect().top;
    }

    return rect.top;
  }, []);

  //水平方向锚点事件
  const scrollToAnchor = useCallback(
    anchorName => {
      if (anchorName) {
        const container = getContainer();
        let anchorElement = document.getElementById(anchorName);
        if (anchorElement) {
          const scrollTop = getScroll(container, true);
          const eleOffsetTop = getOffsetTop(anchorElement, container);
          let y = scrollTop + eleOffsetTop - FIXED_HEIGHT - fixedTop;
          scrollTo(y, {
            getContainer,
          });
        }
        setId(anchorName);
        setIsClickScroll(true);
      }
    },
    [setId, setIsClickScroll, fixedTop, getContainer],
  );

  //水平方向锚点menu内容
  const menu = useMemo(() => {
    return (
      <Menu selectedKeys={[currentId]}>
        {list.map(item => {
          return (
            <Menu.Item
              key={item.id}
              onClick={() => scrollToAnchor(item.id)}
              disabled={item.isInvalid ? true : false}
            >
              {item.title}
            </Menu.Item>
          );
        })}
      </Menu>
    );
  }, [currentId, list]);

  //锚点方向切换
  const onSwitchClick = useCallback(
    e => {
      let newStateMode: layout = stateMode === 'vertical' ? 'horizontal' : 'vertical';
      if (layout === 'vertical') {
        // 去掉磁吸效果
        const fixedEle = document.getElementById('anchorBoxId'); //定位元素
        fixedEle && fixedEle.classList.remove(`${prefixCls}-activeScroll`);
      }
      setStateMode(newStateMode);
      onLayoutChange && onLayoutChange(newStateMode);
    },
    [stateMode, setStateMode, onLayoutChange],
  );

  return (
    <div className={classnames(className, `${prefixCls}-wrapper`)} style={{ ...style }}>
      <div
        style={{ width: stateMode === 'horizontal' ? '100%' : 'calc(100% - 150px)', float: 'left' }}
      >
        <div
          className={classnames(`${prefixCls}-horAnchorOut`, {
            [`${prefixCls}-horAnchorOut__hidden`]: stateMode === 'vertical',
          })}
        >
          <div className={`gant-anchor`} id="anchorBoxId">
            <Icon
              type="left"
              style={{ display: leftArrowsShow ? 'block' : 'none', float: 'left' }}
              className={`${prefixCls}-iconCss`}
              onClick={() => handleMobileTabs('left')}
            />
            <div className={`${prefixCls}-silderCss`} id="silderId">
              <div className={`${prefixCls}-contentCss`} id="contentId">
                {list.map(item => {
                  let nowCss = item.id == currentId ? 'activeCss' : '';
                  if (item.isInvalid) {
                    return <div className={`${prefixCls}-isInvalid`}>{item.title}</div>;
                  }
                  return (
                    <a
                      className={`${prefixCls}-aCss`}
                      key={item.id}
                      onClick={() => scrollToAnchor(item.id)}
                    >
                      <span className={`${prefixCls}-${nowCss}`}>
                        {
                          <>
                            {item.title}
                            {item.complete ? (
                              <Icon
                                type="check-circle"
                                theme="twoTone"
                                twoToneColor="#52c41a"
                                style={{ paddingLeft: '5px' }}
                              />
                            ) : null}
                          </>
                        }
                      </span>
                    </a>
                  );
                })}
              </div>
            </div>
            <Icon
              type="switcher"
              onClick={onSwitchClick}
              className={`${prefixCls}-iconCss`}
              style={{ float: 'right' }}
            />
            <Dropdown
              overlay={menu}
              // style={{ display: menuArrowsShow ? 'block' : 'none' }}
              placement="bottomRight"
            >
              <Icon type="down" className={`${prefixCls}-iconCss`} style={{ float: 'right' }} />
            </Dropdown>
            <Icon
              type="right"
              style={{ display: rightArrowsShow ? 'block' : 'none', float: 'right' }}
              className={`${prefixCls}-iconCss`}
              onClick={() => handleMobileTabs('right')}
            />
          </div>
        </div>

        <div className="gant-anchor-content" style={{ padding: '0px', minHeight }}>
          {content}
        </div>
      </div>
      <div
        className={classnames(`${prefixCls}-verticalbox`, {
          [`${prefixCls}-verticalbox__hidden`]: stateMode === 'horizontal',
        })}
        style={{
          width: 150,
          paddingLeft: '10px',
          paddingTop: '10px',
          float: stateMode === 'horizontal' ? 'none' : 'left',
        }}
      >
        <Anchor
          offsetTop={fixedTop}
          onClick={e => {
            e.preventDefault();
          }}
          {...nextProps}
          getContainer={getContainer}
        >
          <Icon
            type="switcher"
            onClick={onSwitchClick}
            style={{ width: '100%', paddingRight: '10px', textAlign: 'right' }}
          />
          {list.map(item => {
            const nullCss = {};
            return (
              <div
                key={item?.id}
                style={item.isInvalid ? { opacity: 0.5, cursor: 'not-allowed' } : nullCss}
              >
                <div style={item.isInvalid ? { pointerEvents: 'none' } : nullCss}>
                  <Anchor.Link
                    key={item.key || item.title}
                    href={`#${item.id || item.title}`}
                    title={
                      <>
                        <Tooltip title={item.title} placement="left">
                          {item.title}
                        </Tooltip>
                        {item.complete ? (
                          <Icon
                            type="check-circle"
                            theme="twoTone"
                            twoToneColor="#52c41a"
                            style={{ paddingLeft: '5px' }}
                          />
                        ) : null}
                      </>
                    }
                  />
                </div>
              </div>
            );
          })}
        </Anchor>
      </div>
    </div>
  );
}

SearchForm = (props: Props) => {
  const {
    formItems,
    form,
    form: { getFieldDecorator },
  } = props;
  const [expand, setExpand] = useState(true);

  const search = () => {
    const data = form.getFieldsValue();
    // 找到时间字段
    Object.keys(data).forEach(i => {
      if (i.indexOf('$btw') !== -1 || i.indexOf('$BTW') !== -1) {
        if (data[i]) {
          const formatDate = data[i].map((e: Moment) => moment(e).format('YYYY-MM-DD HH:mm:ss'));
          data[i] = formatDate.join(',');
        }
      }
    });
    // if (data.requestTime$btw) {
    //     const formatDate = data.requestTime$btw.map((e: Moment) =>
    //         moment(e).format('YYYY-MM-DD HH:mm:ss'),
    //     );
    //     data.requestTime$btw = formatDate.join(',');
    // }
    props.search(data);
  };

  const renderItem = (type: string, label?: string, itemProps?: any) => {
    if (type === 'string') {
      return <Input placeholder={`请输入${label}`} />;
    }
    if (type === 'list') {
      const list = itemProps?.data || [];
      return (
        <Select mode={itemProps?.mode || 'multiple'}>
          {list.map((item: any) => (
            <Select.Option value={item.id || item} key={item.id || item}>
              {item.name || item}
            </Select.Option>
          ))}
        </Select>
      );
    }
    if (type === 'dateTime') {
      return <DatePicker showTime style={{ width: '100%' }} />;
    }
    if (type === 'dateRange' || type === 'time') {
      return <DatePicker.RangePicker showTime style={{ width: '100%' }} />;
    }
    if (type === 'dateTimeRange') {
      return (
        <DatePicker.RangePicker
          style={{ width: '100%' }}
          showTime={{ format: 'HH:mm' }}
          format="YYYY-MM-DD HH:mm"
          placeholder={['开始时间', '结束时间']}
        />
      );
    }
    if (type === 'number') {
      return <InputNumber style={{ width: '100%' }} placeholder={`请输入${label}`} />;
    }
    if (type === 'treeSelect') {
      return (
        <TreeSelect
          dropdownStyle={itemProps?.dropdownStyle}
          allowClear
          treeDataSimpleMode
          showSearch={itemProps?.showSearch || false}
          multiple={itemProps?.multiple || false}
          placeholder={`${label}`}
          treeData={itemProps?.data || []}
          treeNodeFilterProp="title"
        />
      );
    }
    return <Input />;
  };
  return (
    <Form
      onKeyDown={e => {
        if (e.keyCode === 13) {
          search();
        }
      }}
      className={styles.antAdvancedSearchForm}
    >
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        {(expand ? formItems.slice(0, 2) : formItems).map(item => (
          <Col style={{ height: 56 }} md={8} sm={24} key={item.key}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item?.value,
              })(renderItem(item.type, item.label, item.props))}
            </Form.Item>
          </Col>
        ))}
        <div
          style={{
            float: 'right',
            marginBottom: 24,
            marginRight: 30,
            marginTop: 4,
          }}
        >
          <Button
            type="primary"
            onClick={() => {
              search();
            }}
          >
            查询
          </Button>
          <Button
            style={{ marginLeft: 8 }}
            onClick={() => {
              form.resetFields();
              props.search();
            }}
          >
            重置
          </Button>
          {formItems.length > 2 && (
            <a style={{ marginLeft: 8 }} onClick={() => setExpand(!expand)}>
              {expand ? '展开' : '收起'} <Icon type={expand ? 'down' : 'up'} />
            </a>
          )}
        </div>
      </Row>
    </Form>
  );
}