@antscorp/antsomi-ui 1.3.5-beta.523 → 1.3.5-beta.526

package/es/components/icons/ExpandLessIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const ExpandLessIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandLessIcon.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ExpandLessIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, height: height, width: width }),
+        React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        React.createElement("path", { d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" })));
+});

package/es/components/icons/index.d.ts

@@ -56,3 +56,4 @@ export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { DataIcon } from './DataIcon';
 export { TableIcon } from './TableIcon';
+export { ExpandLessIcon } from './ExpandLessIcon';

package/es/components/icons/index.js

@@ -56,3 +56,4 @@ export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { DataIcon } from './DataIcon';
 export { TableIcon } from './TableIcon';
+export { ExpandLessIcon } from './ExpandLessIcon';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FlexProps } from 'antd/lib';
 export type TChangePageSizePayload = {
     pageSize: number;
@@ -8,6 +8,7 @@ export interface PaginationProps extends Omit<FlexProps, 'children' | 'onChange'
     page?: number;
     pageSize?: number;
     total?: number;
+    extraContent?: ReactNode;
     onChange?: (payload: TChangePageSizePayload) => void;
 }
 export declare const Pagination: React.FC<PaginationProps>;

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

@@ -25,7 +25,7 @@ import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../consta
 const { Text } = Typography;
 export const Pagination = props => {
     // Props
-    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "onChange"]);
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, extraContent, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "extraContent", "onChange"]);
     // Instance
     const { t } = i18nInstance;
     // Memo
@@ -40,20 +40,22 @@ export const Pagination = props => {
                 pageSize }, payload));
         }
     };
-    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", gap: 10 }, restProps),
-        React.createElement(Flex, { align: "center", gap: 10 },
-            React.createElement(Text, null,
-                t(translations.pagination.showRow).toString(),
-                ":"),
-            React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
-        React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total)} of ${total}`),
-        React.createElement(Flex, { align: "center", gap: 10 },
-            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
-                React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
-            React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
-                React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
-            React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
-                React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
-            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
-                React.createElement(Icon, { type: "icon-ants-last-page", size: 12 })))));
+    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", justify: extraContent ? 'space-between' : 'flex-end', gap: 10 }, restProps),
+        extraContent,
+        React.createElement(Flex, { align: "center", gap: 10, style: { flexShrink: 0, height: 'fit-content', alignSelf: 'flex-end' } },
+            React.createElement(Flex, { align: "center", gap: 10 },
+                React.createElement(Text, null,
+                    t(translations.pagination.showRow).toString(),
+                    ":"),
+                React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
+            React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total)} of ${total}`),
+            React.createElement(Flex, { align: "center", gap: 10 },
+                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
+                    React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
+                React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
+                    React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
+                React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
+                    React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
+                React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
+                    React.createElement(Icon, { type: "icon-ants-last-page", size: 12 }))))));
 };

package/es/components/organism/DataTable/components/Pagination/styled.js

@@ -5,7 +5,8 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const PaginationWrapper = styled(Flex) `
-  height: 60px;
+  flex-shrink: 0;
+  min-height: 40px;
 
   .show-row-select {
     width: 50px;

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

@@ -37,7 +37,7 @@ export const ResizableCell = props => {
         var _a, _b;
         (_b = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-row')) === null || _b === void 0 ? void 0 : _b.forEach(rowEl => {
             var _a;
-            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column):not(.antsomi-table-row-expand-icon-cell)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
             if (cell) {
                 if (type === 'add') {
                     return cell.setAttribute('aria-resizable', 'true');
@@ -55,7 +55,7 @@ export const ResizableCell = props => {
             // Update the state with the new width
             setWidth(size.width);
             // Select all column elements within the table body colgroup
-            const resizeColEls = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col)`);
+            const resizeColEls = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col):not(.antsomi-table-expand-icon-col)`);
             // Select the specific column element to resize
             const resizeColEl = resizeColEls === null || resizeColEls === void 0 ? void 0 : resizeColEls[index !== null && index !== void 0 ? index : 0];
             // If the column element exists, update its width style

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

@@ -69,6 +69,30 @@ export const StyledTable = styled(Table) `
       .antsomi-table-cell[aria-resizable='true'] {
         border-inline-end: 2px solid ${blue1} !important;
       }
+
+      .antsomi-table-cell {
+        overflow: hidden;
+      }
+    }
+
+    .antsomi-table-expanded-row-fixed {
+      padding: 15px;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .antsomi-table-container {
+      &::after {
+        box-shadow: none !important;
+      }
+    }
+
+    .antsomi-table-cell-fix-left {
+      &::after {
+        box-shadow: none !important;
+      }
     }
   }
 

package/es/components/organism/DataTable/constants/theme.js

@@ -17,7 +17,7 @@ export const DATA_TABLE_THEME = {
             cellPaddingBlock: 10,
             cellPaddingInline: 10,
             borderColor: '#E5E5E5',
-            rowHoverBg: '#DEEFFE',
+            rowHoverBg: '#F2F9FF',
             borderRadius: 0,
             headerBorderRadius: 0,
             rowSelectedBg: '#DEEFFE',

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

@@ -73,7 +73,11 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         getSearchListing?: TGetSearchListing['options'];
     };
     table?: Omit<TableProps<TTableType>, 'columns'> & {
+        /** Main key for map ids */
         mainColumnKey: keyof TTableType;
+        /** Expand column key for show icon expand row */
+        expandColumnKey?: keyof TTableType;
+        /** columns?: Partial<Record<keyof TTableType, ColumnType<TTableType>>>; */
         columns?: {
             [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
         };

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

@@ -48,6 +48,7 @@ type TState<TTableType = any> = {
     searchValue?: string;
     sorter?: SorterResult<TTableType>;
     selectedFilterItem?: FilterItem;
+    expandedRowKeys?: React.Key[];
 };
 export declare function useDataTableListing<TTableType = Record<string, any>, TSearchType = any>(props: UseDataTableListingProps<TTableType, TSearchType>): TUseDataTableListing<TTableType>;
 export {};

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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { flatMap, isEmpty, pick } from 'lodash';
+import { flatMap, isEmpty, pick, xor } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -38,6 +38,7 @@ import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, use
 import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+import { ExpandLessIcon } from '@antscorp/antsomi-ui/es/components/icons';
 const { Text } = Typography;
 const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
 const initialState = {
@@ -60,6 +61,7 @@ const initialState = {
     searchValue: '',
     sorter: {},
     selectedFilterItem: undefined,
+    expandedRowKeys: [],
 };
 export function useDataTableListing(props) {
     var _a, _b, _c;
@@ -77,9 +79,9 @@ export function useDataTableListing(props) {
     const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
     const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
     const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
-    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, } = state;
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, } = state;
     const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
-    const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
+    const { sortDirectionKey = 'az', mainColumnKey, expandColumnKey, expandable } = 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 });
@@ -285,6 +287,34 @@ export function useDataTableListing(props) {
         name: filterName,
         removable: true,
     }))) || []), [savedFiltersData]);
+    const renderColumnWithExpandIcon = useCallback((children, // The content of the column
+    headerCol, // The header configuration for the column
+    record) => {
+        const { name } = headerCol || {}; // Destructure the name from the headerCol, with a fallback to an empty object
+        if (expandColumnKey === name) {
+            // Check if the current column is the expand column
+            const expanded = expandedRowKeys === null || expandedRowKeys === void 0 ? void 0 : expandedRowKeys.includes(
+            // Check if the current row is expanded
+            (record === null || record === void 0 ? void 0 : record[mainColumnKey]) || '');
+            return (React.createElement(Flex, { align: "center", gap: 4 },
+                React.createElement(ExpandLessIcon, { size: 20, style: {
+                        flexShrink: 0,
+                        color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8,
+                        transform: `rotate(${expanded ? 0 : 180}deg)`,
+                        cursor: 'pointer',
+                        transition: 'transform 0.3s ease',
+                    }, onClick: () => {
+                        if (expandable && expandable.onExpand) {
+                            expandable.onExpand(!expanded, record);
+                        }
+                        setState(prev => (Object.assign(Object.assign({}, prev), { expandedRowKeys: xor(expandedRowKeys, [
+                                record[mainColumnKey],
+                            ]) })));
+                    } }),
+                children));
+        }
+        return children;
+    }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
     const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
@@ -318,16 +348,16 @@ export function useDataTableListing(props) {
                             }
                             : {})) }, 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 renderColumnWithExpandIcon(columns[name].render(value, record, index, RenderComponent), headerCol, record);
                     }
                     if (link) {
-                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent));
+                        return renderColumnWithExpandIcon(React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent), headerCol, record);
                     }
-                    return RenderComponent;
+                    return renderColumnWithExpandIcon(RenderComponent, headerCol, record);
                 } });
         })) || []);
         return data;
-    }, [tableHeader, tableProps, sorter]);
+    }, [tableProps, tableHeader, sorter === null || sorter === void 0 ? void 0 : sorter.columnKey, sorter === null || sorter === void 0 ? void 0 : sorter.order, renderColumnWithExpandIcon]);
     const tableData = useDeepCompareMemo(() => ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
         (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
         [], [tableBody]);
@@ -580,23 +610,15 @@ export function useDataTableListing(props) {
         /* Pagination */
         pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),
         /* Table */
-        table: {
-            loading: isTableListingLoading || isTableListingRefetching,
-            columns: tableColumns,
-            dataSource: tableData,
-            columnWidths: table.columnWidths || {},
-            rowSelection: {
+        table: Object.assign(Object.assign({}, tableProps), { loading: isTableListingLoading || isTableListingRefetching, columns: tableColumns, dataSource: tableData, columnWidths: table.columnWidths || {}, expandable: Object.assign({ showExpandColumn: false, expandedRowKeys: expandedRowKeys || [] }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.expandable), rowSelection: {
                 selectedRowKeys: selectedRow.keys || [],
                 onChange: onChangeSelectedRow,
-            },
-            onChange: onChangeTable,
-            onColumnResize(data) {
+            }, onChange: onChangeTable, onColumnResize(data) {
                 const { index, width } = data;
                 handleUpdateTable({
                     columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
                 });
-            },
-        },
+            } }),
         /* Selected row */
         selectedRowKeys,
         selectedRow,

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

@@ -9,11 +9,6 @@ export const DataTableWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 100%;
-
-  #data-table-pagination {
-    margin-top: 5px;
-    justify-content: flex-end;
-  }
 `;
 export const IconButton = styled.div `
   width: 20px;

package/es/constants/theme.js

@@ -244,5 +244,23 @@ THEME.components = {
     Form: {
         itemMarginBottom: 15,
     },
+    Table: {
+        headerBg: '#F9F9F9',
+        headerSortActiveBg: '#F9F9F9',
+        headerSortHoverBg: '#F9F9F9',
+        headerFilterHoverBg: '#F9F9F9',
+        fixedHeaderSortActiveBg: '#F9F9F9',
+        bodySortBg: '#ffffff',
+        fontWeightStrong: 700,
+        cellPaddingBlock: 10,
+        cellPaddingInline: 10,
+        borderColor: '#E5E5E5',
+        rowHoverBg: '#F2F9FF',
+        borderRadius: 0,
+        headerBorderRadius: 0,
+        rowSelectedBg: '#DEEFFE',
+        rowSelectedHoverBg: '#F2F9FF',
+        rowExpandedBg: '#F9F9F9',
+    },
 };
 export const globalToken = theme.getDesignToken(THEME);

package/es/models/DataTable/DataTableListing.d.ts

@@ -10,6 +10,7 @@ export type DataTableHeaderItem = {
     label: string;
     name: string;
     sortable: boolean;
+    isSort?: string;
     type: number;
 };
 export type DataTableColumnDefItem = {

package/es/tests/DataTableTest.js

@@ -118,6 +118,10 @@ export const DataTableTest = () => {
             //   },
             // },
         },
+        table: {
+            mainColumnKey: 'survey_id',
+            expandColumnKey: 'survey_name',
+        },
     });
     return (React.createElement(BrowserRouter, null,
         React.createElement(TableTestWrapper, null,

package/es/utils/dataTable.d.ts

@@ -1,5 +1,6 @@
 import { DataTableColumnDefItem, DataTableHeaderItem } from '../models/DataTable/DataTableListing';
 export declare const mapColumnDefItemToGeneral: (columnDefItem: DataTableColumnDefItem) => DataTableHeaderItem;
+export declare const mapColumnToGeneral: ({ sortable, isSort, ...restOfColumn }: DataTableHeaderItem) => DataTableHeaderItem;
 export declare const mapResponseListingToGeneral: (response: Record<string, any>) => {
     body: any;
     header: any;

package/es/utils/dataTable.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 export const mapColumnDefItemToGeneral = (columnDefItem) => ({
     editable: false,
     fixColumn: false,
@@ -6,13 +17,19 @@ export const mapColumnDefItemToGeneral = (columnDefItem) => ({
     sortable: !!parseInt(columnDefItem.enableSorting),
     type: parseInt(columnDefItem.type),
 });
+export const mapColumnToGeneral = (_a) => {
+    var { sortable, isSort } = _a, restOfColumn = __rest(_a, ["sortable", "isSort"]);
+    return (Object.assign(Object.assign({}, restOfColumn), { 
+        /** Convert isSort to boolean */
+        sortable: isSort === '1' ? true : sortable }));
+};
 // NOTES: Improve typescript
 export const mapResponseListingToGeneral = (response) => {
     const { body, header, total, entries, column_defs, rows, total_records } = response || {};
     return {
         body: body || entries || rows || [],
-        header: header ||
-            column_defs.map(columnDefItem => mapColumnDefItemToGeneral(columnDefItem || {})) ||
+        header: (header === null || header === void 0 ? void 0 : header.map(col => mapColumnToGeneral(col || {}))) ||
+            (column_defs === null || column_defs === void 0 ? void 0 : column_defs.map(columnDefItem => mapColumnDefItemToGeneral(columnDefItem || {}))) ||
             [],
         total: total || total_records || 0,
     };

package/package.json

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