@ant-design/icons#MenuOutlined TypeScript Examples

The following examples show how to use @ant-design/icons#MenuOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: sorting.tsx    From posthog-foss with MIT License 6 votes vote down vote up
export function SortingIndicator({ order }: { order: SortOrder | null }): JSX.Element {
    return (
        <div
            style={{
                fontSize: 10,
                marginLeft: 8,
                whiteSpace: 'nowrap',
                width: 20,
                display: 'flex',
                justifyContent: 'center',
            }}
        >
            {order === -1 ? <ArrowDownOutlined /> : order === 1 ? <ArrowUpOutlined /> : null}
            <MenuOutlined />
        </div>
    )
}
Example #2
Source File: Wrapper.tsx    From ant-extensions with MIT License 6 votes vote down vote up
SearchbarWrapper: React.FC<ISearchProps> = React.memo(
  ({ addonPrefix, addonSuffix, actions, children }) => {
    return (
      <div className="ant-ext-sb__searchBar">
        <Input.Group className="ant-ext-sb__inputGroup" compact>
          {children}
          {addonPrefix && (
            <Input.Group className="ant-ext-sb__addonPrefix" compact>
              {addonPrefix}
            </Input.Group>
          )}
          <SearchInput />
        </Input.Group>
        {addonSuffix && (
          <Input.Group className="ant-ext-sb__addonSuffix" compact>
            {addonSuffix}
          </Input.Group>
        )}
        {actions && (
          <Dropdown overlay={actions} trigger={["click"]}>
            <Button className="ant-ext-sb__actions" icon={<MenuOutlined />} />
          </Dropdown>
        )}
      </div>
    );
  }
)
Example #3
Source File: Header.tsx    From condo with MIT License 6 votes vote down vote up
Header: React.FC<IHeaderProps> = (props) => {
    const { isSmall, toggleCollapsed } = useLayoutContext()
    const router = useRouter()
    const { isAuthenticated } = useAuth()

    useOrganizationInvites()

    const handleLogoClick = useCallback(() => {
        if (isAuthenticated) {
            router.push('/')
        } else {
            router.push('/auth/signin')
        }
    }, [isAuthenticated, router])

    return (
        isSmall
            ? (
                <MobileHeader>
                    <Space size={22}>
                        <MenuOutlined onClick={toggleCollapsed}/>
                        <ResidentActions minified/>
                    </Space>
                    <Logo fillColor={colors.logoPurple} onClick={handleLogoClick} minified/>
                    <UserMenu/>
                </MobileHeader>
            )
            : (
                <DesktopHeader>
                    <TopMenuItems headerAction={props.headerAction}/>
                </DesktopHeader>
            )
    )
}
Example #4
Source File: styles.ts    From landy-react-template with MIT License 5 votes vote down vote up
Outline = styled(MenuOutlined)<any>`
  font-size: 22px;
`
Example #5
Source File: index.tsx    From metaplex with Apache License 2.0 5 votes vote down vote up
MetaplexMenu = () => {
  const { width } = useWindowDimensions();
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const { connected } = useWallet();

  if (width < 768)
    return (
      <>
        <Modal
          title={<img src={'/metaplex-logo.svg'} />}
          visible={isModalVisible}
          footer={null}
          className={'modal-box'}
          closeIcon={
            <img
              onClick={() => setIsModalVisible(false)}
              src={'/modals/close.svg'}
            />
          }
        >
          <div className="site-card-wrapper mobile-menu-modal">
            <Menu onClick={() => setIsModalVisible(false)}>
              {getDefaultLinkActions(connected).map((item, idx) => (
                <Menu.Item key={idx}>{item}</Menu.Item>
              ))}
            </Menu>
            <div className="actions">
              {!connected ? (
                <div className="actions-buttons">
                  <ConnectButton
                    onClick={() => setIsModalVisible(false)}
                    className="secondary-btn"
                  />
                  <HowToBuyModal
                    onClick={() => setIsModalVisible(false)}
                    buttonClassName="black-btn"
                  />
                </div>
              ) : (
                <>
                  <CurrentUserBadgeMobile
                    showBalance={false}
                    showAddress={true}
                    iconSize={24}
                    closeModal={() => {
                      setIsModalVisible(false);
                    }}
                  />
                  <Notifications />
                  <Cog />
                </>
              )}
            </div>
          </div>
        </Modal>
        <MenuOutlined
          onClick={() => setIsModalVisible(true)}
          style={{ fontSize: '1.4rem' }}
        />
      </>
    );

  return <DefaultActions />;
}
Example #6
Source File: Icon.tsx    From html2sketch with MIT License 4 votes vote down vote up
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>
  );
}
Example #7
Source File: Management.tsx    From nodestatus with MIT License 4 votes vote down vote up
Management: FC = () => {
  const [regionResult, setRegionResult] = useState<string[]>([]);
  const [state, dispatch] = useReducer(reducer, initialState);
  const { data, mutate } = useSWR<IResp<IServer[]>>('/api/servers');

  const [form] = Form.useForm<IServer & { password: string }>();
  const { confirm } = Modal;
  const dataSource = data?.data!;

  const handleModify = useCallback(() => {
    const data = form.getFieldsValue();
    axios.put<IResp>('/api/servers', { username: state.currentNode, data }).then(res => {
      notify('Success', res.data.msg, 'success');
      dispatch({ type: 'resetState', payload: { form, mutate } });
    });
  }, [state.currentNode, form, mutate]);

  const handleCreate = useCallback(() => {
    const data = form.getFieldsValue();
    axios.post<IResp>('/api/servers', { ...data }).then(res => {
      notify('Success', res.data.msg, 'success');
      dispatch({ type: 'resetState', payload: { form, mutate } });
    });
  }, [form, mutate]);

  const handleDelete = useCallback((username: string) => {
    axios.delete<IResp>(`/api/servers/${username}`).then(res => {
      notify('Success', res.data.msg, 'success');
      dispatch({ type: 'resetState', payload: { form, mutate } });
    });
  }, [form, mutate]);

  const handleSortOrder = useCallback((order: number[]) => {
    axios.put<IResp>('/api/servers/order', { order }).then(res => {
      notify('Success', res.data.msg, 'success');
      dispatch({ type: 'resetState', payload: { form, mutate } });
    });
  }, [form, mutate]);

  const columns = useMemo<ColumnsType<IServer>>(() => [
    {
      title: 'SORT',
      dataIndex: 'sort',
      width: 30,
      align: 'center',
      render: () => undefined
    },
    {
      title: 'SERVER',
      dataIndex: 'server',
      align: 'center',
      render(_, record) {
        return (
          <div className="flex items-center text-sm">
            <svg viewBox="0 0 100 100" className="mr-3 block h-12 w-12">
              <use xlinkHref={`#${record.region}`} />
            </svg>
            <div className="whitespace-nowrap">
              <p className="font-semibold">{record.name}</p>
              <p className="text-left text-xs text-gray-600">{record.location}</p>
            </div>
          </div>
        );
      }
    },
    {
      title: 'USERNAME',
      dataIndex: 'username',
      align: 'center'
    },
    {
      title: 'TYPE',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: 'LOCATION',
      dataIndex: 'location',
      align: 'center'
    },
    {
      title: 'REGION',
      dataIndex: 'region',
      align: 'center'
    },
    {
      title: 'STATUS',
      dataIndex: 'disabled',
      align: 'center',
      render: disabled => (
        disabled
          ? <Tag color="error">Disabled</Tag>
          : <Tag color="success">Enabled</Tag>
      )
    },
    {
      title: 'ACTION',
      dataIndex: 'action',
      align: 'center',
      render(_, record) {
        return (
          <div className="flex justify-evenly items-center">
            <EditOutlined onClick={() => {
              form.setFieldsValue(record);
              dispatch({
                type: 'setNode',
                payload: {
                  currentNode: record.username,
                  installationScript: parseInstallationScript(record.username, '')
                }
              });
            }}
            />
            <DeleteOutlined onClick={() => confirm({
              title: 'Are you sure you want to delete this item?',
              icon: <ExclamationCircleOutlined />,
              onOk: () => handleDelete(record.username)
            })}
            />
          </div>
        );
      }
    }

  ], [confirm, form, handleDelete]);

  const TableFooter = useCallback(() => (
    <>
      <Button type="primary" className="mr-6" onClick={() => dispatch({ type: 'showModal' })}>New</Button>
      <Button
        type="primary"
        className="mr-6"
        onClick={() => dispatch({ type: 'showImportForm' })}
      >
        Import
      </Button>
      <Button
        type="primary"
        danger={state.sortEnabled}
        onClick={() => {
          if (state.sortEnabled) {
            const order = dataSource.map(item => item.id);
            order.reverse();
            handleSortOrder(order);
          }
          dispatch({ type: 'reverseSortEnabled' });
        }}
      >
        {!state.sortEnabled ? 'Sort' : 'Save'}
      </Button>
    </>
  ), [dataSource, handleSortOrder, state.sortEnabled]);

  const DraggableContainer = useCallback<FC>(props => (
    <Droppable droppableId="table">
      {
        provided => (
          <tbody {...props} {...provided.droppableProps} ref={provided.innerRef}>
            {props.children}
            {provided.placeholder}
          </tbody>
        )
      }
    </Droppable>
  ), []);

  const DraggableBodyRow = useCallback<FC<any>>(props => {
    const index = dataSource.findIndex(x => x.id === props['data-row-key']);
    return (
      <Draggable
        draggableId={props['data-row-key']?.toString()}
        index={index}
        isDragDisabled={!state.sortEnabled}
      >
        {provided => {
          const children = props.children?.map?.((el: ReactElement) => {
            if (el.props.dataIndex === 'sort') {
              const props = el.props ? { ...el.props } : {};
              props.render = () => (
                <MenuOutlined
                  style={{ cursor: 'grab', color: '#999' }}
                  {...provided.dragHandleProps}
                />
              );
              return React.cloneElement(el, props);
            }
            return el;
          }) || props.children;
          return (
            <tr {...props} {...provided.draggableProps} ref={provided.innerRef}>
              {children}
            </tr>
          );
        }}
      </Draggable>
    );
  }, [dataSource, state.sortEnabled]);

  return (
    <>
      <Title level={2} className="my-6">Management</Title>
      {
        data ? (
          <DragDropContext
            onDragEnd={result => {
              const { destination, source } = result;
              if (!destination) return;
              if (destination.droppableId === source.droppableId && destination.index === source.index) return;
              const newDataSource = arrayMoveImmutable(dataSource, source.index, destination.index);
              mutate({ ...data, data: newDataSource }, false).then();
            }}
          >
            <Table
              dataSource={dataSource}
              columns={columns}
              rowKey="id"
              components={{
                body: {
                  wrapper: DraggableContainer,
                  row: DraggableBodyRow
                }
              }}
              pagination={state.sortEnabled ? false : undefined}
              footer={TableFooter}
            />
            <Modal
              title={state.currentNode ? 'Modify Configuration' : 'New'}
              visible={state.showModal}
              onOk={state.currentNode ? handleModify : handleCreate}
              onCancel={() => dispatch({ type: 'resetState', payload: { form } })}
              className="top-12"
            >
              <Form
                layout="vertical"
                form={form}
                onValuesChange={(field, allFields) => {
                  if (field.username || field.password) {
                    dispatch({
                      type: 'setInstallationScript',
                      payload: {
                        installationScript: parseInstallationScript(
                          field.username || allFields.username,
                          field.password || allFields.password
                        )
                      }
                    });
                  }
                }}
              >
                {state.isImport ? (
                  <Form.Item label="Data" name="data">
                    <Input.TextArea rows={4} />
                  </Form.Item>
                ) : (
                  <>
                    <Form.Item label="Username" name="username">
                      <Input />
                    </Form.Item>
                    <Form.Item label="Password" name="password">
                      <Input.Password placeholder="留空不修改" />
                    </Form.Item>
                    <Form.Item label="Name" name="name">
                      <Input />
                    </Form.Item>
                    <Form.Item label="Type" name="type">
                      <Input />
                    </Form.Item>
                    <Form.Item label="Location" name="location">
                      <Input />
                    </Form.Item>
                    <Form.Item
                      label="Region"
                      name="region"
                      rules={[{
                        validator(_, value) {
                          if (countries.isValid(value)) return Promise.resolve();
                          return Promise.reject(new Error('Country not found!'));
                        }
                      }]}
                    >
                      <AutoComplete
                        options={regionResult.map(value => ({
                          value,
                          label: value
                        }))}
                        onChange={value => {
                          const code = countries.getAlpha2Code(value, 'zh');
                          const codeEn = countries.getAlpha2Code(value, 'en');
                          return setRegionResult([code, codeEn].filter(v => !!v));
                        }}
                      >
                        <Input />
                      </AutoComplete>
                    </Form.Item>
                    <Form.Item label="Disabled" name="disabled" valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Form.Item label="Script">
                      <code
                        className="bg-gray-200 px-2 py-0.5 leading-6 rounded break-all"
                      >
                        {state.installationScript}
                      </code>
                    </Form.Item>
                  </>
                )}
              </Form>
            </Modal>
          </DragDropContext>
        )
          : <Loading />
      }
    </>
  );
}
Example #8
Source File: DendronLayout.tsx    From dendron with GNU Affero General Public License v3.0 4 votes vote down vote up
export default function DendronLayout(
  props: React.PropsWithChildren<DendronCommonProps>
) {
  const [isCollapsed, setCollapsed] = React.useState(false);
  const [isResponsive, setResponsive] = React.useState(false);

  const sidebar = (
    <Sider
      width={isResponsive ? "100%" : SIDER.WIDTH}
      collapsible
      collapsed={isCollapsed && isResponsive}
      collapsedWidth={SIDER.COLLAPSED_WIDTH}
      onCollapse={(collapsed) => {
        setCollapsed(collapsed);
      }}
      breakpoint="sm"
      onBreakpoint={(broken) => {
        setResponsive(broken);
      }}
      style={{
        position: "fixed",
        overflow: "auto",
        height: `calc(100vh - ${HEADER.HEIGHT}px)`,
      }}
      trigger={null}
    >
      {isResponsive && (
        <div style={{ padding: 16 }}>
          <DendronSearch {...props} />
        </div>
      )}
      <DendronTreeMenu
        {...props}
        collapsed={isCollapsed && isResponsive}
        setCollapsed={setCollapsed}
      />
    </Sider>
  );

  const content = (
    <>
      <Content
        className="main-content"
        role="main"
        style={{ padding: `0 ${LAYOUT.PADDING}px` }}
      >
        <DendronBreadCrumb {...props} />
        {props.children}
      </Content>
      <Divider />
      <Footer
        style={{
          padding: `0 ${LAYOUT.PADDING}px ${LAYOUT.PADDING}px`,
        }}
      >
        <FooterText />
      </Footer>
    </>
  );

  const engine = useEngineAppSelector((state) => state.engine);
  const config = engine.config;
  const enableMermaid = config && ConfigUtils.getEnableMermaid(config, true);

  return (
    <Layout
      style={{
        width: "100%",
        minHeight: "100%",
      }}
    >
      {enableMermaid && (
        <Script
          id="initmermaid"
          src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
          onLoad={() => {
            const mermaid = (window as any).mermaid;
            // save for debugging
            // when trying to access mermaid in DOM, <div id="mermaid"></div> gets returned
            // we disambiguate by saving a copy of mermaid
            (window as any)._mermaid = mermaid;

            mermaid.initialize({
              startOnLoad: false,
            });
            // initialize
            mermaid.init();
          }}
        />
      )}
      <Header
        style={{
          position: "fixed",
          isolation: "isolate",
          zIndex: 1,
          width: "100%",
          borderBottom: "1px solid #d4dadf",
          height: HEADER.HEIGHT,
          padding: isResponsive ? 0 : `0 ${LAYOUT.PADDING}px 0 2px`,
        }}
      >
        <Row
          justify="center"
          style={{
            maxWidth: "992px",
            justifyContent: "space-between",
            margin: "0 auto",
          }}
        >
          <Col xs={20} sm={4} style={{ display: "flex" }}>
            <DendronLogoOrTitle />
          </Col>
          <Col xs={0} sm={20} md={20} lg={19} className="gutter-row">
            <DendronSearch {...props} />
          </Col>
          <Col
            xs={4}
            sm={4}
            md={0}
            lg={0}
            style={{
              display: isResponsive ? "flex" : "none",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <MenuOutlined
              style={{ fontSize: 24 }}
              onClick={() => setCollapsed(!isCollapsed)}
            />
          </Col>
        </Row>
      </Header>
      <Layout
        className="site-layout"
        style={{
          marginTop: 64,
        }}
      >
        <Layout className="site-layout" style={{ flexDirection: "row" }}>
          <Layout
            className="site-layout-sidebar"
            style={{
              flex: "0 0 auto",
              width: `calc(max((100% - ${LAYOUT.BREAKPOINTS.lg}) / 2, 0px) + ${
                // eslint-disable-next-line no-nested-ternary
                isResponsive
                  ? isCollapsed
                    ? SIDER.COLLAPSED_WIDTH
                    : "100%"
                  : SIDER.WIDTH
              }px)`,
              minWidth: isResponsive || isCollapsed ? 0 : SIDER.WIDTH,
              paddingLeft: `calc((100% - ${LAYOUT.BREAKPOINTS.lg}) / 2)`,
              // eslint-disable-next-line no-nested-ternary
            }}
          >
            {sidebar}
          </Layout>
          <Layout
            className="side-layout-main"
            style={{
              maxWidth: "1200px",
              display: !isCollapsed && isResponsive ? "none" : "initial",
            }}
          >
            {content}
          </Layout>
        </Layout>
      </Layout>
    </Layout>
  );
}
Example #9
Source File: NavBarMobile.tsx    From foodie with MIT License 4 votes vote down vote up
NavBarMobile: React.FC<IProps> = ({ theme, isAuth, auth, openModal }) => {
    const [isOpenSearch, setOpenSearch] = useState(false);
    const [isOpenMenu, setOpenMenu] = useState(false);
    const { pathname } = useLocation();
    const history = useHistory();

    const onClickMenuItem = () => {
        setOpenMenu(false);
    }

    const clickSearchItemCallback = (user: IUser) => {
        setOpenSearch(false);
        history.push(`/user/${user.username}`);
    }

    return isOpenSearch ? (
        <div className="fixed top-0 left-0 flex w-full items-center bg-indigo-700 z-9999 py-2 pr-2 shadow-xl">
            <div
                className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-indigo-500"
                onClick={() => setOpenSearch(false)}
            >
                <ArrowLeftOutlined className="text-white" style={{ fontSize: '18px' }} />
            </div>
            <SearchInput
                clickItemCallback={clickSearchItemCallback}
                inputClassName="w-full"
            />
        </div>
    ) : (
        <nav className="contain flex justify-between z-9999 align-center w-100 border-b border-transparent bg-white dark:bg-indigo-1000 text-gray-700 h-60px py-2 fixed top-0 left-0 w-full shadow-md laptop:shadow-sm dark:border-gray-800">
            <div className="flex items-center space-x-8">
                {/* ---- LOGO -------- */}
                <Link
                    to={{
                        pathname: '/',
                        state: { from: pathname }
                    }}
                >
                    <img
                        src={logo}
                        alt=""
                        className="w-24"
                        style={{ filter: `brightness(${theme === 'dark' ? 3.5 : 1})` }}
                    />
                </Link>
            </div>
            {/* ---- NAVICONS FOR MOBILE ---- */}
            <div className="flex items-center space-x-4 laptop:hidden">
                {isAuth && (
                    <>
                        <div
                            className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200  dark:hover:bg-indigo-1100"
                        >
                            <Messages isAuth={isAuth} />
                        </div>
                        <div
                            className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200  dark:hover:bg-indigo-1100"
                        >
                            <Notification isAuth={isAuth} />
                        </div>
                    </>
                )}
                <div
                    className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
                    onClick={() => setOpenSearch(true)}
                >
                    <SearchOutlined style={{ fontSize: '20px' }} />
                </div>
                <div
                    className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200  dark:text-white dark:hover:bg-indigo-1100"
                    onClick={() => setOpenMenu(true)}
                >
                    <MenuOutlined style={{ fontSize: '20px' }} />
                </div>
            </div>
            {/* ---- NAV DRAWER FOR MOBILE --- */}
            <div className={`flex  flex-col w-full h-screen fixed top-0 right-0 transition-transform  transform ${isOpenMenu ? 'translate-x-0' : 'translate-x-full'} bg-white dark:bg-indigo-1000 laptop:hidden`}>
                <div className="flex items-center justify-between px-4">
                    <div className="flex items-center space-x-4">
                        <h1 className="dark:text-white">Menu</h1>
                        <ThemeToggler />
                    </div>
                    <div
                        className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
                        onClick={() => setOpenMenu(false)}
                    >
                        <CloseOutlined style={{ fontSize: '20px' }} />
                    </div>
                </div>
                {isAuth ? (
                    <ul className="divide-y divide-gray-100 dark:divide-gray-800">
                        <li className="px-4 py-3 pb-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <Link
                                className="flex font-medium dark:text-indigo-400"
                                onClick={onClickMenuItem}
                                to={`/user/${auth.username}`}
                            >
                                <Avatar url={auth.profilePicture?.url} size="lg" className="mr-2" />
                                <div className="flex flex-col">
                                    <span>{auth.username}</span>
                                    <span className="text-gray-400 text-xs">View Profile</span>
                                </div>
                            </Link>
                        </li>
                        <li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <Link
                                className="flex items-center text-black dark:text-white"
                                onClick={onClickMenuItem}
                                to={`/user/${auth.username}/following`}
                            >
                                <TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
                                <h6 className="text-sm">Following</h6>
                            </Link>
                        </li>
                        <li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <Link
                                className="flex items-center text-black dark:text-white"
                                onClick={onClickMenuItem}
                                to={`/user/${auth.username}/followers`}
                            >
                                <TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
                                <h6 className="text-sm">Followers</h6>
                            </Link>
                        </li>
                        <li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <Link
                                className="flex items-center text-black dark:text-white"
                                onClick={onClickMenuItem}
                                to={`/user/${auth.username}/bookmarks`}
                            >
                                <StarOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
                                <h6 className="text-sm">Bookmarks</h6>
                            </Link>
                        </li>
                        <li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <Link
                                className="flex items-center text-black dark:text-white"
                                onClick={onClickMenuItem}
                                to={SUGGESTED_PEOPLE}
                            >
                                <UsergroupAddOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
                                <h6 className="text-sm">Suggested People</h6>
                            </Link>
                        </li>
                        <li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
                            <div
                                className="flex items-center text-black dark:text-white"
                                onClick={() => {
                                    openModal();
                                    setOpenMenu(false);
                                }}
                            >
                                <LogoutOutlined className="text-red-500" style={{ fontSize: '30px', marginRight: '25px' }} />
                                <h6 className="text-sm text-red-500">Logout</h6>
                            </div>
                        </li>
                    </ul>
                ) : (
                    <ul className="divide-y divide-gray-100 dark:divide-gray-800">
                        <li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
                            <ArrowRightOutlined className="dark:text-white" />
                            <Link
                                className="p-4 font-medium dark:text-indigo-400 flex-grow"
                                to={LOGIN}
                            >
                                Login
                                    </Link>
                        </li>
                        <li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
                            <ArrowRightOutlined className="dark:text-white" />
                            <Link
                                className="p-4 font-medium dark:text-indigo-400 flex-grow"
                                to={REGISTER}
                            >
                                Register
                                    </Link>
                        </li>
                    </ul>
                )}
                {/* --- COPYRIGHT -- */}
                <span className="text-gray-400 text-xs absolute bottom-8 left-0 right-0 mx-auto text-center">
                    &copy;Copyright {new Date().getFullYear()} Foodie
                    </span>
            </div>
        </nav>
    )
}
Example #10
Source File: Header.tsx    From leek with Apache License 2.0 4 votes vote down vote up
Header = () => {
  const { logout } = useAuth();
  const {
    applications,
    selectApplication,
    selectEnv,
    currentApp,
    currentEnv,
    seenEnvs,
  } = useApplication();

  const { switcher, currentTheme, themes } = useThemeSwitcher();

  function handleAppSelect(e) {
    selectApplication(e.key);
  }

  function handleEnvSelect(e) {
    selectEnv(e.key);
  }

  const apps = (
    <Menu
      onClick={handleAppSelect}
      selectedKeys={currentApp ? [currentApp] : []}
      selectable
    >
      {applications.map((app, index) => (
        <Menu.Item key={app["app_name"]}>{app["app_name"]}</Menu.Item>
      ))}
    </Menu>
  );

  function getMenuItems(location) {
    return tabs.map((tab) => {
      return (
        <Menu.Item key={`/${tab.key}/`}>
          <Link to={`/${tab.key}/${location.search}`}>
            <Space size={4}>
              {tab.icon} <span>{tab.name}</span>
            </Space>
          </Link>
        </Menu.Item>
      );
    });
  }

  const envs = (
    <Menu
      onClick={handleEnvSelect}
      selectedKeys={currentEnv ? [currentEnv] : []}
      selectable
    >
      {seenEnvs.map((env, index) => (
        <Menu.Item key={env["key"]}>{env["key"]}</Menu.Item>
      ))}
    </Menu>
  );

  const toggleTheme = (isChecked) => {
    if (isChecked) localStorage.setItem("theme", "dark");
    else localStorage.setItem("theme", "light");
    switcher({ theme: isChecked ? themes.dark : themes.light });
  };

  return (
    <Location>
      {({ location }) => {
        return (
          <Layout.Header
            style={{
              position: "fixed",
              zIndex: 1,
              width: "100%",
              // borderBottom: "1px solid #f0f0f0"
            }}
          >
            <div
              style={{
                width: "40px",
                height: "40px",
                margin: "5px 20px 5px 0",
                float: "left",
              }}
            >
              <Link to={`/${location.search}`}>
                <Image
                  alt="Logo"
                  width={40}
                  height={40}
                  style={{ margin: 0 }}
                  src="/leek.png"
                  preview={false}
                />
              </Link>
            </div>
            <Row justify="space-between">
              <Col xxl={18} xl={18} lg={14} md={0} sm={0} xs={0}>
                <Menu
                  mode="horizontal"
                  selectedKeys={[location.pathname]}
                  style={{ lineHeight: "48px", borderBottom: "0" }}
                >
                  {getMenuItems(location)}
                </Menu>
              </Col>
              <Col xxl={0} xl={0} lg={0} md={6} sm={6} xs={6}>
                <Menu
                  mode="horizontal"
                  selectedKeys={[location.pathname]}
                  style={{ lineHeight: "48px", borderBottom: "0" }}
                >
                  <SubMenu key="sub2" icon={<MenuOutlined />}>
                    {getMenuItems(location)}
                  </SubMenu>
                </Menu>
              </Col>
              <Col>
                <Row style={{ float: "right" }} gutter={10}>
                  {seenEnvs.length > 0 && (
                    <Col>
                      <Dropdown.Button
                        size="small"
                        icon={<DownOutlined />}
                        overlay={envs}
                        placement="bottomLeft"
                      >
                        <span style={{ color: "#00BFA6" }}>env:&nbsp;</span>
                        {currentEnv ? currentEnv : "-"}
                      </Dropdown.Button>
                    </Col>
                  )}

                  <Col>
                    <Dropdown.Button
                      size="small"
                      icon={<DownOutlined />}
                      overlay={apps}
                      placement="bottomLeft"
                    >
                      <span style={{ color: "#00BFA6" }}>app:&nbsp;</span>
                      {currentApp ? currentApp : "-"}
                    </Dropdown.Button>
                  </Col>

                  <Col>
                    <Switch
                      checked={currentTheme === themes.dark}
                      onChange={toggleTheme}
                      checkedChildren={<span>?</span>}
                      unCheckedChildren={<span>☀</span>}
                      style={{ background: "#555" }}
                    />
                  </Col>

                  {env.LEEK_API_ENABLE_AUTH !== "false" && (
                    <Col key="/logout" style={{ float: "right" }}>
                      <Button
                        size="small"
                        danger
                        onClick={logout}
                        style={{ textAlign: "center" }}
                      >
                        <LogoutOutlined />
                      </Button>
                    </Col>
                  )}
                </Row>
              </Col>
            </Row>
          </Layout.Header>
        );
      }}
    </Location>
  );
}
Example #11
Source File: index.tsx    From ant-simple-draw with MIT License 4 votes vote down vote up
FontStyle: FC<FormProps<valueType>> = memo(function FontStyle({ value, onChange }) {
  const [val, setVal] = useSetState<valueType>({
    fontWeight: undefined,
    fontStyle: undefined,
    textDecoration: undefined,
    textAlign: undefined,
  });

  const triggerChange = (changedValue: valueType) => {
    onChange && onChange({ ...val, ...changedValue });
  };

  const handle = (flag: string) => {
    if (flag === 'fontWeight') {
      const fontWeight = {
        fontWeight: val.fontWeight === 'bold' ? undefined : 'bold',
      } as valueType;
      setVal(fontWeight);
      triggerChange(fontWeight);
    }
    if (flag === 'fontStyle') {
      const fontStyle = { fontStyle: val.fontStyle === 'italic' ? undefined : 'italic' };
      setVal(fontStyle);
      triggerChange(fontStyle);
    }
    if (flag === 'underline' || flag === 'line-through') {
      const textDecoration = {
        textDecoration: val.textDecoration === flag ? undefined : flag,
      };
      setVal(textDecoration);
      triggerChange(textDecoration);
    }
    if (['left', 'center', 'right', 'justify'].includes(flag)) {
      const textAlign = {
        textAlign: val.textAlign === flag ? undefined : flag,
      } as valueType;
      setVal(textAlign);
      triggerChange(textAlign);
    }
  };

  useEffect(() => {
    if (value) {
      setVal(value);
    }
  }, [value]);
  return (
    <Space
      style={{
        display: 'flex',
        flex: '1',
        justifyContent: 'space-around',
        flexFlow: 'wrap',
        padding: '3px 0',
      }}
    >
      <Tooltip title="加粗">
        <button style={{ width: '40px' }}>
          <BoldOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.fontWeight === 'bold' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('fontWeight')}
          />
        </button>
      </Tooltip>
      <Tooltip title="斜体">
        <button style={{ width: '40px' }}>
          <ItalicOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.fontStyle === 'italic' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('fontStyle')}
          />
        </button>
      </Tooltip>
      <Tooltip title="下划线">
        <button style={{ width: '40px' }}>
          <UnderlineOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textDecoration === 'underline' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('underline')}
          />
        </button>
      </Tooltip>
      <Tooltip title="删除线">
        <button style={{ width: '40px' }}>
          <StrikethroughOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textDecoration === 'line-through' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('line-through')}
          />
        </button>
      </Tooltip>
      <Tooltip title="左对齐">
        <button style={{ width: '40px' }}>
          <AlignLeftOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textAlign === 'left' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('left')}
          />
        </button>
      </Tooltip>
      <Tooltip title="居中对齐">
        <button style={{ width: '40px' }}>
          <AlignCenterOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textAlign === 'center' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('center')}
          />
        </button>
      </Tooltip>
      <Tooltip title="右对齐">
        <button style={{ width: '40px' }}>
          <AlignRightOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textAlign === 'right' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('right')}
          />
        </button>
      </Tooltip>
      <Tooltip title="两边对齐">
        <button style={{ width: '40px' }}>
          <MenuOutlined
            style={{
              fontSize: '18px',
              cursor: 'pointer',
              color: val.textAlign === 'justify' ? '#1890ff' : '#33383e',
            }}
            onClick={() => handle('justify')}
          />
        </button>
      </Tooltip>
    </Space>
  );
})