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

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/styled.js

@@ -69,6 +69,10 @@ export const StyledTable = styled(Table) `
       .antsomi-table-cell[aria-resizable='true'] {
         border-inline-end: 2px solid ${blue1} !important;
       }
+
+      .antsomi-table-cell {
+        overflow: hidden;
+      }
     }
   }
 

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/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/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.524",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",