@antscorp/antsomi-ui 1.3.5-beta.414 → 1.3.5-beta.416

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

@@ -1,6 +1,8 @@
 var _a, _b, _c;
+// Libraries
 import styled from 'styled-components';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const HeaderV2Styled = styled.div `
   height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
   background-color: #f6f8fc;
@@ -42,6 +44,7 @@ export const HeaderV2Styled = styled.div `
     font-size: 20px;
     line-height: 23px;
     font-weight: bold;
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextBase};
   }
 `;
 export const LogoWrapper = styled.div `

package/es/components/molecules/ModalSelect/Card.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
-import { Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import clsx from 'clsx';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text, Paragraph } = Typography;
@@ -20,22 +20,42 @@ export const Card = (props) => {
     return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
 };
 export const CardDefination = (props) => {
+    const refreshKey = useRef(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [expandable, setExpandable] = useState(true);
     const { title, description, descriptionEllipsis = {
         rows: 3,
         symbol: 'Learn more',
-        expandable: true,
         tooltip: true,
     }, } = props;
+    useEffect(() => {
+        if (!expandable) {
+            setExpandable(true);
+        }
+    }, [expandable]);
+    const handleCollapse = () => {
+        refreshKey.current += 1;
+        setExpandable(false);
+    };
     return (React.createElement(CardDefinationContainer, null,
         title && React.createElement(Text, { className: "title" }, title),
-        description && (React.createElement(Paragraph, { ellipsis: descriptionEllipsis, className: "description" }, description))));
+        description && (React.createElement(Paragraph, { key: refreshKey.current, ellipsis: Object.assign(Object.assign({}, descriptionEllipsis), { expandable, onExpand: () => setIsExpanded(true) }), className: "description" },
+            description,
+            isExpanded && (React.createElement("span", { className: "antsomi-typography-collapse", onClick: handleCollapse }, "View less"))))));
 };
 export const CardRecommended = (props) => {
     const { title, recomendations = [] } = props;
     return (React.createElement(CardRecommendedContainer, null,
         title && React.createElement(Text, { className: "title" }, title),
         React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
-            const { className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
-            return (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+            const { description, className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
+            const item = (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+            if (typeof description === 'string') {
+                return (React.createElement(Tooltip, { title: description, placement: "top" }, item));
+            }
+            if (description) {
+                return React.createElement(Tooltip, Object.assign({}, description), item);
+            }
+            return item;
         }))));
 };

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

@@ -125,6 +125,12 @@ export const CardDefinationContainer = styled.div `
     .antsomi-typography-expand {
       font-weight: 500;
     }
+
+    .antsomi-typography-collapse {
+      font-weight: 500;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      cursor: pointer;
+    }
   }
 `;
 export const CardRecommendedContainer = styled.div `

package/es/components/molecules/ModalSelect/types.d.ts

@@ -1,6 +1,7 @@
 import React, { RefCallback } from 'react';
 import { MenuProps, ModalProps, TagProps } from 'antd';
 import { EllipsisConfig } from 'antd/es/typography/Base';
+import { TooltipProps } from 'antd/lib';
 export type ModalSelectProps = {
     open?: boolean;
     value?: string;
@@ -23,5 +24,6 @@ export type CardRecommendedProps = {
     title?: string;
     recomendations?: (TagProps & {
         key?: React.Key;
+        description?: string | TooltipProps;
     })[];
 };

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

@@ -17,7 +17,7 @@ export declare const ROLE_ACCESS_LABEL: {
     2: string;
     3: string;
 };
-export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment' | 'accessType'>>;
+export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
 export declare const PEOPLE_ACTION_KEYS: {
     readonly TO_VIEWER: "to_viewer";
     readonly TO_EDITOR: "to_editor";

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

@@ -22,30 +22,18 @@ export const ACCESS_PROPERTIES_BY_ROLE = {
         allowView: 1,
         allowEdit: 1,
         allowComment: 1,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER].toLowerCase(),
-        },
     },
     [ROLE_MAPPING.EDITOR]: {
         role: ROLE_MAPPING.EDITOR,
         allowView: 1,
         allowEdit: 1,
         allowComment: 1,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.EDITOR],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.EDITOR].toLowerCase(),
-        },
     },
     [ROLE_MAPPING.VIEWER]: {
         role: ROLE_MAPPING.VIEWER,
         allowView: 1,
         allowEdit: 0,
         allowComment: 0,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.VIEWER],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.VIEWER].toLowerCase(),
-        },
     },
 };
 export const PEOPLE_ACTION_KEYS = {

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

@@ -1,11 +1,12 @@
 import produce from 'immer';
 import { TYPES } from './actions';
+import { mappingOutData } from './utils';
 export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             draft.accessInfo = action.payload;
             if (onChange) {
-                onChange(action.payload);
+                onChange(mappingOutData(action.payload));
             }
             break;
         }

package/es/components/molecules/ShareAccess/types.d.ts

@@ -13,17 +13,13 @@ export type UserInfo = {
 };
 export type UserAccessInfo = {
     userId: number;
-    fullName: string;
-    email: string;
-    avatar: string;
+    fullName?: string;
+    email?: string;
+    avatar?: string;
     role: number;
     allowView: number;
     allowEdit: number;
     allowComment: number;
-    accessType: {
-        label: string;
-        value: string;
-    };
     [key: string]: any;
 };
 export type ObjectAccessInfo = {

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -1,4 +1,4 @@
-import { ObjectAccessInfo, UserInfo } from './types';
+import { ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -41,18 +41,20 @@ export declare const formattedAccessInfo: (accessInfo: ObjectAccessInfo) => {
     ownerId: number;
     listAccess: {
         userId: number;
-        fullName: string;
-        email: string;
-        avatar: string;
+        fullName?: string | undefined;
+        email?: string | undefined;
+        avatar?: string | undefined;
         role: number;
         allowView: number;
         allowEdit: number;
         allowComment: number;
-        accessType: {
-            label: string;
-            value: string;
-        };
     }[];
     isPublic: number;
     publicRole: number | null;
 };
+export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
+    isPublic: number;
+    publicRole: number | null;
+    ownerId: number;
+    listAccess: UserAccessInfo[];
+};

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

@@ -59,10 +59,7 @@ export const getActionsByUser = (args) => {
 export const initAccessInfoDefault = (userInfo) => ({
     ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
     listAccess: [
-        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1, accessType: {
-                label: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER],
-                value: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER].toLowerCase(),
-            } }),
+        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
     ],
     publicRole: PUBLIC_ROLE.ONLY_VIEWER,
     isPublic: 0,
@@ -71,3 +68,17 @@ export const formattedAccessInfo = (accessInfo) => {
     var _a;
     return (Object.assign(Object.assign({}, accessInfo), { ownerId: +((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.ownerId) || -1), listAccess: (_a = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) === null || _a === void 0 ? void 0 : _a.map(user => (Object.assign(Object.assign({}, user), { userId: +user.userId }))) }));
 };
+export const mappingOutData = (shareAccess) => {
+    const result = Object.assign({}, shareAccess);
+    result.listAccess = result.listAccess.map(accessInfo => {
+        const roleLabel = ROLE_ACCESS_LABEL[accessInfo.role];
+        if (typeof roleLabel === 'string') {
+            accessInfo.accessType = {
+                label: roleLabel,
+                value: roleLabel.toLowerCase(),
+            };
+        }
+        return accessInfo;
+    });
+    return result;
+};

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

@@ -22,6 +22,7 @@ const StyledAddButton = styled(Flex) `
   height: 30px;
   background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
   color: #fff;
+  flex-shrink: 0;
   cursor: pointer;
 `;
 export const AddButton = memo(props => {

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

@@ -38,7 +38,13 @@ export const Toolbar = memo(() => {
         if (addButtonComponent) {
             return (React.createElement(React.Fragment, null,
                 addButtonComponent,
-                React.createElement(Divider, { dashed: true, type: "vertical", style: { height: 38, margin: '0px 10px', borderWidth: 2, borderSpacing: 5 } })));
+                React.createElement(Divider, { dashed: true, type: "vertical", style: {
+                        height: 38,
+                        margin: '0px 10px',
+                        borderWidth: 2,
+                        borderSpacing: 5,
+                        borderLeftStyle: 'dotted',
+                    } })));
         }
         return null;
     };
@@ -54,6 +60,7 @@ export const Toolbar = memo(() => {
                         margin: '0px 5px',
                         borderWidth: 2,
                         borderSpacing: 5,
+                        borderLeftStyle: 'dotted',
                     } }),
                 React.createElement(CollapseButton, { "$collapsed": !!collapsed, onClick: () => onCollapse && onCollapse(!collapsed) },
                     React.createElement(Icon, { type: "icon-ants-angle-down", size: 12 })))))) : (React.createElement(FilterActionButton, null))));

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -47,6 +47,9 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
         render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
     };
+    filter?: {
+        externalFilters?: FilterItem[];
+    };
 }
 export interface DataTableLocalStorage {
     filter?: {

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -54,7 +54,7 @@ const initialState = {
 };
 export function useDataTableListing(props) {
     // Props
-    const { config, name = 'default', table: tableProps, search: searchProps } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, } = props || {};
     // Hooks
     const { appConfig } = useAppConfigContext();
     // State
@@ -67,6 +67,7 @@ export function useDataTableListing(props) {
     const _c = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _c, restOfApiListingRequest = __rest(_c, ["url", "enabled"]);
     const _d = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _d, restOfApiSearchRequest = __rest(_d, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue } = state;
+    const { externalFilters } = filterProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
@@ -129,7 +130,7 @@ export function useDataTableListing(props) {
             params: {
                 limit: pagination.pageSize,
                 page: pagination.page,
-                filter: JSON.stringify(mapFiltersToApiFilters(filters || [])),
+                filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])])),
             },
             request: restOfApiListingRequest,
         },
@@ -285,6 +286,12 @@ export function useDataTableListing(props) {
             setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
         }
     }, [localStorageValues]);
+    // /** Update filters from external filters */
+    // useDeepCompareEffect(() => {
+    //   if (externalFilters) {
+    //     setState(prev => ({ ...prev, filters: [...(filters || []), ...externalFilters] }));
+    //   }
+    // }, [externalFilters]);
     // Handlers
     /* Modify Column */
     const handleUpdatePagination = useCallback((pagination) => {

package/es/constants/queries.d.ts

@@ -28,6 +28,7 @@ export declare const QUERY_KEYS: {
     GET_RECENT_ACCOUNT: string;
     GET_ABSTRACT_USERS: string;
     GET_COLUMN_METRICS: string;
+    GET_DATA_TABLE_LISTING: string;
     GET_MODIFY_COLUMN_LIST: string;
     GET_SAVED_FILTER_LIST: string;
     GET_FILTER_METRIC_LIST: string;

package/es/constants/queries.js

@@ -41,6 +41,7 @@ export const QUERY_KEYS = {
     GET_ABSTRACT_USERS: 'GET_ABSTRACT_USERS',
     // DATA TABLE
     GET_COLUMN_METRICS: 'GET_COLUMN_METRICS',
+    GET_DATA_TABLE_LISTING: 'GET_DATA_TABLE_LISTING',
     GET_MODIFY_COLUMN_LIST: 'GET_MODIFY_COLUMN_LIST',
     GET_SAVED_FILTER_LIST: 'GET_SAVED_FILTER_LIST',
     GET_FILTER_METRIC_LIST: 'GET_FILTER_METRIC_LIST',

package/es/queries/DataTable/index.js

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { dataTableServices, } from '../../services/DataTable';
 // Constants
 import { QUERY_KEYS } from '../../constants';
-const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, } = QUERY_KEYS;
+const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, GET_DATA_TABLE_LISTING, } = QUERY_KEYS;
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
@@ -80,7 +80,7 @@ export const useDeleteSavedFilter = (params) => {
 /* Table Listing */
 export const useGetTableListing = (params) => {
     const { options, args } = params || {};
-    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_DATA_TABLE_LISTING, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
 };
 export const useGetSearchListing = (params) => {
     const { args, options } = params || {};

package/package.json

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