@antscorp/antsomi-ui 1.3.5-beta.791 → 1.3.5-beta.793

package/es/components/atoms/NotificationStatus/NotificationStatus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type TNotification = {
+    title: string;
+    message?: string;
+    type: 'success' | 'error';
+    timeout?: number;
+};
+declare const useNotificationStatus: () => {
+    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    showNotification: ({ title, message, type, timeout, }: TNotification) => void;
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/NotificationStatus.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notification } from 'antd';
+import { MAP_BY_TYPE, STYLE_NOTIFICATION } from './constants';
+import { Content, Title } from './styled';
+import { Icon } from '../Icon';
+const useNotificationStatus = () => {
+    const [api, contextHolder] = notification.useNotification();
+    const showNotification = ({ title = '', message = '', type = 'success', timeout = 4, }) => {
+        const info = MAP_BY_TYPE[type];
+        return api[type]({
+            message: _jsx(Title, { color: info.color, children: title }),
+            description: _jsx(Content, { children: message }),
+            duration: timeout,
+            style: {
+                ...STYLE_NOTIFICATION,
+                borderLeft: `4px solid ${info.color}`,
+            },
+            placement: 'bottomLeft',
+            closeIcon: _jsx(Icon, { size: 14, color: "#595959", type: "icon-ants-remove-slim" }),
+        });
+    };
+    return {
+        contextHolder,
+        showNotification,
+    };
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const MAP_BY_TYPE: {
+    readonly success: {
+        readonly color: "#12B800";
+    };
+    readonly error: {
+        readonly color: "#ef3340";
+    };
+};
+export declare const STYLE_NOTIFICATION: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

package/es/components/atoms/NotificationStatus/constants/index.js

@@ -0,0 +1,15 @@
+export const MAP_BY_TYPE = {
+    success: {
+        color: '#12B800',
+    },
+    error: {
+        color: '#ef3340',
+    },
+};
+export const STYLE_NOTIFICATION = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    padding: '15px',
+    borderRadius: '10px',
+};

package/es/components/atoms/NotificationStatus/index.d.ts

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/index.js

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/NotificationStatus/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Title = styled.div `
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${props => props.color || '#000'};
+`;
+export const WrapperIcon = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Content = styled.div `
+  color: #7f7f7f;
+`;

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

@@ -44,6 +44,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './NotificationStatus';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -44,3 +44,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './NotificationStatus';

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

@@ -16,7 +16,7 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -115,7 +115,7 @@ export const DrawerDetail = props => {
             motionAppear: false,
             motionEnter: false,
             motionLeave: false,
-        }, mask: false, classNames: {
+        }, mask: mask, classNames: {
             body: 'drawer-detail-body',
         }, contentWrapperStyle: {
             transition: 'none',

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -1125,4 +1125,27 @@ export const GlobalStyle = () => (_jsx(Global, { styles: css `
           }
         }
       }
+
+      /* Notification */
+      .antsomi-notification-notice {
+        display: flex;
+        max-width: 340px !important;
+
+        .antsomi-notification-notice-content {
+          display: flex;
+          flex: 1;
+        }
+
+        .antsomi-notification-notice-with-icon {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .antsomi-notification-notice-close {
+          position: relative !important;
+          top: 0 !important;
+          inset-inline-end: 0 !important;
+        }
+      }
     ` }));

package/package.json

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