@itcase/ui 1.8.165 → 1.8.167
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.
|
@@ -97,6 +97,8 @@ const drawerConfig = {
|
|
|
97
97
|
};
|
|
98
98
|
function Drawer(props) {
|
|
99
99
|
const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
|
|
100
|
+
// compatibility with old 'closeModal' prop
|
|
101
|
+
const _onClickClose = onClickClose ?? props.closeModal;
|
|
100
102
|
const _isOpen = isOpen ?? isOpenModal;
|
|
101
103
|
const isOpenPrevRef = React.useRef(Boolean(_isOpen));
|
|
102
104
|
const isFirstRenderRef = React.useRef(true);
|
|
@@ -143,7 +145,7 @@ function Drawer(props) {
|
|
|
143
145
|
}
|
|
144
146
|
return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600,
|
|
145
147
|
// Drawer set prefix "EZDrawer" for any id
|
|
146
|
-
customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose:
|
|
148
|
+
customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.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, textWeight: titleTextWeight, 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 })] }));
|
|
147
149
|
}
|
|
148
150
|
|
|
149
151
|
exports.Drawer = Drawer;
|
|
@@ -25,7 +25,7 @@ function Grid(props) {
|
|
|
25
25
|
const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
|
|
26
26
|
// @ts-expect-error
|
|
27
27
|
const { styles: gridStyles } = useStyles.useStyles(props);
|
|
28
|
-
return (jsxRuntime.jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'),
|
|
28
|
+
return (jsxRuntime.jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'), "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
function GridItem(props) {
|
|
@@ -95,6 +95,8 @@ const drawerConfig = {
|
|
|
95
95
|
};
|
|
96
96
|
function Drawer(props) {
|
|
97
97
|
const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
|
|
98
|
+
// compatibility with old 'closeModal' prop
|
|
99
|
+
const _onClickClose = onClickClose ?? props.closeModal;
|
|
98
100
|
const _isOpen = isOpen ?? isOpenModal;
|
|
99
101
|
const isOpenPrevRef = useRef(Boolean(_isOpen));
|
|
100
102
|
const isFirstRenderRef = useRef(true);
|
|
@@ -141,7 +143,7 @@ function Drawer(props) {
|
|
|
141
143
|
}
|
|
142
144
|
return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600,
|
|
143
145
|
// Drawer set prefix "EZDrawer" for any id
|
|
144
|
-
customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose:
|
|
146
|
+
customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.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, textWeight: titleTextWeight, 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 })] }));
|
|
145
147
|
}
|
|
146
148
|
|
|
147
149
|
export { Drawer, drawerAppearance, drawerConfig };
|
package/dist/components/Grid.js
CHANGED
|
@@ -23,7 +23,7 @@ function Grid(props) {
|
|
|
23
23
|
const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
|
|
24
24
|
// @ts-expect-error
|
|
25
25
|
const { styles: gridStyles } = useStyles(props);
|
|
26
|
-
return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'),
|
|
26
|
+
return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'), "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
function GridItem(props) {
|
|
@@ -19,7 +19,6 @@ interface DrawerProps extends DrawerThemeColor, StyleAttributes {
|
|
|
19
19
|
before?: ReactNode;
|
|
20
20
|
children?: ReactNode;
|
|
21
21
|
className?: string;
|
|
22
|
-
closeModal?: () => void;
|
|
23
22
|
dataTour?: string;
|
|
24
23
|
direction?: 'bottom' | 'left' | 'right' | 'top';
|
|
25
24
|
enableOverlay?: boolean;
|
|
@@ -27,5 +26,6 @@ interface DrawerProps extends DrawerThemeColor, StyleAttributes {
|
|
|
27
26
|
size?: number | string;
|
|
28
27
|
type?: string;
|
|
29
28
|
isOpen?: boolean;
|
|
29
|
+
onClickClose: VoidFunction;
|
|
30
30
|
}
|
|
31
31
|
export type { DrawerProps };
|