@itcase/ui 1.8.99 → 1.8.100
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.
|
@@ -75,20 +75,27 @@ var drawerConfig = {
|
|
|
75
75
|
},
|
|
76
76
|
};
|
|
77
77
|
function Drawer(props) {
|
|
78
|
-
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
79
|
-
var
|
|
78
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpen = props.isOpen, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
79
|
+
var _isOpen = isOpen !== null && isOpen !== void 0 ? isOpen : isOpenModal;
|
|
80
|
+
var isOpenPrevRef = React.useRef(Boolean(_isOpen));
|
|
80
81
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
|
|
81
82
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
82
83
|
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, dividerSize = propsGenerator.dividerSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
83
84
|
React.useEffect(function () {
|
|
84
|
-
|
|
85
|
+
var isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
|
|
86
|
+
if (isFromOpenToClose && onClose) {
|
|
85
87
|
onClose();
|
|
86
88
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
isOpenPrevRef.current = Boolean(_isOpen);
|
|
90
|
+
var isNeedShowWarning = process.env.NODE_ENV === 'development' &&
|
|
91
|
+
typeof isOpenModal !== 'undefined';
|
|
92
|
+
if (isNeedShowWarning) {
|
|
93
|
+
console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
|
|
94
|
+
}
|
|
95
|
+
}, [_isOpen, onClose]);
|
|
89
96
|
return (jsxRuntime.jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
90
97
|
// Drawer set prefix "EZDrawer" for any id
|
|
91
|
-
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open:
|
|
98
|
+
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
92
99
|
}
|
|
93
100
|
|
|
94
101
|
exports.Drawer = Drawer;
|
|
@@ -73,20 +73,27 @@ var drawerConfig = {
|
|
|
73
73
|
},
|
|
74
74
|
};
|
|
75
75
|
function Drawer(props) {
|
|
76
|
-
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
77
|
-
var
|
|
76
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpen = props.isOpen, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
77
|
+
var _isOpen = isOpen !== null && isOpen !== void 0 ? isOpen : isOpenModal;
|
|
78
|
+
var isOpenPrevRef = useRef(Boolean(_isOpen));
|
|
78
79
|
var appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
|
|
79
80
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
80
81
|
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, dividerSize = propsGenerator.dividerSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
81
82
|
useEffect(function () {
|
|
82
|
-
|
|
83
|
+
var isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
|
|
84
|
+
if (isFromOpenToClose && onClose) {
|
|
83
85
|
onClose();
|
|
84
86
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
+
isOpenPrevRef.current = Boolean(_isOpen);
|
|
88
|
+
var isNeedShowWarning = process.env.NODE_ENV === 'development' &&
|
|
89
|
+
typeof isOpenModal !== 'undefined';
|
|
90
|
+
if (isNeedShowWarning) {
|
|
91
|
+
console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
|
|
92
|
+
}
|
|
93
|
+
}, [_isOpen, onClose]);
|
|
87
94
|
return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
88
95
|
// Drawer set prefix "EZDrawer" for any id
|
|
89
|
-
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open:
|
|
96
|
+
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
|
|
90
97
|
}
|
|
91
98
|
|
|
92
99
|
export { Drawer, drawerAppearance, drawerConfig };
|