@antscorp/antsomi-ui 1.3.5-beta.415 → 1.3.5-beta.417

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/Table/ResizableCell.d.ts

@@ -4,6 +4,7 @@ interface HandleProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'onResize'> {
     onResize?: (e: React.SyntheticEvent<Element, Event>, data: ResizeCallbackData) => void;
+    onResizeStop?: (e: React.SyntheticEvent<Element, Event>, data: ResizeCallbackData) => void;
     width?: number;
     handleProps?: HandleProps;
     disableResize?: boolean;

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

@@ -17,7 +17,7 @@ import { MIN_COLUMN_WIDTH } from '../../constants';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ResizableCell = props => {
     var _a;
-    const { width, handleProps, disableResize, onResize, children, style, fixed, index, tableRef } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "onResize", "children", "style", "fixed", "index", "tableRef"]);
+    const { width, handleProps, disableResize, children, style, fixed, index, tableRef, onResize, onResizeStop } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "children", "style", "fixed", "index", "tableRef", "onResize", "onResizeStop"]);
     // Memos
     const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
     const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
@@ -37,8 +37,8 @@ export const ResizableCell = props => {
     };
     return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
                 e.stopPropagation();
-            }, onMouseEnter: () => toggleCellClass(), onMouseLeave: () => toggleCellClass() },
-            React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: true } },
+            } },
+            React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), onResizeStop: (...args) => onResizeStop && onResizeStop(...args), draggableOpts: { enableUserSelectHack: true } },
         React.createElement("th", Object.assign({}, restProps, { style: columnStyle }),
             React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, children))));
 };

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

@@ -14,7 +14,7 @@ import { useDataTableContext } from '../../contexts/DataTableContext';
 // Constants
 import { DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_ROW_SELECTION_WIDTH, } from '../../constants';
 export const Table = memo(() => {
-    var _a;
+    var _a, _b;
     // Store
     const tableProps = useDataTableContext(useShallow(store => store.table));
     const setTable = useDataTableContext(useShallow(store => store.setTable));
@@ -28,13 +28,17 @@ export const Table = memo(() => {
     // Ref
     const tableRef = useRef(null);
     // Variables
-    const { scroll } = tableProps;
+    const { scroll, columnWidths } = tableProps;
     // Handles
-    const handleResize = useCallback((index) => (e, { size }) => {
+    const onResize = useCallback((index) => (e, { size }) => {
         const nextColumns = cloneDeep(columns || []);
         nextColumns[index] = Object.assign(Object.assign({}, nextColumns[index]), { width: size.width });
         setState(prev => (Object.assign(Object.assign({}, prev), { columns: nextColumns })));
     }, [columns]);
+    const onResizeStop = useCallback((index) => (e, { size }) => {
+        var _a;
+        (_a = tableProps.onColumnResize) === null || _a === void 0 ? void 0 : _a.call(tableProps, { index, width: size.width });
+    }, [tableProps]);
     const calculateLastColWidth = (col) => {
         var _a, _b;
         // If last column is fixed then return full rest of width
@@ -54,15 +58,16 @@ export const Table = memo(() => {
                         var _a, _b;
                         return (Object.assign(Object.assign({}, col), { width: index === (((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1
                                 ? calculateLastColWidth(col)
-                                : (_b = col.width) !== null && _b !== void 0 ? _b : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH) }));
+                                : (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[index]) ||
+                                    ((_b = col.width) !== null && _b !== void 0 ? _b : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH)) }));
                     }) }));
             });
         }
-    }, [tableProps.columns]);
+    }, [(_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map(col => col.width), columnWidths]);
     return (React.createElement(StyledTable, Object.assign({}, tableProps, { virtual: true, ref: ref => {
             tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
         }, scroll: Object.assign(Object.assign({}, scroll), { y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || '500px', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {
-            header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
+            header: Object.assign({ cell: ResizableCell }, (_b = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _b === void 0 ? void 0 : _b.header),
         } }, (!!(tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource) && {
         rowSelection: Object.assign(Object.assign({ fixed: true, columnWidth: DEFAULT_ROW_SELECTION_WIDTH }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection), { onChange(selectedRowKeys, selectedRows, info) {
                 var _a, _b;
@@ -82,7 +87,8 @@ export const Table = memo(() => {
                 //     height: tableRef?.current?.clientHeight,
                 //   },
                 // },
-                onResize: handleResize(index),
+                onResize: onResize(index),
+                onResizeStop: onResizeStop(index),
             }) }))), bordered: true, pagination: false, loading: {
             indicator: React.createElement(Spin, null),
             spinning: !!tableProps.loading,

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

@@ -51,11 +51,12 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         externalFilters?: FilterItem[];
     };
 }
-export interface DataTableLocalStorage {
+export interface DataTableLocalStorage<TTableType = any> {
     filter?: {
         selectedFilterId?: string;
         filters?: FilterItem[];
     };
+    table?: TableProps<TTableType>;
     pagination?: PaginationProps;
 }
 export {};

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

@@ -48,6 +48,7 @@ const initialState = {
     },
     table: {
         loading: false,
+        columnWidths: {},
     },
     selectedRowKeys: [],
     searchValue: '',
@@ -66,7 +67,7 @@ export function useDataTableListing(props) {
     const _b = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _b, restOfApiFilterRequest = __rest(_b, ["url", "enabled"]);
     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 { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table } = state;
     const { externalFilters } = filterProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
@@ -276,7 +277,7 @@ export function useDataTableListing(props) {
      * Update values from local storage to state
      */
     useDeepCompareEffect(() => {
-        const { filter, pagination } = localStorageValues || {};
+        const { filter, pagination, table } = localStorageValues || {};
         if (!isEmpty(filter)) {
             const { filters, selectedFilterId } = filter || {};
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
@@ -285,6 +286,9 @@ export function useDataTableListing(props) {
         if (!isEmpty(pagination)) {
             setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
         }
+        if (!isEmpty(table)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { table })));
+        }
     }, [localStorageValues]);
     // /** Update filters from external filters */
     // useDeepCompareEffect(() => {
@@ -376,6 +380,11 @@ export function useDataTableListing(props) {
         // Set Local Storage
         localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter) })));
     }, [localStorageKey, localStorageValues]);
+    const handleUpdateTable = useCallback((table) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { table: Object.assign(Object.assign({}, prev.table), table) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table) })));
+    }, [localStorageKey, localStorageValues]);
     const onChangeFilters = useCallback((filters) => {
         handleUpdateFilter({
             filters,
@@ -470,12 +479,19 @@ export function useDataTableListing(props) {
             loading: isTableListingLoading || isTableListingRefetching,
             columns: tableColumns,
             dataSource: tableData,
+            columnWidths: table.columnWidths || {},
             rowSelection: {
                 selectedRowKeys,
                 onChange(selectedRowKeys) {
                     setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys })));
                 },
             },
+            onColumnResize(data) {
+                const { index, width } = data;
+                handleUpdateTable({
+                    columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
+                });
+            },
         },
         selectedRowKeys,
         /* Search */

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

@@ -4,6 +4,11 @@ import { ToolbarProps } from './toolbar';
 import { FilterProps } from './filter';
 import { PaginationProps } from '../components';
 export interface TableProps<T> extends AntdTableProps<T> {
+    columnWidths?: Record<number, number>;
+    onColumnResize?: (data: {
+        index: number;
+        width: number;
+    }) => void;
 }
 export interface ModifyColumnProps {
 }

package/package.json

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