@ant-design/icons#AppstoreAddOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#AppstoreAddOutlined.
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: OpticalPathList.tsx From slim with Apache License 2.0 | 5 votes |
|
render (): React.ReactNode {
if (this.props.metadata === undefined) {
return null
}
const isSelectable = (
this.props.opticalPaths.length > 1 &&
this.props.selectedPresentationStateUID == null
)
const opticalPathItems: React.ReactNode[] = []
const optionItems: React.ReactNode[] = []
this.props.opticalPaths.forEach(opticalPath => {
const opticalPathIdentifier = opticalPath.identifier
const images = this.props.metadata[opticalPathIdentifier]
const seriesInstanceUID = images[0].SeriesInstanceUID
images[0].OpticalPathSequence.forEach(opticalPathItem => {
const id = opticalPathItem.OpticalPathIdentifier
const description = opticalPathItem.OpticalPathDescription
if (opticalPath.identifier === id) {
if (this.props.activeOpticalPathIdentifiers.includes(id)) {
opticalPathItems.push(
<OpticalPathItem
key={`${seriesInstanceUID}-${id}`}
opticalPath={opticalPath}
metadata={images}
isVisible={this.props.visibleOpticalPathIdentifiers.includes(id)}
defaultStyle={this.props.defaultOpticalPathStyles[id]}
onVisibilityChange={this.props.onOpticalPathVisibilityChange}
onStyleChange={this.props.onOpticalPathStyleChange}
onRemoval={this.handleItemRemoval}
isRemovable={isSelectable}
/>
)
} else {
let title
if (description !== '') {
title = `${id} - ${description}`
} else {
title = `${id}`
}
optionItems.push(
<Option key={id} value={id}>{title}</Option>
)
}
}
})
})
let opticalPathSelector
if (isSelectable) {
opticalPathSelector = (
<Space align='center' size={20} style={{ padding: '14px' }}>
<Select
defaultValue=''
style={{ width: 200 }}
onChange={this.handleItemSelectionChange}
value={this.state.selectedOpticalPathIdentifier}
allowClear
>
{optionItems}
</Select>
<Tooltip title='Add'>
<Btn
icon={<AppstoreAddOutlined />}
type='primary'
onClick={this.handleItemAddition}
/>
</Tooltip>
</Space>
)
}
return (
<Menu selectable={false}>
{opticalPathItems}
{opticalPathSelector}
</Menu>
)
}
Example #2
| Source File: AddMedia.tsx From datart with Apache License 2.0 | 5 votes |
|
AddMedia: React.FC<{}> = () => {
const t = useI18NPrefix(`viz.board.action`);
const dispatch = useDispatch();
const { boardId, boardType } = useContext(BoardToolBarContext);
const onSelectMediaWidget = useCallback(
({ keyPath }) => {
const [mediaType] = keyPath;
const widget = widgetToolKit.media.create({
dashboardId: boardId,
boardType,
type: mediaType,
});
dispatch(addWidgetsToEditBoard([widget]));
},
[boardId, boardType, dispatch],
);
type TinyWidgetItems = {
name: string;
icon: React.ReactNode;
type: LightWidgetType;
};
const mediaWidgetTypes: TinyWidgetItems[] = [
{
name: t('image'),
icon: '',
type: 'image',
},
{
name: t('richText'),
icon: '',
type: 'richText',
},
{
name: t('timer'),
icon: '',
type: 'timer',
},
{
name: t('iframe'),
icon: '',
type: 'iframe',
},
{
name: t('video'),
icon: '',
type: 'video',
},
];
const mediaWidgetItems = (
<Menu onClick={onSelectMediaWidget}>
{mediaWidgetTypes.map(({ name, icon, type }) => (
<Menu.Item icon={icon} key={type}>
{name}
</Menu.Item>
))}
</Menu>
);
return (
<Dropdown
overlay={mediaWidgetItems}
placement="bottomLeft"
trigger={['click']}
>
<Tooltip title={t('media')}>
<ToolbarButton icon={<AppstoreAddOutlined />} />
</Tooltip>
</Dropdown>
);
}
Example #3
| Source File: Background.tsx From datart with Apache License 2.0 | 5 votes |
|
export function Background() {
const [formVisible, setFormVisible] = useState(false);
const userSettings = useSelector(selectUserSettings);
const organizations = useSelector(selectOrganizations);
const userSettingLoading = useSelector(selectUserSettingLoading);
const error = useSelector(selectInitializationError);
const t = useI18NPrefix('main.background');
const showForm = useCallback(() => {
setFormVisible(true);
}, []);
const hideForm = useCallback(() => {
setFormVisible(false);
}, []);
let visible = true;
let content;
if (userSettingLoading) {
content = (
<Hint>
<SettingOutlined className="img loading" />
<p>{t('loading')}</p>
</Hint>
);
} else if (error) {
content = (
<Hint>
<ReloadOutlined className="img" />
<p>{t('initError')}</p>
</Hint>
);
} else if (
!userSettingLoading &&
!(userSettings && userSettings.length) &&
!organizations.length
) {
content = (
<>
<Hint className="add" onClick={showForm}>
<AppstoreAddOutlined className="img" />
<p>{t('createOrg')}</p>
</Hint>
<OrganizationForm visible={formVisible} onCancel={hideForm} />
</>
);
} else {
visible = false;
}
return <Container visible={visible}>{content}</Container>;
}
Example #4
| Source File: Dashboards.tsx From posthog-foss with MIT License | 4 votes |
|
export function Dashboards(): JSX.Element {
const { dashboardsLoading } = useValues(dashboardsModel)
const { deleteDashboard, unpinDashboard, pinDashboard, addDashboard, duplicateDashboard } =
useActions(dashboardsModel)
const { setNewDashboardDrawer, setSearchTerm, setCurrentTab } = useActions(dashboardsLogic)
const { dashboards, newDashboardDrawer, searchTerm, currentTab } = useValues(dashboardsLogic)
const { hasAvailableFeature } = useValues(userLogic)
const columns: LemonTableColumns<DashboardType> = [
{
width: 0,
dataIndex: 'pinned',
render: function Render(pinned, { id }) {
return pinned ? (
<PushpinFilled
onClick={() => unpinDashboard(id, DashboardEventSource.DashboardsList)}
style={{ cursor: 'pointer' }}
/>
) : (
<PushpinOutlined
onClick={() => pinDashboard(id, DashboardEventSource.DashboardsList)}
style={{ cursor: 'pointer' }}
/>
)
},
},
{
title: 'Name',
dataIndex: 'name',
width: '40%',
render: function Render(name, { id, description, _highlight, is_shared }) {
return (
<div className={_highlight ? 'highlighted' : undefined} style={{ display: 'inline-block' }}>
<div className="row-name">
<Link data-attr="dashboard-name" to={urls.dashboard(id)}>
{name || 'Untitled'}
</Link>
{is_shared && (
<Tooltip title="This dashboard is shared publicly.">
<ShareAltOutlined style={{ marginLeft: 6 }} />
</Tooltip>
)}
</div>
{hasAvailableFeature(AvailableFeature.DASHBOARD_COLLABORATION) && description && (
<span className="row-description">{description}</span>
)}
</div>
)
},
sorter: (a, b) => (a.name ?? 'Untitled').localeCompare(b.name ?? 'Untitled'),
},
...(hasAvailableFeature(AvailableFeature.DASHBOARD_COLLABORATION)
? [
{
title: 'Tags',
dataIndex: 'tags' as keyof DashboardType,
render: function Render(tags: DashboardType['tags']) {
return <ObjectTags tags={tags} staticOnly />
},
} as LemonTableColumn<DashboardType, keyof DashboardType | undefined>,
]
: []),
createdByColumn<DashboardType>() as LemonTableColumn<DashboardType, keyof DashboardType | undefined>,
createdAtColumn<DashboardType>() as LemonTableColumn<DashboardType, keyof DashboardType | undefined>,
{
width: 0,
render: function RenderActions(_, { id, name }: DashboardType) {
return (
<More
overlay={
<>
<LemonButton
type="stealth"
to={urls.dashboard(id)}
onClick={() => {
dashboardLogic({ id }).mount()
dashboardLogic({ id }).actions.setDashboardMode(
null,
DashboardEventSource.DashboardsList
)
}}
fullWidth
>
View
</LemonButton>
<LemonButton
type="stealth"
to={urls.dashboard(id)}
onClick={() => {
dashboardLogic({ id }).mount()
dashboardLogic({ id }).actions.setDashboardMode(
DashboardMode.Edit,
DashboardEventSource.DashboardsList
)
}}
fullWidth
>
Edit
</LemonButton>
<LemonButton type="stealth" onClick={() => duplicateDashboard({ id, name })} fullWidth>
Duplicate
</LemonButton>
<LemonSpacer />
<LemonButton
type="stealth"
style={{ color: 'var(--danger)' }}
onClick={() => deleteDashboard({ id, redirect: false })}
fullWidth
>
Delete dashboard
</LemonButton>
</>
}
/>
)
},
},
]
return (
<div>
<PageHeader
title="Dashboards"
buttons={
<Button
data-attr={'new-dashboard'}
onClick={() => setNewDashboardDrawer(true)}
type="primary"
icon={<PlusOutlined />}
>
New Dashboard
</Button>
}
/>
<Tabs
activeKey={currentTab}
style={{ borderColor: '#D9D9D9' }}
onChange={(tab) => setCurrentTab(tab as DashboardsTab)}
>
<Tabs.TabPane tab="All Dashboards" key={DashboardsTab.All} />
<Tabs.TabPane tab="Pinned" key={DashboardsTab.Pinned} />
<Tabs.TabPane tab="Shared" key={DashboardsTab.Shared} />
</Tabs>
<div>
<Input.Search
allowClear
enterButton
placeholder="Search for dashboards"
style={{ width: 240 }}
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value)
}}
/>
</div>
<LemonSpacer large />
<Drawer
title="New Dashboard"
width={400}
onClose={() => setNewDashboardDrawer(false)}
destroyOnClose={true}
visible={newDashboardDrawer}
>
<NewDashboard />
</Drawer>
{dashboardsLoading ? (
<div className="flex-center" style={{ flexDirection: 'column' }}>
<Spinner />
<div className="mt">
<b>Loading dashboards</b>
</div>
</div>
) : dashboards.length > 0 || searchTerm || currentTab !== DashboardsTab.All ? (
<LemonTable
dataSource={dashboards}
rowKey="id"
columns={columns}
defaultSorting={{ columnKey: 'name', order: 1 }}
emptyState={
searchTerm ? (
`No ${
currentTab === DashboardsTab.Pinned
? 'pinned '
: currentTab === DashboardsTab.Shared
? 'shared '
: ''
}dashboards matching "${searchTerm}"!`
) : currentTab === DashboardsTab.Pinned ? (
<>
No dashboards have been pinned for quick access yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>
Go to All Dashboards to pin one.
</Link>
</>
) : currentTab === DashboardsTab.Shared ? (
<>
No dashboards have been shared yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>
Go to All Dashboards to share one.
</Link>
</>
) : undefined
}
nouns={['dashboard', 'dashboards']}
/>
) : (
<div className="mt">
<p>Create your first dashboard:</p>
<Row gutter={[16, 16]}>
<Col xs={24} xl={6}>
<Card
title="Empty"
size="small"
style={{ cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'New Dashboard',
show: true,
useTemplate: '',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
</Col>
<Col xs={24} xl={6}>
<Card
title="App Default"
size="small"
style={{ cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'Web App Dashboard',
show: true,
useTemplate: 'DEFAULT_APP',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
</Col>
</Row>
</div>
)}
</div>
)
}
Example #5
| 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 #6
| Source File: Subscriptions.tsx From leek with Apache License 2.0 | 4 votes |
|
Subscriptions = (props) => {
const [form] = Form.useForm();
const service = new AgentService();
const { currentApp } = useApplication();
const [subscriptions, setSubscriptions] = useState<any>([]);
const [addSubscriptionModalVisible, setAddSubscriptionModalVisible] =
useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
getSubscriptions();
}, [currentApp]);
const getSubscriptions = () => {
setLoading(true);
service
.getSubscriptions(currentApp)
.then(handleAPIResponse)
.then((subscriptions: any) => {
setSubscriptions(subscriptions);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => setLoading(false));
};
function doAddSubscription(subscription) {
setLoading(true);
// TODO: Uncomment after supporting multiple brokers types
delete subscription.type;
service
.addSubscription(currentApp, subscription)
.then(handleAPIResponse)
.then((subscription: any) => {
setSubscriptions([...subscriptions, subscription]);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doDeleteSubscription(subscription_name) {
setLoading(true);
service
.deleteSubscription(currentApp, subscription_name)
.then(handleAPIResponse)
.then((_: any) => {
setSubscriptions(
subscriptions.filter((item) => item.name != subscription_name)
);
message.info("Subscription deleted!");
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function reset() {
setAddSubscriptionModalVisible(false);
form.resetFields();
}
return (
<Row style={{ width: "100%", marginBottom: "16px" }}>
<AddSubscription
visible={addSubscriptionModalVisible}
loading={loading}
form={form}
onAdd={doAddSubscription}
reset={reset}
/>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
loading={loading}
title={
<Row justify="space-between">
<Col>
<Space>
<NodeIndexOutlined />
<Text strong>Brokers Subscriptions</Text>
</Space>
</Col>
<Col>
<Button
onClick={() => setAddSubscriptionModalVisible(true)}
size="small"
type="primary"
ghost
icon={<AppstoreAddOutlined />}
/>
</Col>
</Row>
}
>
<Table
dataSource={subscriptions}
columns={SubscriptionDataColumns({
handleDeleteSubscription: doDeleteSubscription,
loading: loading,
})}
showHeader={false}
pagination={false}
size="small"
rowKey="name"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">subscription</a> found
</span>
}
/>
</div>
),
}}
expandable={{
expandedRowRender: (record) => (
<>
<Row justify="space-between" style={{ marginBottom: 6 }}>
<Col span={6}>
<List.Item.Meta
title={"Exchange"}
description={<Tag>{record.exchange}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Queue"}
description={<Tag>{record.queue}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Routing key"}
description={<Tag>{record.routing_key}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Prefetch count"}
description={<Tag>{record.prefetch_count}</Tag>}
/>
</Col>
</Row>
<Row justify="space-between" style={{ marginBottom: 6 }}>
<Col span={6}>
<List.Item.Meta
title={"Batch size"}
description={
<Tag>{`${record.batch_max_size_in_mb}mb`}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Batch length"}
description={
<Tag>{record.batch_max_number_of_messages}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Batch window"}
description={
<Tag>{`${record.batch_max_window_in_seconds}s`}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Pool size"}
description={<Tag>{record.concurrency_pool_size}</Tag>}
/>
</Col>
</Row>
</>
),
rowExpandable: (record) => true,
}}
/>
</Card>
</Row>
);
}
Example #7
| Source File: Triggers.tsx From leek with Apache License 2.0 | 4 votes |
|
Triggers = (props) => {
const [form] = Form.useForm();
const service = new ApplicationService();
const { updateApplication } = useApplication();
const [createTriggerModalVisible, setCreateTriggerModalVisible] =
useState<boolean>(false);
const [editTriggerModalVisible, setEditTriggerModalVisible] =
useState<boolean>(false);
const [patternType, setPatternType] = useState<string>("all");
const [loading, setLoading] = useState<boolean>(false);
const [triggerId, setTriggerId] = useState();
useEffect(() => {}, []);
function doAddTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.addFanoutTrigger(props.selectedApp.app_name, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doEditTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.editFanoutTrigger(props.selectedApp.app_name, triggerId, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doDeleteTrigger(trigger_id) {
setLoading(true);
service
.deleteFanoutTrigger(props.selectedApp.app_name, trigger_id)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function handleEditTrigger(trigger_id, selected) {
setTriggerId(trigger_id);
if (selected.include && selected.include.length)
selected.patterns = "include";
else if (selected.exclude && selected.exclude.length)
selected.patterns = "exclude";
else selected.patterns = "all";
setPatternType(selected.patterns);
form.setFieldsValue(selected);
setEditTriggerModalVisible(true);
}
function reset() {
setCreateTriggerModalVisible(false);
setEditTriggerModalVisible(false);
setTriggerId(undefined);
form.resetFields();
}
const formItems = (
<>
<FormItem name="type">
<Select>
<Option value="slack">
<SlackOutlined />
Slack
</Option>
</Select>
</FormItem>
<FormItem
name="slack_wh_url"
rules={[
{ required: true, message: "Please input slack webhook url!" },
{
type: "url",
message: "This field must be a valid url.",
},
]}
>
<Input
prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
placeholder="Webhook URL"
/>
</FormItem>
<FormItem name="states">
<Select
mode="multiple"
tagRender={TaskStateClosable}
style={{ width: "100%" }}
placeholder="States"
options={statesOptions}
/>
</FormItem>
<FormItem name="envs">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Environments"
/>
</FormItem>
<Divider />
<FormItem name="runtime_upper_bound">
<InputNumber
style={{ width: "100%" }}
min={0}
max={1000}
step={0.00001}
placeholder="Runtime upper bound (Only succeeded Tasks)"
/>
</FormItem>
<FormItem name="patterns" valuePropName="value">
<Radio.Group
buttonStyle="solid"
onChange={(e) => setPatternType(e.target.value)}
>
<Radio.Button value="all">All tasks</Radio.Button>
<Radio.Button value="exclude">Exclude</Radio.Button>
<Radio.Button value="include">Include</Radio.Button>
</Radio.Group>
</FormItem>
{"include" === patternType && (
<FormItem name="include">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to include"
/>
</FormItem>
)}
{"exclude" === patternType && (
<FormItem name="exclude">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to exclude"
/>
</FormItem>
)}
<FormItem name="enabled" valuePropName="checked">
<Switch
checkedChildren="Enabled"
unCheckedChildren="Disabled"
defaultChecked
size="small"
/>
</FormItem>
</>
);
return (
<Row style={{ width: "100%", marginBottom: "16px" }}>
{/*Create Trigger*/}
<Modal
title={
<Space>
<BellOutlined />
Create Trigger
</Space>
}
visible={createTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="createTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Create
</Button>,
]}
>
<Form
onFinish={doAddTrigger}
form={form}
id="createTrigger"
initialValues={{ type: "slack", patterns: "all", enabled: false }}
>
{formItems}
</Form>
</Modal>
{/*Edit Trigger*/}
<Modal
title={() => (
<>
<BellOutlined /> `Edit Trigger ${triggerId}`
</>
)}
visible={editTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="editTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Update
</Button>,
]}
>
<Form onFinish={doEditTrigger} form={form} id="editTrigger">
{formItems}
</Form>
</Modal>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
title={
<Row justify="space-between">
<Col>
<Space>
<BellOutlined />
<Text strong>Fanout Triggers</Text>
</Space>
</Col>
<Col>
<Button
onClick={() => setCreateTriggerModalVisible(true)}
size="small"
type="primary"
ghost
icon={<AppstoreAddOutlined />}
/>
</Col>
</Row>
}
>
<Table
dataSource={props.selectedApp.fo_triggers}
columns={TriggerDataColumns({
handleEditTrigger: handleEditTrigger,
handleDeleteTrigger: doDeleteTrigger,
triggersModifying: loading,
})}
showHeader={false}
pagination={false}
size="small"
rowKey="id"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">triggers</a> found
</span>
}
/>
</div>
),
}}
expandable={{
expandedRowRender: (record) => (
<>
<Row justify="space-between">
<Col span={12}>
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Webhook URL"}
description={<Tag>{record.slack_wh_url}</Tag>}
/>
</Col>
<Col span={12}>
{record.exclude && record.exclude.length > 0 && (
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Exclusions"}
description={record.exclude.map((exclusion, key) => (
<Tag key={key}>{exclusion}</Tag>
))}
/>
)}
{record.include && record.include.length > 0 && (
<List.Item.Meta
title={"Inclusions"}
description={record.include.map((inclusion, key) => (
<Tag key={key}>{inclusion}</Tag>
))}
/>
)}
</Col>
</Row>
</>
),
rowExpandable: (record) => true,
}}
/>
</Card>
</Row>
);
}
Example #8
| Source File: index.tsx From amiya with MIT License | 4 votes |
|
export default function Demo() {
// 列表控制
const listRef = useRef<any>()
// 选中的年份
const [activeYear, setActiveYear] = useState(1)
// 选中的状态
const [activeStatus, setActiveStatus] = useState(1)
// 选中的 tab
const [activeTab, setActiveTab] = useState(1)
// 选中的标签
const [activeTag, setActiveTag] = useState(undefined)
// 标签是否可见
const [tagVisible, setTagVisible] = useState(false)
// 查询参数 打印用
const [searchValue, setSearchValue] = useState({})
// 查询区域是否可见
const searchVisible = useMemo(() => {
return activeTab !== 6
}, [activeTab])
// 查询参数
const searchParams = useMemo(() => {
return {
activeYear,
activeStatus,
activeTab,
activeTag
}
}, [activeTab, activeYear, activeStatus, activeTag])
useEffect(() => {
// 查询参数改变，刷新列表
listRef.current.reset()
}, [searchParams])
useEffect(() => {
// 如果不显示标签，则把标签值值设置为空
if (!tagVisible) {
setActiveTag(undefined)
}
}, [tagVisible])
useEffect(() => {
// 查询区域不显示时，清空它的值
if (!searchVisible) {
setActiveTag(undefined)
setTagVisible(false)
}
}, [searchVisible])
return (
<div className="space-list">
<AySearchList
ref={listRef}
title={
<Space size={24}>
<Tabs activeKey={activeTab + ''} onChange={key => setActiveTab(Number(key))}>
{tabOptions.map(option => (
<Tabs.TabPane key={option.value} className="goods" tab={option.label} />
))}
</Tabs>
</Space>
}
api={(searchValues: AnyKeyProps) =>
new Promise(resolve => {
setSearchValue(searchValues)
setTimeout(() => {
resolve({
content: data,
totalCount: data.length
})
}, 500)
})
}
extendSearchParams={searchParams}
extraVisible={false}
autoload={false}
listExtend={{
itemLayout: 'vertical'
}}
onParamsChange={(values: AnyKeyProps) => {
// 翻页 & 查询时，滚动到最顶部
window.scrollTo({ behavior: 'smooth', top: 0 })
}}
listHeader={
<div>
{tagVisible && (
<div>
<div className="space-list-search-tags">
<label>订单类型：</label>
<AyTagGroup value={activeTag} onChange={setActiveTag} options={tagOptions} />
</div>
<div className="space-list-search-row">
<Button onClick={() => setTagVisible(false)}>返回</Button>
</div>
</div>
)}
{!searchVisible && (
<div className="space-list-search-row">
<Alert
showIcon
message="说明"
description={
<ul>
<li>1. 只有已取消和已完成的订单可以删除；</li>
<li>
2.
被删除的订单将无法进行评价、晒单和申请售后等操作；如果想继续这些操作，可以先将被删除的订单还原；
</li>
<li>3. 订单被永久删除后无法还原。</li>
</ul>
}
/>
</div>
)}
<Row className="space-list-header">
<Col flex="150px">
<Select
style={{ minWidth: 200 }}
options={yearOptions}
bordered={false}
value={activeYear}
onChange={setActiveYear}
/>
</Col>
<Col flex="1" style={{ paddingLeft: 8 }}>
订单详情
</Col>
<Col span={3} className="space-list-center">
收货人
</Col>
<Col span={3} className="space-list-center">
金额
</Col>
<Col span={3} className="space-list-center">
<Select
style={{ width: '100%' }}
options={statusOptions}
bordered={false}
value={activeStatus}
onChange={setActiveStatus}
/>
</Col>
<Col span={3} className="space-list-center">
操作
</Col>
</Row>
</div>
}
renderItem={(record: Record) => {
// 卡片渲染内容
return (
<List.Item key={record.id}>
<div className="space-list-card">
{record.splitInfo && (
<>
<div className="space-list-card-header light">
<Space size="large">
<Text>2020-05-06 23:59:59</Text>
<span>
<Text type="secondary">订单号：</Text>78074445382
</span>
</Space>
<Text type="secondary">
您订单中的商品在不同库房或属不同商家，故拆分为以下订单分开配送，给您带来的不便敬请谅解。
</Text>
</div>
<div className="space-list-card-header gray">
<Space size="large">
<span>
<Text type="secondary">收货人：</Text>123
</span>
<span>
<Text type="secondary">订单金额：</Text>¥123
</span>
<span>
<Text type="secondary">支付方式：</Text>在线支付
</span>
<span>
<Text type="secondary">订单状态：</Text>已拆分
</span>
</Space>
<AyButton sub>
查看拆分详情
<RightOutlined />
</AyButton>
</div>
</>
)}
{record.groups?.map((group: Record, index: number) => (
<div className="space-list-card-group">
<div
className={classNames('space-list-card-header', !record.splitInfo && index === 0 ? 'light' : '')}
>
<Space size="large">
<Text>2020-05-06 23:59:59</Text>
<span>
<Text type="secondary">订单号：</Text> 78074445382
</span>
<a>
<Space size="small">
<SmileOutlined />
卖橘子的商家
</Space>
</a>
</Space>
<AyButton
className="space-list-card-delete"
confirm
confirmMsg="确定要删除吗？删除后，您可以在订单回收站还原该订单，也可以做永久删除。"
size="small"
icon={<DeleteOutlined />}
/>
</div>
<Row className="space-list-card-info">
<Col span={12} className="space-list-card-left">
{group.goods?.map((goods: Record) => (
<Row key={goods.id} wrap={false} gutter={8} className="space-list-card-goods">
<Col flex="90px">
<Image src={orange} width={80} height={80} />
</Col>
<Col flex="1">
<Paragraph ellipsis={{ rows: 2, tooltip: '好吃的橘子', symbol: '...' }}>
{record.message || '商品名称'}
</Paragraph>
<a>
<Space size="small">
<AppstoreAddOutlined />
找搭配
</Space>
</a>
</Col>
<Col flex="50px" className="space-list-center">
x1
</Col>
<Col flex="100px" className="space-list-center">
<a>申请售后</a>
</Col>
</Row>
))}
</Col>
<Col span={3} className="space-list-center space-list-cell">
<Space>
<Avatar src="购买者头像" />
购买者
</Space>
</Col>
<Col span={3} className="space-list-center space-list-cell">
<div>¥25.55</div>
<div>
<Text type="secondary">在线支付</Text>
</div>
</Col>
<Col span={3} className="space-list-center space-list-cell">
<div>已完成</div>
<div>
<a>订单详情</a>
</div>
</Col>
<Col span={3} className="space-list-center space-list-cell">
<div>
<a>查看发票</a>
</div>
<div>
<a>立即购买</a>
</div>
</Col>
</Row>
</div>
))}
{record.steps?.map((step: Record, index: number) => (
<Row className="space-list-card-footer gray" key={step.id}>
<Col span={15}>
阶段{index + 1}：{step.label}
</Col>
<Col span={3} className="space-list-center">
¥50
</Col>
<Col span={3} className="space-list-center">
已完成
</Col>
<Col span={3} className="space-list-center">
2
</Col>
</Row>
))}
</div>
</List.Item>
)
}}
>
<AyFields>
<AyField key="__search" type="input-group" search={{ position: 'more', hidden: !searchVisible }}>
<AyField
key="keyword"
type="search"
placeholder="商品名称/商品编号/订单号"
enterButton={false}
style={{ width: 300 }}
/>
<AyField
key="__btn"
type="custom"
renderContent={() => (
<Button className="space-list-toggle" onClick={() => setTagVisible(!tagVisible)}>
高级
{tagVisible ? <UpOutlined /> : <DownOutlined />}
</Button>
)}
/>
</AyField>
</AyFields>
</AySearchList>
{/* 页面打印用，实际使用删掉即可 */}
<Divider orientation="left">查询参数</Divider>
{Object.keys(searchValue).length && <pre>{JSON.stringify(searchValue, null, 2)}</pre>}
</div>
)
}
