@antscorp/antsomi-ui 1.3.5-beta.522 → 1.3.5-beta.524

package/es/components/molecules/ShareAccess/components/GeneralAccess/GeneralAccess.js

@@ -57,7 +57,7 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
                     } },
                     React.createElement("div", { className: "general-dropdown-wrapper" },
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
-                        allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
+                        allowEdit && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } })))),
                 React.createElement("div", { className: "description" }, renderDescription())),
             !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
@@ -75,5 +75,5 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
                 } },
                 React.createElement("div", { className: "public-role-dropdown-wrapper" },
                     React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
-                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))))))));
+                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } }))))))));
 };

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -6,8 +6,7 @@ export const StyledGeneralAccessRoot = styled.div `
   flex-direction: column;
 
   .title {
-    margin-bottom: 12px;
-    font-weight: bold;
+    margin-bottom: 10px;
   }
 
   .setting {
@@ -15,13 +14,13 @@ export const StyledGeneralAccessRoot = styled.div `
     justify-content: space-between;
     border: 1px solid #e6e6e6;
     border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
-    padding: 8px;
+    padding: 15px;
 
-    .icon-angle {
+    /* .icon-angle {
       font-size: 10px;
       display: flex;
       align-items: center;
-    }
+    } */
 
     .accessable-icon {
       font-size: 28px;

package/es/components/molecules/ShareAccess/components/LayoutContent/styled.js

@@ -3,5 +3,5 @@ export const StyledLayoutContentRoot = styled.div `
   font-size: 12px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 20px;
 `;

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -104,6 +104,6 @@ export const PeopleAccess = (props) => {
                         } },
                         React.createElement("div", { className: "role-actions" },
                             React.createElement("div", { className: "role" }, ROLE_ACCESS_LABEL[access.role] || ''),
-                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-angle-down", style: { fontSize: 10 } }))))));
+                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20 } }))))));
             } })));
 };

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -6,8 +6,7 @@ export const StyledPeopleAccessRoot = styled.div `
   flex-direction: column;
 
   .title {
-    margin-bottom: 12px;
-    font-weight: bold;
+    margin-bottom: 10px;
   }
 
   .antsomi-list {
@@ -15,12 +14,19 @@ export const StyledPeopleAccessRoot = styled.div `
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {
-      padding: 0;
+      /* padding: 0; */
+      padding: 15px;
 
       .antsomi-list-item {
-        padding: 8px;
+        /* padding: 8px; */
+        padding: 0;
+        margin-bottom: 15px;
         border: none;
 
+        &:last-child {
+          margin-bottom: 0;
+        }
+
         .info {
           flex: 1;
           margin-left: 15px;
@@ -34,6 +40,10 @@ export const StyledPeopleAccessRoot = styled.div `
           }
         }
 
+        /* .antsomi-avatar {
+          align-self: flex-start;
+        } */
+
         .role-actions {
           display: flex;
           align-items: center;
@@ -43,6 +53,10 @@ export const StyledPeopleAccessRoot = styled.div `
             cursor: pointer;
           }
         }
+
+        /* .role-actions :not(i) {
+          align-self: flex-start !important;
+        } */
       }
     }
   }

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -7,16 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useMemo, useState } from 'react';
-import { Avatar, AutoComplete } from 'antd';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
-import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 import { isEmail } from '@antscorp/antsomi-ui/es/utils';
-import { useShareAccess } from '../../hooks';
+import { AutoComplete, Avatar, Input } from 'antd';
 import produce from 'immer';
-import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import React, { useEffect, useMemo, useState } from 'react';
 import { updateObjAccessInfo } from '../../actions';
-import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 export const SearchUser = (props) => {
     const { getUserInfo, placeholder = 'Add people' } = props;
     const { state, dispatch } = useShareAccess();
@@ -72,18 +72,32 @@ export const SearchUser = (props) => {
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(AutoComplete, { placeholder: placeholder, value: searchTerm, onSearch: v => setSearchTerm(v), notFoundContent: isFetching ? (React.createElement(Spin, { style: {
-                    width: '100%',
-                    height: '40px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, indicatorSize: 28 })) : null, options: (excludedUsers || []).map(user => ({
+        React.createElement(AutoComplete, { value: searchTerm, onSearch: v => setSearchTerm(v), notFoundContent: null, 
+            // TODO: move to inline Input loading - prevent annoying effect when isFetching so fast
+            // notFoundContent={
+            //   isFetching ? (
+            //     <Spin
+            //       style={{
+            //         width: '100%',
+            //         height: '40px',
+            //         display: 'flex',
+            //         alignItems: 'center',
+            //         justifyContent: 'center',
+            //       }}
+            //       indicatorSize={28}
+            //     />
+            //   ) : null
+            // }
+            options: (excludedUsers || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),
                     React.createElement("div", { className: "info" },
                         React.createElement("div", { className: "name" }, user.user_name),
                         React.createElement("div", { className: "email" }, user.email)))),
-            })) })));
+            })) },
+            React.createElement(Input, { style: { padding: '5px' }, placeholder: placeholder, suffix: isFetching ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : (
+                // TODO: empty span for Input don't lose focus when fetching
+                // https://ant.design/components/input#why-input-lose-focus-when-change-prefixsuffixshowcount
+                React.createElement("span", null)), autoFocus: true }))));
 };

package/es/components/organism/DataTable/components/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FlexProps } from 'antd/lib';
 export type TChangePageSizePayload = {
     pageSize: number;
@@ -8,6 +8,7 @@ export interface PaginationProps extends Omit<FlexProps, 'children' | 'onChange'
     page?: number;
     pageSize?: number;
     total?: number;
+    extraContent?: ReactNode;
     onChange?: (payload: TChangePageSizePayload) => void;
 }
 export declare const Pagination: React.FC<PaginationProps>;

package/es/components/organism/DataTable/components/Pagination/index.js

@@ -25,7 +25,7 @@ import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../consta
 const { Text } = Typography;
 export const Pagination = props => {
     // Props
-    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "onChange"]);
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, extraContent, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "extraContent", "onChange"]);
     // Instance
     const { t } = i18nInstance;
     // Memo
@@ -40,20 +40,22 @@ export const Pagination = props => {
                 pageSize }, payload));
         }
     };
-    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", gap: 10 }, restProps),
-        React.createElement(Flex, { align: "center", gap: 10 },
-            React.createElement(Text, null,
-                t(translations.pagination.showRow).toString(),
-                ":"),
-            React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
-        React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total)} of ${total}`),
-        React.createElement(Flex, { align: "center", gap: 10 },
-            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
-                React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
-            React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
-                React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
-            React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
-                React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
-            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
-                React.createElement(Icon, { type: "icon-ants-last-page", size: 12 })))));
+    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", justify: extraContent ? 'space-between' : 'flex-end', gap: 10 }, restProps),
+        extraContent,
+        React.createElement(Flex, { align: "center", gap: 10, style: { flexShrink: 0, height: 'fit-content', alignSelf: 'flex-end' } },
+            React.createElement(Flex, { align: "center", gap: 10 },
+                React.createElement(Text, null,
+                    t(translations.pagination.showRow).toString(),
+                    ":"),
+                React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
+            React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total)} of ${total}`),
+            React.createElement(Flex, { align: "center", gap: 10 },
+                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
+                    React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
+                React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
+                    React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
+                React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
+                    React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
+                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
+                    React.createElement(Icon, { type: "icon-ants-last-page", size: 12 }))))));
 };

package/es/components/organism/DataTable/components/Pagination/styled.js

@@ -5,7 +5,8 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const PaginationWrapper = styled(Flex) `
-  height: 60px;
+  flex-shrink: 0;
+  min-height: 40px;
 
   .show-row-select {
     width: 50px;

package/es/components/organism/DataTable/components/Table/styled.js

@@ -69,6 +69,10 @@ export const StyledTable = styled(Table) `
       .antsomi-table-cell[aria-resizable='true'] {
         border-inline-end: 2px solid ${blue1} !important;
       }
+
+      .antsomi-table-cell {
+        overflow: hidden;
+      }
     }
   }
 

package/es/components/organism/DataTable/styled/index.js

@@ -9,11 +9,6 @@ export const DataTableWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 100%;
-
-  #data-table-pagination {
-    margin-top: 5px;
-    justify-content: flex-end;
-  }
 `;
 export const IconButton = styled.div `
   width: 20px;

package/es/components/organism/LeftMenu/hooks/usePermission.js

@@ -7,8 +7,10 @@ import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMe
 import { useLeftMenuContext } from '../contexts';
 // Constants
 import { CDP_API, PERMISSION_API, POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Utils
 import { findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+const { DEV, SANDBOX, SANDBOX_CDP } = ENV;
 export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
     const isCustomized = useLeftMenuContext(store => store.isCustomized);
@@ -21,11 +23,11 @@ export const usePermission = () => {
         args: {
             auth: {
                 // token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || auth?.token,
-                token: ['development', 'sandbox'].includes(env)
+                token: [DEV, SANDBOX, SANDBOX_CDP].includes(env)
                     ? '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4'
                     : auth === null || auth === void 0 ? void 0 : auth.token,
                 // url: 'https://sandbox-permission.ants.vn',
-                url: ['development', 'sandbox'].includes(env)
+                url: [DEV, SANDBOX, SANDBOX_CDP].includes(env)
                     ? 'https://sandbox-permission.ants.vn'
                     : permissionDomain || PERMISSION_API, // NOTE: Hard for sandbox, development
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,

package/es/models/DataTable/DataTableListing.d.ts

@@ -10,6 +10,7 @@ export type DataTableHeaderItem = {
     label: string;
     name: string;
     sortable: boolean;
+    isSort?: string;
     type: number;
 };
 export type DataTableColumnDefItem = {

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -304,10 +304,6 @@ export const GlobalStyle = () => {
       .antsomi-select-dropdown {
         padding: 8px 0 !important;
         z-index: 3002 !important;
-
-        /* .antsomi-select-item:not(:last-child) {
-          margin-bottom: 6px;
-        } */
       }
 
       .antsomi-select-selection-overflow {

package/es/utils/dataTable.d.ts

@@ -1,5 +1,6 @@
 import { DataTableColumnDefItem, DataTableHeaderItem } from '../models/DataTable/DataTableListing';
 export declare const mapColumnDefItemToGeneral: (columnDefItem: DataTableColumnDefItem) => DataTableHeaderItem;
+export declare const mapColumnToGeneral: ({ sortable, isSort, ...restOfColumn }: DataTableHeaderItem) => DataTableHeaderItem;
 export declare const mapResponseListingToGeneral: (response: Record<string, any>) => {
     body: any;
     header: any;

package/es/utils/dataTable.js

@@ -1,3 +1,14 @@
+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;
+};
 export const mapColumnDefItemToGeneral = (columnDefItem) => ({
     editable: false,
     fixColumn: false,
@@ -6,13 +17,19 @@ export const mapColumnDefItemToGeneral = (columnDefItem) => ({
     sortable: !!parseInt(columnDefItem.enableSorting),
     type: parseInt(columnDefItem.type),
 });
+export const mapColumnToGeneral = (_a) => {
+    var { sortable, isSort } = _a, restOfColumn = __rest(_a, ["sortable", "isSort"]);
+    return (Object.assign(Object.assign({}, restOfColumn), { 
+        /** Convert isSort to boolean */
+        sortable: isSort === '1' ? true : sortable }));
+};
 // NOTES: Improve typescript
 export const mapResponseListingToGeneral = (response) => {
     const { body, header, total, entries, column_defs, rows, total_records } = response || {};
     return {
         body: body || entries || rows || [],
-        header: header ||
-            column_defs.map(columnDefItem => mapColumnDefItemToGeneral(columnDefItem || {})) ||
+        header: (header === null || header === void 0 ? void 0 : header.map(col => mapColumnToGeneral(col || {}))) ||
+            (column_defs === null || column_defs === void 0 ? void 0 : column_defs.map(columnDefItem => mapColumnDefItemToGeneral(columnDefItem || {}))) ||
             [],
         total: total || total_records || 0,
     };

package/package.json

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