@antscorp/antsomi-ui 1.3.5-beta.134 → 1.3.5-beta.136

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DrawerDetailProps } from './types';
+export declare const DrawerDetail: React.FC<DrawerDetailProps>;

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

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+// Components
+import { Flex, Icon, Tooltip } from '../../atoms';
+// Styled
+import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
+// Constants
+const DRAWER_WIDTH_DEFAULT = 'calc(100vw - 70px)';
+export const DrawerDetail = props => {
+    const { width = DRAWER_WIDTH_DEFAULT, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
+    const { show: showMenu = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    const { onClose = () => { } } = props;
+    const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
+    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: fullScreen ? '100vw' : width, classNames: {
+            body: 'drawer-detail-body',
+        } }),
+        showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
+                onCloseIconClick(e);
+                onClose(e);
+            } }),
+            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeInLeft animate__fast" },
+            React.createElement("div", null,
+                showClose && (React.createElement(CloseBtn, { onClick: onClose },
+                    React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+                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)));
+};
+DrawerDetail.defaultProps = {
+    width: DRAWER_WIDTH_DEFAULT,
+};

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

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

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

@@ -0,0 +1 @@
+export { DrawerDetail } from './DrawerDetail';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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 MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,95 @@
+var _a, _b, _c, _d;
+// Libraries
+import styled from 'styled-components';
+// Drawer
+import { Drawer } from '../Drawer';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledDrawer = styled(Drawer) `
+  &.antsomi-drawer-content {
+    .drawer-detail-body {
+      display: flex;
+      width: 100%;
+      padding: 0px;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 24.5px;
+      right: 25px;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+      transition: all 0.3s;
+      cursor: pointer;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const Content = styled.div `
+  flex: 1 1 0%;
+`;
+export const LeftMenu = styled.div `
+  width: 46px;
+  height: 100%;
+  background-color: #eaf1fb;
+  padding: 8px 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 5px;
+`;
+export const CloseBtn = styled.div `
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const MenuItem = styled.div `
+  height: 36px;
+  width: 36px;
+  border-radius: 3px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  * {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+  }
+
+  i {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  &.active,
+  &:hover {
+    background-color: #d3e3fd;
+
+    * {
+      color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+    }
+  }
+`;
+export const MenuFooter = styled.div ``;

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+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;
+    menuProps?: DrawerDetailMenuProps;
+    closeIconProps?: DrawerDetailCloseIconProps;
+}
+export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
+    show?: boolean;
+    showClose?: boolean;
+    footer?: ReactNode;
+    onClick?: (item: ItemType) => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -38,6 +38,7 @@ export { ModalV2 } from './ModalV2';
 export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
+export * from './DrawerDetail';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';

package/es/components/molecules/index.js

@@ -38,5 +38,6 @@ export { ModalV2 } from './ModalV2';
 export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
+export * from './DrawerDetail';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';

package/es/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useToggle';

package/es/hooks/index.js

@@ -24,3 +24,4 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useToggle';

package/es/hooks/useToggle.d.ts

@@ -0,0 +1,2 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare function useToggle(defaultValue?: boolean): [boolean, (value?: boolean) => void, Dispatch<SetStateAction<boolean>>];

package/es/hooks/useToggle.js

@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react';
+export function useToggle(defaultValue) {
+    const [value, setValue] = useState(!!defaultValue);
+    const toggle = useCallback((value) => {
+        setValue(x => (typeof value === 'boolean' ? value : !x));
+    }, []);
+    return [value, toggle, setValue];
+}

package/package.json

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