@antscorp/antsomi-ui 1.3.5-beta.284 → 1.3.5-beta.285

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

@@ -10,23 +10,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
+import { ConfigProvider } from 'antd';
+import { isNil } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
-import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
+import { CloseBtn, Content, DrawerHeader, LeftMenu, MenuFooter, MenuItem, StyledDrawer, } from './styled';
 // Constants
-import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { BREAK_POINT, DRAWER_DETAIL_LOCAL_STORAGE_KEY, 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';
-import { ConfigProvider } from 'antd';
+// Utils
+import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max' } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize"]);
+    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
     const { onClose = () => { } } = props;
-    const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
+    const _b = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _b, restOfCloseIcon = __rest(_b, ["show", "onClick"]);
     // Hooks
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
@@ -46,6 +50,14 @@ export const DrawerDetail = props => {
                 break;
         }
     }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    // Get cache collapse from local storage
+    useEffect(() => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        const cachedCollapse = localStorageValues[name || ''];
+        if (!isNil(cachedCollapse)) {
+            toggleCollapseDrawer(cachedCollapse);
+        }
+    }, [name, toggleCollapseDrawer]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -75,6 +87,17 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
+    // Handlers
+    const handleToggleDrawerSize = () => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        toggleCollapseDrawer(!collapseDrawer);
+        /**
+         * Set local storage last collapsed
+         */
+        if (name) {
+            localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
+        }
+    };
     return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
         React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
                 body: 'drawer-detail-body',
@@ -84,7 +107,7 @@ 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 })),
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
             showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
                 React.createElement("div", null,
                     showClose && (React.createElement(CloseBtn, { onClick: onClose },
@@ -92,6 +115,8 @@ export const DrawerDetail = props => {
                     React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
                         React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
                 React.createElement(MenuFooter, null, footer))),
-            React.createElement(Content, null, children))));
+            React.createElement(Content, null,
+                (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
+                children))));
 };
 DrawerDetail.defaultProps = {};

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

@@ -4,10 +4,11 @@ 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";
+declare const DRAWER_DETAIL_LOCAL_STORAGE_KEY = "drawer-detail-collapses";
 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, };
+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, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

@@ -4,6 +4,7 @@ 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';
+const DRAWER_DETAIL_LOCAL_STORAGE_KEY = 'drawer-detail-collapses';
 const LAYER_2_MIN_WIDTH = '740px';
 const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
 const DRAWER_DETAIL_DIMENSION = {
@@ -12,4 +13,4 @@ const DRAWER_DETAIL_DIMENSION = {
         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, };
+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, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { DrawerHeaderProps } from './types';
 export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
 export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,7 @@
 // Libraries
 import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Drawer
 import { Drawer } from '../Drawer';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -16,8 +18,8 @@ export const StyledDrawer = styled(Drawer) `
 
     .close-btn {
       position: absolute;
-      top: 24.5px;
-      right: 25px;
+      top: 20px;
+      right: 20px;
       width: 24px;
       height: 24px;
       display: flex;
@@ -103,4 +105,17 @@ export const MenuItem = styled.div `
     }
   }
 `;
+export const DrawerHeader = styled(Flex) `
+  position: sticky;
+  top: 0px;
+  height: 64px;
+  padding: 0px 20px;
+  box-sizing: border-box;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  z-index: 20;
+
+  ${props => props.height &&
+    `height: ${typeof props.height === 'string' ? props.height : `${props.height}px`};`}
+  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};`}
+`;
 export const MenuFooter = styled.div ``;

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

@@ -1,18 +1,24 @@
 import React, { ReactNode } from 'react';
-import type { DrawerProps, MenuProps as AntdProps } from 'antd';
+import type { DrawerProps, MenuProps as AntdProps, FlexProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export type TDefaultSize = 'max' | 'min';
-export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
+export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'title'> {
+    name?: string;
     fullScreen?: boolean;
     maxWidth?: string | number;
     minWidth?: string | number;
     defaultSize?: TDefaultSize;
+    headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;
 }
+export interface DrawerHeaderProps extends FlexProps {
+    height?: React.CSSProperties['height'];
+    showBorderBottom?: boolean;
+}
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;
     showExpandButton?: boolean;

package/es/constants/theme.js

@@ -210,6 +210,7 @@ THEME.components = {
         itemMarginInline: 0,
         itemMarginBlock: 0,
         itemBorderRadius: 5,
+        itemHeight: 30,
     },
     Form: {},
 };

package/es/utils/common.d.ts

@@ -85,3 +85,4 @@ export declare const simplifyString: (str: string) => string;
 export declare const searchStringQuery: (str: string, queryStr: string) => boolean;
 export declare const isExistedImage: (imageUrl: string) => boolean;
 export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;
+export declare const safeParseJson: (json?: string | null, defaultValue?: any) => any;

package/es/utils/common.js

@@ -492,3 +492,13 @@ export const getUrlNoCache = (url = '', cacheValue = 0) => {
     }
     return urlNoCache;
 };
+export const safeParseJson = (json, defaultValue) => {
+    if (!json)
+        return defaultValue;
+    try {
+        return JSON.parse(json);
+    }
+    catch (error) {
+        return defaultValue;
+    }
+};

package/package.json

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