@antscorp/antsomi-ui 1.3.5-beta.420 → 1.3.5-beta.422

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

@@ -13,6 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useMemo } from 'react';
 import { Resizable } from 'react-resizable';
 import { MIN_COLUMN_WIDTH } from '../../constants';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ResizableCell = props => {
     var _a;
     const { width, handleProps, disableResize, children, style, fixed, index, tableRef, onResize, onResizeStop, onClick = () => { } } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "children", "style", "fixed", "index", "tableRef", "onResize", "onResizeStop", "onClick"]);
@@ -20,7 +22,7 @@ export const ResizableCell = props => {
     const isResizing = React.useRef(false);
     // Memos
     const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
-    const CellHeaderContent = children;
+    const CellHeaderContent = (React.createElement(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' } }, children));
     const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
     if (isRowSelectionCol || !width || disableResize) {
         return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: onClick }), CellHeaderContent));

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

@@ -60,7 +60,7 @@ export const ToolbarActionButtons = memo(() => {
             `${label}`.toUpperCase()));
         // If customRender is exist then return custom render instead of render internal component
         if (customRender)
-            return customRender(actionButton);
+            return actionButton;
         switch (key) {
             case 'SEARCH': {
                 const _a = action, { addFilterInfo, onClickSearchItem, isAddFilterFromSearchItem } = _a, restOfAction = __rest(_a, ["addFilterInfo", "onClickSearchItem", "isAddFilterFromSearchItem"]);

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

@@ -10,7 +10,12 @@ interface TUseDataTableListing<TTableType = any> {
     pagination: PaginationProps;
     table: TableProps<TTableType>;
     search: TSearchActionButton;
+    /** @deprecated This selectedRowKeys is deprecated. Use selectedRow.keys instead. */
     selectedRowKeys: React.Key[];
+    selectedRow: {
+        keys: React.Key[];
+        rows: TTableType[];
+    };
     queries: {
         getTableListing: ReturnType<typeof useGetTableListing>;
         getModifyColumnList: ReturnType<typeof useGetModifyColumnList>;
@@ -27,6 +32,10 @@ type TState<TTableType = any> = {
     pagination: PaginationProps;
     table: TableProps<TTableType>;
     selectedRowKeys: React.Key[];
+    selectedRow: {
+        keys: React.Key[];
+        rows: TTableType[];
+    };
     searchValue?: string;
     sorter?: SorterResult<TTableType>;
 };

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

@@ -51,10 +51,15 @@ const initialState = {
         columnWidths: {},
     },
     selectedRowKeys: [],
+    selectedRow: {
+        keys: [],
+        rows: [],
+    },
     searchValue: '',
     sorter: {},
 };
 export function useDataTableListing(props) {
+    var _a, _b;
     // Props
     const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, } = props || {};
     // Hooks
@@ -64,11 +69,11 @@ export function useDataTableListing(props) {
     // Variables
     const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object } = config;
     const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, } = api || {};
-    const _a = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _a, restOfApiColumnRequest = __rest(_a, ["url", "enabled"]);
-    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, table, sorter } = state;
+    const _c = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _c, restOfApiColumnRequest = __rest(_c, ["url", "enabled"]);
+    const _d = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _d, restOfApiFilterRequest = __rest(_d, ["url", "enabled"]);
+    const _e = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _e, restOfApiListingRequest = __rest(_e, ["url", "enabled"]);
+    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 } = filterProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
@@ -126,10 +131,13 @@ export function useDataTableListing(props) {
             enabled: enabledApiFilter,
         },
     });
+    // Variables
+    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
+    const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
     const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
-            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])])) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
+            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])])), columns: JSON.stringify(((_b = (_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
                 (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
                 sort: sorter.columnKey.toString(),
                 az: SORT_MAP[sorter.order],
@@ -154,7 +162,6 @@ export function useDataTableListing(props) {
     });
     // Variables
     const { data: columnMetricsData } = getColumnMetrics || {};
-    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
     const { data: savedFiltersData } = getSavedFilterList || {};
     const { data: filterMetricsData } = getFilterMetricList || {};
     const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = getTableListing || {};
@@ -202,7 +209,6 @@ export function useDataTableListing(props) {
         removable: !MODIFY_COLUMN_DISABLE_REMOVE.includes(modifyName),
         metrics: columns === null || columns === void 0 ? void 0 : columns.map(({ metricCode, metricId }) => metricCode || metricId || -1),
     })).reverse()) || [], [modifyColumnsData]);
-    const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
     const filterMetrics = useDeepCompareMemo(() => {
         const serializeFilterMetrics = (metrics) => {
             const result = metrics.map(metric => {
@@ -322,7 +328,7 @@ export function useDataTableListing(props) {
         }, 500);
     }, [mapObject, refetchTableListing, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
-        var _e;
+        var _g;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
@@ -335,7 +341,7 @@ export function useDataTableListing(props) {
             exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
             if (columnSetName === '') {
                 exitModifyColumnId =
-                    ((_e = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _e === void 0 ? void 0 : _e.modifyColId) || '';
+                    ((_g = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _g === void 0 ? void 0 : _g.modifyColId) || '';
             }
         }
         /**
@@ -489,8 +495,8 @@ export function useDataTableListing(props) {
             columnWidths: table.columnWidths || {},
             rowSelection: {
                 selectedRowKeys,
-                onChange(selectedRowKeys) {
-                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys })));
+                onChange(selectedRowKeys, selectedRows) {
+                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: { keys: selectedRowKeys, rows: selectedRows } })));
                 },
             },
             onChange: onChangeTable,
@@ -501,7 +507,9 @@ export function useDataTableListing(props) {
                 });
             },
         },
+        /* Selected row */
         selectedRowKeys,
+        selectedRow,
         /* Search */
         search: Object.assign(Object.assign(Object.assign({ loading: isSearchListingLoading || isSearchListingFetching, searchList }, (!!(searchProps === null || searchProps === void 0 ? void 0 : searchProps.render) && {
             itemSearchRender(_item, index, node) {

package/es/tests/DataTableTest.js

@@ -25,7 +25,7 @@ export const DataTableTest = () => {
     // Variables
     const { tableCollapsed } = state;
     // Hooks
-    const { modifyColumn, filter, pagination, table, search, selectedRowKeys } = useDataTableListing({
+    const { modifyColumn, filter, pagination, table, search, selectedRowKeys, selectedRow } = useDataTableListing({
         config: {
             // auth: {}, // Default is get from AppConfigProvider
             auth: {
@@ -91,6 +91,7 @@ export const DataTableTest = () => {
             // },
         },
     });
+    console.log('selectedRowKeys', selectedRowKeys, selectedRow.keys);
     // const { filter, pagination, table, modifyColumn } = useDataTableListing<ProjectSurvey>({
     //   name: 'permission-account',
     //   config: {

package/package.json

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