es-grid-template 1.5.13 → 1.5.15

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

@@ -8,6 +8,7 @@ import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 import type { FixedType } from "rc-base-table/lib/interface";
+import type { TableLocale } from "rc-master-ui/lib/table/interface";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
@@ -67,7 +68,7 @@ export type IEditSelectSettings = {
         [key: string]: string;
     } | null;
     formatOptionLabel?: (option: any) => ReactNode | ReactElement;
-    loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
+    loadOptions?: (search: string, callback: (newOptions: any[]) => void, args?: LoadOptionsArgs) => void;
     isMulti?: boolean;
     closeMenuOnSelect?: boolean;
     menuWidth?: number;
@@ -132,6 +133,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     min?: number;
     editSelectSettings?: IEditSelectSettings;
     fixedType?: FixedType;
+    headerTextWrap?: boolean;
 };
 export type ColumnTemplate<RecordType> = {
     value: any;
@@ -140,10 +142,26 @@ export type ColumnTemplate<RecordType> = {
     field: string;
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
-export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination'> {
+export type Locale = TableLocale & {
+    ok_btn: string;
+    cancel_btn: string;
+    add_rows: string;
+    add_rows_before: string;
+    add_rows_after: string;
+    add_1: string;
+    add_10: string;
+    add_50: string;
+    add_100: string;
+    add_children: string;
+    delete_content: string;
+    delete_rows: string;
+    custom: string;
+};
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
     next?: () => void;
+    locale?: Locale;
     groupAble?: boolean;
     groupColumns?: string[];
     groupSetting?: IGroupSetting;
@@ -208,6 +226,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
         key: string;
         rowData: any;
     }) => void;
+    wrapSettings?: IWrapSettings;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;
@@ -319,4 +338,8 @@ export type CommandSettings = {
     client?: boolean;
     confirmDialog?: boolean;
 };
+export type IWrapMode = 'Header' | 'Both' | 'Content';
+export type IWrapSettings = {
+    wrapMode?: IWrapMode;
+};
 export {};

package/es/index.d.ts

@@ -1,4 +1,16 @@
+export { default as Dropdown } from './dropdown';
+export type { DropdownProps as DropDownProps, DropdownProps, } from './dropdown';
 export { default as GridComponent } from './grid-component';
 export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem } from './grid-component';
 export { default as Tabs } from './tabs';
 export type { TabPaneProps, TabsProps } from './tabs';
+export { default as SelectTable } from './select-table';
+export type { TableSelectProps as SelectTableProps } from './select-table';
+export { default as DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps } from './date-range-picker';
+export { default as DatePicker } from './datepicker';
+export type { DatePickerType, DatePickerProps } from './datepicker';
+export { default as Splitter } from './splitter';
+export type { SplitterProps } from './splitter';
+export { default as Collapse } from './collapse';
+export type { CollapsePanelProps, CollapseProps } from './collapse';

package/es/index.js

@@ -1,2 +1,8 @@
+export { default as Dropdown } from "./dropdown";
 export { default as GridComponent } from "./grid-component";
-export { default as Tabs } from "./tabs";
+export { default as Tabs } from "./tabs";
+export { default as SelectTable } from "./select-table";
+export { default as DateRangePicker } from "./date-range-picker";
+export { default as DatePicker } from "./datepicker";
+export { default as Splitter } from "./splitter";
+export { default as Collapse } from "./collapse";

package/es/select/index.d.ts

@@ -0,0 +1,4 @@
+import { Select } from 'rc-master-ui';
+import type { SelectProps } from 'rc-master-ui/es/select';
+export type { SelectProps };
+export default Select;

package/es/select/index.js

@@ -0,0 +1,2 @@
+import { Select } from 'rc-master-ui';
+export default Select;

package/es/select-table/index.d.ts

@@ -0,0 +1,4 @@
+import SelectTable from 'rc-master-ui/es/table-select';
+import type { TableSelectProps } from 'rc-master-ui/es/table-select';
+export type { TableSelectProps };
+export default SelectTable;

package/es/select-table/index.js

@@ -0,0 +1,2 @@
+import SelectTable from 'rc-master-ui/es/table-select';
+export default SelectTable;

package/es/splitter/index.d.ts

@@ -0,0 +1,4 @@
+import { Splitter } from 'rc-master-ui';
+import type { SplitterProps } from 'rc-master-ui';
+export type { SplitterProps };
+export default Splitter;

package/es/splitter/index.js

@@ -0,0 +1,2 @@
+import { Splitter } from 'rc-master-ui';
+export default Splitter;

package/es/tree-select/index.d.ts

@@ -0,0 +1,4 @@
+import { TreeSelect } from 'rc-master-ui';
+import type { TreeSelectProps } from 'rc-master-ui/es/tree-select';
+export type { TreeSelectProps };
+export default TreeSelect;

package/es/tree-select/index.js

@@ -0,0 +1,2 @@
+import { TreeSelect } from 'rc-master-ui';
+export default TreeSelect;

package/lib/collapse/index.d.ts

@@ -0,0 +1,4 @@
+import { Collapse } from 'rc-master-ui';
+import type { CollapseProps, CollapsePanelProps } from 'rc-master-ui';
+export type { CollapseProps, CollapsePanelProps };
+export default Collapse;

package/lib/collapse/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _rcMasterUi = require("rc-master-ui");
+var _default = exports.default = _rcMasterUi.Collapse;

package/lib/date-range-picker/index.d.ts

@@ -0,0 +1,4 @@
+import DateRangePicker from 'rc-master-ui/es/date-range-picker';
+import type { DateRangePickerProps } from 'rc-master-ui/es/date-range-picker';
+export type { DateRangePickerProps };
+export default DateRangePicker;

package/lib/date-range-picker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dateRangePicker = _interopRequireDefault(require("rc-master-ui/es/date-range-picker"));
+var _default = exports.default = _dateRangePicker.default;

package/lib/datepicker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from 'rc-master-ui/es/DatePicker';
+import type { DatePickerProps, DatePickerType } from 'rc-master-ui/es/date-picker';
+export type { DatePickerProps, DatePickerType };
+export default DatePicker;

package/lib/datepicker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DatePicker = _interopRequireDefault(require("rc-master-ui/es/DatePicker"));
+var _default = exports.default = _DatePicker.default;

package/lib/dropdown/index.d.ts

@@ -0,0 +1,4 @@
+import Dropdown from 'rc-master-ui/es/dropdown';
+import type { DropdownProps } from 'rc-master-ui/es/dropdown';
+export type { DropdownProps };
+export default Dropdown;

package/lib/dropdown/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dropdown = _interopRequireDefault(require("rc-master-ui/es/dropdown"));
+var _default = exports.default = _dropdown.default;

package/lib/grid-component/InternalTable.js

@@ -190,6 +190,7 @@ const InternalTable = props => {
     height: propsHeight,
     summary,
     infiniteScroll,
+    wrapSettings,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
@@ -388,7 +389,8 @@ const InternalTable = props => {
             ...column
           },
           t: t,
-          id: id
+          id: id,
+          wrapSettings: wrapSettings
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
@@ -403,7 +405,9 @@ const InternalTable = props => {
             column: {
               ...column
             },
-            t: t
+            t: t,
+            id: id,
+            wrapSettings: wrapSettings
           }),
           onCell: data => ({
             // className: 'cell-number',
@@ -426,7 +430,9 @@ const InternalTable = props => {
             column: {
               ...column
             },
-            t: t
+            t: t,
+            id: id,
+            wrapSettings: wrapSettings
           }),
           onCell: data => ({
             // className: 'cell-number',
@@ -547,7 +553,9 @@ const InternalTable = props => {
           column: {
             ...column
           },
-          t: t
+          t: t,
+          id: id,
+          wrapSettings: wrapSettings
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,

package/lib/grid-component/TableGrid.js

@@ -322,13 +322,26 @@ const TableGrid = props => {
           rowData: selectedRow
         });
       } else {
+        const keySet = new Set(keys);
+
         // @ts-ignore
-        setMergedSelectedKeys(keys);
-        rowSelected?.({
-          selected: selectedRows,
-          type: 'rowSelected',
-          rowData: selectedRow
-        });
+        if (!keySet.has(selectedRow[rowKey])) {
+          setMergedSelectedKeys([]);
+          rowSelected?.({
+            selected: [],
+            type: 'rowSelected',
+            rowData: selectedRow
+          });
+        } else {
+          // @ts-ignore
+          setMergedSelectedKeys([selectedRow[rowKey]]);
+          rowSelected?.({
+            // @ts-ignore
+            selected: [selectedRow[rowKey]],
+            type: 'rowSelected',
+            rowData: selectedRow
+          });
+        }
       }
     }
   };

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

@@ -78,8 +78,8 @@ const getValueCell = (column, value, record, format) => {
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
-      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      // console.log('aaaaa', Number(value))
 
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
@@ -90,6 +90,16 @@ const getValueCell = (column, value, record, format) => {
         decimalScale: dec,
         fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
       };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      //   console.log('ttt', ttt)
+      // }
+
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
       return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
     case 'date':
       return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';

package/lib/grid-component/hooks/content/HeaderContent.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import type { ColumnTable } from "../../type";
+import type { IWrapSettings } from "../../type";
 type Props = {
     t?: any;
     id?: string;
     content?: string;
+    wrapSettings?: IWrapSettings;
     column?: ColumnTable;
     template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
     tooltip?: string | number | React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -8,27 +8,38 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const HeaderStyle = _styledComponents.default.div.withConfig({
+  displayName: "HeaderStyle",
+  componentId: "es-grid-template__sc-ibhq66-0"
+})([""]);
 const HeaderContent = props => {
   const {
     t,
-    id
+    id,
+    wrapSettings
   } = props;
   const {
     headerTooltip,
     headerText,
     columnGroupText,
-    headerTemplate
+    headerTemplate,
+    headerTextWrap,
+    ellipsis
   } = props.column ?? {};
   const text = _react.default.useMemo(() => {
     return columnGroupText ?? headerText;
   }, [columnGroupText, headerText]);
   const tooltip = _react.default.useMemo(() => {
-    return headerTooltip ?? t ? t?.(columnGroupText ?? headerText) : columnGroupText ?? headerText;
+    return t ? t?.(headerTooltip ?? columnGroupText ?? headerText) : headerTooltip ?? columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('', {}),
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(HeaderStyle, {
+    className: (0, _classnames.default)('', {
+      'ui-rc-table-cell-ellipsis': ellipsis !== false && headerTextWrap !== true,
+      'header-text-wrap': headerTextWrap ?? (wrapSettings?.wrapMode === 'Header' || wrapSettings?.wrapMode === 'Both')
+    }),
     "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16

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

@@ -144,3 +144,8 @@ export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare const isFormattedNumber: (str: string) => boolean;
+export declare const detectSeparators: (str: string) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+};

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

@@ -12,7 +12,7 @@ exports.compareDate = compareDate;
 exports.compareDates = compareDates;
 exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
 exports.convertFormat = convertFormat;
-exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = void 0;
+exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.detectSeparators = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns4 = filterDataByColumns4;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
@@ -31,10 +31,10 @@ exports.isContinuous = exports.isColor = exports.isBottomMostInRegion = void 0;
 exports.isDateString = isDateString;
 exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
-exports.isRangeCell = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
+exports.isRangeCell = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isFormattedNumber = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
-exports.updateData = exports.updateColumnsByGroup = void 0;
+exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -2184,4 +2184,65 @@ function groupArrayByColumns(arr, columns) {
   } else {
     return arr;
   }
-}
+}
+const isFormattedNumber = str => {
+  if (!str) return false;
+  if (typeof str !== 'string') return false;
+  const regexUS = /^\d{1,3}(,\d{3})*(\.\d+)?$/; // 100,000.111
+  const regexEU = /^\d{1,3}(\.\d{3})*(,\d+)?$/; // 100.000,111
+
+  // Không có dấu hàng nghìn, chỉ dấu thập phân: 100000.1 hoặc 100000,01
+  const regexDecimalOnly = /^\d+([.,]\d{1,})$/;
+  return regexUS.test(str) || regexEU.test(str) || regexDecimalOnly.test(str);
+};
+exports.isFormattedNumber = isFormattedNumber;
+const detectSeparators = str => {
+  if (typeof str !== 'string') return null;
+  const hasComma = str.includes(',');
+  const hasDot = str.includes('.');
+
+  // Trường hợp có cả dấu , và .
+  if (hasComma && hasDot) {
+    const lastComma = str.lastIndexOf(',');
+    const lastDot = str.lastIndexOf('.');
+    return lastComma > lastDot ? {
+      thousandSeparator: '.',
+      decimalSeparator: ','
+    } : {
+      thousandSeparator: ',',
+      decimalSeparator: '.'
+    };
+  }
+
+  // Trường hợp chỉ có dấu phẩy
+  if (hasComma && !hasDot) {
+    const parts = str.split(',');
+    if (parts.length === 2) {
+      return parts[1].length === 3 ? {
+        thousandSeparator: ',',
+        decimalSeparator: null
+      } : {
+        thousandSeparator: null,
+        decimalSeparator: ','
+      };
+    }
+  }
+
+  // Trường hợp chỉ có dấu chấm
+  if (hasDot && !hasComma) {
+    const parts = str.split('.');
+    if (parts.length === 2) {
+      return parts[1].length === 3 ? {
+        thousandSeparator: '.',
+        decimalSeparator: null
+      } : {
+        thousandSeparator: null,
+        decimalSeparator: '.'
+      };
+    }
+  }
+
+  // Không có dấu hoặc không hợp lệ
+  return null;
+};
+exports.detectSeparators = detectSeparators;

package/lib/grid-component/styles.scss

@@ -317,6 +317,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           //overflow: visible;
         }
       }
+
       .#{$prefix}-table-column-title {
         //display: flex;
       }
@@ -324,9 +325,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       &.head-align-center {
         text-align: center;
       }
+
       &.head-align-right {
         text-align: right;
       }
+
+      .ui-rc-table-column-title {
+        .header-text-wrap {
+          white-space: normal !important;
+        }
+      }
+
+
     }
   }
 
@@ -1085,6 +1095,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 }
 
+
+// -------------- radio ----------
+
+.ui-rc-radio-wrapper {
+  .ui-rc-radio-checked {
+    .ui-rc-radio-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+  &:hover {
+    .ui-rc-radio-inner {
+      border-color: $primary;
+    }
+  }
+}
+
 // ------------ Tree ---------------
 
 .#{$prefix}-tree {