@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

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

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Text, Typography } from '../../../atoms';
 import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
@@ -5,7 +6,5 @@ export const AccountItem = React.memo(props => {
     const { className, userName, userId, isSelected, onClick } = props;
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("li", { onClick: () => onClick && onClick(userId), className: `${className || ''} ${isSelected ? 'is-selected' : ''}` },
-        React.createElement(Typography.Text, { className: "account-name", ellipsis: { tooltip: true } }, userName),
-        React.createElement(Text, { className: "account-id" }, formatUserId(userId))));
+    _jsxs("li", { onClick: () => onClick && onClick(userId), className: `${className || ''} ${isSelected ? 'is-selected' : ''}`, children: [_jsx(Typography.Text, { className: "account-name", ellipsis: { tooltip: true }, children: userName }), _jsx(Text, { className: "account-id", children: formatUserId(userId) })] }));
 });

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

@@ -47,14 +47,14 @@ export const useAccountSelection = (apiConfig) => {
     // Memos
     const accountData = useMemo(() => {
         if (isUsePermissionAccount(appCode || '')) {
-            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+            return (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) || [];
-    }, [appCode, data === null || data === void 0 ? void 0 : data.entries, permissionAccountList]);
+        return data?.entries || [];
+    }, [appCode, data?.entries, permissionAccountList]);
     return { recentData, accountData, updateRecentAccount, refetchRecentAccount };
 };

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const AccountSelectionStyled = styled.div `
@@ -13,16 +12,16 @@ export const AccountSelectionStyled = styled.div `
     padding: 8px 10px;
     height: 40px;
     box-sizing: border-box;
-    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+    border-color: ${globalToken?.bw3};
     &:hover,
     &:focus,
     &:focus-within {
-      border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      border-color: ${globalToken?.bw3};
     }
   }
 
   .recent-text {
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw7};
+    color: ${THEME.token?.bw7};
     padding: 6px 10px;
   }
 
@@ -33,7 +32,7 @@ export const AccountSelectionStyled = styled.div `
   }
 
   ul.account-list {
-    border-top: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+    border-top: 1px solid ${THEME.token?.bw3};
     overflow-y: auto;
   }
 
@@ -59,18 +58,18 @@ export const AccountSelectionStyled = styled.div `
     padding: 13px 10px;
     height: 46px;
     box-sizing: border-box;
-    border-top: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
+    border-top: 1px solid ${THEME.token?.bw3};
     cursor: pointer;
   }
 
   li:hover,
   .all-account:hover {
-    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+    background-color: ${THEME.token?.blue};
   }
 
   li.is-selected,
   .all-account.is-selected {
-    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1};
+    background-color: ${THEME.token?.blue1_1};
   }
 `;
 export const PopoverFieldStyled = styled.div `
@@ -95,21 +94,21 @@ export const PopoverFieldStyled = styled.div `
   }
 
   i {
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8};
+    color: ${THEME.token?.bw8};
   }
 
   &.select {
-    border: 1px solid ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw3};
+    border: 1px solid ${THEME.token?.bw3};
     border-radius: 999px;
   }
 
   &.input {
-    border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.colorPrimary};
+    border-bottom: 1px solid ${THEME.token?.colorPrimary};
     width: 300px;
   }
 
   & .is-placeholder {
-    color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw6};
+    color: ${THEME.token?.bw6};
     font-weight: normal;
   }
 `;