@antscorp/antsomi-ui 1.3.5-beta.338 → 1.3.5-beta.339

package/es/components/molecules/EditableName/EditableName.js

@@ -47,7 +47,7 @@ export const EditableName = React.forwardRef((props, ref) => {
                     setInternalValue(newValue);
                     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 }, onBlur: onBlur, onKeyDown: onKeyDown })),
-        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px' } })) : null,
+        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : null,
         (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
             React.createElement(Tooltip, { title: error || requiredError },
                 React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : readonly ? null : (React.createElement("div", { className: "suffix-icon" },

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

@@ -13,28 +13,29 @@ import axios from 'axios';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
 // Icons
-import { Popover, Spin } from '../../atoms';
+import { Button, Flex, Popover, Spin } from '../../atoms';
 import CloseIcon from './icons/close';
 import SearchIcon from './icons/search';
-import { InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled } from './styled';
+import { InnerCardStyled, InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled, } from './styled';
 // Utils
 import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
 import { translate } from './utils';
 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 InputSearch = props => {
-    const { value, onChange, className, translateLang, onClickRemove } = props;
+    const { value, onChange, className, onClickRemove } = props;
     return (React.createElement(InputSearchStyled, { className: className || '' },
-        React.createElement(SearchIcon, { className: "search-icon" }),
-        React.createElement("input", { className: "input-search-account", placeholder: translateLang('KEY_SEARCH_PLACEHOLDER'), value: value, onChange: e => onChange(e.target.value) }),
-        React.createElement(CloseIcon, { className: "remove-icon", onClick: onClickRemove })));
+        React.createElement("input", { className: "input-search-account", placeholder: "Search...", value: value, onChange: e => onChange(e.target.value) }),
+        value ? (React.createElement(CloseIcon, { className: "remove-icon", onClick: onClickRemove })) : (React.createElement(SearchIcon, { className: "search-icon" }))));
 };
 export const AccountSharing = props => {
+    var _a;
     const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, } = props;
     const selectedNetworkRef = useRef();
     const [isShowSearchAccount, setIsShowSearchAccount] = useState(false);
@@ -383,61 +384,61 @@ export const AccountSharing = props => {
         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("img", { src: infoAccount.avatar, alt: "" })),
+                        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("a", { className: "edit-profile", href: urlEditProfile, target: "_blank", rel: "noreferrer" },
-                            translateLang('KEY_EDIT_PROFILE'),
-                            React.createElement(Icon, { type: "icon-ants-edit", style: { color: '#aaa' } }))))) : (React.createElement("div", null,
+                        React.createElement("p", { style: { color: '#aaa', marginTop: 2 } }, infoAccount.email)))) : (React.createElement("div", null,
                     translateLang('KEY_LOADING'),
                     "..."))),
-                React.createElement("hr", { style: { margin: '10px 0', background: '#E3EEF1' } }),
-                React.createElement("div", { className: "network-block" }, step === STEP.SWITCH_ACCOUNT ? (React.createElement("div", { className: "current-network" },
-                    currentNetwork && currentNetwork.logo ? (React.createElement("img", { src: currentNetwork.logo, style: {
-                            maxHeight: 28,
-                            maxWidth: 200,
-                            borderRadius: 0,
-                            border: 'none',
-                            boxShadow: 'none',
-                        }, alt: "" })) : null,
-                    React.createElement("span", { onClick: () => switchStep(STEP.SELECT_NETWORK), className: "change-network-btn" }, translateLang('KEY_CHANGE_PORTAL')))) : (React.createElement("div", { className: "network-select-wrapper" },
-                    React.createElement("span", { onClick: () => switchStep(STEP.SWITCH_ACCOUNT), className: "back-btn" }, 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("div", { className: "image-wrapper" },
-                            React.createElement("img", { src: network.logo, style: {
-                                    // maxWidth: 55,
-                                    // maxHeight: 55,
+                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("img", { src: currentNetwork.logo, style: {
+                                    maxHeight: 28,
+                                    maxWidth: 200,
                                     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"))),
-                    React.createElement("hr", { style: { margin: '20px 0', background: '#E3EEF1' } })))),
-                step === STEP.SWITCH_ACCOUNT ? (isShowSharing ? (React.createElement("div", { className: "div-account-sharing mt-10" },
-                    React.createElement("div", { className: "div-cover-account" },
-                        isShowLoading ? React.createElement(Spin, null) : null,
-                        isShowSearchAccount || !(listAccountRecent === null || listAccountRecent === void 0 ? void 0 : listAccountRecent.length) ? (React.createElement(InputSearch, { value: accountSearch, translateLang: translateLang, onChange: value => setAccountSearch(value), onClickRemove: () => {
-                                setAccountSearch('');
-                                setIsShowSearchAccount(false);
-                            } })) : (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "div-recent-account" },
-                                React.createElement("span", { className: "recent-title" }, "Recent accounts"),
-                                React.createElement(SearchIcon, { onClick: () => setIsShowSearchAccount(true), className: "search-icon" })),
-                            renderAccounts(listAccountRecent, {
-                                minHeight: 32,
-                                maxHeight: 162,
-                                padding: '0 10px',
-                            }),
-                            React.createElement("hr", { style: { margin: '10px 0', background: '#E3EEF1' } }))),
-                        renderAccounts(listAccountSharing)))) : (React.createElement("hr", { style: { margin: '10px 0 20px', background: '#E3EEF1' } }))) : null,
-                React.createElement("button", { type: "button", className: "btn-grey", onClick: () => onClickButtonLogout() }, translateLang('KEY_LOGOUT'))), arrow: false, trigger: ['click'], placement: "bottomRight" },
+                                }, 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(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("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-account-sharing mt-10" },
+                        React.createElement("div", { className: "div-cover-account" },
+                            isShowLoading ? React.createElement(Spin, null) : null,
+                            isShowSearchAccount || !(listAccountRecent === null || listAccountRecent === void 0 ? void 0 : listAccountRecent.length) ? (React.createElement(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
+                                    setAccountSearch('');
+                                    setIsShowSearchAccount(false);
+                                } })) : (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: "div-recent-account" },
+                                    React.createElement("span", { className: "recent-title" }, "Recent accounts"),
+                                    React.createElement(SearchIcon, { onClick: () => setIsShowSearchAccount(true), className: "search-icon" })),
+                                renderAccounts(listAccountRecent, {
+                                    minHeight: 32,
+                                    maxHeight: 162,
+                                    padding: '0 10px',
+                                }))),
+                            renderAccounts(listAccountSharing)))) : (React.createElement("hr", { style: { margin: '10px 0 20px', background: '#E3EEF1' } }))) : null),
+                React.createElement(Flex, { align: "center", justify: "center" },
+                    React.createElement(Button, { onClick: () => onClickButtonLogout(), icon: React.createElement(Icon, { type: "icon-ants-exit" }) }, translateLang('KEY_LOGOUT')))), arrow: false, trigger: ['click'], placement: "bottomRight", overlayInnerStyle: { backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_2, padding: '20px 15px' } },
             React.createElement(TriggerPopoverStyled, null,
                 React.createElement("div", { className: "brand-logo" }, (currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.logo) ? React.createElement("img", { src: currentNetwork.logo, alt: "" }) : null),
                 React.createElement("div", { className: "avatar" }, infoAccount ? React.createElement("img", { src: infoAccount.avatar, alt: "" }) : null)))));

package/es/components/organism/AccountSharing/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const InputSearchStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TriggerPopoverStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PackageSharingStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InnerCardStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,11 +1,11 @@
-var _a;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputSearchStyled = styled.div `
   position: relative;
   display: flex;
   align-items: center;
-  padding: 10px;
+  /* padding: 10px; */
 
   box-sizing: border-box;
   * {
@@ -13,20 +13,16 @@ export const InputSearchStyled = styled.div `
   }
 
   &.--portal {
-    padding: 10px 7px;
+    padding: 0;
+    flex: 1;
   }
 
   .input-search-account {
-    border-radius: 0;
-    background-color: #fff;
-    border-color: #2e60a7;
-    border-top: none;
-    border-right: none;
-    border-left: none;
+    border: none;
     border-bottom: 1px solid rgb(227, 238, 241);
     font-size: 12px;
     height: 30px;
-    padding: 0 32px;
+    padding: 0 5px;
     font-weight: 400;
     line-height: 1.5;
     color: #495057;
@@ -49,19 +45,20 @@ export const InputSearchStyled = styled.div `
 
   svg {
     position: absolute;
-    fill: #666;
+    fill: #595959;
+    right: 5px;
+    width: 20px;
+    height: 20px;
 
     &.search-icon {
-      left: 15px;
-      width: 18px;
+      /* right: 5px;
+      width: 18px; */
     }
 
     &.remove-icon {
-      right: 17px;
-      color: #0b8eb2;
-      fill: #0b8eb2;
+      /* right: 5px; */
       cursor: pointer;
-      width: 12px;
+      /* width: 12px; */
     }
   }
 `;
@@ -106,34 +103,53 @@ export const PackageSharingStyled = styled.div `
   font-size: 13px;
   color: #666;
 
+  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_2};
+
   min-width: 400px;
   max-width: 400px;
 
   .div-info-account {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
     .div-info-left {
+      position: relative;
+      margin-bottom: 10px;
+
       img {
-        width: 84px;
-        height: 84px;
+        width: 80px;
+        height: 80px;
         border-radius: 50%;
-        border: 1px solid #fff;
-        box-shadow: 0 0 0 1px #e0e6eb;
         cursor: pointer;
         display: block;
       }
+
+      .edit-profile {
+        background-color: white;
+        border-radius: 100px;
+        position: absolute;
+        box-sizing: border-box;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        right: 0;
+        bottom: 0;
+        cursor: pointer;
+      }
     }
     .div-info-right {
-      margin-left: 25px;
+      margin-bottom: 15px;
       p {
         margin: 0;
       }
-      .edit-profile {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        color: #13abd7;
-        margin-top: 10px;
-        cursor: pointer;
+      & > p:first-child {
+        line-height: 18px;
+      }
+      & > p:last-child {
+        line-height: 13px;
       }
     }
   }
@@ -146,9 +162,6 @@ export const PackageSharingStyled = styled.div `
       margin-bottom: 10px;
     }
     .div-cover-account {
-      border-radius: 3px;
-      margin-bottom: 10px;
-      border: 1px solid #eee;
       min-height: 185px;
       position: relative;
 
@@ -173,21 +186,22 @@ export const PackageSharingStyled = styled.div `
           color: #999;
         }
 
-        .search-icon {
+        /* .search-icon {
           fill: #666;
           width: 18px;
           cursor: pointer;
-        }
+        } */
       }
       ul {
         overflow-y: auto;
         max-height: 143px;
         min-height: 108px;
         list-style: none;
-        padding: 0 10px 10px;
-        margin: 0;
+        padding: 0;
+        margin: 10px 0 0 0;
         li {
-          padding: 7px 80px 7px 5px;
+          padding: 8px 5px;
+          border-radius: 10px;
           cursor: pointer;
           display: block;
           overflow: hidden;
@@ -195,7 +209,7 @@ export const PackageSharingStyled = styled.div `
           white-space: nowrap;
           position: relative;
           &:hover {
-            background-color: #e4f9ff;
+            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
           }
 
           .account-name {
@@ -221,79 +235,39 @@ export const PackageSharingStyled = styled.div `
       }
     }
   }
-  .btn-grey {
-    background-color: #aaa;
-    border-bottom: 2px solid #999;
-    color: #fff;
-    font-weight: bold;
-    padding: 0 10px;
-    line-height: 29px;
-    margin-right: 0;
-    cursor: pointer;
-    border-radius: 2px;
-    min-width: 64px;
-    outline: none;
-    font-size: 13px;
-    height: 30px;
-    transition-duration: 0.2s;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    border: 1px solid transparent;
-  }
 
   .network-block {
-    .change-network-btn,
-    .back-btn {
-      color: #0b8eb2;
-      cursor: pointer;
-      font-size: 11px;
-      padding-right: 25px;
-      position: relative;
-      &:after {
-        --arrow-width: 6px;
-        content: '';
-        width: var(--arrow-width);
-        height: var(--arrow-width);
-        position: absolute;
-        right: 10px;
-        top: calc(50% - var(--arrow-width) / 2);
-        transform-origin: center center;
-        transform: rotate(45deg);
-        border: 2px solid #889199;
-        border-bottom: none;
-        border-left: none;
-      }
-    }
     .change-network-btn {
-      margin-left: auto;
-    }
-    .back-btn {
-      padding-right: 0;
-      padding-left: 20px;
-      &:after {
-        left: 10px;
-        border: 2px solid #889199;
-        border-top: none;
-        border-right: none;
+      flex-direction: row-reverse;
+      .antsomi-btn-icon {
+        margin-inline-end: 0 !important;
+        margin-inline-start: 8px;
       }
     }
     .current-network {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
+      & > div:has(img) {
+        width: 106px;
+        height: 42px;
+        padding: 10px;
+        border-radius: 10px;
+        border: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw4};
+
+        & img {
+          width: 100%;
+          height: auto;
+        }
+      }
     }
 
     .network-select {
       display: grid;
-      display: -ms-grid;
       grid-template-columns: 1fr 1fr 1fr;
-      -ms-grid-columns: 1fr 1fr 1fr;
       gap: 15px;
-      row-gap: 15px;
-      margin: 15px 0 0;
+      margin-top: 26px;
       max-height: 335px;
       overflow-y: auto;
       padding: 0 7px;
@@ -304,14 +278,16 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
         &:hover {
           .image-wrapper {
-            box-shadow: 1px 1px 2px 0 #aaa;
+            /* box-shadow: 1px 1px 2px 0 #aaa; */
+            background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue};
+            border-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue3};
           }
         }
         &.disabled {
           cursor: default;
           .image-wrapper {
-            background: #eaeaea;
-            box-shadow: none;
+            background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1};
+            border-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7};
             img {
               cursor: default;
             }
@@ -320,7 +296,7 @@ export const PackageSharingStyled = styled.div `
         .image-wrapper {
           border: 1px solid #ddd;
           padding: 10px;
-          border-radius: 4px;
+          border-radius: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.borderRadius}px;
           transition: all 0.2s ease-in-out;
           width: 108px;
           height: 45px;
@@ -329,13 +305,15 @@ export const PackageSharingStyled = styled.div `
           }
         }
         .network-name {
-          color: #333;
-          margin: 10px 0 0;
-          padding: 0 5px;
+          color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw8};
           font-size: 11px;
+          margin-top: 5px;
+          margin-bottom: 0;
           text-align: center;
+          /* margin: 10px 0 0;
+          padding: 0 5px;
           max-height: 28px;
-          line-height: 1.27;
+          line-height: 1.27; */
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -347,3 +325,9 @@ export const PackageSharingStyled = styled.div `
     }
   }
 `;
+export const InnerCardStyled = styled.div `
+  background-color: white;
+  border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
+  padding: 10px;
+  margin-bottom: 15px;
+`;

package/package.json

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