@antscorp/antsomi-ui 1.3.5-beta.222 → 1.3.5-beta.224

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface AccountListingProps {
+    className?: string;
+    apiConfig: {
+        domain: string;
+        token: string;
+        userId: number;
+        portalId?: number;
+        languageCode?: string;
+        appCode?: string;
+    };
+    showAllAccount?: boolean;
+    currentAccount?: number | 'ALL_ACCOUNT';
+    onLabelChange?: (label: string) => void;
+    onChange?: (userId: number | 'ALL_ACCOUNT') => void;
+}
+export declare const AccountListing: React.FC<AccountListingProps>;

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

@@ -0,0 +1,72 @@
+import Icon from '@antscorp/icons';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Input, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { AccountItem } from './components';
+import { AccountSelectionStyled } from './styled';
+import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
+export const AccountListing = props => {
+    const { className, apiConfig, showAllAccount = true, currentAccount, onLabelChange, onChange, } = props;
+    const { domain, token, userId, appCode, portalId } = apiConfig;
+    const { data } = useGetAccountList({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: permissionAccountList } = useGetPermissionAccountList({
+        args: {
+            _account_id: userId,
+            _user_id: userId,
+            _app_code: appCode || '',
+            _token: token,
+            domain,
+            appCode: appCode || '',
+            fullParent: true,
+            menuCode: appCode || '',
+        },
+        options: {
+            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: recentData } = useGetRecentAccount({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const accountData = useMemo(() => {
+        if (portalId === PORTALS_IDS.SANDBOX_76753) {
+            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+                email: account.email,
+                userId: account.user_id,
+                userName: account.full_name,
+                status: 1,
+            }))) || []);
+        }
+        return (data === null || data === void 0 ? void 0 : data.entries) || [];
+    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    const [searchValue, setSearchValue] = useState('');
+    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === currentAccount), [accountData, currentAccount]);
+    // HACK: this use for popover input label
+    const inputLabel = currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
+    useEffect(() => {
+        if (onLabelChange)
+            onLabelChange(inputLabel);
+    }, [inputLabel]);
+    const handleSelectAccount = useCallback((userId) => {
+        if (onChange)
+            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' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
+        !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
+            React.createElement(Text, { className: "recent-text" }, "Recent"),
+            React.createElement("ul", null, 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("div", { className: "antsomi-scroll-box account-list" },
+            React.createElement("ul", { className: "scroll-content" }, 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 ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
+            React.createElement("strong", null, "All account"))) : null));
+};

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

@@ -1,18 +1,8 @@
 import React from 'react';
 import { PopoverProps } from 'antd';
-export interface AccountSelectionProps {
+import { AccountListingProps } from './AccountListing';
+export interface AccountSelectionProps extends Omit<AccountListingProps, 'onChange' | 'onLabelChange'> {
     show?: boolean;
-    className?: string;
-    apiConfig: {
-        domain: string;
-        token: string;
-        userId: number;
-        portalId?: number;
-        languageCode?: string;
-        appCode?: string;
-    };
-    showAllAccount?: boolean;
-    currentAccount?: number | 'ALL_ACCOUNT';
     inputStyle?: 'select' | 'input';
     inputClassName?: string;
     onChange?: (userId: number | 'ALL_ACCOUNT') => void;

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

@@ -1,72 +1,31 @@
+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 Icon from '@antscorp/icons';
-import React, { useCallback, useMemo, useState } from 'react';
-import { Input, Popover, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-import { AccountItem } from './components';
-import { AccountSelectionStyled, PopoverFieldStyled } from './styled';
-import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
+import React, { useCallback, useState } from 'react';
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverFieldStyled } from './styled';
 import { Tooltip } from 'antd';
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
-import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
+import { AccountListing } from './AccountListing';
 export const AccountSelection = props => {
-    const { show = true, className, apiConfig, showAllAccount = true, currentAccount, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex, } = props;
-    const { domain, token, userId, appCode, portalId } = apiConfig;
-    const { data } = useGetAccountList({
-        apiConfig,
-        options: {
-            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
-        },
-    });
-    const { data: permissionAccountList } = useGetPermissionAccountList({
-        args: {
-            _account_id: userId,
-            _user_id: userId,
-            _app_code: appCode || '',
-            _token: token,
-            domain,
-            appCode: appCode || '',
-            fullParent: true,
-            menuCode: appCode || '',
-        },
-        options: {
-            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
-        },
-    });
-    const { data: recentData } = useGetRecentAccount({
-        apiConfig,
-        options: {
-            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
-        },
-    });
-    const accountData = useMemo(() => {
-        if (portalId === PORTALS_IDS.SANDBOX_76753) {
-            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
-                email: account.email,
-                userId: account.user_id,
-                userName: account.full_name,
-                status: 1,
-            }))) || []);
-        }
-        return (data === null || data === void 0 ? void 0 : data.entries) || [];
-    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
-    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === currentAccount), [accountData, currentAccount]);
+    const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex"]);
+    const [inputLabel, setInputLabel] = useState('');
     const [open, setOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState('');
+    // const [searchValue, setSearchValue] = useState<string>('');
     const handleSelectAccount = useCallback((userId) => {
         setOpen(false);
         if (onChange)
             onChange(userId);
     }, [onChange]);
-    const inputLabel = currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
-    return (show && (React.createElement(Popover, { content: React.createElement(AccountSelectionStyled, { className: className },
-            React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
-            !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
-                React.createElement(Text, { className: "recent-text" }, "Recent"),
-                React.createElement("ul", null, 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("div", { className: "antsomi-scroll-box account-list" },
-                React.createElement("ul", { className: "scroll-content" }, 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 ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
-                React.createElement("strong", null, "All account"))) : null), trigger: "click", overlayInnerStyle: { padding: 0 }, 
+    return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount, onLabelChange: newLabel => setInputLabel(newLabel) })), trigger: "click", overlayInnerStyle: { padding: 0 }, 
         // getPopupContainer={triggerNode => triggerNode}
         getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
         React.createElement(PopoverFieldStyled, { className: `${inputStyle || ''} ${inputClassName || ''}` },

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

@@ -1 +1,2 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
+export { AccountListing } from './AccountListing';

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

@@ -1 +1,2 @@
 export { AccountSelection } from './AccountSelection';
+export { AccountListing } from './AccountListing';

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

@@ -4,6 +4,10 @@ declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
 declare const BREAK_POINT = "1440px";
-declare const LAYER_2_MIN_WIDTH = "740px";
-declare const LAYER_2_MAX_WIDTH = "calc(100vw - 46px)";
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, LAYER_2_MAX_WIDTH, LAYER_2_MIN_WIDTH, };
+declare const DRAWER_DETAIL_DIMENSION: {
+    LAYER_2: {
+        minWidth: string;
+        maxWidth: string;
+    };
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };

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

@@ -6,4 +6,10 @@ const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
 const BREAK_POINT = '1440px';
 const LAYER_2_MIN_WIDTH = '740px';
 const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, LAYER_2_MAX_WIDTH, LAYER_2_MIN_WIDTH, };
+const DRAWER_DETAIL_DIMENSION = {
+    LAYER_2: {
+        minWidth: LAYER_2_MIN_WIDTH,
+        maxWidth: LAYER_2_MAX_WIDTH,
+    },
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };

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

@@ -1,3 +1,3 @@
 export { DrawerDetail } from './DrawerDetail';
-export { LAYER_2_MAX_WIDTH, LAYER_2_MIN_WIDTH } from './constants';
+export { DRAWER_DETAIL_DIMENSION } from './constants';
 export type * from './types';

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

@@ -1,3 +1,3 @@
 export { DrawerDetail } from './DrawerDetail';
 // Constants
-export { LAYER_2_MAX_WIDTH, LAYER_2_MIN_WIDTH } from './constants';
+export { DRAWER_DETAIL_DIMENSION } from './constants';

package/package.json

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