@ant-design/icons#UpOutlined TypeScript Examples

export function FoldBrick(props: FoldBrickProps): React.ReactElement {
  const [show, handleShow] = useState(props.defaultShow || false);
  const handleFold = (): void => {
    handleShow(!show);
  };
  return (
    <div>
      <div
        style={props.foldStyle}
        onClick={handleFold}
        className={style.foldContainer}
      >
        <span>{props.foldName}</span>
        <UpOutlined
          rotate={show ? 0 : 180}
          style={{ marginLeft: "15px", lineHeight: "0px" }}
        />
      </div>
      <div
        className={classNames({
          [style.foldActive]: show,
          [style.foldInactive]: !show,
        })}
      >
        <BrickAsComponent useBrick={props.useBrick}></BrickAsComponent>
      </div>
    </div>
  );
}

export function AdvanceSetting(props: AdvanceSettingProps): React.ReactElement {
  const fold = (
    <div style={props.foldStyle} id="foldBrickButton" className="foldContainer">
      <span>{props.foldName}</span>
      {props.showFoldIcon && (
        <UpOutlined
          rotate={props.show ? 0 : 180}
          style={{ marginLeft: "15px", lineHeight: "0px" }}
        />
      )}
    </div>
  );

  return (
    <div>
      <FormItemWrapper {...props}>
        {props.showDivider ? (
          <Divider
            dashed={props.dividerDashed}
            orientation={props.dividerOrientation}
          >
            {fold}
          </Divider>
        ) : (
          fold
        )}
      </FormItemWrapper>
      <div
        className={classNames({
          foldActive: props.show,
          foldInactive: !props.show,
        })}
      >
        <slot name="content"></slot>
      </div>
    </div>
  );
}

export function TextCollapse(props: TextCollapseProps): React.ReactElement {
  const [ellipsis, setEllipsis] = useState(true);

  const { Paragraph } = Typography;

  const handleClick = () => {
    setEllipsis(!ellipsis);
  };

  return (
    <div className={styles.main}>
      <Paragraph
        data-testid="main-text"
        ellipsis={ellipsis ? { rows: props.line, expandable: false } : false}
      >
        {props.text}
      </Paragraph>
      <div className={styles.icons} onClick={handleClick} data-testid="icons">
        {ellipsis ? <DownOutlined /> : <UpOutlined />}
      </div>
    </div>
  );
}

function LevelComponent(member: FusedTeamMemberType): JSX.Element | null {
    const { user } = useValues(userLogic)
    const { currentTeam } = useValues(teamLogic)
    const { changeUserAccessLevel } = useActions(teamMembersLogic)

    const myMembershipLevel = currentTeam ? currentTeam.effective_membership_level : null

    if (!user) {
        return null
    }

    function generateHandleClick(listLevel: TeamMembershipLevel): (event: React.MouseEvent) => void {
        return function handleClick(event: React.MouseEvent) {
            event.preventDefault()
            changeUserAccessLevel(member.user, listLevel)
        }
    }

    const isImplicit = member.organization_level >= OrganizationMembershipLevel.Admin
    const levelName = membershipLevelToName.get(member.level) ?? `unknown (${member.level})`

    const levelButton = (
        <Button
            data-attr="change-membership-level"
            icon={member.level === OrganizationMembershipLevel.Owner ? <CrownFilled /> : undefined}
            // Org admins have implicit access anyway, so it doesn't make sense to edit them
            disabled={isImplicit}
        >
            {levelName}
        </Button>
    )

    const allowedLevels = teamMembershipLevelIntegers.filter(
        (listLevel) => !getReasonForAccessLevelChangeProhibition(myMembershipLevel, user, member, listLevel)
    )
    const disallowedReason = isImplicit
        ? `This user is a member of the project implicitly due to being an organization ${levelName}.`
        : getReasonForAccessLevelChangeProhibition(myMembershipLevel, user, member, allowedLevels)

    return disallowedReason ? (
        <Tooltip title={disallowedReason}>{levelButton}</Tooltip>
    ) : (
        <Dropdown
            overlay={
                <Menu>
                    {allowedLevels.map((listLevel) => (
                        <Menu.Item key={`${member.user.uuid}-level-${listLevel}`}>
                            <a href="#" onClick={generateHandleClick(listLevel)} data-test-level={listLevel}>
                                {listLevel > member.level ? (
                                    <>
                                        <UpOutlined style={{ marginRight: '0.5rem' }} />
                                        Upgrade to project {membershipLevelToName.get(listLevel)}
                                    </>
                                ) : (
                                    <>
                                        <DownOutlined style={{ marginRight: '0.5rem' }} />
                                        Downgrade to project {membershipLevelToName.get(listLevel)}
                                    </>
                                )}
                            </a>
                        </Menu.Item>
                    ))}
                </Menu>
            }
        >
            {levelButton}
        </Dropdown>
    )
}

export function FoldBrickV2(props: FoldBrickV2Props): React.ReactElement {
  const fold = (
    <div
      style={props.foldStyle}
      id={props._id}
      className={classNames("foldContainer", {
        foldPrimaryActive: props.type === "primary",
      })}
    >
      <span>{props.foldName}</span>
      <>
        {props.isShowFoldIcon ? (
          <UpOutlined
            rotate={props.show ? 0 : 180}
            style={{ marginLeft: "2px", lineHeight: "0px" }}
          />
        ) : (
          ""
        )}
      </>
    </div>
  );

  return (
    <div>
      {props.showDivider ? (
        <Divider
          dashed={props.dividerDashed}
          orientation={props.dividerOrientation}
        >
          {fold}
        </Divider>
      ) : (
        fold
      )}
      <div
        className={classNames({
          foldActive: props.show,
          foldInactive: !props.show,
        })}
      >
        <slot name="content"></slot>
      </div>
    </div>
  );
}

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

function LevelComponent(member: OrganizationMemberType): JSX.Element | null {
    const { user } = useValues(userLogic)
    const { currentOrganization } = useValues(organizationLogic)
    const { changeMemberAccessLevel } = useActions(membersLogic)

    const myMembershipLevel = currentOrganization ? currentOrganization.membership_level : null

    if (!user) {
        return null
    }

    function generateHandleClick(listLevel: OrganizationMembershipLevel): (event: React.MouseEvent) => void {
        return function handleClick(event: React.MouseEvent) {
            event.preventDefault()
            if (!user) {
                throw Error
            }
            if (listLevel === OrganizationMembershipLevel.Owner) {
                Modal.confirm({
                    centered: true,
                    title: `Transfer organization ownership to ${member.user.first_name}?`,
                    content: `You will no longer be the owner of ${user.organization?.name}. After the transfer you will become an administrator.`,
                    icon: <SwapOutlined />,
                    okType: 'danger',
                    okText: 'Transfer Ownership',
                    onOk() {
                        changeMemberAccessLevel(member, listLevel)
                    },
                })
            } else {
                changeMemberAccessLevel(member, listLevel)
            }
        }
    }

    const levelButton = (
        <Button
            data-attr="change-membership-level"
            icon={member.level === OrganizationMembershipLevel.Owner ? <CrownFilled /> : undefined}
        >
            {membershipLevelToName.get(member.level) ?? `unknown (${member.level})`}
        </Button>
    )

    const allowedLevels = organizationMembershipLevelIntegers.filter(
        (listLevel) => !getReasonForAccessLevelChangeProhibition(myMembershipLevel, user, member, listLevel)
    )
    const disallowedReason = getReasonForAccessLevelChangeProhibition(myMembershipLevel, user, member, allowedLevels)

    return disallowedReason ? (
        <Tooltip title={disallowedReason}>{levelButton}</Tooltip>
    ) : (
        <Dropdown
            overlay={
                <Menu>
                    {allowedLevels.map((listLevel) => (
                        <Menu.Item key={`${member.user.uuid}-level-${listLevel}`}>
                            <a href="#" onClick={generateHandleClick(listLevel)} data-test-level={listLevel}>
                                {listLevel === OrganizationMembershipLevel.Owner ? (
                                    <>
                                        <CrownFilled style={{ marginRight: '0.5rem' }} />
                                        Transfer organization ownership
                                    </>
                                ) : listLevel > member.level ? (
                                    <>
                                        <UpOutlined style={{ marginRight: '0.5rem' }} />
                                        Upgrade to {membershipLevelToName.get(listLevel)}
                                    </>
                                ) : (
                                    <>
                                        <DownOutlined style={{ marginRight: '0.5rem' }} />
                                        Downgrade to {membershipLevelToName.get(listLevel)}
                                    </>
                                )}
                            </a>
                        </Menu.Item>
                    ))}
                </Menu>
            }
        >
            {levelButton}
        </Dropdown>
    )
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

function MenuView({
  roots,
  expandKeys,
  onSelect,
  onExpand,
  collapsed,
  activeNote,
  noteIndex,
}: {
  roots: DataNode[];
  expandKeys: string[];
  onSelect: (noteId: string) => void;
  onExpand: (noteId: string) => void;
  collapsed: boolean;
  activeNote: string | undefined;
} & Partial<NoteData>) {
  const ExpandIcon = useCallback(
    ({ isOpen, ...rest }: { isOpen: boolean }) => {
      const UncollapsedIcon = isOpen ? UpOutlined : DownOutlined;
      const Icon = collapsed ? RightOutlined : UncollapsedIcon;
      return (
        <i data-expandedicon="true">
          <Icon
            style={{
              pointerEvents: "none", // only allow custom element to be gesture target
              margin: 0,
            }}
          />
        </i>
      );
    },
    [collapsed]
  );

  const createMenu = (menu: DataNode) => {
    if (menu.children && menu.children.length > 0) {
      return (
        <SubMenu
          icon={menu.icon}
          className={
            menu.key === activeNote ? "dendron-ant-menu-submenu-selected" : ""
          }
          key={menu.key}
          title={<MenuItemTitle menu={menu} noteIndex={noteIndex!} />}
          onTitleClick={(event) => {
            const target = event.domEvent.target as HTMLElement;
            const isArrow = target.dataset.expandedicon;
            if (!isArrow) {
              onSelect(event.key);
            } else {
              onExpand(event.key);
            }
          }}
        >
          {menu.children.map((childMenu: DataNode) => {
            return createMenu(childMenu);
          })}
        </SubMenu>
      );
    }
    return (
      <MenuItem key={menu.key} icon={menu.icon}>
        <MenuItemTitle menu={menu} noteIndex={noteIndex!} />
      </MenuItem>
    );
  };

  if (activeNote) {
    expandKeys.push(activeNote);
  }

  return (
    <Menu
      key={String(collapsed)}
      className="dendron-tree-menu"
      mode="inline"
      {...(!collapsed && {
        openKeys: expandKeys,
        selectedKeys: expandKeys,
      })}
      inlineIndent={DENDRON_STYLE_CONSTANTS.SIDER.INDENT}
      expandIcon={ExpandIcon}
      inlineCollapsed={collapsed}
      // results in gray box otherwise when nav bar is too short for display
      style={{ height: "100%" }}
    >
      {roots.map((menu) => {
        return createMenu(menu);
      })}
    </Menu>
  );
}

export function BrickAlert(props: BrickAlertProps): React.ReactElement {
  const [show, setShow] = React.useState<boolean>(false);
  const theme = useCurrentTheme();
  const onClose = () => {
    props.onClose?.();
  };
  // istanbul ignore next
  const message = props.enableMessageSlot ? (
    <>
      {props.foldDesc ? (
        <>
          <span style={{ ...props.messageStyle }}>
            <slot name="message"></slot>
          </span>
          <span
            onClick={() => {
              setShow(!show);
            }}
            style={{
              marginLeft: "5px",
              color: "var(--bg-color-button-link)",
              cursor: "pointer",
            }}
          >
            <span style={{ ...props.messageStyle }}>
              {props.foldDescLabel ?? "故障排查"}
            </span>
            <UpOutlined
              rotate={show ? 0 : 180}
              style={{ marginLeft: "4px", lineHeight: "0px", fontSize: "12px" }}
            />
          </span>
        </>
      ) : (
        <div>
          <slot name="message"></slot>
        </div>
      )}
    </>
  ) : (
    <span style={{ ...props.messageStyle }}>{props.message}</span>
  );
  const action = props.enableActionSlot ? (
    <div>
      <slot name="action"></slot>
    </div>
  ) : null;

  let desc = props.enableDescSlot ? (
    <div>
      <slot name="description"></slot>
    </div>
  ) : (
    props.description
  );
  if (props.foldDesc) {
    desc = <div style={{ display: show ? "block" : "none" }}>{desc}</div>;
  }

  const text =
    props.closeOnce && props.closable ? (
      <span style={{ color: "var(--text-color-link)" }}>
        不再提示 <CloseOutlined style={{ color: "var(--text-color-link)" }} />
      </span>
    ) : (
      ""
    );
  // istanbul ignore next

  const getThemeIcon = useCallback(
    (
      lightIcon: React.ReactElement,
      darkIcon: React.ReactElement
    ): React.ReactElement => {
      return theme == "dark-v2" ? darkIcon : lightIcon;
    },
    [theme]
  );
  const customIcon = () => {
    let icon: React.ReactNode;
    let iconRender: any;
    if (props.iconSize === "big") {
      switch (props.type) {
        case "info":
          iconRender = getThemeIcon(
            <BigInfoCircleOutlined />,
            <BigInfoCircleOutlinedDark />
          );
          break;
        case "success":
          iconRender = getThemeIcon(
            <BigSuccessCircleOutlined />,
            <BigSuccessCircleOutlinedDark />
          );
          break;
        case "warning":
          iconRender = getThemeIcon(
            <BigWarningCircleOutlined />,
            <BigWarningCircleOutlinedDark />
          );
          break;
        case "error":
          iconRender = getThemeIcon(
            <BigErrorCircleOutlined />,
            <BigErrorCircleOutlinedDark />
          );
          break;
      }
      icon = <Icon component={() => iconRender} />;
    }
    if (props.iconSize === "small") {
      const iconStyle: CSSProperties = { position: "relative", top: "5px" };
      const componentStyrle: CSSProperties = { fontSize: "14px" };
      switch (props.type) {
        case "info":
          iconRender = <InfoCircleFilled style={componentStyrle} />;
          break;
        case "success":
          iconRender = <CheckCircleFilled style={componentStyrle} />;
          break;
        case "warning":
          iconRender = <ExclamationCircleFilled style={componentStyrle} />;
          break;
        case "error":
          iconRender = <CloseCircleFilled style={componentStyrle} />;
          break;
      }
      icon = <Icon style={iconStyle} component={() => iconRender} />;
    }
    return icon;
  };
  return (
    <Alert
      className={classnames(
        {
          [cssStyle.closeOnce]: props.closeOnce && props.closable,
        },
        props.noBorderRadio ? cssStyle.noBorderRadio : null
      )}
      type={props.type}
      message={message}
      showIcon={props.showIcon}
      closable={props.closable}
      onClose={onClose}
      description={desc}
      closeText={text}
      action={action}
      {...(customIcon() ? { icon: customIcon() } : {})}
    />
  );
}

CommentItem: React.FC<IProps> = (props) => {
    const [offset, setOffset] = useState(0);
    const [comment, setComment] = useState<IComment>(props.comment);
    const [replies, setReplies] = useState<IComment[]>([]);
    const [isOpenInput, setOpenInput] = useState(false);
    const [isVisibleReplies, setVisibleReplies] = useState(true);
    const [editCommentBody, setEditCommentBody] = useState(comment.body || '');
    const [newCommentBody, setNewCommentBody] = useState('');
    const [isGettingReplies, setGettingReplies] = useState(false);
    const [isSubmitting, setSubmitting] = useState(false);
    const [isLiking, setIsLiking] = useState(false);
    const [isUpdateMode, setUpdateMode] = useState(false);
    const [error, setError] = useState<IError | null>(null);
    const didMount = useDidMount(true);
    const replyInputRef = useRef<HTMLInputElement | null>(null);
    const editCommentInputRef = useRef<HTMLInputElement | null>(null);

    useEffect(() => {
        didMount && setComment(props.comment);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.comment]);

    const getReplies = async () => {
        try {
            setGettingReplies(true);
            const data = await getCommentReplies({ offset, comment_id: comment.id, post_id: comment.post_id });

            setGettingReplies(false);
            setError(null);
            setReplies([...replies, ...data]);
            setOffset(offset + 1);
            setVisibleReplies(true);
        } catch (e) {
            console.log(e);
            setGettingReplies(false);
            setError(e);
        }
    }

    const onClickViewReplies = () => {
        if (isGettingReplies) return;
        if (didMount) setVisibleReplies(!isVisibleReplies);

        if (replies.length === 0) getReplies();
    }

    const handleSubmitReply = async (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            try {
                let data;
                setSubmitting(true);

                if (isUpdateMode && editCommentBody) {
                    data = await updateComment(comment.id, editCommentBody);
                } else {
                    data = await replyOnComment(newCommentBody, comment.id, comment.post_id);
                }

                // make sure it's mounted before setting states 
                if (didMount) {
                    if (isUpdateMode) {
                        setComment(data);
                        setEditCommentBody('');
                        setUpdateMode(false);
                    } else {
                        setReplies([...replies, data]);
                        setNewCommentBody('');
                        setOpenInput(false);
                    }

                    setError(null);
                    setVisibleReplies(true);
                    setSubmitting(false);
                    replies.length === 0 && getReplies();
                }
            } catch (e) {
                console.log(e);
                if (didMount) {
                    setSubmitting(false);
                    setError(e);
                    // setError(e.error.message);
                }
            }
        } else if (e.key === 'Escape') {
            // if (isUpdateMode) handleCancelUpdate();
            setUpdateMode(false);
            setOpenInput(false);
            editCommentInputRef.current && editCommentInputRef.current.blur();
            replyInputRef.current && replyInputRef.current.blur();
        }

    };

    const onClickReply = () => {
        setOpenInput(!isOpenInput);
        setUpdateMode(false);
    };

    const handleOnEditReplyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setEditCommentBody(e.target.value);
    };

    const handleOnNewReplyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setNewCommentBody(e.target.value);
    };

    const onClickEdit = () => {
        setUpdateMode(true);
        setEditCommentBody(comment.body);
        setOpenInput(false);
    }

    const onClickLike = async () => {
        if (isLiking) return;

        try {
            setIsLiking(true);
            const { state, likesCount } = await likeComment(comment.id);

            if (didMount) {
                setIsLiking(false);
                setComment({ ...comment, isLiked: state, likesCount });
            }
        } catch (err) {
            didMount && setIsLiking(false);
            console.log(err);
        }
    }

    const updateCommentCallback = (comment: IComment) => {
        if (didMount) {
            setReplies(oldComments => oldComments.filter((cmt) => cmt.id !== comment.id));
        }
    }

    return (
        <div
            className="flex py-2 items-start w-full"
            key={comment.id}
        >
            <Link to={`/user/${comment.author.username}`} className="mr-2">
                <Avatar url={comment.author.profilePicture?.url} size="sm" />
            </Link>
            <div className="inline-flex items-start flex-col w-full">
                {isUpdateMode ? (
                    <CommentInput
                        value={editCommentBody}
                        placeholder="Write a reply..."
                        onChange={handleOnEditReplyChange}
                        isSubmitting={isSubmitting}
                        ref={editCommentInputRef}
                        isUpdateMode={isUpdateMode}
                        onKeyDown={handleSubmitReply}
                    />
                ) : (
                    <>
                        <div className="flex items-start w-full laptop:w-auto">
                            {/* ------ USERNAME AND COMMENT TEXT ----- */}
                            <div className="bg-gray-100 dark:bg-indigo-950 px-2 py-1 rounded-md flex-grow laptop:flex-grow-0">
                                <Link className="inline-block" to={`/user/${comment.author.username}`}>
                                    <h5 className="dark:text-indigo-400">{comment.author.username}</h5>
                                </Link>
                                <p className="text-gray-800 text-sm min-w-full break-all dark:text-gray-200 inline-block">
                                    {comment.body}
                                </p>
                            </div>
                            {(comment.isOwnComment || comment.isPostOwner) && (
                                <CommentOptions
                                    comment={comment}
                                    onClickEdit={onClickEdit}
                                    openDeleteModal={props.openDeleteModal}
                                />
                            )}
                        </div>
                        <div className="mx-2">
                            {/* ---- DATE AND LIKE BUTTON ----- */}
                            <div className="mt-1 flex items-center space-x-2">
                                {/* ---- LIKE BUTTON ---- */}
                                {comment.likesCount > 0 && (
                                    <span className="text-sm text-gray-500">{comment.likesCount}</span>
                                )}
                                <span
                                    className={`text-gray-400 hover:cursor-pointer hover:text-gray-800 dark:hover:text-gray-200 text-xs ${comment.isLiked && 'font-bold text-indigo-500 dark:text-indigo-300'} ${isLiking && 'opacity-50 hover:cursor-default'}`}
                                    onClick={onClickLike}
                                >
                                    {comment.isLiked ? 'Unlike' : 'Like'}
                                </span>
                                {/* ---- REPLY BUTTON */}
                                {comment.depth < 3 && (
                                    <span
                                        className="text-gray-400 hover:cursor-pointer hover:text-gray-800 dark:hover:text-gray-200 text-xs"
                                        onClick={onClickReply}
                                    >
                                        Reply
                                    </span>
                                )}
                                {/* ---- DATE ---- */}
                                <span className="text-xs text-gray-400 dark:text-gray-500">
                                    {dayjs(comment.createdAt).fromNow()}
                                </span>
                                {comment.isEdited && (
                                    <span className="text-xs text-gray-400 dark:text-gray-500 ml-2">
                                        Edited
                                    </span>
                                )}
                            </div>
                            {/* ---- VIEW REPLIES BUTTON ----  */}
                            {(comment.replyCount > 0 || replies.length > 0) && (
                                <div className="flex space-x-2">
                                    {!error && (
                                        <span
                                            className="text-xs text-indigo-500 hover:text-indigo-400 dark:text-indigo-400 dark:hover:text-indigo-200 mt-2 hover:cursor-pointer"
                                            onClick={onClickViewReplies}
                                        >
                                            {(isVisibleReplies && replies.length !== 0) ? 'Hide Replies' : 'View Replies'}
                                            &nbsp;
                                            {isGettingReplies
                                                ? <LoadingOutlined className="text-1xs" />
                                                : (isVisibleReplies && replies.length !== 0) ? <UpOutlined className="text-1xs" />
                                                    : <DownOutlined className="text-1xs" />
                                            }
                                        </span>
                                    )}
                                    {error && error?.status_code !== 404 && (
                                        <span className="text-gray-400 text-xs">{error?.error?.message}</span>
                                    )}
                                </div>
                            )}
                        </div>
                    </>
                )}
                {/* ------ REPLY INPUT ----- */}
                {isOpenInput && !isUpdateMode && (
                    <div className="py-4 w-full">
                        <CommentInput
                            value={newCommentBody}
                            placeholder="Write a reply..."
                            onChange={handleOnNewReplyChange}
                            isSubmitting={isSubmitting}
                            ref={replyInputRef}
                            isUpdateMode={isUpdateMode}
                            onKeyDown={handleSubmitReply}
                        />
                    </div>
                )}
                {/* ---- REPLY LIST ------- */}
                {replies.length > 0 && isVisibleReplies && (
                    <CommentList comments={replies} updateCommentCallback={updateCommentCallback} />
                )}
            </div>
        </div>
    )
}

export default function LabelsValues(props: IProps) {
  const { value, range, onChange } = props;
  const { id, refreshFlag, filters, dynamicLabels, dimensionLabels } = value;
  const [labelValues, setLabelValues] = useState<{ [key: string]: string[] }>({});
  const [dimensionLabelsValues, setDimensionLabelsValues] = useState<{ [key: string]: string[] }>({});
  const [dimensionLabelsSearch, setDimensionLabelsSearch] = useState({});
  const filtersStr = getFiltersStr(filters);
  const dynamicLabelsStr = getDynamicLabelsStr(dynamicLabels);
  const [expaned, setExpaned] = useState({
    filters: false,
    dynamicLabels: true,
  });

  useEffect(() => {
    const dynamicLabelsRequests = _.map(dynamicLabels, (item) => {
      return getLabelValues(item.label, range, filtersStr ? `{${filtersStr}}` : '');
    });
    Promise.all(dynamicLabelsRequests).then((res) => {
      const _labelValues = {};
      _.forEach(res, (item, idx) => {
        _labelValues[dynamicLabels[idx].label] = item;
      });
      setLabelValues(_labelValues);
    });
  }, [filtersStr]);

  useEffect(() => {
    const matchStr = _.join(_.compact(_.concat(filtersStr, dynamicLabelsStr)), ',');
    const dimensionLabelsRequests = _.map(dimensionLabels, (item) => {
      return getLabelValues(item.label, range, matchStr ? `{${matchStr}}` : '');
    });
    Promise.all(dimensionLabelsRequests).then((res) => {
      const _labelValues = {};
      _.forEach(res, (item, idx) => {
        _labelValues[dimensionLabels[idx].label] = item;
      });
      setDimensionLabelsValues(_labelValues);
      if (_.every(dimensionLabels, (item) => _.isEmpty(item.value))) {
        onChange({
          ...value,
          dimensionLabels: _.map(dimensionLabels, (item, idx) => {
            if (idx === 0) {
              return {
                label: item.label,
                value: _.slice(_labelValues[item.label], 0, 10),
              };
            }
            return item;
          }),
        });
      }
    });
  }, [filtersStr, dynamicLabelsStr, id, refreshFlag]);

  return (
    <div className='n9e-metric-views-labels-values'>
      {!_.isEmpty(filtersStr) && (
        <div className='n9e-metric-views-labels-values-item'>
          <div
            className='page-title'
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setExpaned({
                ...expaned,
                filters: !expaned.filters,
              });
            }}
          >
            前置过滤条件 {expaned.filters ? <UpOutlined /> : <DownOutlined />}
          </div>
          {expaned.filters && <div className='n9e-metric-views-filters'>{filtersStr ? filtersStr : '暂无数据'}</div>}
        </div>
      )}
      {!_.isEmpty(dynamicLabels) && (
        <div className='n9e-metric-views-labels-values-item'>
          <div
            className='page-title'
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setExpaned({
                ...expaned,
                dynamicLabels: !expaned.dynamicLabels,
              });
            }}
          >
            动态过滤条件 {expaned.dynamicLabels ? <UpOutlined /> : <DownOutlined />}
          </div>
          {expaned.dynamicLabels && (
            <div className='n9e-metric-views-dynamicLabels'>
              {_.isEmpty(dynamicLabels) ? (
                <div style={{ marginBottom: 10 }}>暂无数据</div>
              ) : (
                _.map(dynamicLabels, (item) => {
                  return (
                    <div key={item.label} className='n9e-metric-views-dynamicLabels-item'>
                      <div className='n9e-metric-views-dynamicLabels-item-label'>{item.label}:</div>
                      <Select
                        allowClear
                        showSearch
                        style={{ width: '100%' }}
                        value={item.value}
                        onChange={(val) => {
                          const _dynamicLabels = _.map(dynamicLabels, (obj) => {
                            if (item.label === obj.label) {
                              return {
                                ...obj,
                                value: val,
                              };
                            }
                            return obj;
                          });
                          onChange({
                            ...value,
                            dynamicLabels: _dynamicLabels,
                            dimensionLabels: _.map(dimensionLabels, (item, idx) => {
                              if (idx === 0) {
                                return {
                                  label: item.label,
                                  value: [],
                                };
                              }
                              return item;
                            }),
                          });
                        }}
                      >
                        {_.map(labelValues[item.label], (value) => {
                          return (
                            <Select.Option key={value} value={value}>
                              {value}
                            </Select.Option>
                          );
                        })}
                      </Select>
                    </div>
                  );
                })
              )}
            </div>
          )}
        </div>
      )}
      {_.map(dimensionLabels, (dimensionLabel) => {
        const dimensionLabelValues = dimensionLabelsValues[dimensionLabel.label];
        return (
          <div key={dimensionLabel.label} className='n9e-metric-views-labels-values-item'>
            <div className='page-title'>
              <div
                style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  width: 220,
                }}
              >
                <Tooltip title={dimensionLabel.label} placement='left'>
                  <div
                    style={{
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      maxWidth: 'calc(100% - 30px)',
                    }}
                  >
                    {dimensionLabel.label}
                  </div>
                </Tooltip>
                <a
                  style={{ fontSize: 12, fontWeight: 'normal' }}
                  onClick={() => {
                    onChange({
                      ...value,
                      dimensionLabels: _.map(dimensionLabels, (item) => {
                        if (item.label === dimensionLabel.label) {
                          return {
                            ...item,
                            value: dimensionLabelValues,
                          };
                        }
                        return item;
                      }),
                    });
                  }}
                >
                  全选
                </a>
              </div>
            </div>
            <div className='n9e-metric-views-dimensionLabel'>
              <Input.Group compact>
                <Input
                  style={{ width: 'calc(100% - 32px)' }}
                  prefix={<SearchOutlined />}
                  value={dimensionLabelsSearch[dimensionLabel.label]}
                  onChange={(e) => {
                    setDimensionLabelsSearch({
                      ...dimensionLabelsSearch,
                      [dimensionLabel.label]: e.target.value,
                    });
                  }}
                />
                <Tooltip title='清空已选的值' placement='right' getTooltipContainer={() => document.body}>
                  <Button
                    icon={<ClearOutlined />}
                    onClick={() => {
                      onChange({
                        ...value,
                        dimensionLabels: _.map(dimensionLabels, (item) => {
                          if (item.label === dimensionLabel.label) {
                            return {
                              ...item,
                              value: [],
                            };
                          }
                          return item;
                        }),
                      });
                    }}
                  />
                </Tooltip>
              </Input.Group>

              <div className='n9e-metric-views-dimensionLabel-content'>
                {_.isEmpty(dimensionLabelValues) ? (
                  '暂无数据'
                ) : (
                  <div>
                    {_.map(
                      _.filter(dimensionLabelValues, (item) => {
                        let result = true;
                        if (dimensionLabelsSearch[dimensionLabel.label]) {
                          try {
                            const reg = new RegExp(dimensionLabelsSearch[dimensionLabel.label], 'gi');
                            result = reg.test(item);
                          } catch (e) {
                            console.log(e);
                          }
                        }
                        return result;
                      }),
                      (item: string) => {
                        return (
                          <div
                            key={item}
                            className={classNames({
                              'n9e-metric-views-dimensionLabel-content-item': true,
                              active: _.includes(dimensionLabel.value, item),
                            })}
                            onClick={() => {
                              const dimensionLabelValue = _.includes(dimensionLabel.value, item) ? _.without(dimensionLabel.value, item) : _.concat(dimensionLabel.value, item);
                              const newDimensionLabels = _.map(dimensionLabels, (item) => {
                                if (item.label === dimensionLabel.label) {
                                  return {
                                    ...item,
                                    value: _.compact(dimensionLabelValue),
                                  };
                                }
                                return {
                                  ...item,
                                  value: [],
                                };
                              });
                              onChange({
                                ...value,
                                dimensionLabels: newDimensionLabels,
                              });
                            }}
                          >
                            {item}
                          </div>
                        );
                      },
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default function Demo() {
  // 列表控制
  const listRef = useRef<any>()
  // 选中的年份
  const [activeYear, setActiveYear] = useState(1)
  // 选中的状态
  const [activeStatus, setActiveStatus] = useState(1)
  // 选中的 tab
  const [activeTab, setActiveTab] = useState(1)
  // 选中的标签
  const [activeTag, setActiveTag] = useState(undefined)
  // 标签是否可见
  const [tagVisible, setTagVisible] = useState(false)
  // 查询参数 打印用
  const [searchValue, setSearchValue] = useState({})
  // 查询区域是否可见
  const searchVisible = useMemo(() => {
    return activeTab !== 6
  }, [activeTab])
  // 查询参数
  const searchParams = useMemo(() => {
    return {
      activeYear,
      activeStatus,
      activeTab,
      activeTag
    }
  }, [activeTab, activeYear, activeStatus, activeTag])

  useEffect(() => {
    // 查询参数改变，刷新列表
    listRef.current.reset()
  }, [searchParams])

  useEffect(() => {
    // 如果不显示标签，则把标签值值设置为空
    if (!tagVisible) {
      setActiveTag(undefined)
    }
  }, [tagVisible])

  useEffect(() => {
    // 查询区域不显示时，清空它的值
    if (!searchVisible) {
      setActiveTag(undefined)
      setTagVisible(false)
    }
  }, [searchVisible])

  return (
    <div className="space-list">
      <AySearchList
        ref={listRef}
        title={
          <Space size={24}>
            <Tabs activeKey={activeTab + ''} onChange={key => setActiveTab(Number(key))}>
              {tabOptions.map(option => (
                <Tabs.TabPane key={option.value} className="goods" tab={option.label} />
              ))}
            </Tabs>
          </Space>
        }
        api={(searchValues: AnyKeyProps) =>
          new Promise(resolve => {
            setSearchValue(searchValues)
            setTimeout(() => {
              resolve({
                content: data,
                totalCount: data.length
              })
            }, 500)
          })
        }
        extendSearchParams={searchParams}
        extraVisible={false}
        autoload={false}
        listExtend={{
          itemLayout: 'vertical'
        }}
        onParamsChange={(values: AnyKeyProps) => {
          // 翻页 & 查询时，滚动到最顶部
          window.scrollTo({ behavior: 'smooth', top: 0 })
        }}
        listHeader={
          <div>
            {tagVisible && (
              <div>
                <div className="space-list-search-tags">
                  <label>订单类型：</label>
                  <AyTagGroup value={activeTag} onChange={setActiveTag} options={tagOptions} />
                </div>
                <div className="space-list-search-row">
                  <Button onClick={() => setTagVisible(false)}>返回</Button>
                </div>
              </div>
            )}
            {!searchVisible && (
              <div className="space-list-search-row">
                <Alert
                  showIcon
                  message="说明"
                  description={
                    <ul>
                      <li>1. 只有已取消和已完成的订单可以删除；</li>
                      <li>
                        2.
                        被删除的订单将无法进行评价、晒单和申请售后等操作；如果想继续这些操作，可以先将被删除的订单还原；
                      </li>
                      <li>3. 订单被永久删除后无法还原。</li>
                    </ul>
                  }
                />
              </div>
            )}
            <Row className="space-list-header">
              <Col flex="150px">
                <Select
                  style={{ minWidth: 200 }}
                  options={yearOptions}
                  bordered={false}
                  value={activeYear}
                  onChange={setActiveYear}
                />
              </Col>
              <Col flex="1" style={{ paddingLeft: 8 }}>
                订单详情
              </Col>
              <Col span={3} className="space-list-center">
                收货人
              </Col>
              <Col span={3} className="space-list-center">
                金额
              </Col>
              <Col span={3} className="space-list-center">
                <Select
                  style={{ width: '100%' }}
                  options={statusOptions}
                  bordered={false}
                  value={activeStatus}
                  onChange={setActiveStatus}
                />
              </Col>
              <Col span={3} className="space-list-center">
                操作
              </Col>
            </Row>
          </div>
        }
        renderItem={(record: Record) => {
          // 卡片渲染内容
          return (
            <List.Item key={record.id}>
              <div className="space-list-card">
                {record.splitInfo && (
                  <>
                    <div className="space-list-card-header light">
                      <Space size="large">
                        <Text>2020-05-06 23:59:59</Text>
                        <span>
                          <Text type="secondary">订单号：</Text>78074445382
                        </span>
                      </Space>
                      <Text type="secondary">
                        您订单中的商品在不同库房或属不同商家，故拆分为以下订单分开配送，给您带来的不便敬请谅解。
                      </Text>
                    </div>
                    <div className="space-list-card-header gray">
                      <Space size="large">
                        <span>
                          <Text type="secondary">收货人：</Text>123
                        </span>
                        <span>
                          <Text type="secondary">订单金额：</Text>¥123
                        </span>
                        <span>
                          <Text type="secondary">支付方式：</Text>在线支付
                        </span>
                        <span>
                          <Text type="secondary">订单状态：</Text>已拆分
                        </span>
                      </Space>
                      <AyButton sub>
                        查看拆分详情
                        <RightOutlined />
                      </AyButton>
                    </div>
                  </>
                )}
                {record.groups?.map((group: Record, index: number) => (
                  <div className="space-list-card-group">
                    <div
                      className={classNames('space-list-card-header', !record.splitInfo && index === 0 ? 'light' : '')}
                    >
                      <Space size="large">
                        <Text>2020-05-06 23:59:59</Text>
                        <span>
                          <Text type="secondary">订单号：</Text> 78074445382
                        </span>
                        <a>
                          <Space size="small">
                            <SmileOutlined />
                            卖橘子的商家
                          </Space>
                        </a>
                      </Space>
                      <AyButton
                        className="space-list-card-delete"
                        confirm
                        confirmMsg="确定要删除吗？删除后，您可以在订单回收站还原该订单，也可以做永久删除。"
                        size="small"
                        icon={<DeleteOutlined />}
                      />
                    </div>
                    <Row className="space-list-card-info">
                      <Col span={12} className="space-list-card-left">
                        {group.goods?.map((goods: Record) => (
                          <Row key={goods.id} wrap={false} gutter={8} className="space-list-card-goods">
                            <Col flex="90px">
                              <Image src={orange} width={80} height={80} />
                            </Col>
                            <Col flex="1">
                              <Paragraph ellipsis={{ rows: 2, tooltip: '好吃的橘子', symbol: '...' }}>
                                {record.message || '商品名称'}
                              </Paragraph>
                              <a>
                                <Space size="small">
                                  <AppstoreAddOutlined />
                                  找搭配
                                </Space>
                              </a>
                            </Col>
                            <Col flex="50px" className="space-list-center">
                              x1
                            </Col>
                            <Col flex="100px" className="space-list-center">
                              <a>申请售后</a>
                            </Col>
                          </Row>
                        ))}
                      </Col>
                      <Col span={3} className="space-list-center space-list-cell">
                        <Space>
                          <Avatar src="购买者头像" />
                          购买者
                        </Space>
                      </Col>
                      <Col span={3} className="space-list-center space-list-cell">
                        <div>¥25.55</div>
                        <div>
                          <Text type="secondary">在线支付</Text>
                        </div>
                      </Col>
                      <Col span={3} className="space-list-center space-list-cell">
                        <div>已完成</div>
                        <div>
                          <a>订单详情</a>
                        </div>
                      </Col>
                      <Col span={3} className="space-list-center space-list-cell">
                        <div>
                          <a>查看发票</a>
                        </div>
                        <div>
                          <a>立即购买</a>
                        </div>
                      </Col>
                    </Row>
                  </div>
                ))}
                {record.steps?.map((step: Record, index: number) => (
                  <Row className="space-list-card-footer gray" key={step.id}>
                    <Col span={15}>
                      阶段{index + 1}：{step.label}
                    </Col>
                    <Col span={3} className="space-list-center">
                      ¥50
                    </Col>
                    <Col span={3} className="space-list-center">
                      已完成
                    </Col>
                    <Col span={3} className="space-list-center">
                      2
                    </Col>
                  </Row>
                ))}
              </div>
            </List.Item>
          )
        }}
      >
        <AyFields>
          <AyField key="__search" type="input-group" search={{ position: 'more', hidden: !searchVisible }}>
            <AyField
              key="keyword"
              type="search"
              placeholder="商品名称/商品编号/订单号"
              enterButton={false}
              style={{ width: 300 }}
            />
            <AyField
              key="__btn"
              type="custom"
              renderContent={() => (
                <Button className="space-list-toggle" onClick={() => setTagVisible(!tagVisible)}>
                  高级
                  {tagVisible ? <UpOutlined /> : <DownOutlined />}
                </Button>
              )}
            />
          </AyField>
        </AyFields>
      </AySearchList>
      {/* 页面打印用，实际使用删掉即可 */}
      <Divider orientation="left">查询参数</Divider>
      {Object.keys(searchValue).length && <pre>{JSON.stringify(searchValue, null, 2)}</pre>}
    </div>
  )
}