es-grid-template 0.1.0 → 0.1.2-1

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 (63) hide show
  1. package/es/grid-component/ColumnsChoose.d.ts +3 -4
  2. package/es/grid-component/ColumnsChoose.js +28 -15
  3. package/es/grid-component/Command.d.ts +8 -0
  4. package/es/grid-component/Command.js +81 -0
  5. package/es/grid-component/ContextMenu.d.ts +2 -2
  6. package/es/grid-component/ContextMenu.js +1 -0
  7. package/es/grid-component/EditableCell.js +300 -314
  8. package/es/grid-component/GridStyle.js +1 -1
  9. package/es/grid-component/InternalTable.js +52 -28
  10. package/es/grid-component/TableGrid.d.ts +2 -1
  11. package/es/grid-component/TableGrid.js +64 -18
  12. package/es/grid-component/async-select/index.d.ts +9 -0
  13. package/es/grid-component/async-select/index.js +35 -0
  14. package/es/grid-component/hooks/constant.d.ts +10 -0
  15. package/es/grid-component/hooks/constant.js +11 -1
  16. package/es/grid-component/hooks/useColumns/index.js +7 -4
  17. package/es/grid-component/hooks/utils.d.ts +2 -0
  18. package/es/grid-component/hooks/utils.js +11 -0
  19. package/es/grid-component/index.d.ts +3 -0
  20. package/es/grid-component/styles.scss +282 -214
  21. package/es/grid-component/table/Grid.js +46 -59
  22. package/es/grid-component/table/GridEdit.d.ts +4 -0
  23. package/es/grid-component/table/GridEdit.js +106 -19
  24. package/es/grid-component/type.d.ts +32 -14
  25. package/es/grid-component/useContext.d.ts +11 -7
  26. package/es/grid-component/useContext.js +3 -0
  27. package/es/index.d.ts +1 -0
  28. package/lib/grid-component/ColumnsChoose.d.ts +3 -4
  29. package/lib/grid-component/ColumnsChoose.js +27 -14
  30. package/lib/grid-component/Command.d.ts +8 -0
  31. package/lib/grid-component/Command.js +90 -0
  32. package/lib/grid-component/ContextMenu.d.ts +2 -2
  33. package/lib/grid-component/ContextMenu.js +2 -0
  34. package/lib/grid-component/EditableCell.js +297 -311
  35. package/lib/grid-component/GridStyle.js +1 -1
  36. package/lib/grid-component/InternalTable.js +51 -27
  37. package/lib/grid-component/TableGrid.d.ts +2 -1
  38. package/lib/grid-component/TableGrid.js +63 -17
  39. package/lib/grid-component/async-select/index.d.ts +9 -0
  40. package/lib/grid-component/async-select/index.js +44 -0
  41. package/lib/grid-component/hooks/constant.d.ts +10 -0
  42. package/lib/grid-component/hooks/constant.js +12 -2
  43. package/lib/grid-component/hooks/useColumns/index.js +7 -4
  44. package/lib/grid-component/hooks/utils.d.ts +2 -0
  45. package/lib/grid-component/hooks/utils.js +16 -3
  46. package/lib/grid-component/index.d.ts +3 -0
  47. package/lib/grid-component/styles.scss +282 -214
  48. package/lib/grid-component/table/Grid.js +46 -59
  49. package/lib/grid-component/table/GridEdit.d.ts +4 -0
  50. package/lib/grid-component/table/GridEdit.js +106 -19
  51. package/lib/grid-component/type.d.ts +32 -14
  52. package/lib/grid-component/useContext.d.ts +11 -7
  53. package/lib/grid-component/useContext.js +2 -0
  54. package/lib/index.d.ts +1 -0
  55. package/package.json +102 -112
  56. /package/es/{grid-component/Message → Message}/Message.d.ts +0 -0
  57. /package/es/{grid-component/Message → Message}/Message.js +0 -0
  58. /package/es/{grid-component/Message → Message}/index.d.ts +0 -0
  59. /package/es/{grid-component/Message → Message}/index.js +0 -0
  60. /package/lib/{grid-component/Message → Message}/Message.d.ts +0 -0
  61. /package/lib/{grid-component/Message → Message}/Message.js +0 -0
  62. /package/lib/{grid-component/Message → Message}/index.d.ts +0 -0
  63. /package/lib/{grid-component/Message → Message}/index.js +0 -0
@@ -9,7 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _GridStyle = require("../GridStyle");
11
11
  var _TableGrid = _interopRequireDefault(require("../TableGrid"));
12
- var _EditableCell = _interopRequireDefault(require("../EditableCell"));
12
+ var _Command = _interopRequireDefault(require("../Command"));
13
+ var _useColumns = require("../hooks/useColumns");
13
14
  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); }
14
15
  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; }
15
16
  const Grid = props => {
@@ -19,74 +20,61 @@ const Grid = props => {
19
20
  tableRef,
20
21
  className,
21
22
  components,
23
+ style,
24
+ format,
22
25
  ...rest
23
26
  } = props;
24
-
25
- // const transformColumns = React.useCallback((cols: ColumnsTable<RecordType>): ColumnsTable<RecordType> => {
26
- // return cols.map((column) => {
27
- //
28
- // if (column?.children && column?.children.length > 0) {
29
- // return {
30
- // ...column,
31
- // children: transformColumns(column?.children) // Xử lý đệ quy cho cấp con
32
- // }
33
- // }
34
- //
35
- // if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
36
- // return {
37
- // ...column,
38
- // render: (value: any, record: any, rowIndex: number) => {
39
- // return rowIndex + 1
40
- // }
41
- // }
42
- // }
43
- //
44
- // return {
45
- // ...column,
46
- // }
47
- // })
48
- // }, [])
49
- //
50
- //
51
- // const mergedColumns = useMemo(() => {
52
- //
53
- // // @ts-ignore
54
- // return transformColumns(columns ?? [])
55
- //
56
- // }, [transformColumns, columns])
57
-
58
- const addFilter = _react.default.useCallback(cols => {
27
+ const transformColumns = _react.default.useCallback(cols => {
28
+ // @ts-ignore
59
29
  return cols.map(column => {
60
- // @ts-ignore
61
- if (!column?.dataIndex && !column?.key) {
30
+ if (!column?.field && !column?.key) {
62
31
  return column;
63
32
  }
64
- // @ts-ignore
65
- if (column?.children && column?.children.length > 0) {
33
+
34
+ // Xử đệ quy cho children
35
+ if (column.children?.length) {
66
36
  return {
67
37
  ...column,
68
- // @ts-ignore
69
- children: addFilter(column?.children) // Xử lý đệ quy cho cấp con
38
+ children: transformColumns(column.children)
70
39
  };
71
40
  }
41
+ const transformedColumn = {
42
+ ...column,
43
+ dataIndex: column.field ?? column.dataIndex,
44
+ title: column.headerText ?? column.title,
45
+ ellipsis: column.ellipsis !== false,
46
+ align: column.textAlign ?? column.align,
47
+ fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
48
+ };
72
49
  // @ts-ignore
73
- if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
50
+ if (["index", "#"].includes(transformedColumn.dataIndex)) {
74
51
  return {
75
- ...column,
76
- render: (value, record, rowIndex) => {
77
- return rowIndex + 1;
78
- }
52
+ ...transformedColumn,
53
+ render: (_, __, rowIndex) => rowIndex + 1
54
+ };
55
+ }
56
+ if (transformedColumn.dataIndex === "command") {
57
+ return {
58
+ ...transformedColumn,
59
+ onCell: () => ({
60
+ className: "ui-rc-cell-command"
61
+ }),
62
+ render: () => /*#__PURE__*/_react.default.createElement("div", {
63
+ className: "ui-rc-cell-command__content"
64
+ }, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/_react.default.createElement(_Command.default, {
65
+ key: `command-${index}`,
66
+ item: item,
67
+ onClick: e => e.preventDefault()
68
+ }) : null))
79
69
  };
80
70
  }
81
71
  return {
82
- ...column
72
+ ...transformedColumn,
73
+ render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
83
74
  };
84
75
  });
85
76
  }, []);
86
- const tmpColumns = (0, _react.useMemo)(() => {
87
- // @ts-ignore
88
- return addFilter(columns ?? []);
89
- }, [addFilter, columns]);
77
+ const mergedColumns = (0, _react.useMemo)(() => transformColumns(columns ?? []), [transformColumns, columns]);
90
78
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
91
79
  heightTable: height,
92
80
  style: {
@@ -95,14 +83,13 @@ const Grid = props => {
95
83
  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
96
84
  tableRef: tableRef,
97
85
  components: {
98
- ...components,
99
- body: {
100
- cell: _EditableCell.default
101
- }
86
+ ...components
87
+ },
88
+ columns: mergedColumns,
89
+ style: {
90
+ ...style,
91
+ minHeight: height
102
92
  }
103
- // columns={mergedColumns}
104
- ,
105
- columns: tmpColumns
106
93
  }))));
107
94
  };
108
95
  var _default = exports.default = Grid;
@@ -2,8 +2,12 @@ import React from 'react';
2
2
  import 'dayjs/locale/es';
3
3
  import 'dayjs/locale/vi';
4
4
  import type { TableEditProps } from "../type";
5
+ import type { GetRowKey } from "../type";
5
6
  type Props<RecordType> = TableEditProps<RecordType> & {
6
7
  tableRef: any;
8
+ triggerChangeColumns?: () => void;
9
+ triggerChangeData?: (newData: RecordType[], type: string) => void;
10
+ getRowKey: GetRowKey<RecordType>;
7
11
  };
8
12
  declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
9
13
  export default GridEdit;
@@ -21,7 +21,8 @@ require("dayjs/locale/es");
21
21
  require("dayjs/locale/vi");
22
22
  var _TableGrid = _interopRequireDefault(require("../TableGrid"));
23
23
  var _hooks = require("../hooks");
24
- var _Message = _interopRequireDefault(require("./../Message/Message"));
24
+ var _Message = _interopRequireDefault(require("../../Message/Message"));
25
+ var _Command = _interopRequireDefault(require("../Command"));
25
26
  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
27
  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
28
  _dayjs.default.extend(_customParseFormat.default);
@@ -32,17 +33,23 @@ const GridEdit = props => {
32
33
  t,
33
34
  columns,
34
35
  dataSource,
36
+ components,
35
37
  allowResizing,
36
38
  rowKey = 'id',
37
39
  selectionSettings,
38
40
  height,
39
41
  format,
40
- onDataChange,
42
+ // onDataChange,
43
+ triggerChangeData,
41
44
  onCellPaste,
42
45
  onCellChange,
43
- components,
46
+ style,
47
+ getRowKey,
44
48
  ...rest
45
49
  } = props;
50
+
51
+ // const forceUpdate = useForceUpdate();
52
+ const [updateKey, setUpdateKey] = (0, _react.useState)(0);
46
53
  const isSelecting = (0, _react.useRef)(false);
47
54
  const startCell = (0, _react.useRef)(null);
48
55
  const isSelectingRow = (0, _react.useRef)(false);
@@ -125,6 +132,30 @@ const GridEdit = props => {
125
132
  }
126
133
  setSelectedCells(newSelectedCells);
127
134
  };
135
+ const handleClickRowHeader = (row, col) => {
136
+ const newSelectedCells = new Set();
137
+ for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
138
+ for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
139
+ newSelectedCells.add(`${r}-${c}`);
140
+ }
141
+ }
142
+ setSelectedCells(newSelectedCells);
143
+ };
144
+ const handleClickColHeader = (column, indexColumn) => {
145
+ const newSelectedCells = new Set();
146
+ for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
147
+ for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
148
+ newSelectedCells.add(`${r}-${c}`);
149
+ }
150
+ }
151
+
152
+ // console.log('newSelectedCells', newSelectedCells)
153
+ // setSelectedCells(newSelectedCells)
154
+
155
+ setSelectedCells(new Set(newSelectedCells));
156
+ // forceUpdate();
157
+ setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
158
+ };
128
159
  const handleMouseDownColIndex = (row, col, e) => {
129
160
  if (e.button === 2) {
130
161
  e.stopPropagation();
@@ -327,6 +358,7 @@ const GridEdit = props => {
327
358
  ...item,
328
359
  ...row
329
360
  });
361
+ triggerChangeData?.(newData, 'onChange');
330
362
 
331
363
  // trigger DataChange
332
364
  // setData(newData);
@@ -347,14 +379,16 @@ const GridEdit = props => {
347
379
  record,
348
380
  type,
349
381
  newState,
350
- prevState
382
+ prevState,
383
+ option,
384
+ field
351
385
  } = args;
352
386
 
353
387
  // console.log('newState', newState)
354
388
  //
355
389
  // console.log('getValues()', getValues())
356
390
 
357
- // const record = getValues()
391
+ // const newRecord = getValues()
358
392
 
359
393
  if (type === 'enter') {
360
394
  console.log('aaaaaa enter');
@@ -366,18 +400,21 @@ const GridEdit = props => {
366
400
  // const newDataUpdate = updateData(data, callbackData, rowKey as any)
367
401
 
368
402
  console.log('callbackData', callbackData);
369
- const newRecord = callbackData;
370
- onSubmit(newRecord);
403
+ const callbackRecord = callbackData;
404
+ Object.entries(callbackRecord).forEach(([name, value]) => {
405
+ setValue(name, value);
406
+ });
407
+ onSubmit(callbackRecord);
371
408
  };
372
409
  if (onCellChange) {
373
410
  if (onCellChange.length > 1) {
374
411
  console.log('onCellChange Callback');
375
412
  onCellChange({
376
- field: '',
413
+ field,
377
414
  indexCol: 1,
378
415
  type: 'onChange',
379
- rows: [],
380
416
  value: newState,
417
+ option,
381
418
  indexRow: 1,
382
419
  rowData: record,
383
420
  rowId: '',
@@ -387,10 +424,10 @@ const GridEdit = props => {
387
424
  } else {
388
425
  console.log('onCellChange');
389
426
  onCellChange({
390
- field: '',
427
+ field,
391
428
  indexCol: 1,
392
429
  type: 'onChange',
393
- rows: [],
430
+ option,
394
431
  value: newState,
395
432
  indexRow: 1,
396
433
  rowData: record,
@@ -555,6 +592,7 @@ const GridEdit = props => {
555
592
  if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
556
593
  return {
557
594
  ...col,
595
+ className: 'rc-ui-cell-editable',
558
596
  render: (value, record, rowIndex) => {
559
597
  return /*#__PURE__*/_react.default.createElement("div", {
560
598
  className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -562,13 +600,45 @@ const GridEdit = props => {
562
600
  focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
563
601
  }),
564
602
  onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
565
- onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
603
+ onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
604
+ onClick: () => handleClickRowHeader(rowIndex, colIndex)
566
605
  }, /*#__PURE__*/_react.default.createElement("div", {
567
606
  className: 'ui-rc_content'
568
607
  }, rowIndex + 1));
569
608
  }
570
609
  };
571
610
  }
611
+ if (col.dataIndex === 'command' || col.field === 'command') {
612
+ return {
613
+ ...col,
614
+ title: col.headerText ?? col.title,
615
+ ellipsis: col.ellipsis !== false,
616
+ onCell: () => ({
617
+ className: 'ui-rc-cell-command'
618
+ }),
619
+ // render: (value: any, record: any, rowIndex: number) => {
620
+ render: () => {
621
+ return /*#__PURE__*/_react.default.createElement("div", {
622
+ className: (0, _classnames.default)('ui-rc-cell-command__content', {})
623
+ }, col.commandItems && col.commandItems?.map((item, indexComm) => {
624
+ if (item.visible !== false) {
625
+ // return (
626
+ // <span>{item.title}</span>
627
+ // )
628
+
629
+ return /*#__PURE__*/_react.default.createElement(_Command.default, {
630
+ key: `command-${indexComm}`,
631
+ item: item,
632
+ onClick: e => {
633
+ e.preventDefault();
634
+ // handleCommandClick({command: item, rowData: record, index: rowIndex})
635
+ }
636
+ });
637
+ }
638
+ }));
639
+ }
640
+ };
641
+ }
572
642
  return {
573
643
  ...col,
574
644
  onCell: (record, rowIndex) => ({
@@ -628,12 +698,20 @@ const GridEdit = props => {
628
698
  handleEdit(record, col, col.editType, event);
629
699
  }
630
700
  },
701
+ // onMouseDown: (event) => {
702
+ // handleMouseDown(rowIndex, colIndex, event)
703
+ // },
704
+ //
705
+ // onMouseEnter: () => {
706
+ // handleMouseEnter(rowIndex, colIndex)
707
+ // },
708
+
631
709
  onClick: () => {
632
710
  if (record[rowKey] !== editingKey && editingKey !== '') {
633
711
  setEditingKey('');
634
712
  }
635
713
  },
636
- className: isEditing(record) ? 'cell-editing' : 'cell-editable',
714
+ className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
637
715
  record,
638
716
  column: col,
639
717
  editType: (0, _hooks.getEditType)(col, record),
@@ -641,23 +719,28 @@ const GridEdit = props => {
641
719
  title: col.title,
642
720
  'data-col-index': colIndex,
643
721
  'data-row-index': rowIndex,
644
- colIndex: colIndex,
722
+ // colIndex: colIndex,
645
723
  indexCol: colIndex,
646
724
  indexRow: rowIndex,
647
725
  editing: isEditing(record),
648
726
  tabIndex: (rowIndex ?? 0) * columns.length + colIndex
649
727
  }),
728
+ onHeaderCell: data => ({
729
+ ...col.onHeaderCell(),
730
+ onClick: () => {
731
+ handleClickColHeader(data, colIndex);
732
+ }
733
+ }),
650
734
  render: (value, record, rowIndex) => {
651
735
  return /*#__PURE__*/_react.default.createElement("div", {
652
736
  className: (0, _classnames.default)('ui-rc_cell-content', {
653
737
  selected: selectedCells.has(`${rowIndex}-${colIndex}`)
654
738
  }),
655
739
  onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
656
- onMouseEnter: () => handleMouseEnter(rowIndex, colIndex),
657
- onMouseLeave: () => {}
740
+ onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
658
741
  }, /*#__PURE__*/_react.default.createElement("div", {
659
742
  className: 'ui-rc_content'
660
- }, (0, _useColumns.renderContent)(col, value, record, rowIndex)));
743
+ }, (0, _useColumns.renderContent)(col, value, record, rowIndex, format)));
661
744
  }
662
745
  };
663
746
  });
@@ -677,12 +760,14 @@ const GridEdit = props => {
677
760
  control,
678
761
  trigger,
679
762
  getValues,
680
- handleCellChange
763
+ handleCellChange,
764
+ getRowKey
681
765
  }
682
766
  }, /*#__PURE__*/_react.default.createElement("form", {
683
767
  onSubmit: handleSubmit(onSubmit)
684
768
  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
685
769
  t: t,
770
+ key: updateKey,
686
771
  tableRef: tableRef,
687
772
  dataSource: dataSource,
688
773
  components: {
@@ -703,8 +788,10 @@ const GridEdit = props => {
703
788
  checkboxOnly: true
704
789
  } : undefined,
705
790
  style: {
791
+ ...style,
706
792
  minHeight: height
707
- }
793
+ },
794
+ rowHoverable: false
708
795
  }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
709
796
  position: toast,
710
797
  toastOptions: {
@@ -6,10 +6,13 @@ import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/in
6
6
  import type { ToolbarItem } from "rc-master-ui/es/toolbar";
7
7
  import type { ItemType } from "rc-master-ui/es/menu/interface";
8
8
  import type { FieldNames, FilterFunc } from "rc-select/es/Select";
9
+ import type { ColorPickerProps } from "antd";
9
10
  export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
10
11
  export type AnyObject = Record<PropertyKey, any>;
11
12
  export type SelectMode = 'checkbox' | 'radio' | undefined;
12
13
  export type ITextAlign = 'center' | 'left' | 'right';
14
+ export type Frozen = 'left' | 'right' | 'Left' | 'Right';
15
+ export type ContextMenuItem = ItemType & {};
13
16
  export type ITemplateColumn = {
14
17
  value: any;
15
18
  column: any;
@@ -39,6 +42,7 @@ export type ColumnSelectTable = {
39
42
  };
40
43
  export type IEditSelectSettings = {
41
44
  fieldKey?: string;
45
+ options: any[];
42
46
  /** get value form other field **/
43
47
  fieldValue?: string;
44
48
  /** get label form other field **/
@@ -46,7 +50,6 @@ export type IEditSelectSettings = {
46
50
  inputKey?: string;
47
51
  filterKey?: string[];
48
52
  selectMode?: SelectMode;
49
- options: any[];
50
53
  getPasteValue?: (value: any) => Record<string, any> | null;
51
54
  validateOption?: (rowData: any, field: string) => any[];
52
55
  defaultOptions?: any[];
@@ -84,14 +87,18 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
84
87
  format?: IFormat;
85
88
  allowFiltering?: boolean;
86
89
  operator?: FilterOperator;
90
+ hideOperator?: boolean;
87
91
  placeholder?: string;
88
92
  showInColumnChoose?: boolean;
89
93
  typeFilter?: TypeFilter;
90
94
  headerText?: string;
95
+ textAlign?: ITextAlign;
96
+ frozen?: Frozen;
91
97
  template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
92
98
  showTooltip?: boolean;
93
99
  tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
94
100
  headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
101
+ commandItems?: CommandItem[];
95
102
  children?: ColumnType<RecordType>[];
96
103
  };
97
104
  export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
@@ -119,7 +126,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
119
126
  format?: IFormat;
120
127
  t?: any;
121
128
  lang?: string;
122
- contextMenuItems?: any[];
129
+ contextMenuItems?: ContextMenuItem[];
123
130
  contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
124
131
  contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
125
132
  contextMenuClick?: (args: ContextInfo<RecordType>) => void;
@@ -140,7 +147,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
140
147
  direction: 'Ascending' | 'Descending' | null;
141
148
  }) => void;
142
149
  selectionSettings?: SelectionSettings;
143
- rowKey?: string;
150
+ rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
144
151
  rowSelection?: RowSelection<RecordType>;
145
152
  rowSelected?: (args: {
146
153
  type: string;
@@ -148,7 +155,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
148
155
  selected: RecordType | RecordType[];
149
156
  }) => void;
150
157
  dataSourceFilter?: SourceFilter[];
151
- onFilterClick?: (column: ColumnType<RecordType>, callback: (key: string, data: any) => void) => void;
158
+ onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
152
159
  loading?: boolean;
153
160
  allowResizing?: boolean;
154
161
  onDataChange?: (data: RecordType[]) => void;
@@ -156,18 +163,30 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
156
163
  export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
157
164
  columns: ColumnsTable<RecordType>;
158
165
  onCellPaste?: ICellPasteModel<RecordType>;
159
- onCellChange?: (args: CellChangeArgs, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
166
+ onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
160
167
  }
161
168
  export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
162
- export type CellChangeArgs = {
169
+ export interface CommandItem {
170
+ id: string;
171
+ type?: string;
172
+ visible?: boolean;
173
+ title: string;
174
+ color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
175
+ tooltip?: string;
176
+ icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
177
+ template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
178
+ client?: boolean;
179
+ confirmDialog?: boolean;
180
+ }
181
+ export type CellChangeArgs<T> = {
163
182
  type: 'onPaste' | 'onChange' | 'onCellPaste';
164
183
  value: any;
165
- rowData: any;
166
- rows: any[];
167
- rowsData: any[];
184
+ option: AnyObject;
185
+ rowData: T;
186
+ rowsData: T[];
168
187
  indexRow: number;
169
188
  rowId?: string;
170
- field: string;
189
+ field: string | undefined;
171
190
  indexCol: any;
172
191
  sumValue?: any[];
173
192
  };
@@ -188,13 +207,10 @@ export type SourceFilter = {
188
207
  loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
189
208
  };
190
209
  export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
191
- export type SelectionSettings = {
210
+ export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
192
211
  mode?: 'checkbox' | 'radio';
193
212
  type?: 'single' | 'multiple';
194
213
  checkboxOnly?: boolean;
195
- hideSelectAll?: boolean;
196
- columnWidth?: number | string;
197
- defaultSelectedRowKeys?: Key[];
198
214
  };
199
215
  export type RecordDoubleClickEventArgs<RecordType> = {
200
216
  rowData: RecordType;
@@ -223,3 +239,5 @@ export type IFormat = {
223
239
  monthFormat?: string;
224
240
  yearFormat?: string;
225
241
  };
242
+ export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
243
+ export type Presets = Required<ColorPickerProps>['presets'][number];
@@ -1,12 +1,13 @@
1
1
  /// <reference types="react" />
2
- import type { IFormat } from "./type";
2
+ import type { AnyObject, IFormat } from "./type";
3
3
  import type { SubmitHandler } from "react-hook-form";
4
- export interface IContext {
4
+ import type { GetRowKey } from "./type";
5
+ export interface IContext<RecordType> {
5
6
  searchValue?: any;
6
7
  setSearchValue?: any;
7
8
  open?: boolean;
8
9
  setOpen?: any;
9
- rowKey: string;
10
+ rowKey: string | keyof RecordType | GetRowKey<RecordType>;
10
11
  onSave?: any;
11
12
  form?: any;
12
13
  format?: IFormat;
@@ -15,13 +16,16 @@ export interface IContext {
15
16
  handleSubmit?: any;
16
17
  onSubmit?: SubmitHandler<any>;
17
18
  getValues?: any;
18
- handleCellChange?: ({ key, record, type }: ContextCellChange) => void;
19
+ handleCellChange?: (args: ContextCellChange<RecordType>) => void;
20
+ getRowKey?: GetRowKey<RecordType>;
19
21
  }
20
- export type ContextCellChange = {
21
- key: string;
22
+ export type ContextCellChange<RecordType = AnyObject> = {
23
+ key: string | keyof RecordType | GetRowKey<RecordType>;
22
24
  record: any;
25
+ field: string | undefined;
26
+ option: any;
23
27
  newState?: any;
24
28
  prevState?: any;
25
29
  type: 'enter' | 'blur' | 'outClick';
26
30
  };
27
- export declare const TableContext: import("react").Context<IContext>;
31
+ export declare const TableContext: import("react").Context<IContext<any>>;
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.TableContext = void 0;
7
7
  var _react = require("react");
8
+ // import {AnyObject} from "antd/es/_util/type";
9
+
8
10
  const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
9
11
  rowKey: 'id'
10
12
  });
package/lib/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default as GridComponent } from './grid-component';
2
+ export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem } from './grid-component';