From 47679f44f41cd692a0c14744532ef3845c69c743 Mon Sep 17 00:00:00 2001 From: xiejay97 Date: Wed, 3 Aug 2022 10:24:51 +0800 Subject: [PATCH] feat(ui): add `timeline` component --- .../ui/src/components/accordion/Accordion.tsx | 48 +++--- packages/ui/src/components/index.ts | 3 + .../ui/src/components/stepper/Stepper.tsx | 36 ++--- .../src/components/stepper/demos/1.Basic.md | 12 +- .../components/stepper/demos/2.Clickable.md | 12 +- .../components/stepper/demos/3.LabelBottom.md | 12 +- .../src/components/stepper/demos/4.Status.md | 12 +- .../components/stepper/demos/5.CustomIcon.md | 24 +-- .../components/stepper/demos/6.Progress.md | 12 +- .../components/stepper/demos/7.Vertical.md | 12 +- packages/ui/src/components/tabs/Tabs.tsx | 54 +++---- packages/ui/src/components/timeline/README.md | 6 + .../src/components/timeline/README.zh-Hant.md | 5 + .../ui/src/components/timeline/Timeline.tsx | 146 ++++++++++++++++++ .../src/components/timeline/demos/1.Basic.md | 38 +++++ .../src/components/timeline/demos/2.Status.md | 45 ++++++ .../components/timeline/demos/3.Vertical.md | 47 ++++++ .../components/timeline/demos/4.OneSide.md | 47 ++++++ packages/ui/src/components/timeline/index.ts | 1 + packages/ui/src/hooks/d-config/contex.ts | 2 + packages/ui/src/styles/_components.scss | 1 + .../ui/src/styles/components/timeline.scss | 97 ++++++++++++ 22 files changed, 552 insertions(+), 120 deletions(-) create mode 100644 packages/ui/src/components/timeline/README.md create mode 100644 packages/ui/src/components/timeline/README.zh-Hant.md create mode 100644 packages/ui/src/components/timeline/Timeline.tsx create mode 100644 packages/ui/src/components/timeline/demos/1.Basic.md create mode 100644 packages/ui/src/components/timeline/demos/2.Status.md create mode 100644 packages/ui/src/components/timeline/demos/3.Vertical.md create mode 100644 packages/ui/src/components/timeline/demos/4.OneSide.md create mode 100644 packages/ui/src/components/timeline/index.ts create mode 100644 packages/ui/src/styles/components/timeline.scss diff --git a/packages/ui/src/components/accordion/Accordion.tsx b/packages/ui/src/components/accordion/Accordion.tsx index dade9f5c..58c67da2 100644 --- a/packages/ui/src/components/accordion/Accordion.tsx +++ b/packages/ui/src/components/accordion/Accordion.tsx @@ -77,14 +77,8 @@ export function DAccordion>(props: return (
- {dList.map((accordion, index) => { - const { - id: accordionId, - title: accordionTitle, - region: accordionRegion, - arrow: accordionArrow = dArrow, - disabled: accordionDisabled = false, - } = accordion; + {dList.map((item, index) => { + const { id: itemId, title: itemTitle, region: itemRegion, arrow: itemArrow = dArrow, disabled: itemDisabled = false } = item; const getAccordion = (next: boolean, _index = index): T | undefined => { for (let focusIndex = next ? _index + 1 : _index - 1, n = 0; n < dList.length; next ? focusIndex++ : focusIndex--, n++) { @@ -104,14 +98,14 @@ export function DAccordion>(props: } }; - const buttonId = getButtonId(accordionId); - const regionId = getRegionId(accordionId); - const isActive = dActiveOne ? activeId === accordionId : (activeId as ID[]).includes(accordionId); + const buttonId = getButtonId(itemId); + const regionId = getRegionId(itemId); + const isActive = dActiveOne ? activeId === itemId : (activeId as ID[]).includes(itemId); const iconRotate = (() => { - if (accordionArrow === 'left' && !isActive) { + if (itemArrow === 'left' && !isActive) { return -90; } - if (accordionArrow === 'right' && isActive) { + if (itemArrow === 'right' && isActive) { return 180; } return undefined; @@ -119,14 +113,14 @@ export function DAccordion>(props: const handleClick = () => { if (dActiveOne) { - changeActiveId(isActive ? null : accordionId); + changeActiveId(isActive ? null : itemId); } else { changeActiveId((draft) => { - const index = (draft as ID[]).findIndex((v) => v === accordionId); + const index = (draft as ID[]).findIndex((v) => v === itemId); if (index !== -1) { (draft as ID[]).splice(index, 1); } else { - (draft as ID[]).push(accordionId); + (draft as ID[]).push(itemId); } }); } @@ -134,7 +128,7 @@ export function DAccordion>(props: return (
>(props:
{ switch (e.code) { @@ -194,8 +188,8 @@ export function DAccordion>(props: } }} > -
{accordionTitle}
- {accordionArrow && } +
{itemTitle}
+ {itemArrow && }
>(props: leaved: { display: 'none' }, }} afterEnter={() => { - afterActiveChange?.(accordionId, accordion, true); + afterActiveChange?.(itemId, item, true); }} afterLeave={() => { - afterActiveChange?.(accordionId, accordion, false); + afterActiveChange?.(itemId, item, false); }} > {(ref, collapseStyle) => ( @@ -230,9 +224,9 @@ export function DAccordion>(props: className={`${dPrefix}accordion__region`} style={collapseStyle} role="region" - aria-labelledby={getButtonId(accordionId)} + aria-labelledby={getButtonId(itemId)} > - {accordionRegion} + {itemRegion}
)} diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index cde6badb..2da20877 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -127,6 +127,9 @@ export { DTextarea } from './textarea'; export type { DTimePickerProps } from './time-picker'; export { DTimePicker } from './time-picker'; +export type { DTimelineProps } from './timeline'; +export { DTimeline } from './timeline'; + export type { DToastProps } from './toast'; export { ToastService } from './toast'; diff --git a/packages/ui/src/components/stepper/Stepper.tsx b/packages/ui/src/components/stepper/Stepper.tsx index 0d660291..c2d3d516 100644 --- a/packages/ui/src/components/stepper/Stepper.tsx +++ b/packages/ui/src/components/stepper/Stepper.tsx @@ -12,7 +12,7 @@ export interface DStepperItem { title: React.ReactNode; description?: React.ReactNode; icon?: React.ReactNode; - status?: 'completed' | 'process' | 'wait' | 'error'; + status?: 'completed' | 'active' | 'wait' | 'error'; } export interface DStepperProps extends Omit, 'children'> { @@ -56,12 +56,12 @@ export function DStepper(props: DStepperProps): JSX.E [`${dPrefix}stepper--button`]: dClickable, })} > - {dList.map((step, index) => { - const { step: stepStep = index + 1, title: stepTitle, description: stepDescription, icon: stepIcon, status: stepStatus } = step; + {dList.map((item, index) => { + const { step: itemStep = index + 1, title: itemTitle, description: itemDescription, icon: itemIcon, status: itemStatus } = item; - const isCompleted = stepStep < active; - const isActive = stepStep === active; - const isWait = stepStep > active; + const isCompleted = itemStep < active; + const isActive = itemStep === active; + const isWait = itemStep > active; const isProgress = isActive && isNumber(dPercent); @@ -70,7 +70,7 @@ export function DStepper(props: DStepperProps): JSX.E className={`${dPrefix}stepper__step-title`} style={{ marginTop: dLabelBottom ? undefined : `calc((${dIconSize}px - 1.1em) / 2)` }} > - {stepTitle} + {itemTitle}
); @@ -91,10 +91,10 @@ export function DStepper(props: DStepperProps): JSX.E return (
(props: DStepperProps): JSX.E } : {}, { - [`is-${stepStatus}`]: stepStatus, + [`is-${itemStatus}`]: itemStatus, [`${dPrefix}stepper__step--last`]: index === dList.length - 1, } )} @@ -117,13 +117,13 @@ export function DStepper(props: DStepperProps): JSX.E if (e.code === 'Enter' || e.code === 'Space') { e.preventDefault(); - onItemClick?.(stepStep, step); + onItemClick?.(itemStep, item); } } }} onClick={() => { if (dClickable) { - onItemClick?.(stepStep, step); + onItemClick?.(itemStep, item); } }} > @@ -137,14 +137,14 @@ export function DStepper(props: DStepperProps): JSX.E height: dIconSize, }} > - {stepIcon === false ? null : checkNodeExist(stepIcon) ? ( - stepIcon - ) : stepStatus === 'error' ? ( + {itemIcon === false ? null : checkNodeExist(itemIcon) ? ( + itemIcon + ) : itemStatus === 'error' ? ( ) : isCompleted ? ( ) : ( - stepStep + itemStep )} {isProgress && ( (props: DStepperProps): JSX.E
{dLabelBottom && titleNode} {dVertical && separatoreNode} - {checkNodeExist(stepDescription) && ( + {checkNodeExist(itemDescription) && ( (props: DStepperProps): JSX.E marginLeft: dLabelBottom ? undefined : `calc(${dIconSize}px + 8px)`, }} > - {stepDescription} + {itemDescription} )} diff --git a/packages/ui/src/components/stepper/demos/1.Basic.md b/packages/ui/src/components/stepper/demos/1.Basic.md index f1c39abd..9e1fa9dd 100644 --- a/packages/ui/src/components/stepper/demos/1.Basic.md +++ b/packages/ui/src/components/stepper/demos/1.Basic.md @@ -26,18 +26,18 @@ export default function Demo() { dActive={active} dList={[ { - title: `This is a long long long long long title`, + title: 'This is a long long long long long title', }, { - title: `Step 2`, + title: 'Step 2', }, { - title: `Step 3`, - description: `This is a long long long long long description.`, + title: 'Step 3', + description: 'This is a long long long long long description.', }, { - title: `Step 4`, - description: `This is 4 description.`, + title: 'Step 4', + description: 'This is 4 description.', }, ]} > diff --git a/packages/ui/src/components/stepper/demos/2.Clickable.md b/packages/ui/src/components/stepper/demos/2.Clickable.md index bddeaca5..4ad4941c 100644 --- a/packages/ui/src/components/stepper/demos/2.Clickable.md +++ b/packages/ui/src/components/stepper/demos/2.Clickable.md @@ -25,18 +25,18 @@ export default function Demo() { dActive={active} dList={[ { - title: `This is a long long long long long title`, + title: 'This is a long long long long long title', }, { - title: `Step 2`, + title: 'Step 2', }, { - title: `Step 3`, - description: `This is a long long long long long description.`, + title: 'Step 3', + description: 'This is a long long long long long description.', }, { - title: `Step 4`, - description: `This is 4 description.`, + title: 'Step 4', + description: 'This is 4 description.', }, ]} dClickable diff --git a/packages/ui/src/components/stepper/demos/3.LabelBottom.md b/packages/ui/src/components/stepper/demos/3.LabelBottom.md index b0c54f60..9e629abf 100644 --- a/packages/ui/src/components/stepper/demos/3.LabelBottom.md +++ b/packages/ui/src/components/stepper/demos/3.LabelBottom.md @@ -21,18 +21,18 @@ export default function Demo() { dActive={3} dList={[ { - title: `This is a long long long long long title`, + title: 'This is a long long long long long title', }, { - title: `Step 2`, + title: 'Step 2', }, { - title: `Step 3`, - description: `This is a long long long long long description.`, + title: 'Step 3', + description: 'This is a long long long long long description.', }, { - title: `Step 4`, - description: `This is 4 description.`, + title: 'Step 4', + description: 'This is 4 description.', }, ]} dLabelBottom diff --git a/packages/ui/src/components/stepper/demos/4.Status.md b/packages/ui/src/components/stepper/demos/4.Status.md index 5cb61a48..14a492cc 100644 --- a/packages/ui/src/components/stepper/demos/4.Status.md +++ b/packages/ui/src/components/stepper/demos/4.Status.md @@ -21,17 +21,17 @@ export default function Demo() { dActive={3} dList={[ { - title: `Step 1`, - description: `This is 1 description.`, + title: 'Step 1', + description: 'This is 1 description.', }, { - title: `Step 2`, + title: 'Step 2', status: 'error', - description: `This is 2 description.`, + description: 'This is 2 description.', }, { - title: `Step 3`, - description: `This is 3 description.`, + title: 'Step 3', + description: 'This is 3 description.', }, ]} > diff --git a/packages/ui/src/components/stepper/demos/5.CustomIcon.md b/packages/ui/src/components/stepper/demos/5.CustomIcon.md index 58d41448..876d941c 100644 --- a/packages/ui/src/components/stepper/demos/5.CustomIcon.md +++ b/packages/ui/src/components/stepper/demos/5.CustomIcon.md @@ -23,18 +23,18 @@ export default function Demo() { dActive={2} dList={[ { - title: `Step 1`, - description: `This is 1 description.`, + title: 'Step 1', + description: 'This is 1 description.', icon: false, }, { - title: `Step 2`, - description: `This is 2 description.`, + title: 'Step 2', + description: 'This is 2 description.', icon: false, }, { - title: `Step 3`, - description: `This is 3 description.`, + title: 'Step 3', + description: 'This is 3 description.', icon: false, }, ]} @@ -46,18 +46,18 @@ export default function Demo() { dActive={2} dList={[ { - title: `Step 1`, - description: `This is 1 description.`, + title: 'Step 1', + description: 'This is 1 description.', icon: , }, { - title: `Step 2`, - description: `This is 2 description.`, + title: 'Step 2', + description: 'This is 2 description.', icon: , }, { - title: `Step 3`, - description: `This is 3 description.`, + title: 'Step 3', + description: 'This is 3 description.', }, ]} > diff --git a/packages/ui/src/components/stepper/demos/6.Progress.md b/packages/ui/src/components/stepper/demos/6.Progress.md index 1c174f7b..ca0ae107 100644 --- a/packages/ui/src/components/stepper/demos/6.Progress.md +++ b/packages/ui/src/components/stepper/demos/6.Progress.md @@ -45,16 +45,16 @@ export default function Demo() { dActive={2} dList={[ { - title: `Step 1`, - description: `This is 1 description.`, + title: 'Step 1', + description: 'This is 1 description.', }, { - title: `Step 2`, - description: `This is 2 description.`, + title: 'Step 2', + description: 'This is 2 description.', }, { - title: `Step 3`, - description: `This is 3 description.`, + title: 'Step 3', + description: 'This is 3 description.', }, ]} dPercent={percent} diff --git a/packages/ui/src/components/stepper/demos/7.Vertical.md b/packages/ui/src/components/stepper/demos/7.Vertical.md index 2adc2ac3..bd33357e 100644 --- a/packages/ui/src/components/stepper/demos/7.Vertical.md +++ b/packages/ui/src/components/stepper/demos/7.Vertical.md @@ -33,18 +33,18 @@ export default function Demo() { dActive={active} dList={[ { - title: `This is a long long long long long title`, + title: 'This is a long long long long long title', }, { - title: `Step 2`, + title: 'Step 2', }, { - title: `Step 3`, - description: `This is a long long long long long description.`, + title: 'Step 3', + description: 'This is a long long long long long description.', }, { - title: `Step 4`, - description: `This is 4 description.`, + title: 'Step 4', + description: 'This is 4 description.', }, ]} dLabelBottom={labelBottom} diff --git a/packages/ui/src/components/tabs/Tabs.tsx b/packages/ui/src/components/tabs/Tabs.tsx index 939ea0d8..b0f79d83 100644 --- a/packages/ui/src/components/tabs/Tabs.tsx +++ b/packages/ui/src/components/tabs/Tabs.tsx @@ -202,8 +202,8 @@ export function DTabs>(props: DTabsProps< role="tablist" aria-orientation={isHorizontal ? 'horizontal' : 'vertical'} > - {dList.map((tab, index) => { - const { id: tabId, title: tabTitle, disabled: tabDisabled, closable: tabClosable } = tab; + {dList.map((item, index) => { + const { id: itemId, title: itemTitle, disabled: itemDisabled, closable: itemClosable } = item; const getTab = (next: boolean, _index = index): T | undefined => { for (let focusIndex = next ? _index + 1 : _index - 1, n = 0; n < dList.length; next ? focusIndex++ : focusIndex--, n++) { @@ -226,7 +226,7 @@ export function DTabs>(props: DTabsProps< }; const closeTab = () => { - if (activeId === tabId) { + if (activeId === itemId) { let hasTab = false; for (let focusIndex = index + 1; focusIndex < dList.length; focusIndex++) { const t = nth(dList, focusIndex); @@ -246,34 +246,34 @@ export function DTabs>(props: DTabsProps< } } } - onClose?.(tabId, tab); + onClose?.(itemId, item); }; - const active = tabId === activeId; + const active = itemId === activeId; return ( - {dList.map((tab) => { - const { id: tabId, panel: tabPanel } = tab; + {dList.map((item) => { + const { id: itemId, panel: itemPanel } = item; return ( ); })} diff --git a/packages/ui/src/components/timeline/README.md b/packages/ui/src/components/timeline/README.md new file mode 100644 index 00000000..7d96c73b --- /dev/null +++ b/packages/ui/src/components/timeline/README.md @@ -0,0 +1,6 @@ +--- +group: Data Display +title: Timeline +--- + +## API diff --git a/packages/ui/src/components/timeline/README.zh-Hant.md b/packages/ui/src/components/timeline/README.zh-Hant.md new file mode 100644 index 00000000..14c8d6df --- /dev/null +++ b/packages/ui/src/components/timeline/README.zh-Hant.md @@ -0,0 +1,5 @@ +--- +title: 时间轴 +--- + +## API diff --git a/packages/ui/src/components/timeline/Timeline.tsx b/packages/ui/src/components/timeline/Timeline.tsx new file mode 100644 index 00000000..bb77508f --- /dev/null +++ b/packages/ui/src/components/timeline/Timeline.tsx @@ -0,0 +1,146 @@ +import React from 'react'; + +import { usePrefixConfig, useComponentConfig } from '../../hooks'; +import { checkNodeExist, getClassName, registerComponentMate } from '../../utils'; + +export interface DTimelineItem { + content: [React.ReactNode, React.ReactNode]; + icon?: React.ReactNode; + status?: 'completed' | 'active' | 'wait' | 'error'; +} + +export interface DTimelineProps extends Omit, 'children'> { + dList: T[]; + dVertical?: boolean; + dLineSize?: number; +} + +const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DTimeline' }); +export function DTimeline(props: DTimelineProps): JSX.Element | null { + const { + dList, + dVertical = false, + dLineSize = 36, + + ...restProps + } = useComponentConfig(COMPONENT_NAME, props); + + //#region Context + const dPrefix = usePrefixConfig(); + //#endregion + + const nodeExist = (() => { + const hasNode = [false, false]; + for (const item of dList) { + if (checkNodeExist(item.content[0])) { + hasNode[0] = true; + } + if (checkNodeExist(item.content[1])) { + hasNode[1] = true; + } + } + return hasNode; + })(); + + return ( +
+ {dVertical ? ( + <> + {dList.map((item, index) => { + const { content: itemContent, icon: itemIcon, status: itemStatus } = item; + + return ( + +
+ {nodeExist[0] && ( +
{itemContent[0]}
+ )} +
+
+ {checkNodeExist(itemIcon) ? itemIcon :
} +
+
+ {nodeExist[1] &&
{itemContent[1]}
} +
+ {index !== dList.length - 1 && ( +
+ {nodeExist[0] &&
} +
+
+
+ {nodeExist[1] &&
} +
+ )} + + ); + })} + + ) : ( + <> + {nodeExist[0] && ( +
+ {dList.map((item, index) => ( +
+ {item.content[0]} +
+ ))} +
+ )} +
+ {dList.map((item, index) => { + const { icon: itemIcon, status: itemStatus } = item; + + return ( +
+
+ {checkNodeExist(itemIcon) ? itemIcon :
} +
+
+ ); + })} +
+ {nodeExist[1] && ( +
+ {dList.map((item, index) => ( +
+ {item.content[1]} +
+ ))} +
+ )} + + )} +
+ ); +} diff --git a/packages/ui/src/components/timeline/demos/1.Basic.md b/packages/ui/src/components/timeline/demos/1.Basic.md new file mode 100644 index 00000000..0236a78a --- /dev/null +++ b/packages/ui/src/components/timeline/demos/1.Basic.md @@ -0,0 +1,38 @@ +--- +title: + en-US: Basic + zh-Hant: 基本 +--- + +# en-US + +The simplest usage. + +# zh-Hant + +最简单的用法。 + +```tsx +import { DTimeline } from '@react-devui/ui'; + +export default function Demo() { + return ( + + ); +} +``` diff --git a/packages/ui/src/components/timeline/demos/2.Status.md b/packages/ui/src/components/timeline/demos/2.Status.md new file mode 100644 index 00000000..e2b9c17c --- /dev/null +++ b/packages/ui/src/components/timeline/demos/2.Status.md @@ -0,0 +1,45 @@ +--- +title: + en-US: Point-in-time status + zh-Hant: 时间点状态 +--- + +# en-US + +Custom point-in-time status. + +# zh-Hant + +自定义时间点状态。 + +```tsx +import { DTimeline } from '@react-devui/ui'; +import { CheckCircleOutlined, CloseCircleFilled } from '@react-devui/ui/icons'; + +export default function Demo() { + return ( + , + }, + { + content: ['This is a text', '2022-01-02'], + status: 'error', + icon: , + }, + { + content: ['2022-01-03', 'This is a text'], + status: 'active', + }, + { + content: ['This is a text', '2022-01-04'], + status: 'wait', + }, + ]} + /> + ); +} +``` diff --git a/packages/ui/src/components/timeline/demos/3.Vertical.md b/packages/ui/src/components/timeline/demos/3.Vertical.md new file mode 100644 index 00000000..7df5954c --- /dev/null +++ b/packages/ui/src/components/timeline/demos/3.Vertical.md @@ -0,0 +1,47 @@ +--- +title: + en-US: Vertical timeline + zh-Hant: 垂直时间轴 +--- + +# en-US + +Set the vertical layout via `dVertical`. + +# zh-Hant + +通过 `dVertical` 设置垂直排布。 + +```tsx +import { DTimeline } from '@react-devui/ui'; +import { CheckCircleOutlined, CloseCircleFilled } from '@react-devui/ui/icons'; + +export default function Demo() { + return ( + , + }, + { + content: [null, 'This is a text'], + status: 'error', + icon: , + }, + { + content: ['2022-01-03', 'This is a text'], + status: 'active', + }, + { + content: ['2022-01-04', 'This is a text'], + status: 'wait', + }, + ]} + dVertical + /> + ); +} +``` diff --git a/packages/ui/src/components/timeline/demos/4.OneSide.md b/packages/ui/src/components/timeline/demos/4.OneSide.md new file mode 100644 index 00000000..abaea309 --- /dev/null +++ b/packages/ui/src/components/timeline/demos/4.OneSide.md @@ -0,0 +1,47 @@ +--- +title: + en-US: One-sided display + zh-Hant: 单边显示 +--- + +# en-US + +This example shows how the `content` of each item of data in `dList` is displayed when one side is empty. + +# zh-Hant + +该例展示了 `dList` 中每一项数据的 `content` 都有一侧为空时的显示。 + +```tsx +import { useState } from 'react'; + +import { DTimeline, DSwitch, DButton } from '@react-devui/ui'; + +export default function Demo() { + const [vertical, setVertical] = useState(true); + const [side, setSide] = useState(1); + + return ( + <> +
+ + Vertical + + setSide((draft) => (draft === 1 ? 0 : 1))}>Change side +
+
+
+ { + const content = []; + content[side] = `2022-01-0${i + 1}: ${i === 0 ? 'This is a long long long long long text' : 'This is a text'}`; + return { content }; + })} + dVertical={vertical} + /> + + ); +} +``` diff --git a/packages/ui/src/components/timeline/index.ts b/packages/ui/src/components/timeline/index.ts new file mode 100644 index 00000000..83f79cad --- /dev/null +++ b/packages/ui/src/components/timeline/index.ts @@ -0,0 +1 @@ +export * from './Timeline'; diff --git a/packages/ui/src/hooks/d-config/contex.ts b/packages/ui/src/hooks/d-config/contex.ts index f15b20dc..e5f47c09 100644 --- a/packages/ui/src/hooks/d-config/contex.ts +++ b/packages/ui/src/hooks/d-config/contex.ts @@ -57,6 +57,7 @@ import type { DTagProps, DTextareaProps, DTimePickerProps, + DTimelineProps, DToastProps, DTooltipProps, DTransferProps, @@ -134,6 +135,7 @@ export type DComponentConfig = { DTag: DTagProps; DTextarea: DTextareaProps; DTimePicker: DTimePickerProps; + DTimeline: DTimelineProps; DToast: DToastProps; DTooltip: DTooltipProps; DTransfer: DTransferProps; diff --git a/packages/ui/src/styles/_components.scss b/packages/ui/src/styles/_components.scss index a4436585..c23fa0b1 100644 --- a/packages/ui/src/styles/_components.scss +++ b/packages/ui/src/styles/_components.scss @@ -40,6 +40,7 @@ @import 'components/tag'; @import 'components/textarea'; @import 'components/time-picker'; +@import 'components/timeline'; @import 'components/toast'; @import 'components/tooltip'; @import 'components/transfer'; diff --git a/packages/ui/src/styles/components/timeline.scss b/packages/ui/src/styles/components/timeline.scss new file mode 100644 index 00000000..cc7d7fa2 --- /dev/null +++ b/packages/ui/src/styles/components/timeline.scss @@ -0,0 +1,97 @@ +@include b(timeline) { + @include e(text-container) { + display: flex; + + @include e(text, true) { + padding: 0 8px; + text-align: center; + } + } + + @include e(icon-container) { + display: flex; + + @include e(icon, true) { + position: relative; + display: flex; + flex: 1 0 0; + align-items: center; + } + + @include e(separator, true) { + flex: 1 0 0; + height: 2px; + } + } + + @include e(content) { + display: flex; + align-items: stretch; + + @include m(gap) { + height: 20px; + } + + @include e(text, true) { + display: inline-flex; + align-items: center; + } + + @include e(icon, true) { + display: inline-flex; + flex-direction: column; + align-items: center; + } + + @include e(separator, true) { + flex: 1 0 0; + width: 2px; + } + } + + @include e(text) { + flex: 1 0 0; + + @include m(left) { + justify-content: flex-end; + } + } + + @include e(icon) { + color: var(--#{$variable-prefix}color-primary); + + @include when(completed) { + color: var(--#{$variable-prefix}color-success); + } + + @include when(active) { + color: var(--#{$variable-prefix}color-primary); + } + + @include when(wait) { + color: var(--#{$variable-prefix}color-disabled); + } + + @include when(error) { + color: var(--#{$variable-prefix}color-danger); + } + } + + @include e(dot) { + position: relative; + z-index: 5; + width: 12px; + height: 12px; + background-color: var(--#{$variable-prefix}background-color); + border: 2px solid currentcolor; + border-radius: 50%; + } + + @include e(separator) { + background-color: var(--#{$variable-prefix}background-color-indicator); + + @include m(hidden) { + background-color: transparent; + } + } +}