@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 |
|
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 |
|
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 |
|
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 |
|
Outline = styled(MenuOutlined)<any>`
font-size: 22px;
`
Example #5
| Source File: index.tsx From metaplex with Apache License 2.0 | 5 votes |
|
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 |
|
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 |
|
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 |
|
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 |
|
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">
©Copyright {new Date().getFullYear()} Foodie
</span>
</div>
</nav>
)
}
Example #10
| Source File: Header.tsx From leek with Apache License 2.0 | 4 votes |
|
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: </span>
{currentEnv ? currentEnv : "-"}
</Dropdown.Button>
</Col>
)}
<Col>
<Dropdown.Button
size="small"
icon={<DownOutlined />}
overlay={apps}
placement="bottomLeft"
>
<span style={{ color: "#00BFA6" }}>app: </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 |
|
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>
);
})
