es-grid-template 1.4.9 → 1.5.1

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined);
+})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/es/grid-component/InternalTable.d.ts

@@ -4,6 +4,8 @@ import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
+import 'rc-master-ui/es/date-range-picker/styles/index.less';
+import 'rc-master-ui/assets/index.css';
 export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/grid-component/InternalTable.js

@@ -11,9 +11,13 @@ import GridEdit from "./table/GridEdit";
 import Grid from "./table/Grid";
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
+import enDr from "rc-master-ui/es/locales/en_US";
+import viDr from "rc-master-ui/es/locales/vi_VN";
 // import useColumns from "./hooks/useColumns";
 
 import "./styles.scss";
+import 'rc-master-ui/es/date-range-picker/styles/index.less';
+import 'rc-master-ui/assets/index.css';
 import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
@@ -202,6 +206,7 @@ const InternalTable = props => {
   // }, [height, id])
 
   const local = lang && lang === 'en' ? en : vi;
+  const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
   const buddhistLocale = {
     ...local,
     lang: {
@@ -319,7 +324,7 @@ const InternalTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -705,7 +710,7 @@ const InternalTable = props => {
               }
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,
@@ -717,7 +722,7 @@ const InternalTable = props => {
               // server ~~ không làm gì
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,

package/es/grid-component/TableGrid.js

@@ -485,7 +485,7 @@ const TableGrid = props => {
 
         // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
         const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
+        const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates), col?.key) : 0;
         const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
         const numericFormatProps = {

package/es/grid-component/hooks/columns/index.d.ts

@@ -6,4 +6,4 @@ export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat, dateRangeLocale?: any) => React.JSX.Element;

package/es/grid-component/hooks/columns/index.js

@@ -1,17 +1,15 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import React, { Fragment } from "react";
-import { DatePicker, Empty, Input, Select } from "rc-master-ui";
+import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
 import NumberInput from "../../number";
 // import {Typography} from "antd";
-const {
-  RangePicker
-} = DatePicker;
+// const {RangePicker} = DatePicker
 
 // const { Text } = Typography;
 
@@ -125,11 +123,11 @@ export const renderContent = (column, value, record, index, format) => {
     field: column.field
   }) : column.template : content);
 };
-export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format, dateRangeLocale) => {
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = convertFormat(getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {
@@ -176,35 +174,25 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         }
       }))));
     case 'DateRange':
-      const dateRangeValue = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(RangePicker, {
-        format: {
-          format: dateRangeFormat,
-          type: 'mask'
-        }
-        // defaultValue={dateRangeValue}
-        ,
-        value: dateRangeValue,
-        locale: buddhistLocale
-        // placeholder={['Ngày bắt đầu', 'Ngày kết thúc']}
-        ,
-        popupStyle: {
-          zIndex: 9999
+      }, /*#__PURE__*/React.createElement(CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/React.createElement(DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
         },
-        onChange: (value, dateString) => {
-          const newDateRangeValue = dateString[0] ? [dateString[0] ? moment(convertDayjsToDate(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? moment(convertDayjsToDate(dateString[1], dateRangeFormat)).format() : ''] : '';
-
-          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[0]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        },
-        style: {
-          width: '100%'
         }
-        // popupClassName={'adv-popup-container'}
-        // getPopupContainer={() => menuRef.current}
-      }))));
+      })))));
     case 'Week':
       const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {

package/es/grid-component/hooks/utils.d.ts

@@ -36,7 +36,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
     monthFormat: string;
     yearFormat: string;
 };
+export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];

package/es/grid-component/hooks/utils.js

@@ -190,12 +190,56 @@ export const getFormat = (colFormat, format) => {
     yearFormat: colFormat?.yearFormat ?? format?.yearFormat
   };
 };
+export function convertFormat(formatStr) {
+  // return formatStr.split('').map((char, i) => {
+  //   if (char === 'D' || char === 'd') {
+  //     return 'd'; // ngày: lowercase
+  //   }
+  //   if (char === 'Y' || char === 'y') {
+  //     return 'y'; // năm: lowercase
+  //   }
+  //   if (char === 'M' || char === 'm') {
+  //     return char; // tháng: giữ nguyên
+  //   }
+  //   return char; // separator
+  // }).join('');
+
+  return formatStr.split('').map(char => {
+    if (char === 'D' || char === 'd') return 'd';
+    if (char === 'Y' || char === 'y') return 'y';
+    if ('Hhmsa'.includes(char)) return char; // giờ, phút, giây, am/pm
+    if (char === 'M' || char === 'm') return char; // tháng: giữ nguyên
+    return char; // dấu phân cách
+  }).join('');
+}
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "datetime":
+      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+    case "week":
+      return format?.weekFormat ?? 'dd/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/YYYY';
+    case "quarter":
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "year":
+      return format?.yearFormat ?? 'YYYY';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'dd/MM/YYYY';
+  }
+};
+export const getDateRangeFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
     case "datetime":
       return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":

package/es/grid-component/styles.scss

@@ -1341,3 +1341,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     display: none;
   }
 }
+
+.rs-picker-popup {
+  z-index: 1660;
+}