@antscorp/antsomi-ui 1.3.5-beta.356 → 1.3.5-beta.357

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -24,10 +24,10 @@ import Icon from '@antscorp/icons';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { DEFAULT_TRANSLATE_DATA } from './constant';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const STEP = {
-    SWITCH_ACCOUNT: 'SWITCH_ACCOUNT',
-    SELECT_NETWORK: 'SELECT_NETWORK',
-};
+// const STEP = {
+//   SWITCH_ACCOUNT: 'SWITCH_ACCOUNT',
+//   SELECT_NETWORK: 'SELECT_NETWORK',
+// };
 const InputSearch = props => {
     const { value, onChange, className, onClickRemove } = props;
     return (React.createElement(InputSearchStyled, { className: className || '' },
@@ -46,7 +46,7 @@ export const AccountSharing = props => {
     const [isShowLoading, setIsShowLoading] = useState(false);
     const [accountSearch, setAccountSearch] = useState('');
     const [portalSearch, setPortalSearch] = useState('');
-    const [step, setStep] = useState(STEP.SWITCH_ACCOUNT);
+    const [tab, setTab] = useState('account');
     const [listNetworks, setListNetworks] = useState([]);
     const [currentNetwork, setCurrentNetwork] = useState();
     const [serverTranslateData, setServerTranslateData] = useState({});
@@ -200,10 +200,7 @@ export const AccountSharing = props => {
             });
         }
     }, [limitAccount]);
-    const filterListNetwork = useMemo(() => {
-        const draftListNetwork = [...listNetworks];
-        return draftListNetwork.filter((netWork) => netWork.networkName.toLocaleLowerCase().indexOf(portalSearch.toLocaleLowerCase()) !== -1);
-    }, [listNetworks, portalSearch]);
+    const filterListNetwork = useMemo(() => listNetworks.filter((netWork) => netWork.networkName.toLocaleLowerCase().indexOf(portalSearch.toLocaleLowerCase()) !== -1), [listNetworks, portalSearch]);
     const logAccountSwitch = (switchAccountId) => __awaiter(void 0, void 0, void 0, function* () {
         // setIsShowLoading(true)
         if (switchAccountId && isShareAccountAccess) {
@@ -231,9 +228,6 @@ export const AccountSharing = props => {
             window.location.href = urlLogout;
         }, 300);
     };
-    const switchStep = toStep => {
-        setStep(toStep);
-    };
     function urlDomain(data) {
         const a = document.createElement('a');
         a.href = data;
@@ -382,19 +376,18 @@ export const AccountSharing = props => {
         React.createElement(Text, { className: "account-number" }, formatUserId(account.user_id)))));
     return (React.createElement(CookiesProvider, null,
         React.createElement(Popover, { content: React.createElement(PackageSharingStyled, null,
-                React.createElement("div", { className: "div-info-account" }, infoAccount ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "div-info-left" },
+                React.createElement("div", { className: "info-account" }, infoAccount ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "current-account-avatar" },
                         React.createElement("img", { src: infoAccount.avatar, alt: "" }),
                         React.createElement("a", { className: "edit-profile", href: urlEditProfile, target: "_blank", rel: "noreferrer" },
                             React.createElement(Icon, { type: "icon-ants-edit-2", style: { color: '#aaa' } }))),
-                    React.createElement("div", { className: "div-info-right" },
-                        React.createElement("p", { style: { fontWeight: 600 } }, infoAccount.full_name),
-                        React.createElement("p", { style: { color: '#aaa', marginTop: 2 } }, infoAccount.email)))) : (React.createElement("div", null,
+                    React.createElement("p", { style: { fontWeight: 600 } }, infoAccount.full_name),
+                    React.createElement("p", { style: { color: '#aaa', marginTop: 2 } }, infoAccount.email))) : (React.createElement("div", null,
                     translateLang('KEY_LOADING'),
                     "..."))),
                 React.createElement(InnerCardStyled, null,
-                    React.createElement("div", { className: "network-block" }, step === STEP.SWITCH_ACCOUNT ? (React.createElement("div", { className: "current-network" },
-                        currentNetwork && currentNetwork.logo ? (React.createElement("div", null,
+                    React.createElement("div", { className: "network-block" }, tab === 'account' ? (React.createElement("div", { className: "current-network" },
+                        (currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.logo) ? (React.createElement("div", null,
                             React.createElement("img", { src: currentNetwork.logo, style: {
                                     maxHeight: 28,
                                     maxWidth: 200,
@@ -402,26 +395,21 @@ export const AccountSharing = props => {
                                     border: 'none',
                                     boxShadow: 'none',
                                 }, alt: "network-logo" }))) : null,
-                        React.createElement(Button, { type: "text", className: "change-network-btn", onClick: () => switchStep(STEP.SELECT_NETWORK), icon: React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '12px' } }) }, translateLang('KEY_CHANGE_PORTAL')))) : (React.createElement("div", { className: "network-select-wrapper" },
+                        React.createElement(Button, { type: "text", className: "change-network-btn", onClick: () => setTab('network'), icon: React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '12px' } }) }, translateLang('KEY_CHANGE_PORTAL')))) : (React.createElement(React.Fragment, null,
                         React.createElement(Flex, { gap: 10 },
-                            React.createElement(Button, { type: "text", onClick: () => switchStep(STEP.SWITCH_ACCOUNT), icon: React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '12px' } }) }, translateLang('KEY_BACK')),
-                            React.createElement(InputSearch, { className: "--portal", translateLang: translateLang, value: portalSearch, onChange: value => setPortalSearch(value), onClickRemove: () => setPortalSearch('') })),
-                        filterListNetwork && filterListNetwork.length ? (React.createElement("div", { className: "network-select" }, filterListNetwork.map((network) => (React.createElement("div", { key: network.networkId, className: `network-item ${networkId === +network.networkId ? 'disabled' : ''}`, onClick: () => selectNetwork(network) },
+                            React.createElement(Button, { type: "text", onClick: () => setTab('account'), icon: React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '12px' } }) }, translateLang('KEY_BACK')),
+                            React.createElement(InputSearch, { className: "--portal", value: portalSearch, onChange: value => setPortalSearch(value), onClickRemove: () => setPortalSearch('') })),
+                        React.createElement("div", { className: "network-select" }, filterListNetwork === null || filterListNetwork === void 0 ? void 0 : filterListNetwork.map((network) => (React.createElement("div", { key: network.networkId, className: `network-item ${networkId === +network.networkId ? 'disabled' : ''}`, onClick: () => selectNetwork(network) },
                             React.createElement("div", { className: "image-wrapper" },
                                 React.createElement("img", { src: network.logo, style: {
-                                        // maxWidth: 55,
-                                        // maxHeight: 55,
                                         borderRadius: 0,
                                         border: 'none',
                                         boxShadow: 'none',
                                     }, alt: "logo" })),
-                            React.createElement("p", { className: "network-name" }, network.networkName)))))) : (React.createElement("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                            } },
-                            React.createElement("p", { style: { fontSize: 12, color: '#aaa', margin: 0 } }, "No networks")))))),
-                    step === STEP.SWITCH_ACCOUNT ? (isShowSharing ? (React.createElement("div", { className: "div-cover-account" },
+                            React.createElement("p", { className: "network-name" }, network.networkName))))),
+                        React.createElement("div", { className: "no-network-title" },
+                            React.createElement("span", null, "No networks"))))),
+                    tab === 'account' ? (isShowSharing ? (React.createElement("div", { className: "div-cover-account" },
                         isShowLoading ? React.createElement(Spin, null) : null,
                         React.createElement(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
                                 setAccountSearch('');

package/es/components/organism/AccountSharing/styled.js

@@ -110,14 +110,18 @@ export const PackageSharingStyled = styled.div `
   min-width: 400px;
   max-width: 400px;
 
-  .div-info-account {
+  .info-account {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     width: 370px;
+    margin-bottom: 15px;
+    p {
+      margin: 0;
+    }
 
-    .div-info-left {
+    .current-account-avatar {
       position: relative;
       margin-bottom: 10px;
 
@@ -145,17 +149,12 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
       }
     }
-    .div-info-right {
-      margin-bottom: 15px;
-      p {
-        margin: 0;
-      }
-      & > p:first-child {
-        line-height: 18px;
-      }
-      & > p:last-child {
-        line-height: 13px;
-      }
+
+    p:first-child {
+      line-height: 18px;
+    }
+    p:last-child {
+      line-height: 13px;
     }
   }
   .div-cover-account {
@@ -282,7 +281,6 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
         &:hover {
           .image-wrapper {
-            /* box-shadow: 1px 1px 2px 0 #aaa; */
             background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue};
             border-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue3};
           }
@@ -323,6 +321,17 @@ export const PackageSharingStyled = styled.div `
         }
       }
     }
+
+    .no-network-title {
+      height: 158px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .network-select:has(> div.network-item) + .no-network-title {
+      display: none;
+    }
   }
 `;
 export const InnerCardStyled = styled.div `

package/package.json

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