react-table-edit 1.4.9 → 1.4.10

package/dist/index.mjs

@@ -22988,7 +22988,7 @@ const SelectTable = forwardRef((props, ref) => {
                                 }, children: jsxs("div", { className: 'r-select-grid', children: [jsx("div", { className: classnames('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
-const SelectTableBox = (props) => {
+const SelectTableBox$1 = (props) => {
     const { isMulti, isLabel, confirmHandle, id, fieldValue, fieldLabel, labelComponent, options, loadOptions, control, placeholder, disabled, name, label, labelSize, required, errors, inLine, callback, desciptionLabel, classLabel, isClearable, defaultValue, handleAddNew, columns, ...rest } = props;
     const handChange = ({ onChange, val }) => {
         onChange((!isNullOrUndefined$1(val) && isMulti) ? val.map((item) => item.value) : ((!isNullOrUndefined$1(val) && !isMulti) ? (fieldValue ? val[fieldValue] : val?.value) : undefined));
@@ -23189,7 +23189,7 @@ const EditForm = forwardRef((props, ref) => {
                     return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(TextInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
                 }
                 else if (item.type === 'select') {
-                    return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    return (jsx(Col$1, { xl: 12, onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox$1, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `text-left ${labelSize}`, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
                 }
             }) }));
     };
@@ -42319,6 +42319,131 @@ const handleCtrlD = (e, params) => {
     }
 };
 
+const SelectTableBox = (props) => {
+    const { isMulti, isLabel, confirmHandle, id, fieldValue, fieldLabel, labelComponent, options, loadOptions, control, placeholder, disabled, name, label, labelSize, required, errors, inLine, callback, desciptionLabel, classLabel, isClearable, defaultValue, handleAddNew, columns, ...rest } = props;
+    const handChange = ({ onChange, val }) => {
+        onChange((!isNullOrUndefined$1(val) && isMulti) ? val.map((item) => item.value) : ((!isNullOrUndefined$1(val) && !isMulti) ? (fieldValue ? val[fieldValue] : val?.value) : undefined));
+        if (callback) {
+            callback(val);
+        }
+    };
+    const renderLabel = (props) => {
+        const { t } = useTranslation();
+        const { isLabel, desciptionLabel, id, classLabel, name, label, required } = props;
+        return (jsxs(Fragment, { children: [isLabel === false ? '' : jsxs(Label$1, { id: `label-${id}`, className: classLabel, for: name, children: [t(label ? label : ''), " ", required ? jsx("span", { className: "text-danger", children: "*" }) : ''] }), (!isNullOrUndefined$1(desciptionLabel) && desciptionLabel !== '') ?? jsx(Fragment$1, { children: jsx(UncontrolledTooltip, { target: `label-${id}`, children: t(desciptionLabel ?? '') }) })] }));
+    };
+    return (jsx(Fragment, { children: jsxs("div", { className: classnames(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
+                [labelSize ? labelSize : '']: labelSize,
+                'form-row-inline-error': errors
+            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+                                return (jsx(SelectTable, { ...rest, id: id, value: (isMulti ? value?.length > 0 : value) ? (!isMulti ? (options.find((val) => val[fieldValue ?? 'value'] === value) ?? (defaultValue ?? '')) : value) : (isMulti ? [] : undefined), 
+                                    // Giá trị của SelectTable, nếu isMulti là true và value có độ dài lớn hơn 0, hoặc nếu isMulti là false và value có giá trị, 
+                                    // thì tìm giá trị tương ứng trong options hoặc sử dụng defaultValue. Nếu không, sử dụng giá trị mặc định tùy thuộc vào isMulti.
+                                    onChange: (val) => {
+                                        if (isMulti || (fieldValue && val ? val[fieldValue] : val?.value) !== value) { // Kiểm tra nếu giá trị mới khác với giá trị hiện tại
+                                            if (confirmHandle) { // Nếu có hàm confirmHandle
+                                                confirmHandle(handChange, onChange, val); // Gọi hàm confirmHandle với các tham số tương ứng
+                                            }
+                                            else {
+                                                if (isMulti) {
+                                                    onChange(!isNullOrUndefined$1(val) ? val.map((item) => item[fieldValue ?? 'value']) : []);
+                                                }
+                                                else {
+                                                    onChange(!isNullOrUndefined$1(val) ? val[fieldValue ?? 'value'] : undefined);
+                                                }
+                                                // Nếu giá trị mới không null hoặc undefined và isMulti là true, thì lấy mảng các giá trị. 
+                                                // Nếu isMulti là false, lấy giá trị mới hoặc giá trị của fieldValue.
+                                                if (callback) { // Nếu có hàm callback
+                                                    callback(val); // Gọi hàm callback với giá trị mới
+                                                }
+                                            }
+                                        }
+                                    }, handleAdd: handleAddNew, isClearable: isClearable, isMulti: isMulti, placeholder: placeholder, invalid: errors, loadOptions: loadOptions, options: options, isDisabled: disabled, columns: columns, fieldValue: fieldValue, fieldLabel: fieldLabel, formatOptionLabel: labelComponent ? labelComponent : undefined }));
+                            } }), errors && jsx(FormFeedback$1, { children: errors?.message })] })] }) }));
+};
+
+const EditFormInline = forwardRef((props, ref) => {
+    const { id, field, rowData, onChange, onChangeField, onKeyDown, defaultValues, schema, indexRow, template, displayValue, onFormOpen, labelSize = 'label-small' } = props;
+    useRef(null);
+    useRef(null);
+    const [itemsField, setItemsField] = useState([]);
+    const [onFocus, setOnFocus] = useState(false);
+    useTranslation();
+    const { control, handleSubmit, getValues, reset, setValue, formState: { errors } } = useForm({
+        mode: 'onChange',
+        defaultValues,
+        resolver: o(schema)
+    });
+    const focusElement = (id, focus) => {
+        const element = document.getElementById(id);
+        if (element) {
+            if (element.className.includes('react-select')) {
+                element.getElementsByTagName('input')[0]?.focus();
+            }
+            else {
+                element.focus();
+                if (focus) {
+                    element.setSelectionRange(0, element.innerText.length - 1);
+                }
+            }
+        }
+    };
+    const handleOnKeyDown = (e) => {
+    };
+    const formKeyDown = (e, handSubmit) => {
+        if (e.code === 'Enter') {
+            handSubmit();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const formItemKeyDown = (e, index) => {
+        if (e.code === 'ArrowRight' && index < itemsField.length - 1) {
+            focusElement(`form-element-${field}-${index + 1}`);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.code === 'ArrowLeft' && index > 0) {
+            focusElement(`form-element-${field}-${index - 1}`);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const elementChange = (field) => {
+        if (onChangeField) {
+            onChangeField(rowData, field, setValue, getValues);
+            const rs = getValues();
+            if (rs) {
+                onChange(rs);
+            }
+        }
+    };
+    useEffect(() => {
+        if (onFocus && itemsField.length > 0) {
+            itemsField.forEach((ele) => {
+                setValue(ele.name, (rowData[ele.name] ?? ""));
+            });
+            focusElement(`form-element-${field}-${0}`);
+        }
+    }, [onFocus, itemsField]);
+    return (jsxs("div", { className: "form-edit-inline", ref: ref, id: id, children: [!onFocus && jsx("div", { className: "form__display", onClick: () => {
+                    if (onFormOpen && itemsField.length === 0) {
+                        onFormOpen(rowData, itemsField, setItemsField);
+                    }
+                    setOnFocus(true);
+                }, onKeyDown: e => formKeyDown(e, handleSubmit), children: template ? template(rowData, indexRow) : displayValue }), jsx("div", { className: `form__edit ${onFocus ? 'active' : ''}`, onKeyDown: e => handleOnKeyDown(), children: itemsField.map((item, index) => {
+                    if (item.type === 'numeric') {
+                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(NumberInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, errors: errors[item.name], disabled: item.disabled, min: item.min, max: item.max, inLine: false, fractionCurrency: item.fraction, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                    else if (item.type === 'text') {
+                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(TextInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, inLine: false, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                    else if (item.type === 'select') {
+                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(SelectTableBox, { id: `form-element-${field}-${index}`, options: item.options ?? [], control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, inLine: false, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
+                    }
+                }) })] }));
+});
+
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate } = props;
@@ -42703,6 +42828,18 @@ const TableEdit = forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
+            case 'formInline':
+                return (jsx(EditFormInline, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
+                        Object.assign(row, val);
+                        handleDataChange(row, col, indexRow);
+                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
+                        return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
+                    } }));
             default:
                 return (jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classnames('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
                         if (row[col.field] != val.target?.value) {
@@ -43118,9 +43255,7 @@ const TableEdit = forwardRef((props, ref) => {
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
             return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                        right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
-                        padding: 0,
-                        textAlign: col.textAlign ? col.textAlign : 'left'
+                        right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined
                     }, onClick: (e) => {
                         if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
                             if (!editDisable && indexRow != indexFocus) {
@@ -43150,8 +43285,8 @@ const TableEdit = forwardRef((props, ref) => {
                             e.stopPropagation();
                         }
                     }, children: jsx("div", { className: classnames('r-rowcell-div'), children: jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
-                                margin: typeDis === 1 ? 2 : !errorMessage ? '7px 9px' : 2
-                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow)) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                                textAlign: col.textAlign ? col.textAlign : 'left'
+                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsx(Fragment$1, { children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
         }
     };
     const renderFooterCol = (col, indexCol) => {
@@ -64942,7 +65077,7 @@ const TabSelectFileImportExcel = (props) => {
                                         getSheetsExcel(e.target.files[0], setValue, setOptionSheetName);
                                     }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] })] }) : jsxs(Fragment$1, { children: [jsx("div", { className: 'fs-4 bolder', children: t('Drag and drop files here') }), jsx("div", { className: 'my-50', children: t('or') }), jsxs(Button$1, { tag: Label$1, outline: true, className: 'me-75', size: 'md', color: 'primary', children: [jsx(SvgArrowLeftCircle, { fontSize: 18, className: 'me-50' }), t('Select file'), jsx(Input$1, { type: 'file', onChange: (e) => {
                                         getSheetsExcel(e.target.files[0], setValue, setOptionSheetName);
-                                    }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] }), jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(SelectTableBox, { labelSize: "d-flex form-row-inline label-medium", control: control, name: "sheetId", label: t("Sheet name"), required: true, errors: errors.sheetId, placeholder: t("Select"), options: optionSheetName }) }), jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(NumberInput, { control: control, name: "headerRow", labelSize: "d-flex form-row-inline label-medium", label: t("Header row"), errors: errors.headerRow }) })] })] }));
+                                    }, hidden: true, accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' })] }), jsx("div", { className: 'mt-1', children: t('Accepts .xls, .xlsx, .csv files') })] }) }), jsxs(Row$1, { className: `${getValues('file') ? '' : 'd-none'} m-0 gy-1`, children: [jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(SelectTableBox$1, { labelSize: "d-flex form-row-inline label-medium", control: control, name: "sheetId", label: t("Sheet name"), required: true, errors: errors.sheetId, placeholder: t("Select"), options: optionSheetName }) }), jsx(Col$1, { lg: 6, md: 12, xs: 12, children: jsx(NumberInput, { control: control, name: "headerRow", labelSize: "d-flex form-row-inline label-medium", label: t("Header row"), errors: errors.headerRow }) })] })] }));
 };
 
 const TabMergeImportExcel = (props) => {