react-table-edit 1.4.35 → 1.4.36
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.
- package/dist/component/select-table/index.d.ts +1 -0
- package/dist/component/type/index.d.ts +3 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -30,6 +30,7 @@ type Props = {
|
|
|
30
30
|
onCloseMenu?: () => void;
|
|
31
31
|
footerComponent?: () => JSX.Element;
|
|
32
32
|
onChange: (val: any) => void;
|
|
33
|
+
compareFunction?: (row?: any) => boolean | undefined;
|
|
33
34
|
};
|
|
34
35
|
declare const SelectTable: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
|
|
35
36
|
export { SelectTable };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Dispatch, ReactNode, SetStateAction
|
|
1
|
+
import { Dispatch, JSX, ReactNode, SetStateAction } from "react";
|
|
2
2
|
import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form";
|
|
3
3
|
/** Căn lề văn bản trong bảng */
|
|
4
4
|
type ITextAlign = 'center' | 'left' | 'right';
|
|
@@ -104,6 +104,8 @@ export type ISettingSelectElement = {
|
|
|
104
104
|
loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
|
|
105
105
|
/** Sự kiện mở menu */
|
|
106
106
|
onOpenMenu?: (row: any, col: IColumnTable, indexRow: number) => void;
|
|
107
|
+
/** Tuỳ chỉnh xác định hàng được chọn */
|
|
108
|
+
compareFunction?: (rowOption?: any, rowData?: any) => boolean;
|
|
107
109
|
};
|
|
108
110
|
/** Cấu hình cho kiểu số */
|
|
109
111
|
export type ISettingNumericElement = {
|
package/dist/index.d.ts
CHANGED
|
@@ -108,6 +108,8 @@ type ISettingSelectElement = {
|
|
|
108
108
|
loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
|
|
109
109
|
/** Sự kiện mở menu */
|
|
110
110
|
onOpenMenu?: (row: any, col: IColumnTable, indexRow: number) => void;
|
|
111
|
+
/** Tuỳ chỉnh xác định hàng được chọn */
|
|
112
|
+
compareFunction?: (rowOption?: any, rowData?: any) => boolean;
|
|
111
113
|
};
|
|
112
114
|
/** Cấu hình cho kiểu số */
|
|
113
115
|
type ISettingNumericElement = {
|
|
@@ -530,6 +532,7 @@ type Props$1 = {
|
|
|
530
532
|
onCloseMenu?: () => void;
|
|
531
533
|
footerComponent?: () => JSX.Element;
|
|
532
534
|
onChange: (val: any) => void;
|
|
535
|
+
compareFunction?: (row?: any) => boolean | undefined;
|
|
533
536
|
};
|
|
534
537
|
declare const SelectTable: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<unknown>>;
|
|
535
538
|
|
package/dist/index.js
CHANGED
|
@@ -17849,7 +17849,7 @@ const TextInput = (props) => {
|
|
|
17849
17849
|
|
|
17850
17850
|
const defaultMaxHeight$1 = 250;
|
|
17851
17851
|
const SelectTable = React$5.forwardRef((props, ref) => {
|
|
17852
|
-
const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel } = props;
|
|
17852
|
+
const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
|
|
17853
17853
|
const selectTableRef = React$5.useRef(null);
|
|
17854
17854
|
const selectMenuTableRef = React$5.useRef(null);
|
|
17855
17855
|
const inputRef = React$5.useRef(null);
|
|
@@ -17888,7 +17888,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
17888
17888
|
};
|
|
17889
17889
|
React$5.useEffect(() => {
|
|
17890
17890
|
if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
|
|
17891
|
-
const index = (optionsLoad ? optionsLoad : options)?.findIndex((
|
|
17891
|
+
const index = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
|
|
17892
17892
|
if (index >= 0) {
|
|
17893
17893
|
selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
|
|
17894
17894
|
}
|
|
@@ -17995,7 +17995,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
17995
17995
|
newIndex = indexFocus + 1;
|
|
17996
17996
|
}
|
|
17997
17997
|
else if (value) {
|
|
17998
|
-
newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((
|
|
17998
|
+
newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
|
|
17999
17999
|
}
|
|
18000
18000
|
if (newIndex < (optionsLoad ? optionsLoad : options).length) {
|
|
18001
18001
|
setIndexFocus(newIndex);
|
|
@@ -18019,7 +18019,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
18019
18019
|
newIndex = indexFocus - 1;
|
|
18020
18020
|
}
|
|
18021
18021
|
else if (value) {
|
|
18022
|
-
newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((
|
|
18022
|
+
newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
|
|
18023
18023
|
}
|
|
18024
18024
|
if (newIndex >= 0) {
|
|
18025
18025
|
setIndexFocus(newIndex);
|
|
@@ -18115,9 +18115,9 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
18115
18115
|
};
|
|
18116
18116
|
const RenderElement = React__default["default"].memo((props) => {
|
|
18117
18117
|
const { indexRow, row, isSelected, level = 0 } = props;
|
|
18118
|
-
return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
|
|
18118
|
+
return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
|
|
18119
18119
|
if (isMulti) {
|
|
18120
|
-
const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
|
|
18120
|
+
const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
|
|
18121
18121
|
if (index > -1) {
|
|
18122
18122
|
value?.splice(index, 1);
|
|
18123
18123
|
handChange([...value]);
|
|
@@ -18146,14 +18146,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
18146
18146
|
}
|
|
18147
18147
|
return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`,
|
|
18148
18148
|
// ref={refRow}
|
|
18149
|
-
className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: {
|
|
18149
|
+
className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
|
|
18150
18150
|
minWidth: col.minWidth,
|
|
18151
18151
|
width: col.width,
|
|
18152
18152
|
maxWidth: col.maxWidth,
|
|
18153
18153
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
18154
18154
|
}, onClick: (e) => {
|
|
18155
18155
|
if (isMulti) {
|
|
18156
|
-
const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
|
|
18156
|
+
const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
|
|
18157
18157
|
if (index > -1) {
|
|
18158
18158
|
value?.splice(index, 1);
|
|
18159
18159
|
handChange([...value]);
|
|
@@ -18198,7 +18198,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
|
|
|
18198
18198
|
}, readOnly: true, className: classNames$2('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
|
|
18199
18199
|
return (renderHeaderCol(col, index));
|
|
18200
18200
|
})] }) }), ((optionsLoad ? optionsLoad : options) && !isLoading) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("tbody", { className: 'r-select-gridcontent', children: [haveCreateNew && jsxRuntime.jsx(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t('Create')} '${searchTerm}'`, isCreated: true } }), (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
|
|
18201
|
-
const isSelected = isMulti && value?.some((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
|
|
18201
|
+
const isSelected = isMulti && value?.some((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
|
|
18202
18202
|
return (jsxRuntime.jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row: row }, `select-table-${indexRow}`));
|
|
18203
18203
|
})] }) })] }), ((((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0) && !haveCreateNew && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] })] }));
|
|
18204
18204
|
};
|
|
@@ -42940,10 +42940,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42940
42940
|
optionsSelect = col.selectSettings?.options ? (col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options) : [];
|
|
42941
42941
|
}
|
|
42942
42942
|
if (col.selectSettings?.isMulti) {
|
|
42943
|
-
valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? 'value'] === y));
|
|
42943
|
+
valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(x, row) : x[col.selectSettings?.fieldValue ?? 'value'] === y));
|
|
42944
42944
|
}
|
|
42945
42945
|
else {
|
|
42946
|
-
valueSelect = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? 'value'] === row[col.field]) : '';
|
|
42946
|
+
valueSelect = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? optionsSelect?.find((val) => col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(val, row) : val[col.selectSettings?.fieldValue ?? 'value'] === row[col.field]) : '';
|
|
42947
42947
|
if (!valueSelect && col.selectSettings?.defaultValue) {
|
|
42948
42948
|
valueSelect = col.selectSettings?.defaultValue(row);
|
|
42949
42949
|
}
|
|
@@ -42973,7 +42973,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42973
42973
|
col.callback(val, indexRow, row);
|
|
42974
42974
|
}
|
|
42975
42975
|
handleDataChange(row, col, indexRow);
|
|
42976
|
-
}, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
|
|
42976
|
+
}, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, compareFunction: (e) => col.selectSettings?.compareFunction?.(e, row), onKeyDown: (e) => {
|
|
42977
42977
|
return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
|
|
42978
42978
|
}, onOpenMenu: () => {
|
|
42979
42979
|
if (col.selectSettings?.onOpenMenu) {
|