@rango-dev/ui 0.36.1-next.7 → 0.36.1-next.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/ui.build.json +1 -1
- package/dist/widget/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/widget/ui/src/components/Modal/Modal.types.d.ts +0 -4
- package/dist/widget/ui/src/components/Modal/Modal.types.d.ts.map +1 -1
- package/dist/widget/ui/src/icons/Bullhorn.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Modal/Modal.styles.ts +2 -2
- package/src/components/Modal/Modal.tsx +19 -31
- package/src/components/Modal/Modal.types.ts +0 -4
- package/src/icons/Bullhorn.tsx +11 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,qBA4G7D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;KACtC,CAAC;IACF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;KACtC,CAAC;IACF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bullhorn.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Bullhorn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,
|
|
1
|
+
{"version":3,"file":"Bullhorn.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Bullhorn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,4DAiBnD;AACD,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -48,7 +48,7 @@ export const ModalContainer = styled('div', {
|
|
|
48
48
|
display: 'flex',
|
|
49
49
|
flexDirection: 'column',
|
|
50
50
|
zIndex: 9999999,
|
|
51
|
-
transform: 'translateY(
|
|
51
|
+
transform: 'translateY(100vh)',
|
|
52
52
|
transition: 'transform .45s ease-in-out',
|
|
53
53
|
|
|
54
54
|
variants: {
|
|
@@ -61,7 +61,7 @@ export const ModalContainer = styled('div', {
|
|
|
61
61
|
right: {
|
|
62
62
|
borderTopRightRadius: '0',
|
|
63
63
|
borderBottomRightRadius: '0',
|
|
64
|
-
transform: 'translateX(
|
|
64
|
+
transform: 'translateX(100vw)',
|
|
65
65
|
},
|
|
66
66
|
},
|
|
67
67
|
active: {
|
|
@@ -19,9 +19,6 @@ import {
|
|
|
19
19
|
ModalHeader,
|
|
20
20
|
} from './Modal.styles';
|
|
21
21
|
|
|
22
|
-
const CLOSED_DELAY = 600;
|
|
23
|
-
const OPEN_DELAY = 100;
|
|
24
|
-
|
|
25
22
|
export function Modal(props: PropsWithChildren<ModalPropTypes>) {
|
|
26
23
|
const {
|
|
27
24
|
title,
|
|
@@ -38,12 +35,12 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
|
|
|
38
35
|
footer,
|
|
39
36
|
hasWatermark = true,
|
|
40
37
|
hasCloseIcon = true,
|
|
41
|
-
transitionDuration,
|
|
42
38
|
} = props;
|
|
43
39
|
|
|
44
40
|
const [active, setActive] = useState(false);
|
|
45
41
|
const [isMount, setIsMount] = useState(false);
|
|
46
|
-
|
|
42
|
+
|
|
43
|
+
const ref = useRef<HTMLDivElement | null>(null);
|
|
47
44
|
|
|
48
45
|
const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
49
46
|
event.stopPropagation();
|
|
@@ -52,40 +49,29 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
|
|
|
52
49
|
onClose();
|
|
53
50
|
}
|
|
54
51
|
};
|
|
52
|
+
|
|
53
|
+
const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
|
|
54
|
+
if (!open && ref.current === e.target) {
|
|
55
|
+
setIsMount(false);
|
|
56
|
+
container.style.removeProperty('overflow');
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (isMount) {
|
|
62
|
+
setActive(true);
|
|
63
|
+
}
|
|
64
|
+
}, [isMount]);
|
|
65
|
+
|
|
55
66
|
useEffect(() => {
|
|
56
67
|
if (container) {
|
|
57
|
-
if (timeoutRef.current) {
|
|
58
|
-
clearTimeout(timeoutRef.current);
|
|
59
|
-
}
|
|
60
68
|
if (open) {
|
|
61
69
|
setIsMount(true);
|
|
62
70
|
container.style.overflow = 'hidden';
|
|
63
|
-
timeoutRef.current = setTimeout(
|
|
64
|
-
() => {
|
|
65
|
-
setActive(true);
|
|
66
|
-
},
|
|
67
|
-
typeof transitionDuration?.enter !== 'undefined'
|
|
68
|
-
? transitionDuration?.enter
|
|
69
|
-
: OPEN_DELAY
|
|
70
|
-
);
|
|
71
71
|
} else {
|
|
72
72
|
setActive(false);
|
|
73
|
-
timeoutRef.current = setTimeout(
|
|
74
|
-
() => {
|
|
75
|
-
setIsMount(false);
|
|
76
|
-
container.style.removeProperty('overflow');
|
|
77
|
-
},
|
|
78
|
-
typeof transitionDuration?.exit !== 'undefined'
|
|
79
|
-
? transitionDuration?.exit
|
|
80
|
-
: CLOSED_DELAY
|
|
81
|
-
);
|
|
82
73
|
}
|
|
83
74
|
}
|
|
84
|
-
return () => {
|
|
85
|
-
if (timeoutRef.current) {
|
|
86
|
-
clearTimeout(timeoutRef.current);
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
75
|
}, [open, container]);
|
|
90
76
|
|
|
91
77
|
return (
|
|
@@ -101,7 +87,9 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
|
|
|
101
87
|
<ModalContainer
|
|
102
88
|
active={active}
|
|
103
89
|
css={styles?.container}
|
|
104
|
-
anchor={anchor}
|
|
90
|
+
anchor={anchor}
|
|
91
|
+
onTransitionEnd={handleTransitionEnd}
|
|
92
|
+
ref={ref}>
|
|
105
93
|
{header ?? (
|
|
106
94
|
<ModalHeader noTitle={!title && dismissible && !prefix}>
|
|
107
95
|
{prefix}
|
package/src/icons/Bullhorn.tsx
CHANGED
|
@@ -8,11 +8,17 @@ function SvgBullhorn(props: SvgIconPropsWithChildren) {
|
|
|
8
8
|
return createElement(
|
|
9
9
|
SvgIcon,
|
|
10
10
|
props,
|
|
11
|
-
<svg viewBox="0 0
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
12
|
+
<g id="Frame 1000009392">
|
|
13
|
+
<path
|
|
14
|
+
id="Vector"
|
|
15
|
+
d="M11.2837 4.18222L12.8874 12.333M6.09508 13.6694L12.8219 12.3459C13.0879 12.2935 13.3626 12.3075 13.6219 12.3865L17.3842 13.5325C18.0508 13.7356 18.6933 13.1551 18.5588 12.4714L16.48 1.90558C16.3454 1.22189 15.5309 0.928099 14.9909 1.36852L11.9432 3.85445C11.7332 4.02578 11.4842 4.14277 11.2182 4.1951L4.4914 5.51863C2.24063 5.96147 0.775013 8.14508 1.21786 10.3958C1.6607 12.6466 3.84431 14.1122 6.09508 13.6694ZM5.64226 13.7585L8.02441 17.9576C8.32196 18.4822 8.92177 18.7574 9.51347 18.641C10.4518 18.4564 10.9334 17.4068 10.4616 16.575L8.54031 13.1883L5.64226 13.7585Z"
|
|
16
|
+
stroke="currentColor"
|
|
17
|
+
fill="#00000000"
|
|
18
|
+
strokeLinecap="round"
|
|
19
|
+
strokeLinejoin="round"
|
|
20
|
+
/>
|
|
21
|
+
</g>
|
|
16
22
|
</svg>
|
|
17
23
|
);
|
|
18
24
|
}
|