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

package/es/components/molecules/ImageEditor/index.d.ts

@@ -1 +1 @@
-export { ImageEditor, ImageResizeHandle } from './ImageEditor';
+export { ImageEditor, type ImageResizeHandle } from './ImageEditor';

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
@@ -51,19 +55,25 @@ export const Table = memo(() => {
             setState(prev => {
                 var _a;
                 return (Object.assign(Object.assign({}, prev), { columns: (_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map((col, index) => {
-                        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) }));
+                        var _a;
+                        return (Object.assign(Object.assign({}, col), { 
+                            // width:
+                            //   index === (tableProps.columns?.length || 1) - 1
+                            //     ? calculateLastColWidth(col)
+                            //     : columnWidths?.[index] ||
+                            //       (col.width ?? (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH)),
+                            width: (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[index]) ||
+                                ((_a = col.width) !== null && _a !== void 0 ? _a : (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),
-        } }, (!!(tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource) && {
+            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) &&
+        !!(tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection) && {
         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;
                 setTable({
@@ -77,12 +87,8 @@ export const Table = memo(() => {
                 fixed: column.fixed,
                 width: column.width,
                 index,
-                // handleProps: {
-                //   style: {
-                //     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 });
@@ -249,19 +250,19 @@ export function useDataTableListing(props) {
             return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined }, columns === null || columns === void 0 ? void 0 : columns[name]), { render(value, record, index) {
                     var _a;
                     const { link } = (columns === null || columns === void 0 ? void 0 : columns[name]) || {};
-                    const renderComponent = (React.createElement(Text, { ellipsis: { tooltip: true }, style: Object.assign({}, (link
+                    const RenderComponent = (React.createElement(Text, { ellipsis: { tooltip: true }, style: Object.assign({}, (link
                             ? {
                                 fontWeight: globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontWeightStrong,
                                 color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary,
                             }
                             : {})) }, typeof value !== 'object' ? value || DEFAULT_CELL_EMPTY : DEFAULT_CELL_EMPTY));
                     if ((_a = columns === null || columns === void 0 ? void 0 : columns[name]) === null || _a === void 0 ? void 0 : _a.render) {
-                        return columns[name].render(value, record, index, renderComponent);
+                        return columns[name].render(value, record, index, RenderComponent);
                     }
                     if (link) {
-                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, renderComponent));
+                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent));
                     }
-                    return renderComponent;
+                    return RenderComponent;
                 } });
         })) || []);
         return data;
@@ -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.416",
+  "version": "1.3.5-beta.418",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",