es-grid-template 1.3.5 → 1.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/assets/index.css +33 -13
  2. package/assets/index.scss +49 -14
  3. package/es/grid-component/EditableCell.js +1 -0
  4. package/es/grid-component/GridStyle.d.ts +5 -3
  5. package/es/grid-component/GridStyle.js +1 -1
  6. package/es/grid-component/TableGrid.js +16 -12
  7. package/es/grid-component/hooks/columns/index.js +4 -3
  8. package/es/grid-component/hooks/useColumns.js +7 -5
  9. package/es/grid-component/hooks/utils.d.ts +23 -0
  10. package/es/grid-component/hooks/utils.js +512 -2
  11. package/es/grid-component/number/index.d.ts +2 -2
  12. package/es/grid-component/number/index.js +2 -2
  13. package/es/grid-component/styles.scss +49 -14
  14. package/es/grid-component/table/Grid.js +1 -1
  15. package/es/grid-component/table/GridEdit.js +474 -206
  16. package/es/grid-component/table/Group.js +1 -1
  17. package/lib/grid-component/EditableCell.js +1 -0
  18. package/lib/grid-component/GridStyle.d.ts +5 -3
  19. package/lib/grid-component/GridStyle.js +1 -1
  20. package/lib/grid-component/TableGrid.js +14 -11
  21. package/lib/grid-component/hooks/columns/index.js +2 -1
  22. package/lib/grid-component/hooks/useColumns.js +7 -5
  23. package/lib/grid-component/hooks/utils.d.ts +23 -0
  24. package/lib/grid-component/hooks/utils.js +537 -8
  25. package/lib/grid-component/number/index.d.ts +2 -2
  26. package/lib/grid-component/number/index.js +2 -2
  27. package/lib/grid-component/styles.scss +49 -14
  28. package/lib/grid-component/table/Grid.js +1 -1
  29. package/lib/grid-component/table/GridEdit.js +474 -197
  30. package/lib/grid-component/table/Group.js +1 -1
  31. package/package.json +2 -2
@@ -96,7 +96,7 @@ const Group = props => {
96
96
  })));
97
97
  };
98
98
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
99
- heightTable: height,
99
+ $heightTable: height,
100
100
  style: {
101
101
  position: 'relative'
102
102
  }
@@ -574,6 +574,7 @@ const EditableCell = props => {
574
574
  },
575
575
  treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
576
576
  filterTreeNode: filterTreeNode,
577
+ popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
577
578
  onSelect: (val, option) => {
578
579
  onChange(val ?? '');
579
580
  const formState = getValues();
@@ -1,4 +1,6 @@
1
1
  /// <reference types="react" />
2
- export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
- heightTable?: number | string;
4
- }>> & string;
2
+ interface GridProps {
3
+ $heightTable?: number | string;
4
+ }
5
+ export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
6
+ export {};
@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
10
10
  displayName: "GridStyle",
11
11
  componentId: "es-grid-template__sc-sueu2e-0"
12
- })([".ui-rc-table-container{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 ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
12
+ })([".ui-rc-table-container{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 ? typeof props.$heightTable === 'string' ? props.$heightTable : `${props.$heightTable}px` : undefined);
@@ -24,6 +24,8 @@ var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
24
24
  var _reactTooltip = require("react-tooltip");
25
25
  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); }
26
26
  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; }
27
+ // import Table from "../../core/table"
28
+
27
29
  // import {ConfigProvider} from "antd";
28
30
 
29
31
  const convertFilters = filters => {
@@ -366,8 +368,10 @@ const TableGrid = props => {
366
368
  loading: {
367
369
  spinning: columns && columns.length === 0 || loading === true,
368
370
  indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
369
- },
370
- dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
371
+ }
372
+ // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
373
+ ,
374
+ dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : []
371
375
  // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
372
376
  // className={styles.customTable}
373
377
  ,
@@ -392,17 +396,16 @@ const TableGrid = props => {
392
396
  },
393
397
  rowSelection: columns && columns.length === 0 ? undefined : {
394
398
  ...selectionSettings,
395
- type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
396
- columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
399
+ // type: selectionSettings?.mode,
400
+ type: mode,
401
+ columnWidth: columnWidth ?? 50,
397
402
  onChange: onSelectChange,
398
403
  // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
399
404
  selectedRowKeys: mergedSelectedKeys,
400
- defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
405
+ // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
406
+ defaultSelectedRowKeys: defaultSelectedRowKeys,
401
407
  preserveSelectedRowKeys: true,
402
- // ...rowSelection,
403
- // checkStrictly: false,
404
-
405
- hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
408
+ hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
406
409
  }
407
410
 
408
411
  // onScroll={() => {
@@ -419,7 +422,7 @@ const TableGrid = props => {
419
422
  }
420
423
  return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
421
424
  fixed: true
422
- }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)([_rcMasterUi.Table.SELECTION_COLUMN, ...columns]).filter(col => col.hidden !== true).map((col, index) => {
425
+ }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
423
426
  const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
424
427
  const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
425
428
  const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
@@ -443,7 +446,7 @@ const TableGrid = props => {
443
446
  }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
444
447
  })));
445
448
  },
446
- pagination: !pagination || pagination && pagination.onChange ? false : {
449
+ pagination: !pagination || pagination && pagination?.onChange ? false : {
447
450
  showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
448
451
  ...pagination
449
452
  },
@@ -87,7 +87,8 @@ const getValueCell = (column, value, format) => {
87
87
 
88
88
  // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
89
89
 
90
- const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
90
+ const tmpval = typeof value === 'string' ? Number(value) : value;
91
+ const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
91
92
  const numericFormatProps = {
92
93
  thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
93
94
  decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -165,8 +165,8 @@ const useColumns = config => {
165
165
  const transformColumns = (0, _react.useCallback)(columns => {
166
166
  // >>>>>>>>>>> Support selection
167
167
  const cloneColumns = [...columns];
168
- const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
169
- const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
168
+ const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
169
+ const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
170
170
 
171
171
  // ===================== Render =====================
172
172
 
@@ -202,19 +202,18 @@ const useColumns = config => {
202
202
  children: convertColumns(transformedColumn.children)
203
203
  };
204
204
  }
205
- if (["index", "#"].includes(col.field)) {
205
+ if (transformedColumn.field === '#') {
206
206
  return {
207
207
  ...transformedColumn,
208
208
  onCell: () => ({
209
209
  className: 'cell-number'
210
210
  }),
211
211
  render: (val, record) => {
212
- // return rowIndex + 1
213
212
  return (0, _utils.findItemPath)(dataSource, record, rowKey);
214
213
  }
215
214
  };
216
215
  }
217
- if (col.field === 'command') {
216
+ if (transformedColumn.field === 'command') {
218
217
  return {
219
218
  ...transformedColumn,
220
219
  onCell: () => ({
@@ -300,6 +299,9 @@ const useColumns = config => {
300
299
  }
301
300
  if (col.field === firstNonGroupColumn?.field && record.children) {
302
301
  const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
302
+ if (currentGroupColumn?.template) {
303
+ return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format);
304
+ }
303
305
  return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format));
304
306
  }
305
307
  return (0, _columns.renderContent)(col, value, record, rowIndex, format);
@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
62
62
  combined: any[];
63
63
  addedRows: any[];
64
64
  };
65
+ export declare function addRowsUp(array: any, n: number): {
66
+ combined: any;
67
+ addedRows: any[];
68
+ } | {
69
+ combined: any[];
70
+ addedRows: any[];
71
+ };
65
72
  export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
66
73
  export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
67
74
  export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -76,6 +83,8 @@ export declare const filterDataByColumns: (data: any[], queries: any) => any[];
76
83
  export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
77
84
  export declare const removeFieldRecursive: (data: any[], field: string) => any[];
78
85
  export declare const filterDataByColumns3: (data: any[], queries: any[]) => any[];
86
+ export declare const shouldInclude: (item: any, queries: any[]) => any;
87
+ export declare function filterDataByColumns4(data: any[], queries: any[]): any[];
79
88
  export declare function isDateString(str: any): boolean;
80
89
  export declare function compareDates(date1: any, date2: any): boolean;
81
90
  export declare function compareDate(itemValue: any, value: any): boolean;
@@ -93,3 +102,17 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
93
102
  export declare function isEqualSet(setA: any, setB: any): boolean;
94
103
  export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
95
104
  export declare const mergedSets: (arr: any[]) => Set<unknown>;
105
+ export declare const sortedSetASC: (setValue: any) => Set<unknown>;
106
+ export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
107
+ export declare function getBottomRowCells(cellSet: any): any[];
108
+ export declare function getCellsByPosition(cellSet: any, position?: string): any[];
109
+ export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
110
+ export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
111
+ export declare const onAddClassBgSelectedCell: (selectedCells: any, id?: string) => void;
112
+ export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
113
+ export declare const addClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
114
+ export declare const removeClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
115
+ export declare const addClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
116
+ export declare const removeClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
117
+ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
118
+ export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;