@ant-design/icons#CalculatorOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CalculatorOutlined.
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: 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 #2
| Source File: Cohort.tsx From posthog-foss with MIT License | 4 votes |
|
export function Cohort(props: { cohort: CohortType }): JSX.Element {
const logic = cohortLogic(props)
const { setCohort } = useActions(logic)
const { cohort, submitted } = useValues(logic)
const { hasAvailableFeature } = useValues(userLogic)
const onDescriptionChange = (description: string): void => {
setCohort({
...cohort,
description,
})
}
const onTypeChange = (type: string): void => {
if (type === COHORT_STATIC) {
setCohort({
...cohort,
is_static: true,
})
} else if (type === COHORT_DYNAMIC) {
setCohort({
...cohort,
is_static: false,
})
}
}
const staticCSVDraggerProps = {
name: 'file',
multiple: false,
fileList: cohort.csv ? [cohort.csv] : [],
beforeUpload(file: UploadFile) {
setCohort({ ...cohort, csv: file })
return false
},
accept: '.csv',
}
const COHORT_TYPE_OPTIONS = [
{
key: COHORT_STATIC,
label: 'Static',
description: 'Upload a list of users. Updates manually',
icon: <OrderedListOutlined />,
},
{
key: COHORT_DYNAMIC,
label: 'Dynamic',
description: 'Cohort updates dynamically based on properties',
icon: <CalculatorOutlined />,
},
]
const cohortTypeDropdown = (): JSX.Element => (
<DropdownSelector
options={COHORT_TYPE_OPTIONS}
disabled={cohort.id !== 'new'}
value={cohort.is_static ? COHORT_STATIC : COHORT_DYNAMIC}
onValueChange={onTypeChange}
/>
)
return (
<div className="mb">
<Row gutter={16}>
<Col>
<h3 className="l3">General</h3>
</Col>
</Row>
<Row gutter={16}>
<Col md={14}>
<CohortNameInput input={cohort.name} onChange={(name: string) => setCohort({ ...cohort, name })} />
</Col>
<Col md={10}>
{cohort.id === 'new' ? (
cohortTypeDropdown()
) : (
<Tooltip title="Create a new cohort to use a different type of cohort.">
<div>{cohortTypeDropdown()}</div>
</Tooltip>
)}
</Col>
</Row>
{hasAvailableFeature(AvailableFeature.DASHBOARD_COLLABORATION) && (
<Row gutter={16} className="mt">
<Col span={24}>
<CohortDescriptionInput description={cohort.description} onChange={onDescriptionChange} />
</Col>
</Row>
)}
{cohort.id && cohort.id !== 'new' && <CohortDetailsRow cohort={cohort} />}
<Divider />
{cohort.is_static ? (
<div>
<h3 className="l3">Add Users</h3>
<span>
Drop a <pre style={{ display: 'inline' }}>.csv</pre> file here to add users to your cohort
</span>
<Dragger {...staticCSVDraggerProps} className="cohort-csv-dragger">
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<div>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
The CSV file only requires a single column with the user’s distinct ID.
</p>
{submitted && !cohort.csv && (
<p style={{ color: 'var(--danger)', marginTop: 16 }}>You need to upload a CSV file.</p>
)}
</div>
</Dragger>
</div>
) : (
<CohortMatchingCriteriaSection logic={logic} />
)}
{cohort.id !== 'new' && (
<>
<Divider />
<div>
<h3 className="l3">Matched Users</h3>
<span>List of users that currently match the criteria defined</span>
{cohort.is_calculating ? (
<div className="cohort-recalculating flex-center">
<Spinner size="sm" style={{ marginRight: 4 }} />
We're recalculating who belongs to this cohort. This could take up to a couple of
minutes.
</div>
) : (
<div style={{ marginTop: 15 }}>
<Persons cohort={cohort} />
</div>
)}
</div>
</>
)}
</div>
)
}
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: OrderForm.tsx From mayoor with MIT License | 4 votes |
|
OrderForm: React.FC<Props> = (props) => {
const { t } = useTranslation();
const { currencyFormatter } = useCurrencyFormatter();
return (
<Formik<OrderFormValues>
initialValues={props.initialValues}
onSubmit={async (values, { resetForm }) => {
await props.onSubmit(values, resetForm);
}}
validationSchema={getOrderValidationSchema(t)}
enableReinitialize
>
{({ handleSubmit, values, handleChange, setFieldValue }) => (
<StyledForm onSubmit={handleSubmit}>
<Row gutter={8}>
<Col lg={4}>
<StyledOrderNumberWrapper>
<FormInput
name="number"
label={t('Order number')}
icon={<NumberOutlined />}
withLabel
type="number"
disabled={!props.isNumberEditable}
/>
</StyledOrderNumberWrapper>
</Col>
<Col lg={7}>
<CustomerPicker extraCustomer={props.extraCustomer} />
</Col>
<Col lg={6}>
<OrderStatusSelect />
</Col>
</Row>
<StyledDivider />
<Row gutter={6}>
<Col sm={4}>
<StyledLabel>{t('Material')}</StyledLabel>
</Col>
<Col sm={7}>
<StyledLabel>{t('Name')}</StyledLabel>
</Col>
<Col sm={2}>
<StyledLabel>{t('Width')}</StyledLabel>
</Col>
<Col sm={2}>
<StyledLabel>{t('Height')}</StyledLabel>
</Col>
<Col sm={2}>
<StyledLabel>{t('Pieces')}</StyledLabel>
</Col>
<Col sm={1}></Col>
<Col sm={3}>
<StyledLabel>{t('Price')}</StyledLabel>
</Col>
<Col sm={3}>
<StyledLabel>{t('Tax')}</StyledLabel>
</Col>
</Row>
<FieldArray
name="items"
render={(arrayHelpers) => (
<>
{values.items.length > 0 &&
values.items.map((item, index) => (
<OrderItemField
key={item.id || index}
index={index}
arrayHelpers={arrayHelpers}
/>
))}
<Row>
<Col>
<Button
icon={<PlusCircleOutlined />}
onClick={() => arrayHelpers.push(dummyMaterialItem)}
>
{t('Add item')}
</Button>
</Col>
<Col style={{ textAlign: 'right' }}>
<Button
icon={<CalculatorOutlined />}
onClick={() => {
const { totalPrice, totalTax } = calculateSummary(
values,
);
setFieldValue('totalPrice', totalPrice);
setFieldValue('totalTax', totalTax);
}}
style={{ marginLeft: 10 }}
data-test-id="order-sum-items-button"
>
{t('Sum items')}
</Button>
</Col>
</Row>
</>
)}
/>
<Row gutter={8} style={{ marginTop: 15 }}>
<Col sm={10}>
<StyledFormItem>
<StyledLabel>{t('Note')}</StyledLabel>
<Input.TextArea
rows={4}
name="note"
placeholder={t('note_placeholder')}
onChange={handleChange}
data-test-id="order-form-note"
value={values.note || ''}
/>
</StyledFormItem>
</Col>
<Col sm={8}>
<Row>
<Col sm={18} offset={3}>
<UrgentSlider />
</Col>
</Row>
</Col>
<Col sm={6}>
<OrderSummaryWrapper>
<FormInput
name="totalPrice"
label={t('Total price')}
type="number"
suffix={CURRENCY_SUFFIX}
withLabel
/>
<FormInput
name="totalTax"
label={t('Total tax')}
type="number"
suffix={CURRENCY_SUFFIX}
withLabel
/>
{!!getTotalPriceIncludingTax(values) && (
<div>
<StyledLabel>{t('Total price including tax')}</StyledLabel>
<span>
{currencyFormatter(
getTotalPriceIncludingTax(values) || 0,
)}
</span>
</div>
)}
</OrderSummaryWrapper>
</Col>
</Row>
{props.submitButton}
</StyledForm>
)}
</Formik>
);
}
Example #5
| Source File: OrderItemField.tsx From mayoor with MIT License | 4 votes |
|
OrderItemField: React.FC<FieldProps> = ({ index, arrayHelpers }) => {
const { t } = useTranslation();
const itemName = `items.${index}`;
const [{ value }, , { setValue }] = useField<OrderFormItem>(itemName);
const calculateClickHandler = () => {
const allMaterials = client.readQuery<GetAllMaterials>({ query: GET_ALL_MATERIALS });
const material = allMaterials?.getAllMaterials.find(({ id }) => id === value.materialId);
const { width, height, pieces } = value;
const { price, tax } = calculateRow({ width, height, pieces, unitPrice: material?.price });
setValue({ ...value, totalPrice: price, totalTax: tax });
};
const calculationEnabled = value.materialId && value.width && value.height && value.pieces;
return (
<StyledOrderRow key={value.id || index} gutter={6}>
<Col sm={4}>
<MaterialColumn>
<StyledItemNumber>{index + 1}.</StyledItemNumber>
<MaterialPicker name={`${itemName}.materialId`} />
</MaterialColumn>
</Col>
<Col sm={7}>
<FormInput name={`${itemName}.name`} label={t('Name')} />
</Col>
<Col sm={2}>
<WiderInputWrapper>
<FormInput name={`${itemName}.width`} suffix="m" type="number" />
</WiderInputWrapper>
</Col>
<Col sm={2}>
<WiderInputWrapper>
<FormInput name={`${itemName}.height`} suffix="m" type="number" />
</WiderInputWrapper>
</Col>
<Col sm={2}>
<FormInput
name={`${itemName}.pieces`}
label={t('Pieces')}
type="number"
min="0"
step="1"
/>
</Col>
<Col sm={1}>
<Tooltip title={t('Calculate row')}>
<Button
icon={<CalculatorOutlined />}
shape="circle-outline"
type="link"
data-test-id={`${itemName}-calculate-button`}
disabled={!calculationEnabled}
onClick={calculateClickHandler}
></Button>
</Tooltip>
</Col>
<Col sm={3}>
<FormInput
name={`${itemName}.totalPrice`}
label={t('Price')}
suffix={CURRENCY_SUFFIX}
type="number"
/>
</Col>
<Col sm={3}>
<FormInput
name={`${itemName}.totalTax`}
label={t('Tax')}
suffix={CURRENCY_SUFFIX}
type="number"
/>
<HiddenDeleteButton>
<Popconfirm
title={t('Are you sure want to remove this item?')}
onConfirm={() => arrayHelpers.remove(index)}
placement="topRight"
okText={t('Remove')}
okType="danger"
>
<Button
icon={<DeleteOutlined />}
shape="circle-outline"
type="link"
></Button>
</Popconfirm>
</HiddenDeleteButton>
</Col>
</StyledOrderRow>
);
}
