@antscorp/antsomi-ui 1.3.5-beta.221 → 1.3.5-beta.223

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -18,10 +18,11 @@ import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from
 // Constants
 import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
 import { ToggleDrawerSizeButton } from './components';
+// Hooks
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
+    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { onClose = () => { } } = props;
     const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
@@ -46,18 +47,22 @@ export const DrawerDetail = props => {
          */
         switch (collapseDrawer) {
             case false: {
+                if (maxWidth)
+                    return maxWidth;
                 if (matchesSmallScreen)
                     return DRAWER_SMALL_MAX_WIDTH;
                 return DRAWER_LARGE_MAX_WIDTH;
             }
             case true:
             default: {
+                if (minWidth)
+                    return minWidth;
                 if (matchesSmallScreen)
                     return DRAWER_SMALL_MIN_WIDTH;
                 return DRAWER_LARGE_MIN_WIDTH;
             }
         }
-    }, [collapseDrawer, fullScreen, matchesSmallScreen, width]);
+    }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
     return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: drawerWidth, classNames: {
             body: 'drawer-detail-body',
         } }),
@@ -66,8 +71,8 @@ export const DrawerDetail = props => {
                 onClose(e);
             } }),
             React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+        showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
         showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
-            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
             React.createElement("div", null,
                 showClose && (React.createElement(CloseBtn, { onClick: onClose },
                     React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),

package/es/components/molecules/DrawerDetail/components/ToggleDrawerSizeButton.js

@@ -30,6 +30,7 @@ const StyledToggleButton = styled.div `
   top: 50%;
   transform: translateY(-50%);
   left: -5px;
+  z-index: 10;
   cursor: pointer;
 
   svg {

package/es/components/molecules/DrawerDetail/constants.d.ts

@@ -4,4 +4,10 @@ declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
 declare const BREAK_POINT = "1440px";
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };
+declare const DRAWER_DETAIL_DIMENSION: {
+    LAYER_2: {
+        minWidth: string;
+        maxWidth: string;
+    };
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };

package/es/components/molecules/DrawerDetail/constants.js

@@ -4,4 +4,12 @@ const DRAWER_LARGE_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
 const BREAK_POINT = '1440px';
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };
+const LAYER_2_MIN_WIDTH = '740px';
+const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
+const DRAWER_DETAIL_DIMENSION = {
+    LAYER_2: {
+        minWidth: LAYER_2_MIN_WIDTH,
+        maxWidth: LAYER_2_MAX_WIDTH,
+    },
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };

package/es/components/molecules/DrawerDetail/index.d.ts

@@ -1,2 +1,3 @@
 export { DrawerDetail } from './DrawerDetail';
+export { DRAWER_DETAIL_DIMENSION } from './constants';
 export type * from './types';

package/es/components/molecules/DrawerDetail/index.js

@@ -1 +1,3 @@
 export { DrawerDetail } from './DrawerDetail';
+// Constants
+export { DRAWER_DETAIL_DIMENSION } from './constants';

package/es/components/molecules/DrawerDetail/types.d.ts

@@ -3,6 +3,8 @@ import type { DrawerProps, MenuProps as AntdProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
     fullScreen?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.221",
+  "version": "1.3.5-beta.223",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",