@ant-design/icons#SendOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#SendOutlined.
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: index.tsx From memex with MIT License | 5 votes |
|
render() {
const { editorState } = this.state;
const { readOnly, id } = this.props;
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
let contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' RichEditor-hidePlaceholder';
}
}
if (readOnly) {
try {
const html = convertToHTML(editorState.getCurrentContent());
return <div>{renderHTML(html)}</div>;
} catch (e) {
return <div>{e.toString()}</div>;
}
}
return (
<div className="RichEditor-root">
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.mapKeyToEditorCommand}
onChange={this.onChange}
// placeholder="Tell a story..."
ref="editor"
spellCheck
/>
</div>
<div className="RichEditor-controls-parent">
<BlockStyleControls
editorState={editorState}
onBlockToggle={this.toggleBlockType}
onStyleToggle={this.toggleInlineStyle}
/>
{/* <InlineStyleControls */}
{/* editorState={editorState} */}
{/* onToggle={this.toggleInlineStyle} */}
{/* /> */}
<Tooltip title="Send">
<SendOutlined
onMouseDown={() => {
if (id) {
this._updateContent()
} else {
this._saveContent()
}
}}
style={{fontSize: 16, color: '#1890ff', cursor: 'pointer'}} />
</Tooltip>
</div>
</div>
);
}
Example #2
| Source File: commandPaletteLogic.ts From posthog-foss with MIT License | 4 votes |
|
commandPaletteLogic = kea<
commandPaletteLogicType<
Command,
CommandFlow,
CommandRegistrations,
CommandResult,
CommandResultDisplayable,
RegExpCommandPairs
>
>({
path: ['lib', 'components', 'CommandPalette', 'commandPaletteLogic'],
connect: {
actions: [personalAPIKeysLogic, ['createKey']],
values: [teamLogic, ['currentTeam'], userLogic, ['user']],
logic: [preflightLogic], // used in afterMount, which does not auto-connect
},
actions: {
hidePalette: true,
showPalette: true,
togglePalette: true,
setInput: (input: string) => ({ input }),
onArrowUp: true,
onArrowDown: (maxIndex: number) => ({ maxIndex }),
onMouseEnterResult: (index: number) => ({ index }),
onMouseLeaveResult: true,
executeResult: (result: CommandResult) => ({ result }),
activateFlow: (flow: CommandFlow | null) => ({ flow }),
backFlow: true,
registerCommand: (command: Command) => ({ command }),
deregisterCommand: (commandKey: string) => ({ commandKey }),
setCustomCommand: (commandKey: string) => ({ commandKey }),
deregisterScope: (scope: string) => ({ scope }),
},
reducers: {
isPaletteShown: [
false,
{
hidePalette: () => false,
showPalette: () => true,
togglePalette: (previousState) => !previousState,
},
],
keyboardResultIndex: [
0,
{
setInput: () => 0,
executeResult: () => 0,
activateFlow: () => 0,
backFlow: () => 0,
onArrowUp: (previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0),
onArrowDown: (previousIndex, { maxIndex }) => (previousIndex < maxIndex ? previousIndex + 1 : maxIndex),
},
],
hoverResultIndex: [
null as number | null,
{
activateFlow: () => null,
backFlow: () => null,
onMouseEnterResult: (_, { index }) => index,
onMouseLeaveResult: () => null,
onArrowUp: () => null,
onArrowDown: () => null,
},
],
input: [
'',
{
setInput: (_, { input }) => input,
activateFlow: () => '',
backFlow: () => '',
executeResult: () => '',
},
],
activeFlow: [
null as CommandFlow | null,
{
activateFlow: (currentFlow, { flow }) =>
flow ? { ...flow, scope: flow.scope ?? currentFlow?.scope, previousFlow: currentFlow } : null,
backFlow: (currentFlow) => currentFlow?.previousFlow ?? null,
},
],
rawCommandRegistrations: [
{} as CommandRegistrations,
{
registerCommand: (commands, { command }) => {
return { ...commands, [command.key]: command }
},
deregisterCommand: (commands, { commandKey }) => {
const { [commandKey]: _, ...cleanedCommands } = commands // eslint-disable-line
return cleanedCommands
},
},
],
},
listeners: ({ actions, values }) => ({
showPalette: () => {
posthog.capture('palette shown', { isMobile: isMobile() })
},
togglePalette: () => {
if (values.isPaletteShown) {
posthog.capture('palette shown', { isMobile: isMobile() })
}
},
executeResult: ({ result }: { result: CommandResult }) => {
if (result.executor === true) {
actions.activateFlow(null)
actions.hidePalette()
} else {
const possibleFlow = result.executor?.() || null
actions.activateFlow(possibleFlow)
if (!possibleFlow) {
actions.hidePalette()
}
}
// Capture command execution, without useless data
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { icon, index, ...cleanedResult }: Record<string, any> = result
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { resolver, ...cleanedCommand } = cleanedResult.source
cleanedResult.source = cleanedCommand
cleanedResult.isMobile = isMobile()
posthog.capture('palette command executed', cleanedResult)
},
deregisterScope: ({ scope }) => {
for (const command of Object.values(values.commandRegistrations)) {
if (command.scope === scope) {
actions.deregisterCommand(command.key)
}
}
},
setInput: async ({ input }, breakpoint) => {
await breakpoint(300)
if (input.length > 8) {
const response = await api.get('api/person/?key_identifier=' + encodeURIComponent(input))
const person = response.results[0]
if (person) {
actions.registerCommand({
key: `person-${person.distinct_ids[0]}`,
resolver: [
{
icon: UserOutlined,
display: `View person ${input}`,
executor: () => {
const { push } = router.actions
push(urls.person(person.distinct_ids[0]))
},
},
],
scope: GLOBAL_COMMAND_SCOPE,
})
}
}
},
}),
selectors: {
isSqueak: [
(selectors) => [selectors.input],
(input: string) => {
return input.trim().toLowerCase() === 'squeak'
},
],
activeResultIndex: [
(selectors) => [selectors.keyboardResultIndex, selectors.hoverResultIndex],
(keyboardResultIndex: number, hoverResultIndex: number | null) => {
return hoverResultIndex ?? keyboardResultIndex
},
],
commandRegistrations: [
(selectors) => [
selectors.rawCommandRegistrations,
dashboardsModel.selectors.nameSortedDashboards,
teamLogic.selectors.currentTeam,
],
(rawCommandRegistrations: CommandRegistrations, dashboards: DashboardType[]): CommandRegistrations => ({
...rawCommandRegistrations,
custom_dashboards: {
key: 'custom_dashboards',
resolver: dashboards.map((dashboard: DashboardType) => ({
key: `dashboard_${dashboard.id}`,
icon: LineChartOutlined,
display: `Go to Dashboard: ${dashboard.name}`,
executor: () => {
const { push } = router.actions
push(urls.dashboard(dashboard.id))
},
})),
scope: GLOBAL_COMMAND_SCOPE,
},
}),
],
regexpCommandPairs: [
(selectors) => [selectors.commandRegistrations],
(commandRegistrations: CommandRegistrations) => {
const array: RegExpCommandPairs = []
for (const command of Object.values(commandRegistrations)) {
if (command.prefixes) {
array.push([new RegExp(`^\\s*(${command.prefixes.join('|')})(?:\\s+(.*)|$)`, 'i'), command])
} else {
array.push([null, command])
}
}
return array
},
],
commandSearchResults: [
(selectors) => [
selectors.isPaletteShown,
selectors.regexpCommandPairs,
selectors.input,
selectors.activeFlow,
selectors.isSqueak,
],
(
isPaletteShown: boolean,
regexpCommandPairs: RegExpCommandPairs,
argument: string,
activeFlow: CommandFlow | null,
isSqueak: boolean
) => {
if (!isPaletteShown || isSqueak) {
return []
}
if (activeFlow) {
return resolveCommand(activeFlow, argument)
}
let directResults: CommandResult[] = []
let prefixedResults: CommandResult[] = []
for (const [regexp, command] of regexpCommandPairs) {
if (regexp) {
const match = argument.match(regexp)
if (match && match[1]) {
prefixedResults = [...prefixedResults, ...resolveCommand(command, match[2], match[1])]
}
}
directResults = [...directResults, ...resolveCommand(command, argument)]
}
const allResults = directResults.concat(prefixedResults)
let fusableResults: CommandResult[] = []
let guaranteedResults: CommandResult[] = []
for (const result of allResults) {
if (result.guarantee) {
guaranteedResults.push(result)
} else {
fusableResults.push(result)
}
}
fusableResults = uniqueBy(fusableResults, (result) => result.display)
guaranteedResults = uniqueBy(guaranteedResults, (result) => result.display)
const fusedResults = argument
? new Fuse(fusableResults, {
keys: ['display', 'synonyms'],
})
.search(argument)
.slice(0, RESULTS_MAX)
.map((result) => result.item)
: sample(fusableResults, RESULTS_MAX - guaranteedResults.length)
return guaranteedResults.concat(fusedResults)
},
],
commandSearchResultsGrouped: [
(selectors) => [selectors.commandSearchResults, selectors.activeFlow],
(commandSearchResults: CommandResult[], activeFlow: CommandFlow | null) => {
const resultsGrouped: {
[scope: string]: CommandResult[]
} = {}
if (activeFlow) {
resultsGrouped[activeFlow.scope ?? '?'] = []
}
for (const result of commandSearchResults) {
const scope: string = result.source.scope ?? '?'
if (!(scope in resultsGrouped)) {
resultsGrouped[scope] = []
} // Ensure there's an array to push to
resultsGrouped[scope].push({ ...result })
}
let rollingGroupIndex = 0
let rollingResultIndex = 0
const resultsGroupedInOrder: [string, CommandResultDisplayable[]][] = []
for (const [group, results] of Object.entries(resultsGrouped)) {
resultsGroupedInOrder.push([group, []])
for (const result of results) {
resultsGroupedInOrder[rollingGroupIndex][1].push({ ...result, index: rollingResultIndex++ })
}
rollingGroupIndex++
}
return resultsGroupedInOrder
},
],
},
events: ({ actions }) => ({
afterMount: () => {
const { push } = router.actions
const goTo: Command = {
key: 'go-to',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: [
{
icon: FundOutlined,
display: 'Go to Dashboards',
executor: () => {
push(urls.dashboards())
},
},
{
icon: RiseOutlined,
display: 'Go to Insights',
executor: () => {
push(urls.savedInsights())
},
},
{
icon: RiseOutlined,
display: 'Go to Trends',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.TRENDS }))
},
},
{
icon: FunnelPlotOutlined,
display: 'Go to Funnels',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.FUNNELS }))
},
},
{
icon: GatewayOutlined,
display: 'Go to Retention',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.RETENTION }))
},
},
{
icon: InteractionOutlined,
display: 'Go to Paths',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.PATHS }))
},
},
{
icon: ContainerOutlined,
display: 'Go to Events',
executor: () => {
push(urls.events())
},
},
{
icon: AimOutlined,
display: 'Go to Actions',
executor: () => {
push(urls.actions())
},
},
{
icon: UserOutlined,
display: 'Go to Persons',
synonyms: ['people'],
executor: () => {
push(urls.persons())
},
},
{
icon: UsergroupAddOutlined,
display: 'Go to Cohorts',
executor: () => {
push(urls.cohorts())
},
},
{
icon: FlagOutlined,
display: 'Go to Feature Flags',
synonyms: ['feature flags', 'a/b tests'],
executor: () => {
push(urls.featureFlags())
},
},
{
icon: MessageOutlined,
display: 'Go to Annotations',
executor: () => {
push(urls.annotations())
},
},
{
icon: TeamOutlined,
display: 'Go to Team members',
synonyms: ['organization', 'members', 'invites', 'teammates'],
executor: () => {
push(urls.organizationSettings())
},
},
{
icon: ProjectOutlined,
display: 'Go to Project settings',
executor: () => {
push(urls.projectSettings())
},
},
{
icon: SmileOutlined,
display: 'Go to My settings',
synonyms: ['account'],
executor: () => {
push(urls.mySettings())
},
},
{
icon: ApiOutlined,
display: 'Go to Plugins',
synonyms: ['integrations'],
executor: () => {
push(urls.plugins())
},
},
{
icon: DatabaseOutlined,
display: 'Go to System status page',
synonyms: ['redis', 'celery', 'django', 'postgres', 'backend', 'service', 'online'],
executor: () => {
push(urls.systemStatus())
},
},
{
icon: PlusOutlined,
display: 'Create action',
executor: () => {
push(urls.createAction())
},
},
{
icon: LogoutOutlined,
display: 'Log out',
executor: () => {
userLogic.actions.logout()
},
},
],
}
const debugClickhouseQueries: Command = {
key: 'debug-clickhouse-queries',
scope: GLOBAL_COMMAND_SCOPE,
resolver:
userLogic.values.user?.is_staff ||
userLogic.values.user?.is_impersonated ||
preflightLogic.values.preflight?.is_debug ||
preflightLogic.values.preflight?.instance_preferences?.debug_queries
? {
icon: PlusOutlined,
display: 'Debug queries (ClickHouse)',
executor: () => {
debugCHQueries()
},
}
: [],
}
const calculator: Command = {
key: 'calculator',
scope: GLOBAL_COMMAND_SCOPE,
resolver: (argument) => {
// don't try evaluating if there's no argument or if it's a plain number already
if (!argument || !isNaN(+argument)) {
return null
}
try {
const result = +Parser.evaluate(argument)
return isNaN(result)
? null
: {
icon: CalculatorOutlined,
display: `= ${result}`,
guarantee: true,
executor: () => {
copyToClipboard(result.toString(), 'calculation result')
},
}
} catch {
return null
}
},
}
const openUrls: Command = {
key: 'open-urls',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: (argument) => {
const results: CommandResultTemplate[] = (teamLogic.values.currentTeam?.app_urls ?? []).map(
(url: string) => ({
icon: LinkOutlined,
display: `Open ${url}`,
synonyms: [`Visit ${url}`],
executor: () => {
open(url)
},
})
)
if (argument && isURL(argument)) {
results.push({
icon: LinkOutlined,
display: `Open ${argument}`,
synonyms: [`Visit ${argument}`],
executor: () => {
open(argument)
},
})
}
results.push({
icon: LinkOutlined,
display: 'Open PostHog Docs',
synonyms: ['technical documentation'],
executor: () => {
open('https://posthog.com/docs')
},
})
return results
},
}
const createPersonalApiKey: Command = {
key: 'create-personal-api-key',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: KeyOutlined,
display: 'Create Personal API Key',
executor: () => ({
instruction: 'Give your key a label',
icon: TagOutlined,
scope: 'Creating Personal API Key',
resolver: (argument) => {
if (argument?.length) {
return {
icon: KeyOutlined,
display: `Create Key "${argument}"`,
executor: () => {
personalAPIKeysLogic.actions.createKey(argument)
push(urls.mySettings(), {}, 'personal-api-keys')
},
}
}
return null
},
}),
},
}
const createDashboard: Command = {
key: 'create-dashboard',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: FundOutlined,
display: 'Create Dashboard',
executor: () => ({
instruction: 'Name your new dashboard',
icon: TagOutlined,
scope: 'Creating Dashboard',
resolver: (argument) => {
if (argument?.length) {
return {
icon: FundOutlined,
display: `Create Dashboard "${argument}"`,
executor: () => {
dashboardsModel.actions.addDashboard({ name: argument, show: true })
},
}
}
return null
},
}),
},
}
const shareFeedback: Command = {
key: 'share-feedback',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: CommentOutlined,
display: 'Share Feedback',
synonyms: ['send opinion', 'ask question', 'message posthog', 'github issue'],
executor: () => ({
scope: 'Sharing Feedback',
resolver: [
{
display: 'Send Message Directly to PostHog',
icon: CommentOutlined,
executor: () => ({
instruction: "What's on your mind?",
icon: CommentOutlined,
resolver: (argument) => ({
icon: SendOutlined,
display: 'Send',
executor: !argument?.length
? undefined
: () => {
posthog.capture('palette feedback', { message: argument })
return {
resolver: {
icon: CheckOutlined,
display: 'Message Sent!',
executor: true,
},
}
},
}),
}),
},
{
icon: VideoCameraOutlined,
display: 'Schedule Quick Call',
executor: () => {
open('https://calendly.com/posthog-feedback')
},
},
{
icon: ExclamationCircleOutlined,
display: 'Create GitHub Issue',
executor: () => {
open('https://github.com/PostHog/posthog/issues/new/choose')
},
},
],
}),
},
}
actions.registerCommand(goTo)
actions.registerCommand(openUrls)
actions.registerCommand(debugClickhouseQueries)
actions.registerCommand(calculator)
actions.registerCommand(createPersonalApiKey)
actions.registerCommand(createDashboard)
actions.registerCommand(shareFeedback)
},
beforeUnmount: () => {
actions.deregisterCommand('go-to')
actions.deregisterCommand('open-urls')
actions.deregisterCommand('debug-clickhouse-queries')
actions.deregisterCommand('calculator')
actions.deregisterCommand('create-personal-api-key')
actions.deregisterCommand('create-dashboard')
actions.deregisterCommand('share-feedback')
},
}),
})
Example #3
| 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 #4
| Source File: ChatBox.tsx From foodie with MIT License | 4 votes |
|
ChatBox: React.FC<IProps> = ({ user, target }) => {
const [text, setText] = useState('');
const dispatch = useDispatch();
const [error, setError] = useState<IError | null>(null);
const [isLoading, setLoading] = useState(false);
const [isSending, setSending] = useState(false);
const didMount = useDidMount(true);
const [isTyping, setIsTyping] = useState(false);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
let dummyEl = useRef<HTMLSpanElement | null>(null);
useEffect(() => {
if (target.chats.length === 0) fetchMessages();
socket.on('newMessage', (message: IMessage) => {
dispatch(newMessageArrived(target.username, message));
if (dummyEl.current) {
dummyEl.current.scrollIntoView();
}
});
socket.on('typing', (state: boolean) => {
setIsTyping(state);
});
if (dummyEl.current) {
dummyEl.current.scrollIntoView();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onMinimize = () => {
dispatch(minimizeChat(target.username));
}
const onCloseChat = () => {
dispatch(closeChat(target.username))
}
const fetchMessages = async () => {
try {
setLoading(true);
const messages = await getUserMessages(target.id, { offset: target.offset });
dispatch(getMessagesSuccess(target.username, messages.reverse()));
if (didMount) {
setText('');
setLoading(false);
setError(null);
}
if (!target.offset || target.offset < 1) {
dummyEl.current?.scrollIntoView();
}
} catch (e) {
if (didMount) {
setLoading(false);
setError(e);
}
}
}
const dispatchSendMessage = async () => {
if (text) {
try {
setSending(true);
await sendMessage(text, target.id);
if (didMount) {
setSending(false);
setText('');
setError(null);
}
} catch (e) {
if (didMount) {
setSending(false);
setError(e);
}
}
}
}
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setText(e.target.value);
}
const handleTextKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
if (text) {
dispatchSendMessage();
socket.emit('user-typing', { user: target, state: false });
}
} else {
socket.emit('user-typing', { user: target, state: true });
if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
socket.emit('user-typing', { user: target, state: false })
}, 2000);
}
}
return (
<div className={`bg-white dark:bg-indigo-1100 p-3 relative w-full h-full laptop:w-20rem laptop:shadow-lg laptop:rounded-t-xl laptop:bottom-0 laptop:right-24 laptop:border laptop:border-gray-400 dark:border-gray-800`}>
<div className="flex justify-between pb-3 border-b border-gray-200 dark:border-gray-800">
<Link className="dark:text-indigo-400" to={`/user/${target.username}`}>
<div className="flex items-center">
<Avatar url={target.profilePicture?.url} className="mr-2" />
<h5>{target.username}</h5>
</div>
</Link>
<div className="hidden laptop:flex laptop:items-center">
<div
className="post-option-toggle p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1000"
title="Minimize Chat"
onClick={onMinimize}
>
<LineOutlined className="flex items-center justify-center" />
</div>
<div
className="post-option-toggle p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1000"
title="Close Chat"
onClick={onCloseChat}
>
<CloseOutlined className="flex items-center justify-center" />
</div>
</div>
</div>
{/* --- MESSAGES BODY ---- */}
<div className="min-h-80% laptop:min-h-24rem max-h-85% laptop:max-h-80 bg-gray-100 dark:bg-indigo-1000 overflow-y-scroll pb-4 scrollbar relative">
{(isLoading && target.chats.length === 0 && !error) && (
<div className="flex justify-center min-h-18rem py-2">
<Loader />
</div>
)}
{(!isLoading && target.chats.length === 0 && error) && (
<div className="flex flex-col items-center min-h-18rem justify-center py-2">
{error.status_code === 404 ? (
<>
<CommentOutlined className="text-gray-300 text-6xl" />
<span className="text-gray-400 mb-2">No messages.</span>
<span className="text-gray-400 text-sm">Send a message to {target.username}</span>
</>
) : (
<span className="text-gray-400 mb-4">
{error?.error?.message || 'Unable to process your request.'}
</span>
)}
</div>
)}
{(!error && target.chats.length >= 10) && (
<>
{!isLoading ? (
<div
className={`flex justify-center items-center py-2 mb-4 bg-indigo-100 cursor-pointer`}
onClick={fetchMessages}
>
<span className="text-indigo-700 text-xs">Older messages</span>
</div>
) : (
<div className="flex justify-center py-2 mb-4">
<Loader />
</div>
)}
</>
)}
{(target.chats.length !== 0) && (
<>
<TransitionGroup component={null}>
{target.chats.map((msg, i) => (
<CSSTransition
timeout={500}
classNames="fade"
key={msg.id}
>
<div className="flex flex-col">
<div
className={`flex p-2 ${msg.isOwnMessage ? 'justify-end' : 'justify-start'}`}
key={`${msg.id}_${msg.from.id}`}
>
<div className="flex">
{/* -- AVATAR --- */}
<Avatar
url={msg.isOwnMessage ? user.profilePicture?.url : target.profilePicture?.url}
size="xs"
className={`self-end flex-shrink-0 !bg-cover !bg-no-repeat rounded-full ${msg.isOwnMessage ? 'ml-1 order-2' : 'mr-1 order-1'}`}
/>
{/* -- MESSAGE-- */}
<span
className={`py-2 px-3 break-all text-sm rounded-xl ${msg.isOwnMessage ? 'bg-indigo-700 text-white order-1' : 'bg-gray-300 order-2'}`}>
{msg.text}
</span>
<span ref={dummyEl}></span>
</div>
</div>
<div className={`flex pb-2 ${msg.isOwnMessage ? 'justify-end mr-8' : 'justify-start ml-8'}`}>
{/* ---DATE ---- */}
<span className={`text-gray-400 text-1xs ${msg.isOwnMessage ? 'order-2' : 'order-1'}`}>
{displayTime(msg.createdAt, true)}
</span>
{/* ---- SEEN ---- */}
{(msg.isOwnMessage && msg.seen && i === target.chats.length - 1) && (
<span className={`text-gray-400 mx-2 text-1xs italic flex-grow ${msg.isOwnMessage ? 'order-1' : 'order-2'}`}>
Seen
</span>
)}
</div>
</div>
</CSSTransition>
))}
</TransitionGroup>
{isTyping && (
<div className="flex justify-center py-2">
<span className="text-xs text-gray-400">{target.username} is typing...</span>
</div>
)}
</>
)}
</div>
<div className="relative bottom-0 left-0 bg-white dark:bg-indigo-1100 w-full flex p-2 border-t border-gray-200 dark:border-gray-800">
<input
className="flex-grow !border-gray-400 !rounded-r-none !py-0 dark:bg-indigo-1000 dark:text-white dark:!border-gray-800"
type="text"
onChange={handleTextChange}
onKeyDown={handleTextKeyDown}
readOnly={isSending || isLoading}
placeholder="Send a message..."
value={text}
/>
<button
className="!rounded-l-none flex items-center justify-center"
disabled={isSending || isLoading}
onClick={dispatchSendMessage}
>
<SendOutlined className="flex items-center justify-center text-xl" />
</button>
</div>
</div>
);
}
Example #5
| Source File: Stats.tsx From leek with Apache License 2.0 | 4 votes |
|
function Stats(stats: any) {
return [
{
number: stats.SEEN_TASKS,
text: "Total Tasks",
icon: <UnorderedListOutlined />,
tooltip: "Seen tasks names",
},
{
number: stats.SEEN_WORKERS,
text: "Total Workers",
icon: <RobotFilled />,
tooltip: "The total offline/online and beat workers",
},
{
number: stats.PROCESSED_EVENTS,
text: "Events Processed",
icon: <ThunderboltOutlined />,
tooltip: "The total processed events",
},
{
number: stats.PROCESSED_TASKS,
text: "Tasks Processed",
icon: <SyncOutlined />,
tooltip: "The total processed tasks",
},
{
number: stats.QUEUED,
text: "Tasks Queued",
icon: <EllipsisOutlined />,
tooltip: "The total tasks in the queues",
},
{
number: stats.RETRY,
text: "To Retry",
icon: <RetweetOutlined style={{ color: STATES_COLORS.RETRY }} />,
tooltip: "Tasks that are failed and waiting for retry",
},
{
number: stats.RECEIVED,
text: "Received",
icon: <SendOutlined style={{ color: STATES_COLORS.RECEIVED }} />,
tooltip: "Tasks were received by a worker. but not yet started",
},
{
number: stats.STARTED,
text: "Started",
icon: <LoadingOutlined style={{ color: STATES_COLORS.STARTED }} />,
tooltip:
"Tasks that were started by a worker and still active, set (task_track_started) to True on worker level to report started tasks",
},
{
number: stats.SUCCEEDED,
text: "Succeeded",
icon: <CheckCircleOutlined style={{ color: STATES_COLORS.SUCCEEDED }} />,
tooltip: "Tasks that were succeeded",
},
{
number: stats.RECOVERED,
text: "Recovered",
icon: <IssuesCloseOutlined style={{ color: STATES_COLORS.RECOVERED }} />,
tooltip: "Tasks that were succeeded after retries.",
},
{
number: stats.FAILED,
text: "Failed",
icon: <WarningOutlined style={{ color: STATES_COLORS.FAILED }} />,
tooltip: "Tasks that were failed",
},
{
number: stats.CRITICAL,
text: "Critical",
icon: <CloseCircleOutlined style={{ color: STATES_COLORS.CRITICAL }} />,
tooltip: "Tasks that were failed after max retries.",
},
{
number: stats.REJECTED,
text: "Rejected",
icon: <RollbackOutlined style={{ color: STATES_COLORS.REJECTED }} />,
tooltip:
"Tasks that were rejected by workers and requeued, or moved to a dead letter queue",
},
{
number: stats.REVOKED,
text: "Revoked",
icon: <StopOutlined style={{ color: STATES_COLORS.REVOKED }} />,
tooltip: "Tasks that were revoked by workers, but still in the queue.",
},
];
}
Example #6
| Source File: index.tsx From metaplex with Apache License 2.0 | 4 votes |
|
Footer = () => {
const validateMessages = {
types: {
email: 'Input is not a valid email!',
},
};
const CustomForm = (props: {
status: any;
message: any;
onValidated: any;
}) => {
let email: any;
const submit = (values: any) => {
email = values.user.email;
email &&
email.indexOf('@') > -1 &&
props.onValidated({
EMAIL: email,
// NAME: name.value
});
};
return (
<>
<Form
className={'footer-sign-up'}
onFinish={submit}
validateMessages={validateMessages}
>
<Form.Item
name={['user', 'email']}
rules={[
{
type: 'email',
},
]}
style={{ display: 'flex !important' }}
>
<Input
className={'footer-input'}
type="text"
id="input"
placeholder="Email Address"
bordered={false}
/>
<Button className={'footer-button'} htmlType="submit">
<SendOutlined />
</Button>
</Form.Item>
</Form>
{props.status ? (
<div
style={{
background: 'rgb(217,217,217)',
borderRadius: 2,
padding: 10,
display: 'inline-block',
}}
>
{props.status === 'sending' && (
<div style={{ color: 'blue' }}>Loading...</div>
)}
{props.status === 'error' && (
<div
style={{ color: 'red' }}
dangerouslySetInnerHTML={{ __html: props.message }}
/>
)}
{props.status === 'success' && (
<div
style={{ color: 'green' }}
dangerouslySetInnerHTML={{ __html: props.message }}
/>
)}
</div>
) : null}
</>
);
};
const NewsLetterForm = () => (
<CustomForm status={status} message={''} onValidated={() => {}} />
);
return (
<div className="footer-container">
<div className="footer-info">
{footerConf.showShopName ? (
<div className="footer-community">
<div className="sub-header">
{LABELS.STORE_NAME} NFT Marketplace
</div>
<div className="footer-link">Powered by Metaplex and Solana</div>
</div>
) : null}
{footerConf.components.map((component, ii) => (
<div className="footer-section-container" key={ii}>
<div className="sub-header">{component.title}</div>
{component.links.map((link, jj) => (
<div className="body-text" key={jj}>
<a
className="footer-link"
href={link.url}
rel="noreferrer"
target="_blank"
>
{link.label}
</a>
</div>
))}
</div>
))}
{footerConf.showEmailSubscriber ? (
<div className="footer-section-container subscriber-container">
<div className="subscriber-text">
{footerConf.emailSubscriberText}
</div>
<NewsLetterForm />
</div>
) : null}
</div>
<div className="footer-foot">
<div className="small-body footer-link">
2021 {LABELS.STORE_NAME} LLC, All rights reserved
</div>
</div>
</div>
);
}
Example #7
| Source File: VizHeader.tsx From datart with Apache License 2.0 | 4 votes |
|
VizHeader: FC<{
chartName?: string;
status?: number;
publishLoading?: boolean;
chartDescription?: string;
backendChartId?: string;
onRun?;
onGotoEdit?;
onPublish?: () => void;
onGenerateShareLink?: ({
expiryDate,
authenticationMode,
roles,
users,
rowPermissionBy,
}: {
expiryDate: string;
authenticationMode: string;
roles: string[];
users: string[];
rowPermissionBy: string;
}) => any;
onDownloadData?;
onSaveAsVizs?;
onReloadData?;
onAddToDashBoard?;
onRecycleViz?;
allowDownload?: boolean;
allowShare?: boolean;
allowManage?: boolean;
orgId?: string;
}> = memo(
({
chartName,
status,
publishLoading,
chartDescription,
onRun,
onPublish,
onGotoEdit,
onGenerateShareLink,
onDownloadData,
onSaveAsVizs,
onReloadData,
onAddToDashBoard,
onRecycleViz,
allowDownload,
allowShare,
allowManage,
orgId,
backendChartId,
}) => {
const t = useI18NPrefix(`viz.action`);
const [showShareLinkModal, setShowShareLinkModal] = useState(false);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const isArchived = Number(status) === 0;
const handleCloseShareLinkModal = useCallback(() => {
setShowShareLinkModal(false);
}, []);
const handleOpenShareLinkModal = useCallback(() => {
setShowShareLinkModal(true);
}, []);
const handleModalOk = useCallback(
(dashboardId: string, dashboardType: string) => {
setIsModalVisible(false);
onAddToDashBoard?.(dashboardId, dashboardType);
},
[onAddToDashBoard],
);
const handleModalCancel = useCallback(() => {
setIsModalVisible(false);
}, []);
const getOverlays = () => {
return (
<VizOperationMenu
onShareLinkClick={onGenerateShareLink && handleOpenShareLinkModal}
onDownloadDataLinkClick={onDownloadData}
onSaveAsVizs={onSaveAsVizs}
onReloadData={onReloadData}
onAddToDashBoard={onAddToDashBoard && setIsModalVisible}
allowDownload={allowDownload}
allowShare={allowShare}
allowManage={allowManage}
isArchived={isArchived}
onPublish={Number(status) === 2 ? onPublish : ''}
onRecycleViz={onRecycleViz}
/>
);
};
const title = useMemo(() => {
const base = chartName || '';
const suffix = TITLE_SUFFIX[Number(status)]
? `[${t(TITLE_SUFFIX[Number(status)])}]`
: '';
return base + suffix;
}, [chartName, status, t]);
return (
<Wrapper>
<DetailPageHeader
title={title}
description={chartDescription}
disabled={Number(status) < 2}
actions={
<>
{onRun && (
<Button key="run" icon={<CaretRightFilled />} onClick={onRun}>
{t('run')}
</Button>
)}
{allowManage && !isArchived && onPublish && Number(status) === 1 && (
<Button
key="publish"
icon={<SendOutlined />}
loading={publishLoading}
onClick={onPublish}
>
{t('publish')}
</Button>
)}
{allowManage && !isArchived && onGotoEdit && (
<Button key="edit" icon={<EditOutlined />} onClick={onGotoEdit}>
{t('edit')}
</Button>
)}
<Dropdown key="more" arrow overlay={getOverlays()}>
<Button icon={<MoreOutlined />} />
</Dropdown>
</>
}
/>
{allowShare && (
<ShareManageModal
vizId={backendChartId as string}
orgId={orgId as string}
vizType="DATACHART"
visibility={showShareLinkModal}
onOk={handleCloseShareLinkModal}
onCancel={handleCloseShareLinkModal}
onGenerateShareLink={onGenerateShareLink}
/>
)}
{onSaveAsVizs && (
<SaveToDashboard
backendChartId={backendChartId}
title={t('addToDash')}
orgId={orgId as string}
isModalVisible={isModalVisible}
handleOk={handleModalOk}
handleCancel={handleModalCancel}
></SaveToDashboard>
)}
</Wrapper>
);
},
)
Example #8
| Source File: TitleHeader.tsx From datart with Apache License 2.0 | 4 votes |
|
TitleHeader: FC = memo(() => {
const t = useI18NPrefix(`viz.action`);
const publishLoading = useSelector(selectPublishLoading);
const history = useHistory();
const [showShareLinkModal, setShowShareLinkModal] = useState(false);
const [showSaveToStory, setShowSaveToStory] = useState<boolean>(false);
const { name, status, allowManage, allowShare, boardId, orgId } =
useContext(BoardContext);
const title = useStatusTitle(name, status);
const { onGenerateShareLink } = useContext(BoardActionContext);
const { publishBoard } = usePublishBoard(boardId, 'DASHBOARD', status);
const onOpenShareLink = useCallback(() => {
setShowShareLinkModal(true);
}, []);
const toBoardEditor = () => {
const pathName = history.location.pathname;
if (pathName.includes(boardId)) {
history.push(`${pathName.split(boardId)[0]}${boardId}/boardEditor`);
} else if (pathName.includes('/vizs')) {
history.push(
`${pathName.split('/vizs')[0]}${'/vizs/'}${boardId}/boardEditor`,
);
}
};
const saveToStoryOk = useCallback(
(storyId: string) => {
history.push({
pathname: `/organizations/${orgId}/vizs/storyEditor/${storyId}`,
state: {
addDashboardId: boardId,
},
});
setShowSaveToStory(false);
},
[boardId, history, orgId],
);
return (
<Wrapper>
<h1 className={classnames({ disabled: status < 2 })}>{title}</h1>
<Space>
{allowManage && (
<>
{Number(status) === 1 && (
<Button
key="publish"
icon={<SendOutlined />}
loading={publishLoading}
onClick={publishBoard}
>
{t('publish')}
</Button>
)}
<Button key="edit" icon={<EditOutlined />} onClick={toBoardEditor}>
{t('edit')}
</Button>
</>
)}
<Dropdown
overlay={
<BoardDropdownList
onOpenShareLink={onOpenShareLink}
openStoryList={() => setShowSaveToStory(true)}
/>
}
placement="bottomRight"
arrow
>
<Button icon={<MoreOutlined />} />
</Dropdown>
</Space>
{allowManage && (
<SaveToStoryBoard
title={t('addToStory')}
orgId={orgId as string}
isModalVisible={showSaveToStory}
handleOk={saveToStoryOk}
handleCancel={() => setShowSaveToStory(false)}
></SaveToStoryBoard>
)}
{allowShare && (
<ShareManageModal
vizId={boardId as string}
orgId={orgId as string}
vizType="DASHBOARD"
visibility={showShareLinkModal}
onOk={() => setShowShareLinkModal(false)}
onCancel={() => setShowShareLinkModal(false)}
onGenerateShareLink={onGenerateShareLink}
/>
)}
</Wrapper>
);
})
Example #9
| Source File: ScheduleList.tsx From datart with Apache License 2.0 | 4 votes |
|
Operations: FC<OperationsProps> = ({
active,
scheduleId,
onUpdateScheduleList,
editingId,
}) => {
const [startLoading, setStartLoading] = useState(false);
const [stopLoading, setStopLoading] = useState(false);
const [executeLoading, setExecuteLoading] = useState(false);
const { actions } = useScheduleSlice();
const dispatch = useDispatch();
const t = useI18NPrefix('main.pages.schedulePage.sidebar.scheduleList');
const updateScheduleActive = useCallback(
(active: boolean) => {
dispatch(actions.setEditingScheduleActive(active));
},
[actions, dispatch],
);
const handleStartSchedule = useCallback(() => {
setStartLoading(true);
startSchedule(scheduleId)
.then(res => {
if (!!res) {
message.success(t('successStarted'));
onUpdateScheduleList();
if (editingId === scheduleId) {
updateScheduleActive(true);
}
}
})
.finally(() => {
setStartLoading(false);
});
}, [scheduleId, editingId, onUpdateScheduleList, updateScheduleActive, t]);
const handleStopSchedule = useCallback(() => {
setStopLoading(true);
stopSchedule(scheduleId)
.then(res => {
if (!!res) {
message.success(t('successStop'));
onUpdateScheduleList();
if (editingId === scheduleId) {
updateScheduleActive(false);
}
}
})
.finally(() => {
setStopLoading(false);
});
}, [scheduleId, onUpdateScheduleList, editingId, updateScheduleActive, t]);
const handleExecuteSchedule = useCallback(() => {
setExecuteLoading(true);
executeSchedule(scheduleId)
.then(res => {
if (!!res) {
message.success(t('successImmediately'));
onUpdateScheduleList();
}
})
.finally(() => {
setExecuteLoading(false);
});
}, [scheduleId, onUpdateScheduleList, t]);
return (
<Space onClick={stopPPG}>
{!active ? (
<OperationButton
tooltipTitle={t('start')}
loading={startLoading}
icon={<CaretRightOutlined />}
onClick={handleStartSchedule}
/>
) : null}
{active ? (
<OperationButton
tooltipTitle={t('stop')}
loading={stopLoading}
icon={<PauseOutlined />}
onClick={handleStopSchedule}
/>
) : null}
<Popconfirm
title={t('executeItNow')}
okButtonProps={{ loading: executeLoading }}
onConfirm={handleExecuteSchedule}
>
<OperationButton
loading={executeLoading}
tooltipTitle={t('executeImmediately')}
icon={
<SendOutlined
rotate={-45}
css={`
position: relative;
top: -2px;
`}
/>
}
/>
</Popconfirm>
</Space>
);
}
Example #10
| Source File: StoryHeader.tsx From datart with Apache License 2.0 | 4 votes |
|
StoryHeader: FC<StoryHeaderProps> = memo(
({
orgId,
name,
toggleEdit,
status,
publishLoading,
playStory,
onPublish,
allowShare,
allowManage,
}) => {
const t = useI18NPrefix(`viz.action`);
const title = useStatusTitle(name, status);
const isArchived = Number(status) === 0;
const [showShareLinkModal, setShowShareLinkModal] = useState(false);
const { storyId: stroyBoardId } = useContext(StoryContext);
const onOpenShareLink = useCallback(() => {
setShowShareLinkModal(true);
}, []);
const onGenerateShareLink = useCallback(
async ({
expiryDate,
authenticationMode,
roles,
users,
rowPermissionBy,
}: {
expiryDate: string;
authenticationMode: string;
roles: string[];
users: string[];
rowPermissionBy: string;
}) => {
const result: any = await generateShareLinkAsync({
expiryDate,
authenticationMode,
roles,
users,
rowPermissionBy,
vizId: stroyBoardId,
vizType: 'STORYBOARD',
});
return result;
},
[stroyBoardId],
);
return (
<DetailPageHeader
title={title}
disabled={Number(status) < 2}
actions={
<>
{allowManage && !isArchived && Number(status) === 1 && (
<Button
key="publish"
icon={<SendOutlined />}
loading={publishLoading}
onClick={onPublish}
>
{t('publish')}
</Button>
)}
{allowManage && !isArchived && (
<Button key="edit" onClick={toggleEdit}>
{t('edit')}
</Button>
)}
<Button key="run" onClick={playStory}>
{t('play')}
</Button>
{(allowManage || allowShare) && (
<Dropdown
overlay={
<StoryOverLay
allowShare={allowShare}
allowManage={allowManage}
onOpenShareLink={onOpenShareLink}
isArchived={isArchived}
onPublish={Number(status) === 2 ? onPublish : ''}
/>
}
arrow
>
<Button icon={<MoreOutlined />} />
</Dropdown>
)}
{allowShare && (
<ShareManageModal
vizId={stroyBoardId as string}
orgId={orgId as string}
vizType="STORYBOARD"
visibility={showShareLinkModal}
onOk={() => setShowShareLinkModal(false)}
onCancel={() => setShowShareLinkModal(false)}
onGenerateShareLink={onGenerateShareLink}
/>
)}
</>
}
/>
);
},
)
