react-table-edit 1.2.45 → 1.2.46
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/index.d.mts +6 -5
- package/dist/index.d.ts +6 -5
- package/dist/index.js +278 -244
- package/dist/index.mjs +287 -253
- package/package.json +4 -1
package/dist/index.js
CHANGED
|
@@ -55,7 +55,7 @@ __export(src_exports, {
|
|
|
55
55
|
module.exports = __toCommonJS(src_exports);
|
|
56
56
|
|
|
57
57
|
// src/component/table/index.tsx
|
|
58
|
-
var
|
|
58
|
+
var import_react17 = require("react");
|
|
59
59
|
var import_reactstrap11 = require("reactstrap");
|
|
60
60
|
var import_classnames14 = __toESM(require("classnames"));
|
|
61
61
|
var import_react_i18next12 = require("react-i18next");
|
|
@@ -476,36 +476,34 @@ var import_react_hook_form2 = require("react-hook-form");
|
|
|
476
476
|
var import_reactstrap3 = require("reactstrap");
|
|
477
477
|
var import_classnames3 = __toESM(require("classnames"));
|
|
478
478
|
var import_react5 = require("react");
|
|
479
|
+
var import_react_number_format = require("react-number-format");
|
|
479
480
|
var import_react_i18next2 = require("react-i18next");
|
|
480
481
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
481
482
|
var NumberInput = (props) => {
|
|
482
|
-
const { t } = (0, import_react_i18next2.useTranslation)();
|
|
483
483
|
const {
|
|
484
|
-
control,
|
|
485
484
|
id,
|
|
486
|
-
|
|
485
|
+
control,
|
|
486
|
+
fractionCurrency,
|
|
487
487
|
name,
|
|
488
488
|
min,
|
|
489
489
|
max,
|
|
490
|
-
type,
|
|
491
490
|
label,
|
|
492
491
|
labelSize,
|
|
493
492
|
required,
|
|
494
493
|
errors,
|
|
495
|
-
height,
|
|
496
494
|
disabled,
|
|
497
|
-
row,
|
|
498
495
|
isLabel,
|
|
496
|
+
fixedDecimalScale,
|
|
499
497
|
placeholder,
|
|
500
|
-
autoFocus,
|
|
501
498
|
inLine,
|
|
502
499
|
callback,
|
|
503
|
-
readOnly,
|
|
504
500
|
decimalSeparator = ",",
|
|
505
501
|
thousandSeparator = ".",
|
|
506
502
|
classes,
|
|
507
|
-
|
|
503
|
+
width,
|
|
504
|
+
allowNegative
|
|
508
505
|
} = props;
|
|
506
|
+
const { t } = (0, import_react_i18next2.useTranslation)();
|
|
509
507
|
const renderLabel = () => {
|
|
510
508
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, children: [
|
|
511
509
|
t(label ? label : ""),
|
|
@@ -521,64 +519,50 @@ var NumberInput = (props) => {
|
|
|
521
519
|
{
|
|
522
520
|
name,
|
|
523
521
|
control,
|
|
524
|
-
render: ({ field: { value, onChange } }) =>
|
|
525
|
-
|
|
526
|
-
{
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
522
|
+
render: ({ field: { value, onChange } }) => {
|
|
523
|
+
let floatValue = parseFloat(value);
|
|
524
|
+
const numericFormatProps = {
|
|
525
|
+
value: !isNullOrUndefined(value) ? value : "",
|
|
526
|
+
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
|
|
527
|
+
decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
|
|
528
|
+
allowNegative: allowNegative ?? false,
|
|
529
|
+
decimalScale: fractionCurrency ?? 0,
|
|
530
|
+
fixedDecimalScale
|
|
531
|
+
};
|
|
532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
533
|
+
import_react_number_format.NumericFormat,
|
|
534
|
+
{
|
|
535
|
+
...numericFormatProps,
|
|
536
|
+
className: (0, import_classnames3.default)("form-control text-right", {
|
|
537
|
+
"is-invalid": errors
|
|
538
|
+
}),
|
|
539
|
+
onValueChange: (values) => {
|
|
540
|
+
floatValue = values?.floatValue;
|
|
541
|
+
const textBeforeDot = values?.value.split(".")[1];
|
|
542
|
+
onChange(textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue);
|
|
543
|
+
},
|
|
544
|
+
onFocus: (e) => {
|
|
545
|
+
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
546
|
+
},
|
|
547
|
+
onChange: () => {
|
|
548
|
+
if (callback) {
|
|
549
|
+
callback(floatValue);
|
|
550
|
+
}
|
|
551
|
+
},
|
|
552
|
+
onBlur: () => {
|
|
553
|
+
if (max && floatValue > max) {
|
|
554
|
+
onChange(max);
|
|
555
|
+
} else if (min && floatValue < min) {
|
|
556
|
+
onChange(min);
|
|
535
557
|
} else {
|
|
536
|
-
|
|
558
|
+
onChange(floatValue);
|
|
537
559
|
}
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
onChange(flag ? `-${newVal}` : newVal);
|
|
545
|
-
},
|
|
546
|
-
onBlur: (val) => {
|
|
547
|
-
let newVal = "";
|
|
548
|
-
const flag = val.target?.value.startsWith("-");
|
|
549
|
-
if (val.target?.value.endsWith(decimalSeparator)) {
|
|
550
|
-
newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
|
|
551
|
-
} else {
|
|
552
|
-
newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
|
|
553
|
-
}
|
|
554
|
-
if (decimalSeparator !== ".") {
|
|
555
|
-
newVal = newVal.replaceAll(decimalSeparator, ".");
|
|
556
|
-
}
|
|
557
|
-
let value2 = flag ? 0 - Number(newVal) : Number(newVal);
|
|
558
|
-
if (max !== void 0 && value2 > max) {
|
|
559
|
-
value2 = max;
|
|
560
|
-
} else if (min !== void 0 && value2 < min) {
|
|
561
|
-
value2 = min;
|
|
562
|
-
}
|
|
563
|
-
onChange(value2);
|
|
564
|
-
if (callback) {
|
|
565
|
-
callback(value2);
|
|
566
|
-
}
|
|
567
|
-
},
|
|
568
|
-
style: { height: `${height}px` },
|
|
569
|
-
autoFocus,
|
|
570
|
-
disabled,
|
|
571
|
-
placeholder,
|
|
572
|
-
type: type ? type : "text",
|
|
573
|
-
invalid: errors && true,
|
|
574
|
-
className: "h-100",
|
|
575
|
-
rows: row,
|
|
576
|
-
min,
|
|
577
|
-
max,
|
|
578
|
-
readOnly,
|
|
579
|
-
...rest
|
|
580
|
-
}
|
|
581
|
-
)
|
|
560
|
+
},
|
|
561
|
+
placeholder,
|
|
562
|
+
disabled
|
|
563
|
+
}
|
|
564
|
+
);
|
|
565
|
+
}
|
|
582
566
|
}
|
|
583
567
|
),
|
|
584
568
|
errors && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
|
|
@@ -598,7 +582,7 @@ var NumberInput = (props) => {
|
|
|
598
582
|
),
|
|
599
583
|
children: [
|
|
600
584
|
renderLabel(),
|
|
601
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
|
|
585
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: width ? width : void 0 }, className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
|
|
602
586
|
]
|
|
603
587
|
}
|
|
604
588
|
) });
|
|
@@ -2875,9 +2859,79 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
|
|
|
2875
2859
|
});
|
|
2876
2860
|
|
|
2877
2861
|
// src/component/table/index.tsx
|
|
2878
|
-
var
|
|
2862
|
+
var import_react_number_format2 = require("react-number-format");
|
|
2863
|
+
|
|
2864
|
+
// src/component/table/toolbar-top.tsx
|
|
2879
2865
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2880
|
-
var
|
|
2866
|
+
var renderToolbarTop = (toolbarTopOption) => {
|
|
2867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
|
|
2868
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
|
|
2869
|
+
return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : "";
|
|
2870
|
+
}) }),
|
|
2871
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
|
|
2872
|
+
return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : "";
|
|
2873
|
+
}) }),
|
|
2874
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
|
|
2875
|
+
return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : "";
|
|
2876
|
+
}) })
|
|
2877
|
+
] }) });
|
|
2878
|
+
};
|
|
2879
|
+
var toolbar_top_default = renderToolbarTop;
|
|
2880
|
+
|
|
2881
|
+
// src/component/input-date/index.tsx
|
|
2882
|
+
var import_react16 = require("react");
|
|
2883
|
+
var import_react_datepicker = __toESM(require("react-datepicker"));
|
|
2884
|
+
var import_react_input_mask = __toESM(require("react-input-mask"));
|
|
2885
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2886
|
+
var DateInput = (props) => {
|
|
2887
|
+
const { id, onKeyDown, dateFormat, className, onChange, value } = props;
|
|
2888
|
+
const [open, setOpen] = (0, import_react16.useState)(false);
|
|
2889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2890
|
+
import_react_datepicker.default,
|
|
2891
|
+
{
|
|
2892
|
+
id,
|
|
2893
|
+
open,
|
|
2894
|
+
className,
|
|
2895
|
+
selected: value,
|
|
2896
|
+
onChange: (date) => {
|
|
2897
|
+
if (onChange) {
|
|
2898
|
+
onChange(date);
|
|
2899
|
+
}
|
|
2900
|
+
},
|
|
2901
|
+
dateFormat,
|
|
2902
|
+
locale: "vi",
|
|
2903
|
+
showMonthDropdown: true,
|
|
2904
|
+
showYearDropdown: true,
|
|
2905
|
+
dropdownMode: "select",
|
|
2906
|
+
onCalendarClose: () => setOpen(false),
|
|
2907
|
+
onCalendarOpen: () => setOpen(true),
|
|
2908
|
+
customInput: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_input_mask.default, { mask: "99/99/9999", placeholder: dateFormat }),
|
|
2909
|
+
onKeyDown: (e) => {
|
|
2910
|
+
if (e.code === "Space") {
|
|
2911
|
+
setOpen(!open);
|
|
2912
|
+
setTimeout(() => {
|
|
2913
|
+
const element = document.getElementById(id ?? "");
|
|
2914
|
+
if (element) {
|
|
2915
|
+
element.focus();
|
|
2916
|
+
}
|
|
2917
|
+
}, 100);
|
|
2918
|
+
} else {
|
|
2919
|
+
if (onKeyDown && !open) {
|
|
2920
|
+
const rs = onKeyDown(e);
|
|
2921
|
+
if (rs) {
|
|
2922
|
+
setOpen(false);
|
|
2923
|
+
}
|
|
2924
|
+
}
|
|
2925
|
+
}
|
|
2926
|
+
}
|
|
2927
|
+
}
|
|
2928
|
+
);
|
|
2929
|
+
};
|
|
2930
|
+
var input_date_default = DateInput;
|
|
2931
|
+
|
|
2932
|
+
// src/component/table/index.tsx
|
|
2933
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2934
|
+
var TableEdit = (0, import_react17.forwardRef)((props, ref) => {
|
|
2881
2935
|
const { t } = (0, import_react_i18next12.useTranslation)();
|
|
2882
2936
|
const {
|
|
2883
2937
|
idTable,
|
|
@@ -2906,35 +2960,35 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
2906
2960
|
isMulti,
|
|
2907
2961
|
disableAutoKey
|
|
2908
2962
|
} = props;
|
|
2909
|
-
(0,
|
|
2963
|
+
(0, import_react17.useImperativeHandle)(ref, () => {
|
|
2910
2964
|
return {
|
|
2911
2965
|
refeshFocusRow: handleRefeshRow
|
|
2912
2966
|
};
|
|
2913
2967
|
});
|
|
2914
|
-
const [refreshRow, setRefreshRow] = (0,
|
|
2915
|
-
const [indexFocus, setIndexFocus] = (0,
|
|
2916
|
-
const [selectedRows, setSelectedRows] = (0,
|
|
2917
|
-
const [headerColumns, setHeaderColumns] = (0,
|
|
2918
|
-
const [contentColumns, setContentColumns] = (0,
|
|
2919
|
-
const [levelCol, setLevelCol] = (0,
|
|
2920
|
-
const [columnFistEdit, setColumnFistEdit] = (0,
|
|
2921
|
-
const [columnLastEdit, setColumnlastEdit] = (0,
|
|
2922
|
-
const [objWidthFix, setObjWidthFix] = (0,
|
|
2923
|
-
const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0,
|
|
2924
|
-
const [searchTerm, setSearchTerm] = (0,
|
|
2925
|
-
const tableElement = (0,
|
|
2926
|
-
const gridRef = (0,
|
|
2968
|
+
const [refreshRow, setRefreshRow] = (0, import_react17.useState)(false);
|
|
2969
|
+
const [indexFocus, setIndexFocus] = (0, import_react17.useState)();
|
|
2970
|
+
const [selectedRows, setSelectedRows] = (0, import_react17.useState)([]);
|
|
2971
|
+
const [headerColumns, setHeaderColumns] = (0, import_react17.useState)([[]]);
|
|
2972
|
+
const [contentColumns, setContentColumns] = (0, import_react17.useState)([]);
|
|
2973
|
+
const [levelCol, setLevelCol] = (0, import_react17.useState)(0);
|
|
2974
|
+
const [columnFistEdit, setColumnFistEdit] = (0, import_react17.useState)(0);
|
|
2975
|
+
const [columnLastEdit, setColumnlastEdit] = (0, import_react17.useState)(0);
|
|
2976
|
+
const [objWidthFix, setObjWidthFix] = (0, import_react17.useState)({});
|
|
2977
|
+
const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react17.useState)(false);
|
|
2978
|
+
const [searchTerm, setSearchTerm] = (0, import_react17.useState)("");
|
|
2979
|
+
const tableElement = (0, import_react17.useRef)(null);
|
|
2980
|
+
const gridRef = (0, import_react17.useRef)();
|
|
2927
2981
|
let totalCount = dataSource.length;
|
|
2928
2982
|
const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
|
|
2929
2983
|
const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
|
|
2930
2984
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
|
|
2931
2985
|
const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
|
|
2932
|
-
(0,
|
|
2986
|
+
(0, import_react17.useEffect)(() => {
|
|
2933
2987
|
if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
|
|
2934
2988
|
pagingSetting.setCurrentPage(1);
|
|
2935
2989
|
}
|
|
2936
2990
|
}, [dataSource]);
|
|
2937
|
-
(0,
|
|
2991
|
+
(0, import_react17.useEffect)(() => {
|
|
2938
2992
|
let indexFirst = -1;
|
|
2939
2993
|
let indexlast = -1;
|
|
2940
2994
|
let letfWidthFix = 0;
|
|
@@ -2968,7 +3022,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
2968
3022
|
setColumnFistEdit(indexFirst + 1);
|
|
2969
3023
|
setColumnlastEdit(indexlast + 1);
|
|
2970
3024
|
}, [contentColumns]);
|
|
2971
|
-
(0,
|
|
3025
|
+
(0, import_react17.useEffect)(() => {
|
|
2972
3026
|
const arrHeaderColumns = [];
|
|
2973
3027
|
const arrContentColumns = [];
|
|
2974
3028
|
let headerLevelRow = 0;
|
|
@@ -2985,7 +3039,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
2985
3039
|
setHeaderColumns(arrHeaderColumns);
|
|
2986
3040
|
setContentColumns(arrContentColumns);
|
|
2987
3041
|
}, [columns]);
|
|
2988
|
-
(0,
|
|
3042
|
+
(0, import_react17.useEffect)(() => {
|
|
2989
3043
|
const arrHeaderColumns = [];
|
|
2990
3044
|
const arrContentColumns = [];
|
|
2991
3045
|
let headerLevelRow = 0;
|
|
@@ -3064,7 +3118,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3064
3118
|
}
|
|
3065
3119
|
};
|
|
3066
3120
|
const searchTemplate = () => {
|
|
3067
|
-
return /* @__PURE__ */ (0,
|
|
3121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3068
3122
|
react_input_default,
|
|
3069
3123
|
{
|
|
3070
3124
|
style: { width: "230px" },
|
|
@@ -3085,59 +3139,45 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3085
3139
|
const RenderEdit = (row, col, indexCol, indexRow) => {
|
|
3086
3140
|
switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
|
|
3087
3141
|
case "date":
|
|
3088
|
-
return /* @__PURE__ */ (0,
|
|
3089
|
-
|
|
3142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3143
|
+
input_date_default,
|
|
3090
3144
|
{
|
|
3091
3145
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
3092
|
-
|
|
3093
|
-
value: row[col.field]
|
|
3094
|
-
onChange: (
|
|
3095
|
-
row[col.field] =
|
|
3146
|
+
className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
3147
|
+
value: row[col.field],
|
|
3148
|
+
onChange: (date) => {
|
|
3149
|
+
row[col.field] = date;
|
|
3096
3150
|
if (col.callback) {
|
|
3097
|
-
col.callback(
|
|
3151
|
+
col.callback(date, indexRow);
|
|
3098
3152
|
}
|
|
3099
3153
|
handleDataChange(row, col, indexRow);
|
|
3100
3154
|
},
|
|
3101
|
-
|
|
3102
|
-
type: "date",
|
|
3103
|
-
max: "9999-12-31",
|
|
3155
|
+
dateFormat: "dd/MM/yyyy",
|
|
3104
3156
|
onKeyDown: (e) => {
|
|
3105
3157
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
3106
|
-
|
|
3107
|
-
},
|
|
3108
|
-
onPaste: (e) => {
|
|
3109
|
-
if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
|
|
3110
|
-
pasteDataFromExcel(indexRow, indexCol, e);
|
|
3111
|
-
e.preventDefault();
|
|
3158
|
+
return true;
|
|
3112
3159
|
}
|
|
3113
3160
|
}
|
|
3114
3161
|
}
|
|
3115
3162
|
);
|
|
3116
3163
|
case "datetime":
|
|
3117
|
-
return /* @__PURE__ */ (0,
|
|
3118
|
-
|
|
3164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3165
|
+
input_date_default,
|
|
3119
3166
|
{
|
|
3120
3167
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
3121
|
-
|
|
3122
|
-
value: row[col.field]
|
|
3123
|
-
onChange: (
|
|
3124
|
-
row[col.field] =
|
|
3168
|
+
className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
3169
|
+
value: row[col.field],
|
|
3170
|
+
onChange: (date) => {
|
|
3171
|
+
row[col.field] = date;
|
|
3125
3172
|
if (col.callback) {
|
|
3126
|
-
col.callback(
|
|
3173
|
+
col.callback(date, indexRow);
|
|
3127
3174
|
}
|
|
3128
3175
|
handleDataChange(row, col, indexRow);
|
|
3129
3176
|
},
|
|
3130
|
-
|
|
3131
|
-
type: "datetime-local",
|
|
3132
|
-
max: "9999-12-31T23:59",
|
|
3177
|
+
dateFormat: "dd/MM/yyyy HH:mm",
|
|
3133
3178
|
onKeyDown: (e) => {
|
|
3134
3179
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
3135
|
-
|
|
3136
|
-
},
|
|
3137
|
-
onPaste: (e) => {
|
|
3138
|
-
if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
|
|
3139
|
-
pasteDataFromExcel(indexRow, indexCol, e);
|
|
3140
|
-
e.preventDefault();
|
|
3180
|
+
return true;
|
|
3141
3181
|
}
|
|
3142
3182
|
}
|
|
3143
3183
|
}
|
|
@@ -3158,7 +3198,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3158
3198
|
valueSelect = col.selectSettings?.defaultValue(row);
|
|
3159
3199
|
}
|
|
3160
3200
|
}
|
|
3161
|
-
return /* @__PURE__ */ (0,
|
|
3201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3162
3202
|
SelectTable,
|
|
3163
3203
|
{
|
|
3164
3204
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -3251,14 +3291,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3251
3291
|
} else {
|
|
3252
3292
|
valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? findItemInTree(optionsSelectTree, row[col.field]) : "";
|
|
3253
3293
|
}
|
|
3254
|
-
return /* @__PURE__ */ (0,
|
|
3294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3255
3295
|
"div",
|
|
3256
3296
|
{
|
|
3257
3297
|
onKeyDown: (e) => {
|
|
3258
3298
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
3259
3299
|
}
|
|
3260
3300
|
},
|
|
3261
|
-
children: /* @__PURE__ */ (0,
|
|
3301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3262
3302
|
SelectTableTree,
|
|
3263
3303
|
{
|
|
3264
3304
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -3317,7 +3357,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3317
3357
|
}
|
|
3318
3358
|
);
|
|
3319
3359
|
case "checkbox":
|
|
3320
|
-
return /* @__PURE__ */ (0,
|
|
3360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3321
3361
|
import_reactstrap11.Input,
|
|
3322
3362
|
{
|
|
3323
3363
|
checked: row[col.field],
|
|
@@ -3347,8 +3387,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3347
3387
|
decimalScale: col.numericSettings?.fraction ?? 0
|
|
3348
3388
|
};
|
|
3349
3389
|
let floatValue = parseFloat(row[col.field]);
|
|
3350
|
-
return /* @__PURE__ */ (0,
|
|
3351
|
-
|
|
3390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3391
|
+
import_react_number_format2.NumericFormat,
|
|
3352
3392
|
{
|
|
3353
3393
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
3354
3394
|
style: { textAlign: col.textAlign, height: 29 },
|
|
@@ -3391,7 +3431,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3391
3431
|
}
|
|
3392
3432
|
);
|
|
3393
3433
|
case "color":
|
|
3394
|
-
return /* @__PURE__ */ (0,
|
|
3434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3395
3435
|
import_reactstrap11.Input,
|
|
3396
3436
|
{
|
|
3397
3437
|
type: "color",
|
|
@@ -3414,7 +3454,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3414
3454
|
`col-${indexRow}-${indexCol}`
|
|
3415
3455
|
) });
|
|
3416
3456
|
case "form":
|
|
3417
|
-
return /* @__PURE__ */ (0,
|
|
3457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3418
3458
|
edit_form_default,
|
|
3419
3459
|
{
|
|
3420
3460
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -3442,7 +3482,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3442
3482
|
}
|
|
3443
3483
|
);
|
|
3444
3484
|
default:
|
|
3445
|
-
return /* @__PURE__ */ (0,
|
|
3485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3446
3486
|
import_reactstrap11.Input,
|
|
3447
3487
|
{
|
|
3448
3488
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -3819,7 +3859,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3819
3859
|
}
|
|
3820
3860
|
}
|
|
3821
3861
|
};
|
|
3822
|
-
(0,
|
|
3862
|
+
(0, import_react17.useEffect)(() => {
|
|
3823
3863
|
setIndexFocus(-1);
|
|
3824
3864
|
if (setSelectedItem) {
|
|
3825
3865
|
if (isMulti) {
|
|
@@ -3846,7 +3886,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3846
3886
|
}
|
|
3847
3887
|
}
|
|
3848
3888
|
}, [selectedRows]);
|
|
3849
|
-
(0,
|
|
3889
|
+
(0, import_react17.useEffect)(() => {
|
|
3850
3890
|
if (!isMulti) {
|
|
3851
3891
|
if (dataSource && selectedItem && selectedItem[fieldKey]) {
|
|
3852
3892
|
if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
@@ -3863,7 +3903,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3863
3903
|
}, [selectedItem]);
|
|
3864
3904
|
const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
|
|
3865
3905
|
if (col.field === "command") {
|
|
3866
|
-
return col.visible !== false && /* @__PURE__ */ (0,
|
|
3906
|
+
return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3867
3907
|
"td",
|
|
3868
3908
|
{
|
|
3869
3909
|
className: (0, import_classnames14.default)(
|
|
@@ -3876,12 +3916,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3876
3916
|
right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
|
|
3877
3917
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
3878
3918
|
},
|
|
3879
|
-
children: /* @__PURE__ */ (0,
|
|
3919
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
|
|
3880
3920
|
},
|
|
3881
3921
|
`col-${indexRow}-${indexCol}`
|
|
3882
3922
|
);
|
|
3883
3923
|
} else if (col.field === "#") {
|
|
3884
|
-
return col.visible !== false && /* @__PURE__ */ (0,
|
|
3924
|
+
return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3885
3925
|
"td",
|
|
3886
3926
|
{
|
|
3887
3927
|
className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
|
|
@@ -3928,12 +3968,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3928
3968
|
e.stopPropagation();
|
|
3929
3969
|
}
|
|
3930
3970
|
},
|
|
3931
|
-
children: /* @__PURE__ */ (0,
|
|
3971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
|
|
3932
3972
|
},
|
|
3933
3973
|
`col-${indexRow}-${indexCol}`
|
|
3934
3974
|
);
|
|
3935
3975
|
} else if (col.field === "checkbox") {
|
|
3936
|
-
return /* @__PURE__ */ (0,
|
|
3976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3937
3977
|
"td",
|
|
3938
3978
|
{
|
|
3939
3979
|
className: (0, import_classnames14.default)(
|
|
@@ -3946,7 +3986,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3946
3986
|
right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
|
|
3947
3987
|
textAlign: col.textAlign ? col.textAlign : "center"
|
|
3948
3988
|
},
|
|
3949
|
-
children: /* @__PURE__ */ (0,
|
|
3989
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3950
3990
|
"div",
|
|
3951
3991
|
{
|
|
3952
3992
|
className: "r-rowcell-div cursor-pointer",
|
|
@@ -3970,7 +4010,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3970
4010
|
e.stopPropagation();
|
|
3971
4011
|
}
|
|
3972
4012
|
},
|
|
3973
|
-
children: /* @__PURE__ */ (0,
|
|
4013
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3974
4014
|
import_reactstrap11.Input,
|
|
3975
4015
|
{
|
|
3976
4016
|
checked: isSelected,
|
|
@@ -3997,7 +4037,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3997
4037
|
}
|
|
3998
4038
|
const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
|
|
3999
4039
|
const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
|
|
4000
|
-
return /* @__PURE__ */ (0,
|
|
4040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4001
4041
|
"td",
|
|
4002
4042
|
{
|
|
4003
4043
|
className: (0, import_classnames14.default)(
|
|
@@ -4037,11 +4077,11 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4037
4077
|
e.stopPropagation();
|
|
4038
4078
|
}
|
|
4039
4079
|
},
|
|
4040
|
-
children: /* @__PURE__ */ (0,
|
|
4080
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4041
4081
|
"div",
|
|
4042
4082
|
{
|
|
4043
4083
|
className: (0, import_classnames14.default)("r-rowcell-div"),
|
|
4044
|
-
children: /* @__PURE__ */ (0,
|
|
4084
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
4045
4085
|
"div",
|
|
4046
4086
|
{
|
|
4047
4087
|
id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
|
|
@@ -4050,16 +4090,16 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4050
4090
|
margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
|
|
4051
4091
|
},
|
|
4052
4092
|
children: [
|
|
4053
|
-
typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0,
|
|
4093
|
+
typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
|
|
4054
4094
|
" ",
|
|
4055
4095
|
`${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
|
|
4056
4096
|
] }) : value }),
|
|
4057
|
-
/* @__PURE__ */ (0,
|
|
4058
|
-
!(typeDis === 1 && !refreshRow) && /* @__PURE__ */ (0,
|
|
4097
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
|
|
4098
|
+
!(typeDis === 1 && !refreshRow) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
|
|
4059
4099
|
" ",
|
|
4060
4100
|
`${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
|
|
4061
4101
|
] }) : value }),
|
|
4062
|
-
/* @__PURE__ */ (0,
|
|
4102
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4063
4103
|
import_reactstrap11.UncontrolledTooltip,
|
|
4064
4104
|
{
|
|
4065
4105
|
target: `error-${indexRow}-${indexCol}`,
|
|
@@ -4078,7 +4118,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4078
4118
|
}
|
|
4079
4119
|
};
|
|
4080
4120
|
const renderFooterCol = (col, indexCol) => {
|
|
4081
|
-
|
|
4121
|
+
const sumValue = col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
|
|
4122
|
+
return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
|
|
4123
|
+
}, 0), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : 0;
|
|
4124
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4082
4125
|
"td",
|
|
4083
4126
|
{
|
|
4084
4127
|
className: (0, import_classnames14.default)(
|
|
@@ -4090,60 +4133,51 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4090
4133
|
right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
|
|
4091
4134
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
4092
4135
|
},
|
|
4093
|
-
children: /* @__PURE__ */ (0,
|
|
4094
|
-
|
|
4095
|
-
|
|
4136
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-footer-div", children: [
|
|
4137
|
+
col.haveSum === true && col.editType === "numeric" && Number(sumValue) >= 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: sumValue }),
|
|
4138
|
+
col.haveSum === true && col.editType === "numeric" && Number(sumValue) < 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
|
|
4139
|
+
" ",
|
|
4140
|
+
`${formatSetting?.prefixNegative ?? "-"}${sumValue}${formatSetting?.suffixNegative ?? ""}`
|
|
4141
|
+
] })
|
|
4142
|
+
] })
|
|
4096
4143
|
}
|
|
4097
4144
|
) }, `summarycell-${indexCol}`);
|
|
4098
4145
|
};
|
|
4099
|
-
const renderToolbarTop = () => {
|
|
4100
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
|
|
4101
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
|
|
4102
|
-
return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
|
|
4103
|
-
}) }),
|
|
4104
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
|
|
4105
|
-
return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
|
|
4106
|
-
}) }),
|
|
4107
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
|
|
4108
|
-
return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
|
|
4109
|
-
}) })
|
|
4110
|
-
] }) });
|
|
4111
|
-
};
|
|
4112
4146
|
const renderToolbarBottom = () => {
|
|
4113
|
-
return /* @__PURE__ */ (0,
|
|
4114
|
-
/* @__PURE__ */ (0,
|
|
4115
|
-
/* @__PURE__ */ (0,
|
|
4116
|
-
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0,
|
|
4117
|
-
/* @__PURE__ */ (0,
|
|
4147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-toolbar-items", children: [
|
|
4148
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-toolbar-left", children: [
|
|
4149
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
|
|
4150
|
+
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
4151
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: () => {
|
|
4118
4152
|
handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
|
|
4119
4153
|
}, className: "d-flex", children: t("Duplicate") }) }),
|
|
4120
|
-
/* @__PURE__ */ (0,
|
|
4121
|
-
/* @__PURE__ */ (0,
|
|
4122
|
-
] }) : /* @__PURE__ */ (0,
|
|
4123
|
-
/* @__PURE__ */ (0,
|
|
4154
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
|
|
4155
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
|
|
4156
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: " " }),
|
|
4157
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
|
|
4124
4158
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
4125
|
-
return item.align === "left" ? /* @__PURE__ */ (0,
|
|
4159
|
+
return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
|
|
4126
4160
|
})
|
|
4127
4161
|
] }),
|
|
4128
|
-
/* @__PURE__ */ (0,
|
|
4129
|
-
return item.align === "center" ? /* @__PURE__ */ (0,
|
|
4162
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
4163
|
+
return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
|
|
4130
4164
|
}) }),
|
|
4131
|
-
/* @__PURE__ */ (0,
|
|
4165
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-toolbar-right", children: [
|
|
4132
4166
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
4133
|
-
return item.align === "right" ? /* @__PURE__ */ (0,
|
|
4167
|
+
return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
|
|
4134
4168
|
}),
|
|
4135
|
-
/* @__PURE__ */ (0,
|
|
4136
|
-
/* @__PURE__ */ (0,
|
|
4137
|
-
/* @__PURE__ */ (0,
|
|
4138
|
-
/* @__PURE__ */ (0,
|
|
4169
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons7.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
|
|
4170
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
|
|
4171
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.DropdownToggle, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer text-primary" }) }),
|
|
4172
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4139
4173
|
import_reactstrap11.DropdownMenu,
|
|
4140
4174
|
{
|
|
4141
4175
|
className: "formula-dropdown icon-dropdown",
|
|
4142
|
-
children: /* @__PURE__ */ (0,
|
|
4143
|
-
/* @__PURE__ */ (0,
|
|
4144
|
-
/* @__PURE__ */ (0,
|
|
4145
|
-
/* @__PURE__ */ (0,
|
|
4146
|
-
/* @__PURE__ */ (0,
|
|
4176
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("ul", { className: "mb-0 pe-50", children: [
|
|
4177
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
|
|
4178
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
|
|
4179
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
|
|
4180
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
|
|
4147
4181
|
] })
|
|
4148
4182
|
}
|
|
4149
4183
|
)
|
|
@@ -4174,7 +4208,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4174
4208
|
const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
|
|
4175
4209
|
if (flagDisplay) {
|
|
4176
4210
|
countDisplay++;
|
|
4177
|
-
return /* @__PURE__ */ (0,
|
|
4211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4178
4212
|
"tr",
|
|
4179
4213
|
{
|
|
4180
4214
|
className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
|
|
@@ -4188,19 +4222,19 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4188
4222
|
}
|
|
4189
4223
|
});
|
|
4190
4224
|
};
|
|
4191
|
-
(0,
|
|
4225
|
+
(0, import_react17.useEffect)(() => {
|
|
4192
4226
|
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
4193
4227
|
pagingSetting?.setCurrentPage(1);
|
|
4194
4228
|
}
|
|
4195
4229
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
4196
|
-
return /* @__PURE__ */ (0,
|
|
4197
|
-
/* @__PURE__ */ (0,
|
|
4198
|
-
/* @__PURE__ */ (0,
|
|
4199
|
-
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0,
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4201
|
-
/* @__PURE__ */ (0,
|
|
4202
|
-
return /* @__PURE__ */ (0,
|
|
4203
|
-
return /* @__PURE__ */ (0,
|
|
4230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react17.Fragment, { children: [
|
|
4231
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "react-table-edit", children: [
|
|
4232
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
|
|
4233
|
+
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: toolbar_top_default(toolbarTopOption) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {}),
|
|
4234
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { style: { width: "100%" }, children: [
|
|
4235
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
|
|
4236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
4237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4204
4238
|
header_default,
|
|
4205
4239
|
{
|
|
4206
4240
|
col,
|
|
@@ -4220,14 +4254,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4220
4254
|
);
|
|
4221
4255
|
}) }, `header-${-indexParent}`);
|
|
4222
4256
|
}) }),
|
|
4223
|
-
/* @__PURE__ */ (0,
|
|
4224
|
-
/* @__PURE__ */ (0,
|
|
4257
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
|
|
4258
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
|
|
4225
4259
|
return renderFooterCol(col, index);
|
|
4226
|
-
}) }) : /* @__PURE__ */ (0,
|
|
4260
|
+
}) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {}) })
|
|
4227
4261
|
] }) }),
|
|
4228
|
-
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0,
|
|
4262
|
+
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {})
|
|
4229
4263
|
] }),
|
|
4230
|
-
pagingSetting?.allowPaging ? /* @__PURE__ */ (0,
|
|
4264
|
+
pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4231
4265
|
PagingComponent,
|
|
4232
4266
|
{
|
|
4233
4267
|
onChangePage,
|
|
@@ -4237,9 +4271,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4237
4271
|
totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
|
|
4238
4272
|
onChangePageSize
|
|
4239
4273
|
}
|
|
4240
|
-
) : /* @__PURE__ */ (0,
|
|
4274
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {})
|
|
4241
4275
|
] }),
|
|
4242
|
-
/* @__PURE__ */ (0,
|
|
4276
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4243
4277
|
sidebar_setting_column_default,
|
|
4244
4278
|
{
|
|
4245
4279
|
handleSidebar: () => {
|
|
@@ -4257,10 +4291,10 @@ var table_default = TableEdit;
|
|
|
4257
4291
|
// src/component/tab-menu/index.tsx
|
|
4258
4292
|
var import_becoxy_icons8 = require("becoxy-icons");
|
|
4259
4293
|
var import_classnames15 = __toESM(require("classnames"));
|
|
4260
|
-
var
|
|
4294
|
+
var import_react18 = require("react");
|
|
4261
4295
|
var import_react_router_dom = require("react-router-dom");
|
|
4262
4296
|
var import_reactstrap12 = require("reactstrap");
|
|
4263
|
-
var
|
|
4297
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
4264
4298
|
var TabsMenuComponent = ({
|
|
4265
4299
|
buttonWidth,
|
|
4266
4300
|
tabParent,
|
|
@@ -4272,14 +4306,14 @@ var TabsMenuComponent = ({
|
|
|
4272
4306
|
renderModal
|
|
4273
4307
|
}) => {
|
|
4274
4308
|
const navigate = (0, import_react_router_dom.useNavigate)();
|
|
4275
|
-
const [dataMenu, setDataMenu] = (0,
|
|
4276
|
-
const [openMenu, setOpenMenu] = (0,
|
|
4277
|
-
const [url, setUrl] = (0,
|
|
4278
|
-
const [contentWidth, setContentWidth] = (0,
|
|
4279
|
-
const [componentWidth, setComponentWidth] = (0,
|
|
4280
|
-
const [scrollPosition, setScrollPosition] = (0,
|
|
4281
|
-
const [dataItem, setDataItem] = (0,
|
|
4282
|
-
const [openModal, setOpenModal] = (0,
|
|
4309
|
+
const [dataMenu, setDataMenu] = (0, import_react18.useState)([]);
|
|
4310
|
+
const [openMenu, setOpenMenu] = (0, import_react18.useState)(false);
|
|
4311
|
+
const [url, setUrl] = (0, import_react18.useState)("");
|
|
4312
|
+
const [contentWidth, setContentWidth] = (0, import_react18.useState)(0);
|
|
4313
|
+
const [componentWidth, setComponentWidth] = (0, import_react18.useState)(0);
|
|
4314
|
+
const [scrollPosition, setScrollPosition] = (0, import_react18.useState)(0);
|
|
4315
|
+
const [dataItem, setDataItem] = (0, import_react18.useState)([]);
|
|
4316
|
+
const [openModal, setOpenModal] = (0, import_react18.useState)({});
|
|
4283
4317
|
const handleWindowResize = () => {
|
|
4284
4318
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
4285
4319
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -4288,7 +4322,7 @@ var TabsMenuComponent = ({
|
|
|
4288
4322
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
4289
4323
|
}
|
|
4290
4324
|
};
|
|
4291
|
-
(0,
|
|
4325
|
+
(0, import_react18.useEffect)(() => {
|
|
4292
4326
|
setUrl(window.location.pathname);
|
|
4293
4327
|
window.addEventListener("resize", handleWindowResize);
|
|
4294
4328
|
setTimeout(() => {
|
|
@@ -4304,7 +4338,7 @@ var TabsMenuComponent = ({
|
|
|
4304
4338
|
window.removeEventListener("resize", handleWindowResize);
|
|
4305
4339
|
};
|
|
4306
4340
|
}, []);
|
|
4307
|
-
(0,
|
|
4341
|
+
(0, import_react18.useEffect)(() => {
|
|
4308
4342
|
const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
|
|
4309
4343
|
if (item) {
|
|
4310
4344
|
if (resourceCodeParent) {
|
|
@@ -4335,22 +4369,22 @@ var TabsMenuComponent = ({
|
|
|
4335
4369
|
const handleModal = (name) => {
|
|
4336
4370
|
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
4337
4371
|
};
|
|
4338
|
-
return /* @__PURE__ */ (0,
|
|
4372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react18.Fragment, { children: [
|
|
4339
4373
|
renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
|
|
4340
|
-
/* @__PURE__ */ (0,
|
|
4341
|
-
/* @__PURE__ */ (0,
|
|
4374
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_classnames15.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
|
|
4375
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4342
4376
|
"div",
|
|
4343
4377
|
{
|
|
4344
4378
|
onClick: () => handleScroll(-200),
|
|
4345
4379
|
className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
4346
|
-
children: /* @__PURE__ */ (0,
|
|
4380
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_becoxy_icons8.ChevronLeft, {})
|
|
4347
4381
|
}
|
|
4348
4382
|
),
|
|
4349
|
-
/* @__PURE__ */ (0,
|
|
4383
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
|
|
4350
4384
|
if (item?.resAttributes?.IS_MENU === "1") {
|
|
4351
|
-
return /* @__PURE__ */ (0,
|
|
4352
|
-
/* @__PURE__ */ (0,
|
|
4353
|
-
/* @__PURE__ */ (0,
|
|
4385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_reactstrap12.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
|
|
4386
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_reactstrap12.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: item.name }) }),
|
|
4387
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_reactstrap12.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4354
4388
|
import_reactstrap12.DropdownItem,
|
|
4355
4389
|
{
|
|
4356
4390
|
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
@@ -4367,7 +4401,7 @@ var TabsMenuComponent = ({
|
|
|
4367
4401
|
)) })
|
|
4368
4402
|
] }, item.code);
|
|
4369
4403
|
} else {
|
|
4370
|
-
return /* @__PURE__ */ (0,
|
|
4404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4371
4405
|
import_react_router_dom.Link,
|
|
4372
4406
|
{
|
|
4373
4407
|
to: item.url,
|
|
@@ -4378,12 +4412,12 @@ var TabsMenuComponent = ({
|
|
|
4378
4412
|
);
|
|
4379
4413
|
}
|
|
4380
4414
|
}) }) }),
|
|
4381
|
-
/* @__PURE__ */ (0,
|
|
4415
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4382
4416
|
"div",
|
|
4383
4417
|
{
|
|
4384
4418
|
onClick: () => handleScroll(200),
|
|
4385
4419
|
className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
4386
|
-
children: /* @__PURE__ */ (0,
|
|
4420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_becoxy_icons8.ChevronRight, {})
|
|
4387
4421
|
}
|
|
4388
4422
|
)
|
|
4389
4423
|
] })
|
|
@@ -4394,7 +4428,7 @@ var TabsMenuComponent = ({
|
|
|
4394
4428
|
var import_becoxy_icons9 = require("becoxy-icons");
|
|
4395
4429
|
var import_reactstrap13 = require("reactstrap");
|
|
4396
4430
|
var import_classnames16 = __toESM(require("classnames"));
|
|
4397
|
-
var
|
|
4431
|
+
var import_react19 = require("react");
|
|
4398
4432
|
|
|
4399
4433
|
// src/component/input-style/fonts.ts
|
|
4400
4434
|
var OptionFont = [
|
|
@@ -5253,7 +5287,7 @@ var OptionFont = [
|
|
|
5253
5287
|
];
|
|
5254
5288
|
|
|
5255
5289
|
// src/component/input-style/index.tsx
|
|
5256
|
-
var
|
|
5290
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
5257
5291
|
var InputStyleComponent = (props) => {
|
|
5258
5292
|
const {
|
|
5259
5293
|
value,
|
|
@@ -5267,8 +5301,8 @@ var InputStyleComponent = (props) => {
|
|
|
5267
5301
|
disabledItalic,
|
|
5268
5302
|
disabledUnderline
|
|
5269
5303
|
} = props;
|
|
5270
|
-
return /* @__PURE__ */ (0,
|
|
5271
|
-
/* @__PURE__ */ (0,
|
|
5304
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "d-flex align-items-center", children: [
|
|
5305
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5272
5306
|
SelectTable,
|
|
5273
5307
|
{
|
|
5274
5308
|
options: OptionFont,
|
|
@@ -5284,12 +5318,12 @@ var InputStyleComponent = (props) => {
|
|
|
5284
5318
|
field: "label",
|
|
5285
5319
|
headerText: "",
|
|
5286
5320
|
template: (row) => {
|
|
5287
|
-
return /* @__PURE__ */ (0,
|
|
5321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
|
|
5288
5322
|
}
|
|
5289
5323
|
}
|
|
5290
5324
|
],
|
|
5291
5325
|
formatOptionLabel: (props2) => {
|
|
5292
|
-
return /* @__PURE__ */ (0,
|
|
5326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: {
|
|
5293
5327
|
paddingLeft: 3,
|
|
5294
5328
|
borderRadius: 2,
|
|
5295
5329
|
fontFamily: value.fontFamily,
|
|
@@ -5302,7 +5336,7 @@ var InputStyleComponent = (props) => {
|
|
|
5302
5336
|
}
|
|
5303
5337
|
}
|
|
5304
5338
|
),
|
|
5305
|
-
/* @__PURE__ */ (0,
|
|
5339
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: (0, import_classnames16.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5306
5340
|
SelectTable,
|
|
5307
5341
|
{
|
|
5308
5342
|
options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
|
|
@@ -5314,7 +5348,7 @@ var InputStyleComponent = (props) => {
|
|
|
5314
5348
|
}
|
|
5315
5349
|
}
|
|
5316
5350
|
) }),
|
|
5317
|
-
/* @__PURE__ */ (0,
|
|
5351
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5318
5352
|
"div",
|
|
5319
5353
|
{
|
|
5320
5354
|
className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
|
|
@@ -5323,10 +5357,10 @@ var InputStyleComponent = (props) => {
|
|
|
5323
5357
|
onChange({ ...value, bold: !value.bold });
|
|
5324
5358
|
}
|
|
5325
5359
|
},
|
|
5326
|
-
children: /* @__PURE__ */ (0,
|
|
5360
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Bold, { fontSize: 18 })
|
|
5327
5361
|
}
|
|
5328
5362
|
),
|
|
5329
|
-
/* @__PURE__ */ (0,
|
|
5363
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5330
5364
|
"div",
|
|
5331
5365
|
{
|
|
5332
5366
|
className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
|
|
@@ -5335,10 +5369,10 @@ var InputStyleComponent = (props) => {
|
|
|
5335
5369
|
onChange({ ...value, italic: !value.italic });
|
|
5336
5370
|
}
|
|
5337
5371
|
},
|
|
5338
|
-
children: /* @__PURE__ */ (0,
|
|
5372
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Italic, { fontSize: 18 })
|
|
5339
5373
|
}
|
|
5340
5374
|
),
|
|
5341
|
-
/* @__PURE__ */ (0,
|
|
5375
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5342
5376
|
"div",
|
|
5343
5377
|
{
|
|
5344
5378
|
className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
|
|
@@ -5347,12 +5381,12 @@ var InputStyleComponent = (props) => {
|
|
|
5347
5381
|
onChange({ ...value, underline: !value.underline });
|
|
5348
5382
|
}
|
|
5349
5383
|
},
|
|
5350
|
-
children: /* @__PURE__ */ (0,
|
|
5384
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Underline, { fontSize: 18 })
|
|
5351
5385
|
}
|
|
5352
5386
|
),
|
|
5353
|
-
/* @__PURE__ */ (0,
|
|
5354
|
-
/* @__PURE__ */ (0,
|
|
5355
|
-
/* @__PURE__ */ (0,
|
|
5387
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledColor }), children: [
|
|
5388
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
|
|
5389
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5356
5390
|
"input",
|
|
5357
5391
|
{
|
|
5358
5392
|
type: "color",
|
|
@@ -5366,9 +5400,9 @@ var InputStyleComponent = (props) => {
|
|
|
5366
5400
|
}
|
|
5367
5401
|
)
|
|
5368
5402
|
] }),
|
|
5369
|
-
/* @__PURE__ */ (0,
|
|
5370
|
-
/* @__PURE__ */ (0,
|
|
5371
|
-
/* @__PURE__ */ (0,
|
|
5403
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
|
|
5404
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
|
|
5405
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5372
5406
|
import_reactstrap13.Input,
|
|
5373
5407
|
{
|
|
5374
5408
|
id: "backgroundColor",
|