@ant-design/icons#GlobalOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#GlobalOutlined.
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: personalizationOptions.tsx From posthog-foss with MIT License | 6 votes |
|
PRODUCTS: RadioSelectType[] = [
{
key: 'web',
label: 'Web App',
icon: <GlobalOutlined />,
},
{
key: 'mobile',
label: 'Mobile App',
icon: <MobileOutlined />,
},
{
key: 'website',
label: 'Website',
icon: <DesktopOutlined />,
},
{
key: 'backend',
label: 'Backend Server',
icon: <CloudServerOutlined />,
},
{
key: 'data_pipeline',
label: 'Data Pipeline',
icon: <DatabaseOutlined />,
},
]
Example #2
| Source File: CurrentPage.tsx From posthog-foss with MIT License | 6 votes |
|
export function CurrentPage(): JSX.Element {
const { href } = useValues(currentPageLogic)
const [showIcon, setShowIcon] = useState(true)
return (
<div className="current-page">
<Comment
avatar={
showIcon ? (
<img
src={getFavicon()}
onError={() => setShowIcon(false)}
width={32}
height={32}
alt="FavIcon"
/>
) : (
<GlobalOutlined />
)
}
content={
<div>
<div>{window.document.title}</div>
<div className="small-url-link">
<a href={href} target="_blank" rel="noreferrer noopener">
{addWBRToUrl(href)}
</a>
</div>
</div>
}
/>
</div>
)
}
Example #3
| Source File: index.tsx From ui-visualization with MIT License | 6 votes |
|
SelectLang: React.FC<SelectLangProps> = (props) => {
const { className } = props;
const selectedLang = getLocale();
const changeLang = ({ key }: ClickParam): void => setLocale(key);
const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
const languageLabels = {
'zh-CN': '简体中文',
'zh-TW': '繁体中文',
'en-US': 'English',
'pt-BR': 'Português',
};
const languageIcons = {
'zh-CN': '??',
'zh-TW': '??',
'en-US': '??',
'pt-BR': '??',
};
const langMenu = (
<Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={changeLang}>
{locales.map((locale) => (
<Menu.Item key={locale}>
<span role="img" aria-label={languageLabels[locale]}>
{languageIcons[locale]}
</span>{' '}
{languageLabels[locale]}
</Menu.Item>
))}
</Menu>
);
return (
<HeaderDropdown overlay={langMenu} placement="bottomRight">
<span className={classNames(styles.dropDown, className)}>
<GlobalOutlined title="语言" />
</span>
</HeaderDropdown>
);
}
Example #4
| Source File: LanguageSwitch.tsx From mayoor with MIT License | 6 votes |
|
LanguageSwitch: React.FC = () => {
const { i18n } = useTranslation();
const [isVisible, setIsVisible] = useState(false);
const handleLanguageChange = (language: string) => {
localStorage.setItem('default-language', language);
i18n.changeLanguage(language);
};
return (
<Popover
content={
<Button.Group>
{[
{ code: 'en', languageName: 'English' },
{ code: 'cs', languageName: 'Čeština' },
].map(({ code, languageName }) => (
<Button
key={code}
onClick={() => handleLanguageChange(code)}
disabled={i18n.language === code}
>
{languageName}
</Button>
))}
</Button.Group>
}
trigger="click"
placement="bottom"
visible={isVisible}
onVisibleChange={setIsVisible}
>
<Button icon={<GlobalOutlined />} shape="circle" type="link" />
</Popover>
);
}
Example #5
| Source File: index.tsx From posthog-foss with MIT License | 5 votes |
|
/** Return a simple label component with timezone conversion UI. */
function TZLabelRaw({
time,
showSeconds,
formatString,
}: {
time: string | dayjs.Dayjs
showSeconds?: boolean
formatString?: string
}): JSX.Element {
const parsedTime = dayjs.isDayjs(time) ? time : dayjs(time)
const { currentTeam } = useValues(teamLogic)
const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
const timeStyle = showSeconds ? { minWidth: 192 } : undefined
const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
const handleVisibleChange = (visible: boolean): void => {
if (visible) {
reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
}
}
const PopoverContent = (
<div className="tz-label-popover">
<TZConversionHeader />
<div className="divider" />
<div className="timezones">
<Row className="timezone">
<Col className="name">
<LaptopOutlined /> {shortTimeZone(undefined, parsedTime.toDate())}
</Col>
<Col className="scope">Your device</Col>
<Col className="time" style={timeStyle}>
{parsedTime.format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
{currentTeam && (
<Row className="timezone">
<Col className="name">
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone, parsedTime.toDate())}
</Col>
<Col className="scope">Project</Col>
<Col className="time" style={timeStyle}>
{parsedTime.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
{currentTeam?.timezone !== 'UTC' && (
<Row className="timezone">
<Col className="name">
<GlobalOutlined /> UTC
</Col>
<Col className="scope" />
<Col className="time" style={timeStyle}>
{parsedTime.tz('UTC').format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
</div>
</div>
)
return (
<Popover content={PopoverContent} onVisibleChange={handleVisibleChange}>
<span className="tz-label">
{formatString ? humanFriendlyDetailedTime(parsedTime, undefined, formatString) : parsedTime.fromNow()}
</span>
</Popover>
)
}
Example #6
| Source File: index.tsx From posthog-foss with MIT License | 5 votes |
|
/** Return an explainer component for analytics visualization pages. */
function TZIndicatorRaw({
style,
placement,
}: {
style?: React.CSSProperties
placement?: TooltipPlacement
}): JSX.Element {
const { currentTeam } = useValues(teamLogic)
const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
const handleVisibleChange = (visible: boolean): void => {
if (visible) {
reportTimezoneComponentViewed('indicator', currentTeam?.timezone, shortTimeZone())
}
}
const PopoverContent = (
<div className="tz-label-popover">
<TZConversionHeader />
<p style={{ maxWidth: 320 }}>
All graphs are calculated and presented in UTC (GMT timezone).
<br />
Conversion to your local timezones are shown below.
</p>
<div className="divider" />
<div className="timezones">
<Row className="timezone">
<Col className="name">
<LaptopOutlined /> {shortTimeZone(undefined)}
</Col>
<Col className="scope">Your device</Col>
<Col className="time" style={{ minWidth: 100, fontWeight: 'bold' }}>
{humanTzOffset()}
</Col>
</Row>
{currentTeam && (
<Row className="timezone">
<Col className="name">
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone)}
</Col>
<Col className="scope">Project</Col>
<Col className="time" style={{ minWidth: 100, fontWeight: 'bold' }}>
{humanTzOffset(currentTeam.timezone)}
</Col>
</Row>
)}
</div>
</div>
)
return (
<Popover content={PopoverContent} onVisibleChange={handleVisibleChange} placement={placement}>
<span className="tz-indicator" style={style}>
<GlobalOutlined /> UTC
</span>
</Popover>
)
}
Example #7
| Source File: seeds.tsx From dendron with GNU Affero General Public License v3.0 | 5 votes |
|
/**
* Component for the GoToSite button on a seed browser card
* @param url - URL to open
* @param inVscode - set if within vs code webview, do not set for browser.
* @returns
*/
export function GoToSiteButton({
url,
inVscode,
}: {
url: string | undefined;
inVscode: boolean;
}) {
function onClick() {
if (url) {
// If we're in VSCode, the webview does not allow popups, so send a
// message back to the plugin and open the link from within the plugin
if (inVscode) {
postVSCodeMessage({
type: SeedBrowserMessageType.onOpenUrl,
data: { data: url },
source: DMessageSource.webClient,
} as SeedBrowserMessage);
} else {
window.open(url);
}
}
}
if (url) {
return (
<Tooltip placement="top" title="Go to Site">
<GlobalOutlined key="website" onClick={onClick} />
</Tooltip>
);
} else {
return (
<Tooltip placement="top" title="Site Unavailable">
<DisconnectOutlined key="website" onClick={onClick} />
</Tooltip>
);
}
}
Example #8
| Source File: Seeds.tsx From dendron with GNU Affero General Public License v3.0 | 5 votes |
|
/**
* Component for the GoToSite button on a seed browser card
* @param url - URL to open
* @param inVscode - set if within vs code webview, do not set for browser.
* @returns
*/
export function GoToSiteButton({
url,
inVscode,
}: {
url: string | undefined;
inVscode: boolean;
}) {
function onClick() {
if (url) {
// If we're in VSCode, the webview does not allow popups, so send a
// message back to the plugin and open the link from within the plugin
if (inVscode) {
postVSCodeMessage({
type: SeedBrowserMessageType.onOpenUrl,
data: { data: url },
source: DMessageSource.webClient,
} as SeedBrowserMessage);
} else {
window.open(url);
}
}
}
if (url) {
return (
<Tooltip placement="top" title="Go to Site">
<GlobalOutlined key="website" onClick={onClick} />
</Tooltip>
);
} else {
return (
<Tooltip placement="top" title="Site Unavailable">
<DisconnectOutlined key="website" onClick={onClick} />
</Tooltip>
);
}
}
Example #9
| Source File: PluginDrawer.tsx From posthog-foss with MIT License | 4 votes |
|
export function PluginDrawer(): JSX.Element {
const { user } = useValues(userLogic)
const { preflight } = useValues(preflightLogic)
const { editingPlugin, loading, editingSource, editingPluginInitialChanges } = useValues(pluginsLogic)
const { editPlugin, savePluginConfig, uninstallPlugin, setEditingSource, generateApiKeysIfNeeded, patchPlugin } =
useActions(pluginsLogic)
const [form] = Form.useForm()
const [invisibleFields, setInvisibleFields] = useState<string[]>([])
const [requiredFields, setRequiredFields] = useState<string[]>([])
useEffect(() => {
if (editingPlugin) {
form.setFieldsValue({
...(editingPlugin.pluginConfig.config || defaultConfigForPlugin(editingPlugin)),
__enabled: editingPlugin.pluginConfig.enabled,
...editingPluginInitialChanges,
})
generateApiKeysIfNeeded(form)
} else {
form.resetFields()
}
updateInvisibleAndRequiredFields()
}, [editingPlugin?.id, editingPlugin?.config_schema])
const updateInvisibleAndRequiredFields = (): void => {
determineAndSetInvisibleFields()
determineAndSetRequiredFields()
}
const determineAndSetInvisibleFields = (): void => {
const fieldsToSetAsInvisible = []
for (const field of Object.values(getConfigSchemaArray(editingPlugin?.config_schema || {}))) {
if (!field.visible_if || !field.key) {
continue
}
const shouldBeVisible = field.visible_if.every(
([targetFieldName, targetFieldValue]: Array<string | undefined>) =>
doFieldRequirementsMatch(form, targetFieldName, targetFieldValue)
)
if (!shouldBeVisible) {
fieldsToSetAsInvisible.push(field.key)
}
}
setInvisibleFields(fieldsToSetAsInvisible)
}
const determineAndSetRequiredFields = (): void => {
const fieldsToSetAsRequired = []
for (const field of Object.values(getConfigSchemaArray(editingPlugin?.config_schema || {}))) {
if (!field.required_if || !Array.isArray(field.required_if) || !field.key) {
continue
}
const shouldBeRequired = field.required_if.every(
([targetFieldName, targetFieldValue]: Array<string | undefined>) =>
doFieldRequirementsMatch(form, targetFieldName, targetFieldValue)
)
if (shouldBeRequired) {
fieldsToSetAsRequired.push(field.key)
}
}
setRequiredFields(fieldsToSetAsRequired)
}
const isValidChoiceConfig = (fieldConfig: PluginConfigChoice): boolean => {
return (
Array.isArray(fieldConfig.choices) &&
!!fieldConfig.choices.length &&
!fieldConfig.choices.find((c) => typeof c !== 'string') &&
!fieldConfig.secret
)
}
const isValidField = (fieldConfig: PluginConfigSchema): boolean =>
fieldConfig.type !== 'choice' || isValidChoiceConfig(fieldConfig)
return (
<>
<Drawer
forceRender={true}
visible={!!editingPlugin}
onClose={() => editPlugin(null)}
width="min(90vw, 500px)"
title={editingPlugin?.name}
data-attr="plugin-drawer"
footer={
<div style={{ display: 'flex' }}>
<Space style={{ flexGrow: 1 }}>
{editingPlugin &&
!editingPlugin.is_global &&
canInstallPlugins(user?.organization, editingPlugin.organization_id) && (
<Popconfirm
placement="topLeft"
title="Are you sure you wish to uninstall this plugin completely?"
onConfirm={() => uninstallPlugin(editingPlugin.name)}
okText="Uninstall"
cancelText="Cancel"
className="plugins-popconfirm"
>
<Button
style={{ color: 'var(--danger)', padding: 4 }}
type="text"
icon={<DeleteOutlined />}
data-attr="plugin-uninstall"
>
Uninstall
</Button>
</Popconfirm>
)}
{preflight?.cloud &&
editingPlugin &&
canGloballyManagePlugins(user?.organization) &&
(editingPlugin.is_global ? (
<Tooltip
title={
<>
This plugin can currently be used by other organizations in this
instance of PostHog. This action will <b>disable and hide it</b> for all
organizations other than yours.
</>
}
>
<Button
type="text"
icon={<RollbackOutlined />}
onClick={() => patchPlugin(editingPlugin.id, { is_global: false })}
style={{ padding: 4 }}
>
Make local
</Button>
</Tooltip>
) : (
<Tooltip
title={
<>
This action will mark this plugin as installed for{' '}
<b>all organizations</b> in this instance of PostHog.
</>
}
>
<Button
type="text"
icon={<GlobalOutlined />}
onClick={() => patchPlugin(editingPlugin.id, { is_global: true })}
style={{ padding: 4 }}
>
Make global
</Button>
</Tooltip>
))}
</Space>
<Space>
<Button onClick={() => editPlugin(null)} data-attr="plugin-drawer-cancel">
Cancel
</Button>
<Button
type="primary"
loading={loading}
onClick={form.submit}
data-attr="plugin-drawer-save"
>
Save
</Button>
</Space>
</div>
}
>
<Form form={form} layout="vertical" name="basic" onFinish={savePluginConfig}>
{editingPlugin ? (
<div>
<div style={{ display: 'flex', marginBottom: 16 }}>
<PluginImage
pluginType={editingPlugin.plugin_type}
url={editingPlugin.url}
size="large"
/>
<div style={{ flexGrow: 1, paddingLeft: 16 }}>
{endWithPunctation(editingPlugin.description)}
<div style={{ marginTop: 5 }}>
{editingPlugin?.plugin_type === 'local' && editingPlugin.url ? (
<LocalPluginTag url={editingPlugin.url} title="Installed Locally" />
) : editingPlugin.plugin_type === 'source' ? (
<SourcePluginTag />
) : null}
{editingPlugin.url && (
<a href={editingPlugin.url}>
<i>⤷ Learn more</i>
</a>
)}
</div>
<div style={{ display: 'flex', alignItems: 'center', marginTop: 5 }}>
<Form.Item
fieldKey="__enabled"
name="__enabled"
style={{ display: 'inline-block', marginBottom: 0 }}
data-attr="plugin-enabled-switch"
>
<EnabledDisabledSwitch />
</Form.Item>
</div>
</div>
</div>
{editingPlugin.plugin_type === 'source' ? (
<div>
<Button
type={editingSource ? 'default' : 'primary'}
icon={<CodeOutlined />}
onClick={() => setEditingSource(!editingSource)}
data-attr="plugin-edit-source"
>
Edit Source
</Button>
</div>
) : null}
{editingPlugin.capabilities && Object.keys(editingPlugin.capabilities).length > 0 ? (
<>
<h3 className="l3" style={{ marginTop: 32 }}>
Capabilities
</h3>
<div style={{ marginTop: 5 }}>
{[
...editingPlugin.capabilities.methods,
...editingPlugin.capabilities.scheduled_tasks,
]
.filter(
(capability) => !['setupPlugin', 'teardownPlugin'].includes(capability)
)
.map((capability) => (
<Tooltip title={capabilitiesInfo[capability] || ''} key={capability}>
<Tag className="plugin-capabilities-tag">{capability}</Tag>
</Tooltip>
))}
{editingPlugin.capabilities.jobs.map((jobName) => (
<Tooltip title="Custom job" key={jobName}>
<Tag className="plugin-capabilities-tag">{jobName}</Tag>
</Tooltip>
))}
</div>
</>
) : null}
{editingPlugin.pluginConfig.id && (
<PluginJobOptions
plugin={editingPlugin}
pluginConfigId={editingPlugin.pluginConfig.id}
/>
)}
<h3 className="l3" style={{ marginTop: 32 }}>
Configuration
</h3>
{getConfigSchemaArray(editingPlugin.config_schema).length === 0 ? (
<div>This plugin is not configurable.</div>
) : null}
{getConfigSchemaArray(editingPlugin.config_schema).map((fieldConfig, index) => (
<React.Fragment key={fieldConfig.key || `__key__${index}`}>
{fieldConfig.markdown && (
<ReactMarkdown source={fieldConfig.markdown} linkTarget="_blank" />
)}
{fieldConfig.type && isValidField(fieldConfig) ? (
<Form.Item
hidden={!!fieldConfig.key && invisibleFields.includes(fieldConfig.key)}
label={
<>
{fieldConfig.secret && <SecretFieldIcon />}
{fieldConfig.name || fieldConfig.key}
</>
}
extra={
fieldConfig.hint && (
<small>
<div style={{ height: 2 }} />
<ReactMarkdown source={fieldConfig.hint} linkTarget="_blank" />
</small>
)
}
name={fieldConfig.key}
required={
fieldConfig.required ||
(!!fieldConfig.key && requiredFields.includes(fieldConfig.key))
}
rules={[
{
required:
fieldConfig.required ||
(!!fieldConfig.key && requiredFields.includes(fieldConfig.key)),
message: 'Please enter a value!',
},
]}
>
<PluginField
fieldConfig={fieldConfig}
onChange={updateInvisibleAndRequiredFields}
/>
</Form.Item>
) : (
<>
{fieldConfig.type ? (
<p style={{ color: 'var(--danger)' }}>
Invalid config field <i>{fieldConfig.name || fieldConfig.key}</i>.
</p>
) : null}
</>
)}
</React.Fragment>
))}
</div>
) : null}
</Form>
</Drawer>
{editingPlugin?.plugin_type === 'source' ? <PluginSource /> : null}
</>
)
}
Example #10
| Source File: PluginCard.tsx From posthog-foss with MIT License | 4 votes |
|
export function PluginCard({
plugin,
error,
maintainer,
showUpdateButton,
order,
maxOrder,
rearranging,
DragColumn = ({ children }) => <Col className="order-handle">{children}</Col>,
unorderedPlugin = false,
}: PluginCardProps): JSX.Element {
const {
name,
description,
url,
plugin_type: pluginType,
pluginConfig,
tag,
latest_tag: latestTag,
id: pluginId,
updateStatus,
hasMoved,
is_global,
organization_id,
organization_name,
} = plugin
const {
editPlugin,
toggleEnabled,
installPlugin,
resetPluginConfigError,
rearrange,
showPluginLogs,
showPluginMetrics,
} = useActions(pluginsLogic)
const { loading, installingPluginUrl, checkingForUpdates, pluginUrlToMaintainer } = useValues(pluginsLogic)
const { user } = useValues(userLogic)
const hasSpecifiedMaintainer = maintainer || (plugin.url && pluginUrlToMaintainer[plugin.url])
const pluginMaintainer = maintainer || pluginUrlToMaintainer[plugin.url || '']
return (
<Col
style={{ width: '100%', marginBottom: 20 }}
className={`plugins-scene-plugin-card-col${rearranging ? ` rearranging` : ''}`}
data-attr={`plugin-card-${pluginConfig ? 'installed' : 'available'}`}
>
<Card className="plugins-scene-plugin-card">
<Row align="middle" className="plugin-card-row">
{typeof order === 'number' && typeof maxOrder === 'number' ? (
<DragColumn>
<div className={`arrow${order === 1 ? ' hide' : ''}`}>
<DownOutlined />
</div>
<div>
<Tag color={hasMoved ? '#bd0225' : '#555'} onClick={rearrange}>
{order}
</Tag>
</div>
<div className={`arrow${order === maxOrder ? ' hide' : ''}`}>
<DownOutlined />
</div>
</DragColumn>
) : null}
{unorderedPlugin ? (
<Tooltip title="This plugin does not do any processing in order." placement="topRight">
<Col>
<Tag color="#555">-</Tag>
</Col>
</Tooltip>
) : null}
{pluginConfig && (
<Col>
<Popconfirm
placement="topLeft"
title={`Are you sure you wish to ${
pluginConfig.enabled ? 'disable' : 'enable'
} this plugin?`}
onConfirm={() =>
pluginConfig.id
? toggleEnabled({ id: pluginConfig.id, enabled: !pluginConfig.enabled })
: editPlugin(pluginId || null, { __enabled: true })
}
okText="Yes"
cancelText="No"
disabled={rearranging}
>
<Switch checked={pluginConfig.enabled ?? false} disabled={rearranging} />
</Popconfirm>
</Col>
)}
<Col className={pluginConfig ? 'hide-plugin-image-below-500' : ''}>
<PluginImage pluginType={pluginType} url={url} />
</Col>
<Col style={{ flex: 1 }}>
<div>
<strong style={{ marginRight: 8 }}>{name}</strong>
{hasSpecifiedMaintainer && (
<CommunityPluginTag isCommunity={pluginMaintainer === 'community'} />
)}
{pluginConfig?.error ? (
<PluginError
error={pluginConfig.error}
reset={() => resetPluginConfigError(pluginConfig?.id || 0)}
/>
) : error ? (
<PluginError error={error} />
) : null}
{is_global && (
<Tag color="blue">
<GlobalOutlined /> Managed by {organization_name}
</Tag>
)}
{canInstallPlugins(user?.organization, organization_id) && (
<>
{url?.startsWith('file:') ? <LocalPluginTag url={url} title="Local" /> : null}
{updateStatus?.error ? (
<Tag color="red">
<WarningOutlined /> Error checking for updates
</Tag>
) : checkingForUpdates &&
!updateStatus &&
pluginType !== PluginInstallationType.Source &&
!url?.startsWith('file:') ? (
<Tag color="blue">
<LoadingOutlined /> Checking for updates…
</Tag>
) : url && latestTag && tag ? (
tag === latestTag ? (
<Tag color="green">
<CheckOutlined /> Up to date
</Tag>
) : (
<UpdateAvailable url={url} tag={tag} latestTag={latestTag} />
)
) : null}
{pluginType === PluginInstallationType.Source ? <SourcePluginTag /> : null}
</>
)}
</div>
<div>{endWithPunctation(description)}</div>
</Col>
<Col>
<Space>
{url && <PluginAboutButton url={url} disabled={rearranging} />}
{showUpdateButton && pluginId ? (
<PluginUpdateButton
updateStatus={updateStatus}
pluginId={pluginId}
rearranging={rearranging}
/>
) : pluginId ? (
<>
{Object.keys(plugin.metrics || {}).length > 0 ? (
<Space>
<Tooltip title="Metrics">
<Button onClick={() => showPluginMetrics(pluginId)}>
<LineChartOutlined />
</Button>
</Tooltip>
</Space>
) : null}
<Tooltip
title={
pluginConfig?.id
? 'Logs'
: 'Logs – enable the plugin for the first time to view them'
}
>
<Button
className="padding-under-500"
disabled={rearranging || !pluginConfig?.id}
onClick={() => showPluginLogs(pluginId)}
data-attr="plugin-logs"
>
<UnorderedListOutlined />
</Button>
</Tooltip>
<Tooltip title="Configure">
<Button
type="primary"
className="padding-under-500"
disabled={rearranging}
onClick={() => editPlugin(pluginId)}
data-attr="plugin-configure"
>
<SettingOutlined />
</Button>
</Tooltip>
</>
) : !pluginId ? (
<Button
type="primary"
className="padding-under-500"
loading={loading && installingPluginUrl === url}
disabled={loading && installingPluginUrl !== url}
onClick={
url ? () => installPlugin(url, PluginInstallationType.Repository) : undefined
}
icon={<CloudDownloadOutlined />}
data-attr="plugin-install"
>
<span className="show-over-500">Install</span>
</Button>
) : null}
</Space>
</Col>
</Row>
</Card>
</Col>
)
}
Example #11
| 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 #12
| Source File: index.tsx From foodie with MIT License | 4 votes |
|
PostItem: React.FC<IProps> = (props) => {
const { post, likeCallback, isAuth } = props;
const [isCommentVisible, setCommentVisible] = useState(false);
const deleteModal = useModal();
const updateModal = useModal();
const commentInputRef = useRef<HTMLInputElement | null>(null);
const dispatch = useDispatch();
const handleToggleComment = () => {
if (!isAuth) return;
if (!isCommentVisible) setCommentVisible(true);
if (commentInputRef.current) commentInputRef.current.focus();
}
const displayLikeMetric = (likesCount: number, isLiked: boolean) => {
const like = likesCount > 1 ? 'like' : 'likes';
const likeMinusSelf = (likesCount - 1) > 1 ? 'like' : 'likes';
const people = likesCount > 1 ? 'people' : 'person';
const peopleMinusSelf = (likesCount - 1) > 1 ? 'people' : 'person';
if (isLiked && likesCount <= 1) {
return 'You like this.'
} else if (isLiked && likesCount > 1) {
return `You and ${likesCount - 1} other ${peopleMinusSelf} ${likeMinusSelf} this.`;
} else {
return `${likesCount} ${people} ${like} this.`;
}
}
const handleClickLikes = () => {
if (isAuth) {
dispatch(showModal(EModalType.POST_LIKES));
dispatch(setTargetPost(props.post));
}
}
const handleClickPrivacyChange = () => {
if (post.isOwnPost) {
dispatch(setTargetPost(post));
dispatch(showModal(EModalType.EDIT_POST));
}
}
return (
<div className="flex flex-col bg-white rounded-lg my-4 p-4 first:mt-0 shadow-lg dark:bg-indigo-1000">
{/* --- AVATAR AND OPTIONS */}
<div className="flex justify-between items-center w-full">
<div className="flex">
<Avatar
url={post.author.profilePicture?.url}
className="mr-3"
/>
<div className="flex flex-col">
<Link className="dark:text-indigo-400" to={`/user/${post.author.username}`}>
<h5 className="font-bold">{post.author.username}</h5>
</Link>
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-500">{dayjs(post.createdAt).fromNow()}</span>
<div
className={`w-4 h-4 rounded-full flex items-center justify-center ${post.isOwnPost && 'cursor-pointer hover:bg-gray-100 dark:hover:bg-indigo-900'}`}
onClick={handleClickPrivacyChange}
title={post.isOwnPost ? 'Change Privacy' : ''}
>
{post.privacy === 'private'
? <LockOutlined className="text-xs text-gray-500 dark:text-white" />
: post.privacy === 'follower'
? <UserOutlined className="text-xs text-gray-500 dark:text-white" />
: <GlobalOutlined className="text-xs text-gray-500 dark:text-white" />
}
</div>
</div>
</div>
</div>
{isAuth && (
<PostOptions
openDeleteModal={deleteModal.openModal}
openUpdateModal={updateModal.openModal}
post={post}
/>
)}
</div>
{/* --- DESCRIPTION */}
<div className="mb-3 mt-2">
<p className="text-gray-700 dark:text-gray-300 break-words">{post.description}</p>
</div>
{/* --- IMAGE GRID ----- */}
{post.photos.length !== 0 && <ImageGrid images={post.photos.map(img => img.url)} />}
{/* ---- LIKES/COMMENTS DETAILS ---- */}
<div className="flex justify-between px-2 my-2">
<div onClick={handleClickLikes}>
{post.likesCount > 0 && (
<span className="text-gray-500 text-sm cursor-pointer hover:underline hover:text-gray-800 dark:hover:text-white">
{displayLikeMetric(post.likesCount, post.isLiked)}
</span>
)}
</div>
{/* --- COMMENTS COUNT ----- */}
<div>
{post.commentsCount > 0 && (
<span
className="text-gray-500 hover:text-gray-800 cursor-pointer text-sm hover:underline dark:text-gray-500 dark:hover:text-white"
onClick={handleToggleComment}
>
{post.commentsCount} {post.commentsCount === 1 ? 'comment' : 'comments'}
</span>
)}
</div>
</div>
{/* --- LIKE/COMMENT BUTTON */}
{isAuth ? (
<div className="flex items-center justify-around py-2 border-t border-gray-200 dark:border-gray-800">
<LikeButton postID={post.id} isLiked={post.isLiked} likeCallback={likeCallback} />
<span
className="py-2 rounded-md flex items-center justify-center text-gray-700 hover:text-gray-800 700 dark:text-gray-400 dark:hover:text-white dark:hover:bg-indigo-1100 cursor-pointer hover:bg-gray-100 text-l w-2/4"
onClick={handleToggleComment}
>
<CommentOutlined /> Comment
</span>
</div>
) : (
<div className="text-center py-2">
<span className="text-gray-400 text-sm">
<Link className="font-medium underline dark:text-indigo-400" to={LOGIN}>Login</Link> to like or comment on post.
</span>
</div>
)}
{isAuth && (
<Suspense fallback={<LoadingOutlined className="text-gray-800 dark:text-white" />}>
<Comments
postID={post.id}
authorID={post.author.id}
isCommentVisible={isCommentVisible}
commentInputRef={commentInputRef}
setInputCommentVisible={setCommentVisible}
/>
</Suspense>
)}
</div>
);
}
Example #13
| Source File: expressionInput.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
ExpressionInput: FC<CMExpressionInputProps> = ({ value, onExpressionChange, queryHistory, metricNames, isLoading, executeQuery }) => {
const containerRef = useRef<HTMLDivElement>(null);
const viewRef = useRef<EditorView | null>(null);
const executeQueryCallback = useRef(executeQuery);
const [showMetricsExplorer, setShowMetricsExplorer] = useState<boolean>(false);
useEffect(() => {
executeQueryCallback.current = executeQuery;
promqlExtension
.activateCompletion(true)
.activateLinter(true)
.setComplete({
remote: { url, fetchFn: myHTTPClient, cache: { initialMetricList: metricNames } },
});
// Create or reconfigure the editor.
const view = viewRef.current;
if (view === null) {
// If the editor does not exist yet, create it.
if (!containerRef.current) {
throw new Error('expected CodeMirror container element to exist');
}
const startState = EditorState.create({
doc: value,
extensions: [
baseTheme,
highlightSpecialChars(),
history(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
bracketMatching(),
closeBrackets(),
autocompletion(),
highlightSelectionMatches(),
promqlHighlighter,
EditorView.lineWrapping,
keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, ...commentKeymap, ...completionKeymap, ...lintKeymap]),
placeholder('Expression (press Shift+Enter for newlines)'),
promqlExtension.asExtension(),
// This keymap is added without precedence so that closing the autocomplete dropdown
// via Escape works without blurring the editor.
keymap.of([
{
key: 'Escape',
run: (v: EditorView): boolean => {
v.contentDOM.blur();
return false;
},
},
]),
Prec.override(
keymap.of([
{
key: 'Enter',
run: (v: EditorView): boolean => {
executeQueryCallback.current();
return true;
},
},
{
key: 'Shift-Enter',
run: insertNewlineAndIndent,
},
]),
),
EditorView.updateListener.of((update: ViewUpdate): void => {
onExpressionChange(update.state.doc.toString());
}),
],
});
const view = new EditorView({
state: startState,
parent: containerRef.current,
});
viewRef.current = view;
view.focus();
}
}, [executeQuery, onExpressionChange, queryHistory]);
const insertAtCursor = (value: string) => {
const view = viewRef.current;
if (view === null) {
return;
}
const { from, to } = view.state.selection.ranges[0];
view.dispatch(
view.state.update({
changes: { from, to, insert: value },
}),
);
};
return (
<>
<div className='prometheus-input-box'>
<div className='input-prefix'>
<span>PromQL: </span>
</div>
<div className='input'>
<div className='input-content' ref={containerRef} />
</div>
<div className='suffix'>
<Button size='large' className='metrics' icon={<GlobalOutlined />} onClick={() => setShowMetricsExplorer(true)}></Button>
<Button size='large' type='primary' className='execute' onClick={executeQuery}>
Execute
</Button>
</div>
</div>
{/* 点击按钮的弹出Modal */}
<MetricsExplorer show={showMetricsExplorer} updateShow={setShowMetricsExplorer} metrics={metricNames} insertAtCursor={insertAtCursor} />
</>
);
}
Example #14
| Source File: index.tsx From datart with Apache License 2.0 | 4 votes |
|
export function Navbar() {
const { actions } = useMainSlice();
const [profileVisible, setProfileVisible] = useState(false);
const [modifyPasswordVisible, setModifyPasswordVisible] = useState(false);
const dispatch = useDispatch();
const history = useHistory();
const { i18n } = useTranslation();
const systemInfo = useSelector(selectSystemInfo);
const orgId = useSelector(selectOrgId);
const currentOrganization = useSelector(selectCurrentOrganization);
const loggedInUser = useSelector(selectLoggedInUser);
const organizationListLoading = useSelector(selectOrganizationListLoading);
const downloadPolling = useSelector(selectDownloadPolling);
const themeKey = useSelector(selectThemeKey);
const matchModules = useRouteMatch<{ moduleName: string }>(
'/organizations/:orgId/:moduleName',
);
const t = useI18NPrefix('main');
const brandClick = useCallback(() => {
history.push('/');
}, [history]);
const hideProfile = useCallback(() => {
setProfileVisible(false);
}, []);
const hideModifyPassword = useCallback(() => {
setModifyPasswordVisible(false);
}, []);
const organizationListVisibleChange = useCallback(
visible => {
if (visible && !organizationListLoading) {
dispatch(getOrganizations());
}
},
[dispatch, organizationListLoading],
);
const subNavs = useMemo(
() => [
{
name: 'variables',
title: t('subNavs.variables.title'),
icon: <FunctionOutlined />,
module: ResourceTypes.Manager,
},
{
name: 'orgSettings',
title: t('subNavs.orgSettings.title'),
icon: <SettingOutlined />,
module: ResourceTypes.Manager,
},
],
[t],
);
const navs = useMemo(
() => [
{
name: 'vizs',
title: t('nav.vizs'),
icon: <i className="iconfont icon-xietongzhihuidaping" />,
module: ResourceTypes.Viz,
},
{
name: 'views',
title: t('nav.views'),
icon: <i className="iconfont icon-24gf-table" />,
module: ResourceTypes.View,
},
{
name: 'sources',
title: t('nav.sources'),
icon: <i className="iconfont icon-shujukupeizhi" />,
module: ResourceTypes.Source,
},
{
name: 'schedules',
title: t('nav.schedules'),
icon: <i className="iconfont icon-fasongyoujian" />,
module: ResourceTypes.Schedule,
},
{
name: 'members',
title: t('nav.members'),
icon: <i className="iconfont icon-users1" />,
isActive: (_, location) =>
!!location.pathname.match(
/\/organizations\/[\w]{32}\/(members|roles)/,
),
module: ResourceTypes.User,
},
{
name: 'permissions',
title: t('nav.permissions'),
icon: <SafetyCertificateFilled />,
module: ResourceTypes.Manager,
},
{
name: 'toSub',
title: t('nav.settings'),
icon: <SettingFilled />,
isActive: (_, location) => {
const reg = new RegExp(
`\\/organizations\\/[\\w]{32}\\/(${subNavs
.map(({ name }) => name)
.join('|')})`,
);
return !!location.pathname.match(reg);
},
module: ResourceTypes.Manager,
},
],
[subNavs, t],
);
const showSubNav = useMemo(
() => subNavs.some(({ name }) => name === matchModules?.params.moduleName),
[matchModules?.params.moduleName, subNavs],
);
const handleChangeThemeFn = useCallback(
(theme: ThemeKeyType) => {
if (themeKey !== theme) {
dispatch(themeSlice.actions.changeTheme(theme));
changeAntdTheme(theme);
saveTheme(theme);
}
},
[dispatch, themeKey],
);
const userMenuSelect = useCallback(
({ key }) => {
switch (key) {
case 'profile':
setProfileVisible(true);
break;
case 'logout':
dispatch(
logout(() => {
history.replace('/');
}),
);
break;
case 'password':
setModifyPasswordVisible(true);
break;
case 'zh':
case 'en':
if (i18n.language !== key) {
changeLang(key);
}
break;
case 'dark':
case 'light':
handleChangeThemeFn(key);
break;
default:
break;
}
},
[dispatch, history, i18n, handleChangeThemeFn],
);
const onSetPolling = useCallback(
(polling: boolean) => {
dispatch(actions.setDownloadPolling(polling));
},
[dispatch, actions],
);
return (
<>
<MainNav>
<Brand onClick={brandClick}>
<img src={logo} alt="logo" />
</Brand>
<Nav>
{navs.map(({ name, title, icon, isActive, module }) => {
return name !== 'toSub' || subNavs.length > 0 ? (
<Access
key={name}
type="module"
module={module}
level={PermissionLevels.Enable}
>
<Tooltip title={title} placement="right">
<NavItem
to={`/organizations/${orgId}/${
name === 'toSub' ? subNavs[0].name : name
}`}
activeClassName="active"
{...(isActive && { isActive })}
>
{icon}
</NavItem>
</Tooltip>
</Access>
) : null;
})}
</Nav>
<Toolbar>
<DownloadListPopup
polling={downloadPolling}
setPolling={onSetPolling}
onLoadTasks={loadTasks}
onDownloadFile={item => {
if (item.id) {
downloadFile(item.id).then(() => {
dispatch(actions.setDownloadPolling(true));
});
}
}}
/>
{systemInfo?.tenantManagementMode ===
TenantManagementMode.Platform && (
<Popup
content={<OrganizationList />}
trigger={['click']}
placement="rightBottom"
onVisibleChange={organizationListVisibleChange}
>
<li>
<Tooltip title={t('nav.organization.title')} placement="right">
<Avatar
src={`${BASE_RESOURCE_URL}${currentOrganization?.avatar}`}
>
<BankFilled />
</Avatar>
</Tooltip>
</li>
</Popup>
)}
<Popup
content={
<Menu
prefixCls="ant-dropdown-menu"
selectable={false}
onClick={userMenuSelect}
>
<MenuListItem
key="language"
prefix={<GlobalOutlined className="icon" />}
title={<p>{t('nav.account.switchLanguage.title')}</p>}
sub
>
<MenuListItem key="zh">中文</MenuListItem>
<MenuListItem key="en">English</MenuListItem>
</MenuListItem>
<MenuListItem
key="theme"
prefix={<SkinOutlined className="icon" />}
title={<p>{t('nav.account.switchTheme.title')}</p>}
sub
>
<MenuListItem key="light" prefix={<ThemeBadge />}>
{t('nav.account.switchTheme.light')}
</MenuListItem>
<MenuListItem
key="dark"
prefix={<ThemeBadge background={BLACK} />}
>
{t('nav.account.switchTheme.dark')}
</MenuListItem>
</MenuListItem>
<Menu.Divider />
<MenuListItem
key="profile"
prefix={<ProfileOutlined className="icon" />}
>
<p>{t('nav.account.profile.title')}</p>
</MenuListItem>
<MenuListItem
key="password"
prefix={<FormOutlined className="icon" />}
>
<p>{t('nav.account.changePassword.title')}</p>
</MenuListItem>
<MenuListItem
key="logout"
prefix={<ExportOutlined className="icon" />}
>
<p>{t('nav.account.logout.title')}</p>
</MenuListItem>
</Menu>
}
trigger={['click']}
placement="rightBottom"
>
<li>
<Avatar src={`${BASE_RESOURCE_URL}${loggedInUser?.avatar}`}>
<UserOutlined />
</Avatar>
</li>
</Popup>
</Toolbar>
<Profile visible={profileVisible} onCancel={hideProfile} />
<ModifyPassword
visible={modifyPasswordVisible}
onCancel={hideModifyPassword}
/>
</MainNav>
{showSubNav && (
<SubNav>
<List
dataSource={subNavs}
renderItem={({ name, title, icon }) => (
<SubNavTitle
key={name}
to={`/organizations/${orgId}/${name}`}
activeClassName="active"
>
{cloneElement(icon, { className: 'prefix' })}
<h4>{title}</h4>
</SubNavTitle>
)}
/>
</SubNav>
)}
</>
);
}
Example #15
| Source File: App.tsx From pcap2socks-gui with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout">
<Content className="content-wrapper">
<div className="content">
{(() => {
switch (this.state.stage) {
case STAGE_WELCOME:
return this.renderWelcome();
case STAGE_INTERFACE:
return this.renderInterface();
case STAGE_DEVICE:
return this.renderDevice();
case STAGE_PROXY:
return this.renderProxy();
case STAGE_RUNNING:
return this.renderRunning();
default:
return;
}
})()}
</div>
<div className="footer">
{(() => {
if (this.state.stage > STAGE_WELCOME && this.state.stage <= STAGE_PROXY) {
return (
<Button
className="button"
disabled={this.state.loading > 0}
icon={<LeftOutlined />}
onClick={() => this.setState({ stage: this.state.stage - 1 })}
>
上一步
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_INTERFACE) {
return (
<Button
className="button"
disabled={this.state.loading > 0 && this.state.loading !== 1}
icon={<ReloadOutlined />}
onClick={this.updateInterfaces}
>
刷新网卡列表
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_PROXY) {
return (
<Button
className="button"
disabled={this.state.loading > 0}
icon={<FolderOpenOutlined />}
onClick={() => {
const node = document.getElementById("open");
if (node) {
node.click();
}
}}
>
导入代理配置
<input id="open" type="file" onChange={this.import} style={{ display: "none" }} />
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_PROXY) {
return (
<Button className="button" icon={<ExportOutlined />} onClick={this.export}>
导出代理配置
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_PROXY) {
return (
<Button
className="button"
disabled={this.state.loading > 0 && this.state.loading !== 2}
loading={this.state.loading === 2}
icon={<ExperimentOutlined />}
onClick={this.test}
>
测试代理服务器
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_WELCOME && this.state.ready) {
return (
<Tooltip title={this.state.destination}>
<Button
className="button"
type="primary"
disabled={this.state.loading > 0 && this.state.loading !== 3}
loading={this.state.loading === 3}
icon={<PlayCircleOutlined />}
onClick={this.run}
>
以上次的配置运行
</Button>
</Tooltip>
);
}
})()}
{(() => {
if (this.state.stage >= STAGE_WELCOME && this.state.stage < STAGE_PROXY) {
return (
<Button
className="button"
disabled={this.state.loading > 0}
icon={<RightOutlined />}
type="primary"
onClick={() => this.setState({ stage: this.state.stage + 1 })}
>
下一步
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_PROXY) {
return (
<Button
className="button"
type="primary"
disabled={this.state.loading > 0 && this.state.loading !== 3}
loading={this.state.loading === 3}
icon={<PoweroffOutlined />}
onClick={this.run}
>
运行
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_RUNNING) {
return (
<Button className="button" icon={<GlobalOutlined />} onClick={this.notifyNetwork}>
显示网络设置
</Button>
);
}
})()}
{(() => {
if (this.state.stage === STAGE_RUNNING) {
return (
<Button
className="button"
type="primary"
danger
disabled={this.state.loading > 0 && this.state.loading !== 4}
loading={this.state.loading === 4}
icon={<PoweroffOutlined />}
onClick={this.stopConfirm}
>
停止
</Button>
);
}
})()}
</div>
</Content>
</Layout>
);
}
