@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,224 @@
+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';
+const STEP_SIZE = {
+    SMALL: 24,
+    DEFAULT: 32,
+};
+export const SelectedIcon = styled.div `
+  border: 1px solid #b8cfe6;
+  border-radius: 100%;
+  font-size: 14px;
+  line-height: 23px;
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const StepsWrapper = styled(Steps) `
+  &.save-highest-step {
+    // * Steps Default
+    &.antsomi-steps:not(.antsomi-steps-dot) {
+      &.antsomi-steps-small
+        .antsomi-steps-item
+        .antsomi-steps-item-container
+        .antsomi-steps-item-icon {
+        width: ${STEP_SIZE.SMALL}px;
+        height: ${STEP_SIZE.SMALL}px;
+      }
+
+      .antsomi-steps-item {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            box-sizing: border-box;
+            border-radius: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: ${STEP_SIZE.DEFAULT}px;
+            height: ${STEP_SIZE.DEFAULT}px;
+
+            .antsomi-steps-icon {
+              color: white;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              line-height: 23px;
+              top: 0px;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+
+          & > .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-title {
+        font-size: 16px;
+        line-height: ${STEP_SIZE.DEFAULT}px;
+      }
+
+      .antsomi-steps-item-description {
+        font-size: 14px;
+      }
+
+      &.antsomi-steps-small {
+        .antsomi-steps-item-title {
+          font-size: 14px;
+          line-height: ${STEP_SIZE.SMALL}px;
+        }
+      }
+
+      .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/atoms/Switch/Switch.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
+export type { SwitchProps } from 'antd';

package/es/components/atoms/Switch/Switch.js

@@ -1,2 +1,3 @@
 import { Switch as AntdSwitch } from 'antd';
 export const Switch = AntdSwitch;
+Switch.defaultProps = {};

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

@@ -1 +1,2 @@
 export { Switch } from './Switch';
+export type { SwitchProps } from 'antd';

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

@@ -1,8 +1,7 @@
-export { Button } from './Button';
 export { Divider } from './Divider';
 export { DividerPure } from './DividerPure';
 export { Input, TextArea } from './Input';
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';
 export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
@@ -22,9 +21,7 @@ export { Steps } from './Steps';
 export { Empty } from './Empty';
 export { Icon } from './Icon';
 export { Text } from './Text';
-export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
-export { Switch } from './Switch';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
@@ -32,11 +29,18 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';
+export * from './Scrollbars';
+export * from './Switch';
+export * from './Button';
+export * from './RateV2';
+export * from './Popover';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -1,8 +1,7 @@
-export { Button } from './Button';
 export { Divider } from './Divider';
 export { DividerPure } from './DividerPure';
 export { Input, TextArea } from './Input';
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';
 export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
@@ -22,9 +21,7 @@ export { Steps } from './Steps';
 export { Empty } from './Empty';
 export { Icon } from './Icon';
 export { Text } from './Text';
-export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
-export { Switch } from './Switch';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
@@ -32,8 +29,15 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';
+export * from './Scrollbars';
+export * from './Switch';
+export * from './Button';
+export * from './RateV2';
+export * from './Popover';

package/es/components/icons/DataIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const DataIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/DataIcon.js

@@ -0,0 +1,18 @@
+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, { forwardRef } from 'react';
+export const DataIcon = forwardRef((props, ref) => {
+    const restProps = __rest(props, []);
+    return (React.createElement("svg", Object.assign({ ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.002 6.5C19.002 7.88071 15.6499 9 11.515 9C7.38 9 4.02795 7.88071 4.02795 6.5C4.02795 5.11929 7.38 4 11.515 4C15.6499 4 19.002 5.11929 19.002 6.5ZM18.974 12.131C18.974 13.42 15.622 14.465 11.487 14.465C7.352 14.465 4 13.419 4 12.131V8.46204C4 9.75104 7.352 10.795 11.487 10.795C15.622 10.795 18.974 9.74904 18.974 8.46204V12.131ZM18.974 17.8423C18.974 19.1313 15.622 20.1763 11.487 20.1763C7.352 20.1763 4 19.1303 4 17.8423V14.1733C4 15.4623 7.352 16.5063 11.487 16.5063C15.622 16.5063 18.974 15.4603 18.974 14.1733V17.8423Z", fill: "currentColor" })));
+});

package/es/components/icons/EventIcon.js

@@ -14,5 +14,5 @@ export const EventIcon = (_a) => {
     var props = __rest(_a, []);
     return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "currentColor" }, props),
         React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-        React.createElement("path", { d: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z" })));
+        React.createElement("path", { d: "M16 13h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1zm0-10v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1zm2 17H6c-.55 0-1-.45-1-1V9h14v10c0 .55-.45 1-1 1z" })));
 };

package/es/components/icons/ExpandMoreRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const ExpandMoreRight: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandMoreRight.js

@@ -0,0 +1,3 @@
+import React, { forwardRef } from 'react';
+export const ExpandMoreRight = forwardRef((props, ref) => (React.createElement("svg", Object.assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    React.createElement("path", { d: "M3.67969 5L0.492188 1.8125L1.89844 0.40625L6.49219 5L1.89844 9.59375L0.492188 8.1875L3.67969 5ZM8.69531 5L5.50781 1.8125L6.91406 0.40625L11.5078 5L6.91406 9.59375L5.50781 8.1875L8.69531 5Z", fill: "currentColor" }))));

package/es/components/icons/LoadingIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const LoadingIcon: React.ForwardRefExoticComponent<IconProps & {
+    backgroundColor?: string | undefined;
+} & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LoadingIcon.js

@@ -0,0 +1,53 @@
+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;
+};
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+const StyleSvg = styled.svg `
+  animation: 1.5s linear 0s infinite normal none running spin;
+
+  circle.circle {
+    stroke: currentcolor;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0;
+    animation: 1.5s ease-in-out 0s infinite normal none running animation-loading;
+  }
+
+  @keyframes animation-loading {
+    0% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -118px;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+export const LoadingIcon = forwardRef((_a, ref) => {
+    var { backgroundColor } = _a, restOfProps = __rest(_a, ["backgroundColor"]);
+    return (React.createElement(StyleSvg, Object.assign({ width: "41", height: "41", viewBox: "0 0 41 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restOfProps, { ref: ref }),
+        React.createElement("path", { d: "M40.5 20.5C40.5 31.5457 31.5457 40.5 20.5 40.5C9.4543 40.5 0.5 31.5457 0.5 20.5C0.5 9.4543 9.4543 0.5 20.5 0.5C31.5457 0.5 40.5 9.4543 40.5 20.5ZM2.5 20.5C2.5 30.4411 10.5589 38.5 20.5 38.5C30.4411 38.5 38.5 30.4411 38.5 20.5C38.5 10.5589 30.4411 2.5 20.5 2.5C10.5589 2.5 2.5 10.5589 2.5 20.5Z", fill: backgroundColor || 'transparent' }),
+        React.createElement("circle", { className: "circle", cx: "20.5", cy: "20.5", r: "19", fill: "none", strokeWidth: "2" })));
+});

package/es/components/icons/TableIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const TableIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/TableIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const TableIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({}, props, { ref: ref, width: width, height: height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
+        React.createElement("path", { d: "M3 14.0156V9.98438H6.98438V14.0156H3ZM3 18.9844V15H6.98438V18.9844H3ZM3 9V5.01562H6.98438V9H3ZM8.01562 14.0156V9.98438H21V14.0156H8.01562ZM8.01562 18.9844V15H21V18.9844H8.01562ZM8.01562 5.01562H21V9H8.01562V5.01562Z", fill: "currentColor" })));
+});

package/es/components/icons/hooks/useIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../type';
+export declare const useIcon: (props: IconProps) => {
+    width: string | number | undefined;
+    height: string | number | undefined;
+};

package/es/components/icons/hooks/useIcon.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+export const useIcon = (props) => {
+    const { size = 24 } = props;
+    const [width, height] = useMemo(() => [size || (props === null || props === void 0 ? void 0 : props.width), size || (props === null || props === void 0 ? void 0 : props.height)], [size, props.width, props.height]);
+    return {
+        width,
+        height,
+    };
+};

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

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';
@@ -52,3 +53,6 @@ export { Preview } from './Preview';
 export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LoadingIcon } from './LoadingIcon';
+export { DataIcon } from './DataIcon';
+export { TableIcon } from './TableIcon';

package/es/components/icons/index.js

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';
@@ -52,3 +53,6 @@ export { Preview } from './Preview';
 export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LoadingIcon } from './LoadingIcon';
+export { DataIcon } from './DataIcon';
+export { TableIcon } from './TableIcon';

package/es/components/icons/type.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
+    size?: number;
 }

package/es/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

package/es/components/index.js

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AccountRecent } from '@antscorp/antsomi-ui/es/models/AccountListing';
+export interface AccountListingProps {
+    className?: string;
+    apiConfig: {
+        domain: string;
+        permissionDomain?: string;
+        token: string;
+        userId: number;
+        portalId?: number;
+        languageCode?: string;
+        appCode?: string;
+        menuCode?: string;
+    };
+    showAllAccount?: boolean;
+    currentAccount?: string | 'all';
+    onChange?: (userId: number | string) => void;
+}
+interface AccountData {
+    email: any;
+    userId: any;
+    userName: any;
+    status: number;
+}
+export interface AccountListingHandle {
+    getUsers: () => {
+        recentData?: AccountRecent;
+        accountData: Array<AccountData>;
+    };
+}
+export declare const AccountListing: React.ForwardRefExoticComponent<AccountListingProps & React.RefAttributes<AccountListingHandle>>;
+export {};

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -0,0 +1,39 @@
+import Icon from '@antscorp/icons';
+import React, { useCallback, useImperativeHandle, useState } from 'react';
+import { Scrollbars, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Divider, Input } from 'antd';
+import { AccountItem } from './components';
+import { AccountSelectionStyled } from './styled';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { useAccountSelection } from './hooks';
+export const AccountListing = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
+    // States
+    const [searchValue, setSearchValue] = useState('');
+    const { accountData, recentData } = useAccountSelection(apiConfig);
+    const isAllAccount = currentAccount === 'all';
+    useImperativeHandle(ref, () => ({
+        getUsers() {
+            return { recentData, accountData };
+        },
+    }), [recentData, accountData]);
+    // Handlers
+    const handleSelectAccount = useCallback((userId) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(userId);
+    }, [onChange]);
+    return (React.createElement(AccountSelectionStyled, { className: className },
+        React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
+        React.createElement("div", { className: "account-list" },
+            React.createElement("ul", null,
+                React.createElement(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' } },
+                    ((_b = recentData === null || recentData === void 0 ? void 0 : recentData.value) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { className: "recent-text" }, "Recent"), recentData === null || recentData === void 0 ? void 0 :
+                        recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))),
+                        React.createElement(Divider, { style: { margin: '8px 0', color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3 } }))) : null, accountData === null || accountData === void 0 ? void 0 :
+                    accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
+                        searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId })))))),
+        showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },
+            React.createElement("strong", null, "All account"))) : null));
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PopoverProps } from 'antd';
+import { AccountListingProps } from './AccountListing';
+export interface AccountSelectionProps extends Omit<AccountListingProps, 'onChange' | 'onLabelChange'> {
+    show?: boolean;
+    inputStyle?: 'select' | 'input';
+    inputClassName?: string;
+    zIndex?: PopoverProps['zIndex'];
+    onChange?: (userId: string) => void;
+    getPopupContainer?: PopoverProps['getPopupContainer'];
+}
+export declare const AccountSelection: React.FC<AccountSelectionProps>;

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -0,0 +1,48 @@
+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 Icon from '@antscorp/icons';
+import React, { useCallback, useEffect, useState } from 'react';
+// Styled
+import { PopoverFieldStyled } from './styled';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Tooltip } from 'antd';
+import { AccountListing } from './AccountListing';
+// Constants
+import { useAccountSelection } from './hooks';
+export const AccountSelection = props => {
+    const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex"]);
+    const { apiConfig, currentAccount = '' } = props;
+    // States
+    const [inputLabel, setInputLabel] = useState('');
+    const [open, setOpen] = useState(false);
+    const { accountData } = useAccountSelection(apiConfig);
+    // Side Effects
+    useEffect(() => {
+        var _a;
+        const newLabel = currentAccount === 'all'
+            ? 'All account'
+            : ((_a = accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === +currentAccount)) === null || _a === void 0 ? void 0 : _a.userName) || '';
+        setInputLabel(newLabel);
+    }, [currentAccount, accountData]);
+    // Handlers
+    const handleSelectAccount = useCallback((userId) => {
+        setOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(String(userId));
+    }, [onChange]);
+    return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount })), trigger: "click", overlayInnerStyle: { padding: 0 }, getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
+        React.createElement(PopoverFieldStyled, { className: `${inputStyle || ''} ${inputClassName || ''}` },
+            React.createElement(Tooltip, { title: inputLabel },
+                React.createElement("span", { className: !inputLabel ? 'is-placeholder' : '' }, inputLabel || 'Select an account')),
+            React.createElement(Icon, { type: "icon-ants-angle-right", style: { width: '20px', textAlign: 'center', transform: 'rotate(90deg)' } })))));
+};

package/es/components/molecules/AccountSelection/components/AccountItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AccountItemProps {
+    className?: string;
+    userName: string;
+    userId: number;
+    isSelected?: boolean;
+    onClick?: (userId: number) => void;
+}
+export declare const AccountItem: React.FC<AccountItemProps>;
+export {};