@itcase/ui-web 1.9.89 → 1.9.90
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),a=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_ATnAJofs.js"),t=require("../../default_cjs_lUT82fjL.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const o={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:t.icons24.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},l={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},n={appearance:o,setAppearance:e=>{n.appearance=e}};exports.Drawer=function(t){const{appearance:o,className:d,dataTestId:u,dataTour:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),a=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_ATnAJofs.js"),t=require("../../default_cjs_lUT82fjL.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const o={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:t.icons24.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},l={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},n={appearance:o,setAppearance:e=>{n.appearance=e}};exports.Drawer=function(t){const{appearance:o,className:d,dataTestId:u,dataTour:I,type:p,title:_,desc:x,enableOverlay:T,lockBackgroundScroll:m=!0,stickyButton:f,before:S,after:h,close:v,isOpen:N=!1,onClickClose:w,onClose:z,children:j}=t,C=r.useRef(N),y=r.useRef(!0),g=a.useAppearanceConfig(o,n),F=a.useDevicePropsGenerator(t,g),{direction:E,size:q,titleTextColor:O,titleTextSize:k,titleTextWeight:D,descTextColor:H,descTextSize:A,divider:P,dividerSize:b,zeroPadding:B,closeIcon:R,closeIconFill:M,closeIconFillIcon:X,closeIconFillSize:$,closeIconShape:L,closeIconSize:U,closeIconSrc:W}=F,[G,J]=r.useState(N?l.ENTER_FINISH:l.EXIT_FINISH);return r.useEffect(()=>{if(y.current)return void(y.current=!1);const e=!0===Boolean(C.current),r=!1===Boolean(N);C.current=N,J(l.DEFAULT);const i=setTimeout(()=>{J(N?l.ENTER_FINISH:l.EXIT_FINISH),e&&r&&z&&z()},N?16:300);return()=>{clearTimeout(i)}},[N]),G.isInDOM?e.jsxs(s,{className:i("drawer",p&&`drawer_type_${p}`,d,I&&`dataTour-${I}`,f&&"drawer_sticky-button",B&&"drawer_reset-padding"),direction:E||"right",size:q||600,customIdSuffix:u?`_${u}`:void 0,"data-testid":u,"data-tour":I,duration:300,enableOverlay:T,lockBackgroundScroll:m,overlayClassName:"drawer__overlay",open:G.isOpen,onClose:w,children:[S&&e.jsx("div",{className:"drawer__before",children:S}),!v&&(R||W)&&e.jsx("div",{className:"drawer__close",children:e.jsx(c.Icon,{className:"cursor_type_pointer",fill:M,fillSize:$,iconFill:X,iconSize:U,imageSrc:W,shape:L,SvgImage:R,onClick:w})}),(_||x)&&e.jsxs("div",{className:"drawer__header",children:[e.jsx(c.Title,{className:"drawer__header-title",size:k,textColor:O,textWeight:D,children:_}),e.jsx(c.Text,{className:"drawer__header-desc",size:A,textColor:H,children:x})]}),P&&e.jsx(c.Divider,{width:"fill",size:b,fill:"surfaceTertiary"}),j&&e.jsx("div",{className:"drawer__wrapper",children:j}),h&&e.jsx("div",{className:"drawer__after",children:h})]}):null},exports.drawerAppearance=o,exports.drawerConfig=n;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import a from"clsx";import c from"react-modern-drawer";import{useAppearanceConfig as s,useDevicePropsGenerator as l}from"@itcase/ui-core/hooks";import{I as n,T as d,a as m,D as p}from"../primitives_es_BRduTiVl.js";import{i as I}from"../default_es_l85QutMi.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const u={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:I.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},_={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},T={appearance:u,setAppearance:e=>{T.appearance=e}};function f(I){const{appearance:u,className:f,dataTestId:S,dataTour:h,type:N,title:x,desc:v,enableOverlay:z,lockBackgroundScroll:w=!0,stickyButton:y,before:C,after:F,close:g,isOpen:E=!1,onClickClose:O,onClose:k,children:D}=I,H=i(E),b=i(!0),B=s(u,T),P=l(I,B),{direction:A,size:M,titleTextColor:j,titleTextSize:R,titleTextWeight:X,descTextColor:$,descTextSize:L,divider:U,dividerSize:W,zeroPadding:q,closeIcon:G,closeIconFill:J,closeIconFillIcon:K,closeIconFillSize:Q,closeIconShape:V,closeIconSize:Y,closeIconSrc:Z}=P,[ee,re]=o(E?_.ENTER_FINISH:_.EXIT_FINISH);return t(()=>{if(b.current)return void(b.current=!1);const e=!0===Boolean(H.current),r=!1===Boolean(E);H.current=E,re(_.DEFAULT);const i=setTimeout(()=>{re(E?_.ENTER_FINISH:_.EXIT_FINISH),e&&r&&k&&k()},E?16:300);return()=>{clearTimeout(i)}},[E]),ee.isInDOM?e(c,{className:a("drawer",N&&`drawer_type_${N}`,f,h&&`dataTour-${h}`,y&&"drawer_sticky-button",q&&"drawer_reset-padding"),direction:A||"right",size:M||600,customIdSuffix:S?`_${S}`:void 0,"data-testid":S,"data-tour":h,duration:300,enableOverlay:z,lockBackgroundScroll:w,overlayClassName:"drawer__overlay",open:ee.isOpen,onClose:O,children:[C&&r("div",{className:"drawer__before",children:C}),!g&&(G||Z)&&r("div",{className:"drawer__close",children:r(n,{className:"cursor_type_pointer",fill:J,fillSize:Q,iconFill:K,iconSize:Y,imageSrc:Z,shape:V,SvgImage:G,onClick:O})}),(x||v)&&e("div",{className:"drawer__header",children:[r(d,{className:"drawer__header-title",size:R,textColor:j,textWeight:X,children:x}),r(m,{className:"drawer__header-desc",size:L,textColor:$,children:v})]}),U&&r(p,{width:"fill",size:W,fill:"surfaceTertiary"}),D&&r("div",{className:"drawer__wrapper",children:D}),F&&r("div",{className:"drawer__after",children:F})]}):null}export{f as Drawer,u as drawerAppearance,T as drawerConfig};
|
|
@@ -16,7 +16,7 @@ const drawerConfig = {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
function Drawer(props) {
|
|
19
|
-
const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false,
|
|
19
|
+
const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, onClickClose, onClose, children, } = props;
|
|
20
20
|
const isOpenPrevRef = useRef(isOpen);
|
|
21
21
|
const isFirstRenderRef = useRef(true);
|
|
22
22
|
const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
|
|
@@ -26,21 +26,12 @@ function Drawer(props) {
|
|
|
26
26
|
? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
|
|
27
27
|
: ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
|
|
28
28
|
useEffect(() => {
|
|
29
|
-
/* TODO: Remove error after some time */
|
|
30
|
-
const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
|
|
31
|
-
typeof isOpenModal !== 'undefined';
|
|
32
|
-
if (isNeedShowWarning) {
|
|
33
|
-
throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
|
|
34
|
-
}
|
|
35
29
|
if (isFirstRenderRef.current) {
|
|
36
30
|
isFirstRenderRef.current = false;
|
|
37
31
|
return;
|
|
38
32
|
}
|
|
39
33
|
const isPrevStateOpen = Boolean(isOpenPrevRef.current) === true;
|
|
40
34
|
const isNewStateClose = Boolean(isOpen) === false;
|
|
41
|
-
if (isPrevStateOpen && isNewStateClose && onClose) {
|
|
42
|
-
onClose();
|
|
43
|
-
}
|
|
44
35
|
isOpenPrevRef.current = isOpen;
|
|
45
36
|
setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
|
|
46
37
|
const startTransitionDelay = 16;
|
|
@@ -50,6 +41,9 @@ function Drawer(props) {
|
|
|
50
41
|
? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
|
|
51
42
|
: ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH;
|
|
52
43
|
setAnimationState(newAnimationState);
|
|
44
|
+
if (isPrevStateOpen && isNewStateClose && onClose) {
|
|
45
|
+
onClose();
|
|
46
|
+
}
|
|
53
47
|
}, timeoutDelay);
|
|
54
48
|
return () => {
|
|
55
49
|
clearTimeout(timeout);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.90",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@itcase/tokens-am": "^1.1.51",
|
|
51
51
|
"@itcase/tokens-baikal": "^1.1.41",
|
|
52
52
|
"@itcase/tokens-palette": "^1.1.41",
|
|
53
|
-
"@itcase/ui-core": "^1.9.
|
|
53
|
+
"@itcase/ui-core": "^1.9.90",
|
|
54
54
|
"@rc-component/tooltip": "^1.4.0",
|
|
55
55
|
"clsx": "^2.1.1",
|
|
56
56
|
"date-fns": "^4.1.0",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"storybook": "^10.3.0",
|
|
112
112
|
"typescript": "^5.9.3"
|
|
113
113
|
},
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "3313dd4c587e0281db38981055b988a54559b2d6"
|
|
115
115
|
}
|