@ant-design/icons#NumberOutlined TypeScript Examples

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

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

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

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

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

static treeMenuNode2DataNode({
    roots,
    showVaultName,
    applyNavExclude = false,
  }: {
    roots: TreeMenuNode[];
    showVaultName?: boolean;
    applyNavExclude: boolean;
  }): DataNode[] {
    return roots
      .map((node: TreeMenuNode) => {
        let icon;
        if (node.icon === TreeMenuNodeIcon.bookOutlined) {
          icon = <BookOutlined />;
        } else if (node.icon === TreeMenuNodeIcon.numberOutlined) {
          icon = <NumberOutlined />;
        } else if (node.icon === TreeMenuNodeIcon.plusOutlined) {
          icon = <PlusOutlined />;
        }

        if (applyNavExclude && node.navExclude) {
          return undefined;
        }

        let title: any = node.title;
        if (showVaultName) title = `${title} (${node.vaultName})`;

        if (node.hasTitleNumberOutlined) {
          title = (
            <span>
              <NumberOutlined />
              {title}
            </span>
          );
        }

        return {
          key: node.key,
          title,
          icon,
          children: node.children
            ? TreeViewUtils.treeMenuNode2DataNode({
                roots: node.children,
                showVaultName,
                applyNavExclude,
              })
            : [],
        };
      })
      .filter(isNotUndefined);
  }

IdentificationNumberInput: React.FC = () => {
	const { t } = useTranslation();

	const formikContext = useFormikContext<UserFormValues>();
	const [{ onChange, value }, { error }, { setError }] = useField('identificationNumber');
	const [isLoadingHelperInfo, setIsLoadingHelperInfo] = useState(false);

	const helperInfoQuery = useQuery<GetCustomerHelperInfo, GetCustomerHelperInfoVariables>(
		GET_CUSTOMER_HELPER_INFO,
		{
			skip: true,
			onError: console.error,
		},
	);

	const queryForHelperInfo = async () => {
		setIsLoadingHelperInfo(true);
		if (!value) {
			return setError(t('Identification number required for the search'));
		}
		try {
			const {
				data: { getCustomerHelperInfo },
			} = await helperInfoQuery.refetch({
				partialIdentificationNumber: value,
			});

			const {
				taxIdentificationNumber,
				name,
				city,
				street,
				postNumber,
			} = getCustomerHelperInfo;

			formikContext.setValues({
				...formikContext.values,
				taxIdentificationNumber:
					taxIdentificationNumber || formikContext.values.taxIdentificationNumber,
				name: name || formikContext.values.name,
			});
			formikContext.setFieldValue('addresses.0', { city, street, postNumber });
		} catch (err) {
			if (err instanceof ApolloError) {
				if (err.graphQLErrors[0].extensions?.code === 'INFO_NOT_FOUND') {
					setError(t('company_not_found_in_ares'));
				}
			}
		}
		setIsLoadingHelperInfo(false);
	};

	return (
		<StyledFormItem validateStatus={error ? 'error' : ''} help={error}>
			<Input.Search
				name={'identificationNumber'}
				prefix={<NumberOutlined />}
				placeholder={t('Identification number')}
				onSearch={queryForHelperInfo}
				onChange={onChange}
				value={value || ''}
				enterButton
				loading={isLoadingHelperInfo}
			/>
		</StyledFormItem>
	);
}

SchemaTable = memo(
  ({
    height,
    width: propsWidth,
    model,
    hierarchy,
    dataSource,
    hasCategory,
    getExtraHeaderActions,
    onSchemaTypeChange,
    ...tableProps
  }: SchemaTableProps) => {
    const dataSourceWithKey = useMemo(
      () => dataSource?.map(o => ({ ...o, [ROW_KEY]: uuidv4() })),
      [dataSource],
    );
    const columnWidthMap = useMemo(
      () => getColumnWidthMap(model, dataSource || []),
      [model, dataSource],
    );
    const t = useI18NPrefix('view.schemaTable');
    const tg = useI18NPrefix('global');

    const {
      columns,
      tableWidth,
    }: {
      columns: TableColumnType<object>[];
      tableWidth: number;
    } = useMemo(() => {
      let tableWidth = 0;
      const columns = Object.entries(model).map(([name, column]) => {
        const hierarchyColumn = getHierarchyColumn(name, hierarchy) || column;

        const width = columnWidthMap[name];
        tableWidth += width;

        let icon;
        switch (hierarchyColumn.type) {
          case DataViewFieldType.NUMERIC:
            icon = <NumberOutlined />;
            break;
          case DataViewFieldType.DATE:
            icon = <CalendarOutlined />;
            break;
          default:
            icon = <FieldStringOutlined />;
            break;
        }

        const extraActions =
          getExtraHeaderActions && getExtraHeaderActions(name, hierarchyColumn);

        const title = (
          <>
            <span className="content">{name}</span>
            <Dropdown
              trigger={['click']}
              overlay={
                <Menu
                  selectedKeys={[
                    hierarchyColumn.type,
                    `category-${hierarchyColumn.category}`,
                  ]}
                  className="datart-schema-table-header-menu"
                  onClick={onSchemaTypeChange(name, hierarchyColumn)}
                >
                  {Object.values(DataViewFieldType).map(t => (
                    <Menu.Item key={t}>
                      {tg(`columnType.${t.toLowerCase()}`)}
                    </Menu.Item>
                  ))}
                  {hasCategory && (
                    <>
                      <Menu.Divider />
                      <Menu.SubMenu
                        key="categories"
                        title={t('category')}
                        popupClassName="datart-schema-table-header-menu"
                      >
                        {Object.values(ColumnCategories).map(t => (
                          <Menu.Item key={`category-${t}`}>
                            {tg(`columnCategory.${t.toLowerCase()}`)}
                          </Menu.Item>
                        ))}
                      </Menu.SubMenu>
                    </>
                  )}
                </Menu>
              }
            >
              <Tooltip title={hasCategory ? t('typeAndCategory') : t('type')}>
                <ToolbarButton
                  size="small"
                  iconSize={FONT_SIZE_BASE}
                  className="suffix"
                  icon={icon}
                />
              </Tooltip>
            </Dropdown>
            {extraActions}
          </>
        );

        return {
          title,
          dataIndex: name,
          width,
          align:
            column.type === DataViewFieldType.NUMERIC
              ? ('right' as const)
              : ('left' as const),
        };
      });
      return { columns, tableWidth };
    }, [
      model,
      hierarchy,
      columnWidthMap,
      hasCategory,
      getExtraHeaderActions,
      onSchemaTypeChange,
      t,
      tg,
    ]);
    return (
      <VirtualTable
        {...tableProps}
        rowKey={ROW_KEY}
        size="small"
        components={{ header: { cell: TableHeader } }}
        dataSource={dataSourceWithKey}
        columns={columns}
        scroll={{ x: tableWidth, y: height }}
        width={propsWidth}
      />
    );
  },
)

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

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

  it("should display a brick", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const mockOnDraggingChange = jest.fn();
    const wrapper = mount(
      <BrickItem
        brick={{
          type: "brick",
          id: "my.awesome-brick",
          title: "awesome-brick",
          description: "My awesome brick",
        }}
        onDraggingChange={mockOnDraggingChange}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("brick")).toBe(true);
    expect(wrapper.find(".brickItem").prop("title")).toBe("My awesome brick");
    expect(wrapper.find(BuildFilled).length).toBe(1);
    expect(wrapper.find(".brickName").text()).toBe("awesome-brick");
    expect(mockUseDrag).toBeCalledWith(
      expect.objectContaining({
        item: {
          type: BuilderDataTransferType.NODE_TO_ADD,
          brickType: undefined,
          brick: "my.awesome-brick",
        },
      })
    );
    expect(mockOnDraggingChange).toBeCalledWith(false);
  });

  it("should display a provider", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "provider",
          id: "my.awesome-provider",
          title: "awesome-provider",
        }}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("provider")).toBe(true);
    expect(wrapper.find(".brickItem").prop("title")).toBe("awesome-provider");
    expect(wrapper.find(DatabaseFilled).length).toBe(1);
    expect(wrapper.find(".brickName").text()).toBe("awesome-provider");
    expect(mockUseDrag).toBeCalledWith(
      expect.objectContaining({
        item: {
          type: BuilderDataTransferType.NODE_TO_ADD,
          brickType: "provider",
          brick: "my.awesome-provider",
        },
      })
    );
  });

  it("should display a legacy template", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "template",
          id: "my.awesome-template",
          title: "awesome-template",
        }}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("template")).toBe(true);
    expect(wrapper.find(GoldenFilled).length).toBe(1);
    expect(wrapper.find(".brickName").text()).toBe("awesome-template");
    expect(mockUseDrag).toBeCalledWith(
      expect.objectContaining({
        item: {
          type: BuilderDataTransferType.NODE_TO_ADD,
          brickType: "template",
          brick: "my.awesome-template",
        },
      })
    );
  });

  it("should display a custom template", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "customTemplate",
          id: "my.awesome-custom-template",
          title: "awesome-custom-template",
        }}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("customTemplate")).toBe(true);
    expect(wrapper.find(CopyFilled).length).toBe(1);
    expect(wrapper.find(".brickName").text()).toBe("awesome-custom-template");
    expect(mockUseDrag).toBeCalledWith(
      expect.objectContaining({
        item: {
          type: BuilderDataTransferType.NODE_TO_ADD,
          brickType: undefined,
          brick: "my.awesome-custom-template",
        },
      })
    );
  });

  it("should display a snippet", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "snippet",
          id: "my.snippet",
          title: "My Snippet",
          bricks: [
            {
              brick: "easy-view",
            },
          ],
          thumbnail: "test.svg",
        }}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("snippet")).toBe(true);
    expect(wrapper.find(".brickIcon img").prop("src")).toBe("test.svg");
    expect(wrapper.find(NumberOutlined).length).toBe(0);
    expect(wrapper.find(".brickName").text()).toBe("My Snippet");
    expect(mockUseDrag).toBeCalledWith(
      expect.objectContaining({
        item: {
          type: BuilderDataTransferType.SNIPPET_TO_APPLY,
          bricks: [
            {
              brick: "easy-view",
            },
          ],
        },
      })
    );
  });

  it("should display a snippet without thumbnail", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "snippet",
          id: "my.snippet",
          title: "My Snippet",
          bricks: [
            {
              brick: "easy-view",
            },
          ],
        }}
      />
    );
    expect(wrapper.find(".brickItem").hasClass("snippet")).toBe(true);
    expect(wrapper.find(NumberOutlined).length).toBe(1);
    expect(wrapper.find(".brickIcon img").length).toBe(0);
  });

  it("should render icon", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          category: "form-input",
          icon: {
            lib: "fa",
            icon: "abacus",
          },
          type: "brick",
          id: "my.awesome-brick",
          title: "awesome-brick",
        }}
      />
    );
    expect(wrapper.find(GeneralIcon).prop("icon")).toEqual({
      icon: "abacus",
      lib: "fa",
    });
  });

  it("should show thumbnail while layerType was widget", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "brick",
          id: "widget-project.my-widget",
          title: "my-widget",
          thumbnail: "xxx.png",
        }}
        layerType={LayerType.WIDGET}
      />
    );

    expect(wrapper.find(".brickIcon img").prop("src")).toBe("xxx.png");
  });

  it("should show BuildFilled while layType was widget and thumbnail was null", () => {
    const dragRef = jest.fn();
    mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
    const wrapper = shallow(
      <BrickItem
        brick={{
          type: "brick",
          id: "widget-project.my-widget",
          title: "my-widget",
          thumbnail: null,
        }}
        layerType={LayerType.WIDGET}
      />
    );

    expect(wrapper.find(BuildFilled).length).toBe(1);
  });
});

export function BrickItem({
  brick,
  onDraggingChange,
  layerType,
}: BrickItemProps): React.ReactElement {
  let brickType: string;
  switch (brick.type) {
    case "provider":
    case "template":
      brickType = brick.type;
    // `customTemplate` will be treated as `brick`.
  }

  const transferItem =
    brick.type === "snippet"
      ? {
          type: BuilderDataTransferType.SNIPPET_TO_APPLY,
          bricks: brick.bricks,
        }
      : {
          type: BuilderDataTransferType.NODE_TO_ADD,
          brickType,
          brick: brick.id,
        };

  const [{ isDragging }, dragRef] = useDrag({
    item: transferItem,
    options: {
      dropEffect: "copy",
    },
    collect: /* istanbul ignore next */ (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  useEffect(() => {
    onDraggingChange?.(isDragging);
  }, [isDragging, onDraggingChange]);

  let icon: JSX.Element;

  if (brick.icon) {
    icon = <GeneralIcon icon={brick.icon} />;
  } else if (layerType === "widget") {
    icon = brick.thumbnail ? (
      <img
        style={{
          width: "auto",
          height: "100%",
        }}
        src={brick.thumbnail}
      />
    ) : (
      <BuildFilled />
    );
  } else {
    switch (brick.type) {
      case "provider":
        icon = <DatabaseFilled />;
        break;
      case "template":
        icon = <GoldenFilled />;
        break;
      case "customTemplate":
        icon = (
          <CopyFilled
            className={classNames({
              [styles.thumbnailType]: layerType !== LayerType.BRICK,
            })}
          />
        );
        break;
      case "snippet":
        icon = brick.thumbnail ? (
          <img src={brick.thumbnail} />
        ) : (
          <NumberOutlined
            className={classNames({
              [styles.thumbnailType]: layerType !== LayerType.BRICK,
            })}
          />
        );
        break;
      default:
        icon = <BuildFilled />;
    }
  }

  return (
    <div
      className={`${styles.brickItem} ${styles[brick.type]} ${
        styles[`layer-${layerType ?? LayerType.BRICK}`]
      }`}
      title={brick.description || brick.title}
      ref={dragRef}
    >
      <span className={styles.brickIcon}>{icon}</span>
      <span className={styles.brickName}>{brick.title}</span>
    </div>
  );
}

CustomerForm: React.FC<Props> = (props) => {
	const { t } = useTranslation();

	return (
		<Formik<UserFormValues>
			initialValues={props.initialValues}
			onSubmit={async (values, { resetForm }) => {
				await props.onSubmit(values, resetForm);
			}}
			validate={(values) => {
				const errors: FormikErrors<UserFormValues> = {};
				if (!values.name) {
					errors.name = t('missing_company_name');
				}
				return errors;
			}}
		>
			{({ values, setFieldValue, handleChange, handleSubmit }) => (
				<StyledForm onSubmit={handleSubmit}>
					<Row gutter={32}>
						<Col xs={24} md={12}>
							<FormInput
								name="name"
								label={t('Company name')}
								icon={<ContactsOutlined />}
							/>
							<Row gutter={16}>
								<Col span={12}>
									<IdentificationNumberInput />
								</Col>
								<Col span={12}>
									<FormInput
										name="taxIdentificationNumber"
										label={t('Tax identification number')}
										icon={<HddOutlined />}
									/>
								</Col>
							</Row>
							<StyledDivider orientation="left">{t('Contact person')}</StyledDivider>
							<FormInput
								name="personName"
								label={t('Contact person name')}
								icon={<UserOutlined />}
							/>
							<Row gutter={16}>
								<Col span={12}>
									<FormInput
										name="email"
										label={t('Email')}
										icon={<MailOutlined />}
									/>
								</Col>
								<Col span={12}>
									<FormInput
										name="phone"
										label={t('Phone')}
										icon={<PhoneOutlined />}
									/>
								</Col>
							</Row>
						</Col>
						<Col xs={24} md={12}>
							<Checkbox
								name="allowedBankPayments"
								onClick={() =>
									setFieldValue(
										'allowedBankPayments',
										!values.allowedBankPayments,
									)
								}
								checked={values.allowedBankPayments}
							>
								{t('Allow bank payments')}
							</Checkbox>
							<StyledFormItem label={t('Note')}>
								<Input.TextArea
									rows={4}
									name="note"
									placeholder={t('customer_note_placeholder')}
									onChange={handleChange}
									value={values.note || ''}
								/>
							</StyledFormItem>
						</Col>
					</Row>
					<Row gutter={32}>
						{values.addresses
							.sort(({ isPrimary }) => (isPrimary ? -1 : 1))
							.map((_, i) => (
								<Col xs={24} md={12} key={i}>
									<StyledDivider orientation="left">
										{i === 0 ? t('Shipping address') : t('Billing address')}
									</StyledDivider>
									<StyledFormItem>
										<Input
											name={`addresses.${i}.street`}
											prefix={<EnvironmentOutlined />}
											placeholder={t('Street')}
											onChange={handleChange}
											value={values.addresses[i].street || ''}
										/>
									</StyledFormItem>
									<Row gutter={12}>
										<Col span={16}>
											<StyledFormItem>
												<Input
													name={`addresses.${i}.city`}
													prefix={<HomeOutlined />}
													placeholder={t('City')}
													onChange={handleChange}
													value={values.addresses[i].city || ''}
												/>
											</StyledFormItem>
										</Col>
										<Col span={8}>
											<StyledFormItem>
												<Input
													name={`addresses.${i}.postNumber`}
													prefix={<NumberOutlined />}
													placeholder={t('Post Number')}
													onChange={handleChange}
													value={values.addresses[i].postNumber || ''}
												/>
											</StyledFormItem>
										</Col>
									</Row>
								</Col>
							))}
					</Row>
					{props.submitButton}
				</StyledForm>
			)}
		</Formik>
	);
}

OrderForm: React.FC<Props> = (props) => {
	const { t } = useTranslation();
	const { currencyFormatter } = useCurrencyFormatter();

	return (
		<Formik<OrderFormValues>
			initialValues={props.initialValues}
			onSubmit={async (values, { resetForm }) => {
				await props.onSubmit(values, resetForm);
			}}
			validationSchema={getOrderValidationSchema(t)}
			enableReinitialize
		>
			{({ handleSubmit, values, handleChange, setFieldValue }) => (
				<StyledForm onSubmit={handleSubmit}>
					<Row gutter={8}>
						<Col lg={4}>
							<StyledOrderNumberWrapper>
								<FormInput
									name="number"
									label={t('Order number')}
									icon={<NumberOutlined />}
									withLabel
									type="number"
									disabled={!props.isNumberEditable}
								/>
							</StyledOrderNumberWrapper>
						</Col>
						<Col lg={7}>
							<CustomerPicker extraCustomer={props.extraCustomer} />
						</Col>
						<Col lg={6}>
							<OrderStatusSelect />
						</Col>
					</Row>
					<StyledDivider />
					<Row gutter={6}>
						<Col sm={4}>
							<StyledLabel>{t('Material')}</StyledLabel>
						</Col>
						<Col sm={7}>
							<StyledLabel>{t('Name')}</StyledLabel>
						</Col>
						<Col sm={2}>
							<StyledLabel>{t('Width')}</StyledLabel>
						</Col>
						<Col sm={2}>
							<StyledLabel>{t('Height')}</StyledLabel>
						</Col>
						<Col sm={2}>
							<StyledLabel>{t('Pieces')}</StyledLabel>
						</Col>
						<Col sm={1}></Col>
						<Col sm={3}>
							<StyledLabel>{t('Price')}</StyledLabel>
						</Col>
						<Col sm={3}>
							<StyledLabel>{t('Tax')}</StyledLabel>
						</Col>
					</Row>
					<FieldArray
						name="items"
						render={(arrayHelpers) => (
							<>
								{values.items.length > 0 &&
									values.items.map((item, index) => (
										<OrderItemField
											key={item.id || index}
											index={index}
											arrayHelpers={arrayHelpers}
										/>
									))}
								<Row>
									<Col>
										<Button
											icon={<PlusCircleOutlined />}
											onClick={() => arrayHelpers.push(dummyMaterialItem)}
										>
											{t('Add item')}
										</Button>
									</Col>
									<Col style={{ textAlign: 'right' }}>
										<Button
											icon={<CalculatorOutlined />}
											onClick={() => {
												const { totalPrice, totalTax } = calculateSummary(
													values,
												);
												setFieldValue('totalPrice', totalPrice);
												setFieldValue('totalTax', totalTax);
											}}
											style={{ marginLeft: 10 }}
											data-test-id="order-sum-items-button"
										>
											{t('Sum items')}
										</Button>
									</Col>
								</Row>
							</>
						)}
					/>
					<Row gutter={8} style={{ marginTop: 15 }}>
						<Col sm={10}>
							<StyledFormItem>
								<StyledLabel>{t('Note')}</StyledLabel>
								<Input.TextArea
									rows={4}
									name="note"
									placeholder={t('note_placeholder')}
									onChange={handleChange}
									data-test-id="order-form-note"
									value={values.note || ''}
								/>
							</StyledFormItem>
						</Col>
						<Col sm={8}>
							<Row>
								<Col sm={18} offset={3}>
									<UrgentSlider />
								</Col>
							</Row>
						</Col>
						<Col sm={6}>
							<OrderSummaryWrapper>
								<FormInput
									name="totalPrice"
									label={t('Total price')}
									type="number"
									suffix={CURRENCY_SUFFIX}
									withLabel
								/>
								<FormInput
									name="totalTax"
									label={t('Total tax')}
									type="number"
									suffix={CURRENCY_SUFFIX}
									withLabel
								/>
								{!!getTotalPriceIncludingTax(values) && (
									<div>
										<StyledLabel>{t('Total price including tax')}</StyledLabel>
										<span>
											{currencyFormatter(
												getTotalPriceIncludingTax(values) || 0,
											)}
										</span>
									</div>
								)}
							</OrderSummaryWrapper>
						</Col>
					</Row>
					{props.submitButton}
				</StyledForm>
			)}
		</Formik>
	);
}

ChartDraggableSourceContainer: FC<
  {
    availableSourceFunctions?: string[];
    onDeleteComputedField?: (fieldName) => void;
    onEditComputedField?: (fieldName) => void;
    onSelectionChange?: (dataItemId, cmdKeyActive, shiftKeyActive) => void;
    onClearCheckedList?: () => void;
  } & ChartDataViewMeta
> = memo(function ChartDraggableSourceContainer({
  id,
  name: colName,
  type,
  subType,
  category,
  expression,
  selectedItems,
  isActive,
  availableSourceFunctions,
  role,
  children,
  onDeleteComputedField,
  onEditComputedField,
  onSelectionChange,
  onClearCheckedList,
}) {
  const t = useI18NPrefix(`viz.workbench.dataview`);
  const [showChild, setShowChild] = useToggle(false);
  const isHierarchyField = role === ColumnRole.Hierarchy;
  const [, drag] = useDrag(
    () => ({
      type: isHierarchyField
        ? CHART_DRAG_ELEMENT_TYPE.DATASET_COLUMN_GROUP
        : CHART_DRAG_ELEMENT_TYPE.DATASET_COLUMN,
      canDrag: true,
      item: selectedItems?.length
        ? selectedItems.map(item => buildDragItem(item))
        : buildDragItem({ id: colName, type, subType, category }, children),
      collect: monitor => ({
        isDragging: monitor.isDragging(),
      }),
      end: onClearCheckedList,
    }),
    [selectedItems],
  );

  const styleClasses: Array<string> = useMemo(() => {
    let styleArr: Array<string> = [];
    if (isActive) {
      styleArr.push('container-active');
    }
    return styleArr;
  }, [isActive]);

  const renderContent = useMemo(() => {
    const _handleMenuClick = (e, fieldName) => {
      if (e.key === 'delete') {
        onDeleteComputedField?.(fieldName);
      } else {
        onEditComputedField?.(fieldName);
      }
    };

    const _isAllowMoreAction = () => {
      return (
        ChartDataViewFieldCategory.Field === category ||
        ChartDataViewFieldCategory.Hierarchy === category
      );
    };

    const _getIconStyle = () => {
      if (role === ColumnRole.Hierarchy) {
        return WARNING;
      }
      if (
        ChartDataViewFieldCategory.ComputedField === category ||
        ChartDataViewFieldCategory.AggregateComputedField === category
      ) {
        return WARNING;
      } else {
        switch (type) {
          case DataViewFieldType.NUMERIC:
            return SUCCESS;
          default:
            return INFO;
        }
      }
    };

    const _getExtraActionMenus = () => {
      return (
        <Menu onClick={e => _handleMenuClick(e, colName)}>
          <Menu.Item key="edit">{t('editField')}</Menu.Item>
          <Menu.Item key="delete">{t('deleteField')}</Menu.Item>
        </Menu>
      );
    };

    let icon = <FileUnknownOutlined />;
    const props = {
      style: {
        alignSelf: 'center',
        color: _getIconStyle(),
      },
    };
    if (role === ColumnRole.Hierarchy) {
      if (!showChild) {
        icon = (
          <FolderAddOutlined
            {...props}
            onClick={() => {
              setShowChild(!showChild);
            }}
          />
        );
      } else {
        icon = (
          <FolderOpenOutlined
            {...props}
            onClick={() => {
              setShowChild(!showChild);
            }}
          />
        );
      }
    } else {
      switch (type) {
        case DataViewFieldType.STRING:
          icon = <FieldStringOutlined {...props} />;
          break;
        case DataViewFieldType.NUMERIC:
          icon = <NumberOutlined {...props} />;
          break;
        case DataViewFieldType.DATE:
          icon = <CalendarOutlined {...props} />;
          break;
        default:
          icon = <FileUnknownOutlined {...props} />;
      }
    }

    return type === 'DATE' && category === 'field' ? (
      <Row align="middle" style={{ width: '100%' }}>
        <CollapseWrapper
          defaultActiveKey={[colName]}
          ghost
          expandIconPosition="right"
          expandIcon={({ isActive }) => {
            return <DownOutlined rotate={isActive ? -180 : 0} />;
          }}
        >
          <Panel
            key={colName}
            header={
              <div ref={drag}>
                <IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
                <p>{colName}</p>
              </div>
            }
          >
            {DATE_LEVELS.map((item, i) => {
              if (availableSourceFunctions?.includes(item.expression)) {
                return (
                  <DateLevelFieldContainer
                    colName={colName}
                    key={i}
                    item={item}
                    onClearCheckedList={onClearCheckedList}
                  />
                );
              }
              return null;
            })}
          </Panel>
        </CollapseWrapper>
      </Row>
    ) : (
      <Row align="middle" style={{ width: '100%' }}>
        <IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
        <StyledFieldContent>{colName}</StyledFieldContent>
        <div onClick={stopPPG}>
          <Dropdown
            disabled={_isAllowMoreAction()}
            overlay={_getExtraActionMenus()}
            trigger={['click']}
          >
            <ToolbarButton
              icon={<MoreOutlined />}
              iconSize={FONT_SIZE_BASE}
              className="setting"
              onClick={e => e.preventDefault()}
            />
          </Dropdown>
        </div>
      </Row>
    );
  }, [
    type,
    role,
    colName,
    showChild,
    setShowChild,
    onDeleteComputedField,
    onEditComputedField,
    category,
    t,
    onClearCheckedList,
    drag,
    availableSourceFunctions,
  ]);

  const renderChildren = useMemo(() => {
    return (children || []).map(item => (
      <ChartDraggableSourceContainer
        key={item.id}
        id={item.id}
        name={item.id}
        category={item.category}
        expression={item.expression}
        type={item.type}
        role={item.role}
        children={item.children}
        onDeleteComputedField={onDeleteComputedField}
        onClearCheckedList={onClearCheckedList}
        selectedItems={selectedItems}
      />
    ));
  }, [children, onDeleteComputedField, onClearCheckedList, selectedItems]);

  return (
    <Container
      flexDirection={children ? 'column' : 'row'}
      onClick={e => {
        if (isHierarchyField) {
          return;
        }
        onSelectionChange?.(colName, e.metaKey || e.ctrlKey, e.shiftKey);
      }}
      ref={type === 'DATE' && category === 'field' ? null : drag}
      className={
        type === 'DATE' && category === 'field' ? '' : styleClasses.join(' ')
      }
    >
      {renderContent}
      {showChild && renderChildren}
    </Container>
  );
})

DataModelNode: FC<{
  node: Column;
  className?: string;
  onNodeTypeChange: (type: any, name: string) => void;
  onMoveToHierarchy: (node: Column) => void;
  onCreateHierarchy?: (node: Column) => void;
  onDeleteFromHierarchy?: (node: Column) => void;
}> = memo(
  ({
    node,
    className,
    onCreateHierarchy,
    onMoveToHierarchy,
    onNodeTypeChange,
    onDeleteFromHierarchy,
  }) => {
    const t = useI18NPrefix('view.model');
    const tg = useI18NPrefix('global');
    const [isHover, setIsHover] = useState(false);
    const hasCategory = true;

    const renderNode = (node, isDragging) => {
      let icon;
      switch (node.type) {
        case DataViewFieldType.NUMERIC:
          icon = (
            <NumberOutlined style={{ alignSelf: 'center', color: SUCCESS }} />
          );
          break;
        case DataViewFieldType.STRING:
          icon = (
            <FieldStringOutlined style={{ alignSelf: 'center', color: INFO }} />
          );
          break;
        case DataViewFieldType.DATE:
          icon = (
            <CalendarOutlined style={{ alignSelf: 'center', color: INFO }} />
          );
          break;
        default:
          icon = (
            <FileUnknownOutlined
              style={{ alignSelf: 'center', color: WARNING }}
            />
          );
          break;
      }

      const isAllowCreateHierarchy = node => {
        return ALLOW_COMBINE_COLUMN_TYPES.includes(node.type);
      };

      return (
        <div
          className="content"
          onMouseEnter={() => {
            setIsHover(true);
          }}
          onMouseLeave={() => {
            setIsHover(false);
          }}
        >
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu
                selectedKeys={[node.type, `category-${node.category}`]}
                className="datart-schema-table-header-menu"
                onClick={({ key }) => onNodeTypeChange(key, node?.name)}
              >
                {Object.values(DataViewFieldType).map(t => (
                  <Menu.Item key={t}>
                    {tg(`columnType.${t.toLowerCase()}`)}
                  </Menu.Item>
                ))}
                {hasCategory && (
                  <>
                    <Menu.Divider />
                    <Menu.SubMenu
                      key="categories"
                      title={t('category')}
                      popupClassName="datart-schema-table-header-menu"
                    >
                      {Object.values(ColumnCategories).map(t => (
                        <Menu.Item key={`category-${t}`}>
                          {tg(`columnCategory.${t.toLowerCase()}`)}
                        </Menu.Item>
                      ))}
                    </Menu.SubMenu>
                  </>
                )}
              </Menu>
            }
          >
            <Tooltip
              title={hasCategory ? t('typeAndCategory') : t('category')}
              placement="left"
            >
              <StyledIW fontSize={FONT_SIZE_TITLE}>{icon}</StyledIW>
            </Tooltip>
          </Dropdown>
          <span>{node.name}</span>
          <div className="action">
            {isHover &&
              !isDragging &&
              isAllowCreateHierarchy(node) &&
              onCreateHierarchy && (
                <Tooltip title={t('newHierarchy')}>
                  <Button
                    type="link"
                    onClick={() => onCreateHierarchy(node)}
                    icon={<BranchesOutlined />}
                  />
                </Tooltip>
              )}
            {isHover && !isDragging && isAllowCreateHierarchy(node) && (
              <Tooltip title={t('addToHierarchy')}>
                <Button
                  type="link"
                  onClick={() => onMoveToHierarchy(node)}
                  icon={<SisternodeOutlined />}
                />
              </Tooltip>
            )}
            {isHover && !isDragging && onDeleteFromHierarchy && (
              <Tooltip title={t('delete')}>
                <Button
                  type="link"
                  onClick={() => onDeleteFromHierarchy(node)}
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            )}
          </div>
        </div>
      );
    };

    return (
      <Draggable key={node?.name} draggableId={node?.name} index={node?.index}>
        {(draggableProvided, draggableSnapshot) => (
          <StyledDataModelNode
            isDragging={draggableSnapshot.isDragging}
            className={className}
            style={draggableProvided.draggableProps.style}
            ref={draggableProvided.innerRef}
            {...draggableProvided.draggableProps}
            {...draggableProvided.dragHandleProps}
          >
            {renderNode(node, draggableSnapshot.isDragging)}
          </StyledDataModelNode>
        )}
      </Draggable>
    );
  },
)