@antscorp/antsomi-ui 1.3.5-beta.435 → 1.3.5-beta.436

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

@@ -24,6 +24,7 @@ interface TUseDataTableListing<TTableType = any> {
         getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
         getSearchListing: ReturnType<typeof useGetSearchListing>;
     };
+    onChangeSelectedRow: (selectedRowKeys: React.Key[], selectedRows?: TTableType[]) => void;
     setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }
 type TState<TTableType = any> = {

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

@@ -75,7 +75,7 @@ export function useDataTableListing(props) {
     const _f = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _f, restOfApiSearchRequest = __rest(_f, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, } = state;
     const { externalFilters, includeDataType = false } = filterProps || {};
-    const { sortDirectionKey = 'az' } = tableProps || {};
+    const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
     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 });
@@ -471,6 +471,14 @@ export function useDataTableListing(props) {
             pageSize,
         });
     }, [handleUpdatePagination]);
+    const onChangeSelectedRow = useCallback((selectedRowKeys, selectedRows) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: {
+                keys: selectedRowKeys,
+                rows: selectedRows ||
+                    (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(key => tableData === null || tableData === void 0 ? void 0 : tableData.find(row => { var _a; return ((_a = row[mainColumnKey]) === null || _a === void 0 ? void 0 : _a.toString()) === key.toString(); })).filter(Boolean)) ||
+                    [],
+            } })));
+    }, [mainColumnKey, tableData]);
     return {
         /* Modify Column */
         modifyColumn: {
@@ -506,10 +514,8 @@ export function useDataTableListing(props) {
             dataSource: tableData,
             columnWidths: table.columnWidths || {},
             rowSelection: {
-                selectedRowKeys,
-                onChange(selectedRowKeys, selectedRows) {
-                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: { keys: selectedRowKeys, rows: selectedRows } })));
-                },
+                selectedRowKeys: selectedRow.keys || [],
+                onChange: onChangeSelectedRow,
             },
             onChange: onChangeTable,
             onColumnResize(data) {
@@ -549,6 +555,7 @@ export function useDataTableListing(props) {
             getSearchListing,
         },
         // Handles
+        onChangeSelectedRow,
         setDatTableListingState: setState,
     };
 }

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -20,7 +20,6 @@ import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './
 // Components
 import { Checkbox, Scrollbars, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
-import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
@@ -118,8 +117,7 @@ export const CategoryListing = memo(props => {
         header,
         React.createElement(Scrollbars, { className: "category__listing" },
             React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
-                isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-                    React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: ({ isOpen }) => {
+                React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: ({ isOpen }) => {
                         var _a;
                         return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
                                 fontSize: 20,
@@ -139,7 +137,7 @@ export const CategoryListing = memo(props => {
                     //     }}
                     //   />
                     // }
-                    onClick: handleClickMenu }, restOfProps))),
+                    onClick: handleClickMenu }, restOfProps)),
                 footer)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.435",
+  "version": "1.3.5-beta.436",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -111,6 +111,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
+    "react-konva": "^18.2.10",
     "react-intersection-observer": "^9.10.3",
     "react-konva": "^18.2.10",
     "react-markdown": "^8.0.7",