@antscorp/antsomi-ui 1.3.5-beta.268 → 1.3.5-beta.269

package/es/components/molecules/{EmptyTemplate/EmptyTemplate.d.ts → EmptyData/EmptyData.d.ts}

@@ -1,7 +1,9 @@
 import React from 'react';
-export interface EmptyTemplateProps {
+export interface EmptyDataProps {
+    size?: TUISize;
     icon?: React.ReactNode;
     title?: React.ReactNode;
+    subTitle?: React.ReactNode;
     description?: React.ReactNode;
     loading?: boolean;
     className?: string;
@@ -9,4 +11,4 @@ export interface EmptyTemplateProps {
     imageClassName?: string;
     imageStyle?: React.CSSProperties;
 }
-export declare const EmptyTemplate: React.FC<React.PropsWithChildren<EmptyTemplateProps>>;
+export declare const EmptyData: React.FC<React.PropsWithChildren<EmptyDataProps>>;

package/es/components/molecules/EmptyData/EmptyData.js

@@ -0,0 +1,24 @@
+// Libraries
+import React from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { isString } from 'lodash';
+// Components
+import { Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
+const { Text } = Typography;
+export const EmptyData = props => {
+    const { size = 'medium', icon = 'icon-ants-media', title, subTitle, description, loading, className, image, imageClassName, imageStyle, children, } = props;
+    return (React.createElement(EmptyWrapper, { className: className },
+        React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
+            !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
+            image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
+                React.createElement("img", { src: image, alt: "" }))),
+            loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
+                title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
+                subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),
+                description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description))))),
+        children));
+};

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

@@ -0,0 +1,6 @@
+export declare const EMPTY_WRAPPER_SIZE: {
+    [x: string]: number;
+};
+export declare const EMPTY_ICON_SIZE: {
+    [x: string]: number;
+};

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

@@ -0,0 +1,12 @@
+import { UI_SIZE } from '@antscorp/antsomi-ui/es/constants';
+const { SMALL, MEDIUM, LARGE } = UI_SIZE;
+export const EMPTY_WRAPPER_SIZE = {
+    [SMALL]: 60,
+    [MEDIUM]: 80,
+    [LARGE]: 100,
+};
+export const EMPTY_ICON_SIZE = {
+    [SMALL]: 27,
+    [MEDIUM]: 48,
+    [LARGE]: 60,
+};

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

@@ -0,0 +1,2 @@
+export { EmptyData } from './EmptyData';
+export type { EmptyDataProps } from './EmptyData';

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

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

package/es/components/molecules/{EmptyTemplate → EmptyData}/styled.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 export declare const EmptyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export declare const EmptyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmptyIcon: import("styled-components").StyledComponent<"div", any, {
+    $size?: TUISize | undefined;
+}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/{EmptyTemplate → EmptyData}/styled.js

@@ -1,10 +1,11 @@
 var _a, _b, _c;
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
 export const EmptyWrapper = styled(Flex) `
   width: 100%;
   height: 100%;
@@ -12,7 +13,14 @@ export const EmptyWrapper = styled(Flex) `
   .title {
     font-size: 14px;
     font-weight: 400;
-    line-height: 16px;
+    line-height: 16.41px;
+    color: black;
+  }
+
+  .subTitle {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 14.06px;
     color: black;
   }
 
@@ -27,19 +35,30 @@ EmptyWrapper.defaultProps = {
     vertical: true,
     align: 'center',
     justify: 'center',
-    gap: 15,
+    gap: 20,
 };
 export const EmptyIcon = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 80px;
-  height: 80px;
   border-radius: 100%;
   background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
 
+  /* Handle Size */
+  ${({ $size }) => {
+    if ($size) {
+        return css `
+        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
+        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
+
+        i {
+          font-size: ${EMPTY_ICON_SIZE[$size]}px;
+        }
+      `;
+    }
+}}
+
   i {
-    font-size: 40px;
     color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
   }
 `;

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

@@ -45,8 +45,8 @@ export { InputNumber as InputNumberWithLabel } from './InputNumber';
 export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
-export { EmptyTemplate, EmptyTemplateProps } from './EmptyTemplate';
 export { ModalSelect } from './ModalSelect';
+export { EmptyData, EmptyDataProps } from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/molecules/index.js

@@ -45,8 +45,8 @@ export { InputNumber as InputNumberWithLabel } from './InputNumber';
 export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
-export { EmptyTemplate } from './EmptyTemplate';
 export { ModalSelect } from './ModalSelect';
+export { EmptyData } from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/constants/variables.d.ts

@@ -24,3 +24,8 @@ export declare const PORTALS_IDS: {
     SANDBOX: number;
     SANDBOX_76753: number;
 };
+export declare const UI_SIZE: {
+    SMALL: string;
+    MEDIUM: string;
+    LARGE: string;
+};

package/es/constants/variables.js

@@ -25,3 +25,8 @@ export const PORTALS_IDS = {
     SANDBOX: 33167,
     SANDBOX_76753: 76753,
 };
+export const UI_SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};

package/package.json

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

package/es/components/molecules/EmptyTemplate/EmptyTemplate.js

@@ -1,22 +0,0 @@
-// Libraries
-import React from 'react';
-import { LoadingOutlined } from '@ant-design/icons';
-import { isString } from 'lodash';
-// Components
-import { Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-// Components
-import { Icon } from '@antscorp/antsomi-ui/es/components';
-// Styled
-import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
-const { Text } = Typography;
-export const EmptyTemplate = props => {
-    const { icon = 'icon-ants-media', title = 'No data', description, loading, className, image, imageClassName, imageStyle, children, } = props;
-    return (React.createElement(EmptyWrapper, { className: className },
-        !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
-        image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
-            React.createElement("img", { src: image, alt: "" }))),
-        loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
-            React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
-            description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description)))),
-        children));
-};

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

@@ -1,2 +0,0 @@
-export { EmptyTemplate } from './EmptyTemplate';
-export type { EmptyTemplateProps } from './EmptyTemplate';

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

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