@antscorp/antsomi-ui 1.3.5-beta.249 → 1.3.5-beta.250

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
-export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps").Step;
+import React from 'react';
+import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
+export type StepsProps = AntdStepsProps & {
+    saveHighestStep?: boolean;
+    iconSize?: number;
 };
+export type StepProps = AntdStepProps;
+export declare const Steps: React.FC<StepsProps>;

package/es/components/atoms/Steps/Steps.js

@@ -1,2 +1,51 @@
-import { Steps as AntdSteps } from 'antd';
-export const Steps = AntdSteps;
+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, { useEffect, useMemo, useState, memo } from 'react';
+import { isNumber } from 'lodash';
+// Styled
+import { SelectedIcon, StepsWrapper } from './styled';
+export const Steps = memo(props => {
+    const { items, saveHighestStep = true, iconSize = 24, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "iconSize", "className"]);
+    const { current, size = 'small' } = restOfProps;
+    const [highestStep, setHighestStep] = useState(0);
+    useEffect(() => {
+        if (saveHighestStep && current && current > highestStep) {
+            setHighestStep(current);
+        }
+    }, [current, saveHighestStep, highestStep]);
+    const customItems = useMemo(() => saveHighestStep
+        ? items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            let status;
+            let icon;
+            let className;
+            if (index > highestStep) {
+                status = 'wait';
+            }
+            else {
+                if (index === current) {
+                    status = 'process';
+                    icon = undefined;
+                }
+                else {
+                    status = 'finish';
+                    icon = React.createElement(SelectedIcon, { size: size }, index + 1);
+                    className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
+                }
+            }
+            return Object.assign({ status, icon, className }, item);
+        })
+        : items, [current, saveHighestStep, highestStep, items, size]);
+    /** Check whether the user has reactivated the previous step or not */
+    const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
+    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: "small", iconSize: iconSize, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
+});

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {
+    size: 'small' | 'default';
+}, never>;
+export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
+    Step: typeof import("rc-steps").Step;
+}, any, {
+    iconSize: number;
+    isReactivate: boolean;
+    highestStep: number;
+}, never>;

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

@@ -0,0 +1,179 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+import styled from 'styled-components';
+import { Steps } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const SelectedIcon = styled.div `
+  border: 1px solid #b8cfe6;
+  border-radius: 100%;
+  width: ${({ size }) => (size === 'small' ? 20 : 30)}px;
+  height: ${({ size }) => (size === 'small' ? 20 : 30)}px;
+  font-size: 14px;
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+`;
+export const StepsWrapper = styled(Steps) `
+  &.save-highest-step {
+    /** Steps Default */
+    &.antsomi-steps:not(.antsomi-steps-dot) {
+      .antsomi-steps-item {
+        .antsomi-steps-item-container {
+          .antsomi-steps-item-icon {
+            box-sizing: content-box;
+            border-radius: 100%;
+            font-size: 14px;
+            font-weight: bold;
+
+            .antsomi-steps-icon {
+              color: white;
+            }
+          }
+
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
+            height: 2px;
+            background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw6};
+          }
+
+          & > .antsomi-steps-item-tail::after {
+            width: 2px;
+            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+          }
+        }
+
+        &:not(.antsomi-steps-item-active) > .antsomi-steps-item-container[role='button'] {
+          &:hover {
+            .antsomi-steps-item-icon {
+              background-color: white;
+            }
+            .antsomi-steps-item-content {
+              color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+            }
+          }
+        }
+
+        &.highest-step {
+          .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title::after,
+            & > .antsomi-steps-item-tail::after {
+              background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw6} !important;
+            }
+          }
+        }
+
+        &.antsomi-steps-item-selectable {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content .antsomi-steps-item-title:after {
+              background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
+            }
+
+            .antsomi-steps-item-tail::after {
+              background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+            }
+          }
+        }
+
+        &.antsomi-steps-item-process.antsomi-steps-item-active {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title {
+              &::after {
+                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+              }
+            }
+
+            & > .antsomi-steps-item-tail {
+              &::after {
+                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /** Steps dot */
+    &.antsomi-steps.antsomi-steps-dot {
+      &.antsomi-steps-horizontal .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          height: 2px;
+        }
+      }
+
+      &.antsomi-steps-vertical .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          width: 2px;
+        }
+      }
+
+      &.antsomi-steps-horizontal .antsomi-steps-item-tail::after,
+      &.antsomi-steps-vertical .antsomi-steps-item-tail::after {
+        background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6};
+      }
+
+      .antsomi-steps-item-selectable > .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorPrimary};
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-tail::after {
+            ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+          }
+        }
+      }
+
+      .highest-step {
+        .antsomi-steps-item-container > .antsomi-steps-item-tail::after {
+          background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6} !important;
+        }
+      }
+    }
+
+    /** Common */
+    &.antsomi-steps {
+      .antsomi-steps-item-wait {
+        color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw7};
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
+          background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw6};
+        }
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-content {
+          .antsomi-steps-item-title,
+          .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        font-weight: bold;
+        color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorPrimary};
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title,
+          & > .antsomi-steps-item-content > .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-selectable {
+        color: black;
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorPrimary};
+          }
+
+          & > .antsomi-steps-item-content {
+            .antsomi-steps-item-title,
+            .antsomi-steps-item-description {
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface EmptyTemplateProps {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+    image?: string;
+    imageClassName?: string;
+    imageStyle?: React.CSSProperties;
+}
+export declare const EmptyTemplate: React.FC<React.PropsWithChildren<EmptyTemplateProps>>;

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

@@ -0,0 +1,22 @@
+// 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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+var _a, _b, _c;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    color: black;
+  }
+
+  .description {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 13px;
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+EmptyWrapper.defaultProps = {
+    vertical: true,
+    align: 'center',
+    justify: 'center',
+    gap: 15,
+};
+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};
+
+  i {
+    font-size: 40px;
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+  }
+`;
+export const ImageWrapper = styled.div `
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+`;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -26,7 +26,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const history = useHistory();
     /** Prefer to use Header in AppConfigContext */
-    const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { className, style, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);

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

@@ -44,6 +44,7 @@ export { InputNumber as InputNumberWithLabel } from './InputNumber';
 export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
+export { EmptyTemplate, EmptyTemplateProps } from './EmptyTemplate';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/molecules/index.js

@@ -44,6 +44,7 @@ export { InputNumber as InputNumberWithLabel } from './InputNumber';
 export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
+export { EmptyTemplate } from './EmptyTemplate';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/template/TemplateListing/components/Empty/index.js

@@ -1,5 +1,6 @@
 // Libraries
 import React from 'react';
+import { isString } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -7,12 +8,8 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyIcon, EmptyWrapper } from './styled';
 const { Text } = Typography;
 export const Empty = props => {
-    const { icon, description } = props;
+    const { icon = React.createElement(Icon, { type: "icon-ants-media" }), description = 'No data' } = props;
     return (React.createElement(EmptyWrapper, null,
-        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, icon),
+        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon),
         React.createElement(Text, { className: "animate__animated animate__fadeInUp" }, description)));
 };
-Empty.defaultProps = {
-    icon: React.createElement(Icon, { type: "icon-ants-media" }),
-    description: 'No data',
-};

package/package.json

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