Skip to content

Commit a7fbe3d

Browse files
xiejay97xiejay97
committed
feat(ui): add alert component
1 parent 9b1cd98 commit a7fbe3d

93 files changed

Lines changed: 1058 additions & 650 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.stylelintrc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
}
1414
],
1515
"declaration-property-value-allowed-list": {
16-
"/color/": ["/var/", "/\\$colors/", "currentColor", "transparent", "unset", "inherit"],
17-
"font-size": ["/var/", "/[0-9]+em$/", "unset", "inherit"],
18-
"border-radius": ["/var/", "50%", "0", "inherit"]
16+
"/color/": ["/var/", "/\\$/", "currentColor", "transparent", "unset", "inherit"],
17+
"font-size": ["/var/", "/\\$/", "/[0-9]+em$/", "unset", "inherit"],
18+
"border-radius": ["/var/", "/\\$/", "50%", "0", "inherit"]
1919
},
2020
"declaration-property-value-disallowed-list": {
2121
"transition": ["/all/", "/[0-9]ms/"]

‎packages/site/src/app/components/route/RouteArticle.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,13 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
7878

7979
const transitionStyles: Partial<Record<DTransitionState, React.CSSProperties>> = {
8080
enter: { opacity: 0, transform: 'translateY(120px)' },
81-
entering: { transition: `opacity ${TTANSITION_DURING_BASE}ms ease-out, transform ${TTANSITION_DURING_BASE}ms ease-out` },
81+
entering: {
82+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
83+
},
8284
leaving: {
8385
opacity: 0,
8486
transform: 'translateY(120px)',
85-
transition: `opacity ${TTANSITION_DURING_BASE}ms ease-in, transform ${TTANSITION_DURING_BASE}ms ease-in`,
87+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
8688
},
8789
leaved: { display: 'none' },
8890
};

‎packages/site/src/app/styles/_app.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,12 @@ h3 {
295295
margin-bottom: 12px;
296296
}
297297
}
298+
299+
section[id^='Alert'] {
300+
.d-alert {
301+
margin-bottom: 20px;
302+
}
303+
}
298304
}
299305

300306
.app-demo-col {

‎packages/ui/src/components/_alert-popover/AlertPopover.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { useRef } from 'react';
3+
4+
import { useAsync, useMount } from '../../hooks';
5+
6+
export interface DAlertPopoverProps {
7+
children: React.ReactElement;
8+
dDuration: number;
9+
dEscClosable?: boolean;
10+
onClose?: () => void;
11+
}
12+
13+
export function DAlertPopover(props: DAlertPopoverProps): JSX.Element | null {
14+
const { children, dDuration, dEscClosable = true, onClose } = props;
15+
16+
const dataRef = useRef<{
17+
clearTid?: () => void;
18+
}>({});
19+
20+
const asyncCapture = useAsync();
21+
22+
useMount(() => {
23+
if (dDuration > 0) {
24+
dataRef.current.clearTid = asyncCapture.setTimeout(() => {
25+
onClose?.();
26+
}, dDuration * 1000);
27+
}
28+
});
29+
30+
return React.cloneElement<React.HTMLAttributes<HTMLDivElement>>(children, {
31+
...children.props,
32+
tabIndex: children.props.tabIndex ?? -1,
33+
role: children.props.role ?? 'alert',
34+
onMouseEnter: (e) => {
35+
children.props.onMouseEnter?.(e);
36+
37+
dataRef.current.clearTid?.();
38+
},
39+
onMouseLeave: (e) => {
40+
children.props.onMouseLeave?.(e);
41+
42+
if (dDuration > 0) {
43+
dataRef.current.clearTid = asyncCapture.setTimeout(() => {
44+
onClose?.();
45+
}, dDuration * 1000);
46+
}
47+
},
48+
onKeyDown: (e) => {
49+
children.props.onKeyDown?.(e);
50+
51+
if (dEscClosable && e.code === 'Escape') {
52+
dataRef.current.clearTid?.();
53+
onClose?.();
54+
}
55+
},
56+
});
57+
}

‎packages/ui/src/components/_alert-popover/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './AlertPopover';

‎packages/ui/src/components/_alert/Alert.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎packages/ui/src/components/_date-input/DateInput.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
useUpdatePosition,
1616
} from '../../hooks';
1717
import { CloseCircleFilled, SwapRightOutlined } from '../../icons';
18-
import { getClassName, getNoTransformSize, getVerticalSidePosition } from '../../utils';
18+
import { checkNodeExist, getClassName, getNoTransformSize, getVerticalSidePosition } from '../../utils';
1919
import { TTANSITION_DURING_POPUP } from '../../utils/global';
2020
import { DBaseDesign } from '../_base-design';
2121
import { DBaseInput } from '../_base-input';
@@ -302,7 +302,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
302302
<CloseCircleFilled />
303303
</button>
304304
)}
305-
{dSuffix && (
305+
{checkNodeExist(dSuffix) && (
306306
<div className={`${prefix}__icon`} style={{ opacity: clearable ? 0 : 1 }}>
307307
{dSuffix}
308308
</div>
@@ -331,7 +331,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
331331

332332
case 'entering':
333333
transitionStyle = {
334-
transition: `transform ${TTANSITION_DURING_POPUP}ms ease-out, opacity ${TTANSITION_DURING_POPUP}ms ease-out`,
334+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
335335
transformOrigin,
336336
};
337337
break;
@@ -340,7 +340,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
340340
transitionStyle = {
341341
transform: 'scaleY(0.7)',
342342
opacity: 0,
343-
transition: `transform ${TTANSITION_DURING_POPUP}ms ease-in, opacity ${TTANSITION_DURING_POPUP}ms ease-in`,
343+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
344344
transformOrigin,
345345
};
346346
break;

‎packages/ui/src/components/_header/Header.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DButton } from '../button';
99

1010
export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
1111
dClassNamePrefix: string;
12+
dTitleId?: string;
1213
dActions?: React.ReactNode[];
1314
dCloseProps?: DButtonProps;
1415
onCloseClick?: () => void | boolean | Promise<void | boolean>;
@@ -19,6 +20,7 @@ export function DHeader(props: DHeaderProps): JSX.Element | null {
1920
const {
2021
children,
2122
dClassNamePrefix,
23+
dTitleId,
2224
dActions = ['close'],
2325
dCloseProps,
2426
onCloseClick,
@@ -58,7 +60,9 @@ export function DHeader(props: DHeaderProps): JSX.Element | null {
5860

5961
return (
6062
<div {...restProps} className={getClassName(restProps.className, `${prefix}__header`)}>
61-
<div className={`${prefix}__header-title`}>{children}</div>
63+
<div id={dTitleId} className={`${prefix}__header-title`}>
64+
{children}
65+
</div>
6266
<div className={`${prefix}__header-actions`}>
6367
{React.Children.map(dActions, (action) =>
6468
action === 'close' ? (

‎packages/ui/src/components/_mask/Mask.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,13 @@ export function DMask(props: DMaskProps): JSX.Element | null {
2626

2727
const transitionStyles: Partial<Record<DTransitionState, React.CSSProperties>> = {
2828
enter: { opacity: 0 },
29-
entering: { transition: `opacity ${TTANSITION_DURING_FAST}ms linear` },
30-
leaving: { opacity: 0, transition: `opacity ${TTANSITION_DURING_FAST}ms linear` },
29+
entering: {
30+
transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
31+
},
32+
leaving: {
33+
opacity: 0,
34+
transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
35+
},
3136
leaved: { display: 'none' },
3237
};
3338

‎packages/ui/src/components/_selectbox/Selectbox.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
useForkRef,
1717
} from '../../hooks';
1818
import { CloseCircleFilled, DownOutlined, LoadingOutlined, SearchOutlined } from '../../icons';
19-
import { getClassName } from '../../utils';
19+
import { checkNodeExist, getClassName } from '../../utils';
2020
import { TTANSITION_DURING_POPUP } from '../../utils/global';
2121
import { DBaseDesign } from '../_base-design';
2222
import { DBaseInput } from '../_base-input';
@@ -270,7 +270,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
270270
</div>
271271
) : null)}
272272
</div>
273-
{dSuffix && (
273+
{checkNodeExist(dSuffix) && (
274274
<div
275275
className={`${prefix}__suffix`}
276276
onClick={(e) => {
@@ -327,7 +327,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
327327

328328
case 'entering':
329329
transitionStyle = {
330-
transition: `transform ${TTANSITION_DURING_POPUP}ms ease-out, opacity ${TTANSITION_DURING_POPUP}ms ease-out`,
330+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
331331
transformOrigin,
332332
};
333333
break;
@@ -336,7 +336,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
336336
transitionStyle = {
337337
transform: 'scaleY(0.7)',
338338
opacity: 0,
339-
transition: `transform ${TTANSITION_DURING_POPUP}ms ease-in, opacity ${TTANSITION_DURING_POPUP}ms ease-in`,
339+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
340340
transformOrigin,
341341
};
342342
break;

0 commit comments

Comments
 (0)