sccoreui 6.2.73 → 6.2.75
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/components/ag-grid/advancedFeature/bulk-edit-action.js +2 -1
- package/dist/components/ag-grid/advancedFeature/column-group.js +2 -1
- package/dist/components/ag-grid/advancedFeature/custom-sort.js +11 -5
- package/dist/components/ag-grid/advancedFeature/global-search.js +4 -3
- package/dist/components/ag-grid/advancedFeature/gridS-search.js +2 -1
- package/dist/components/ag-grid/advancedFeature/hide-column.js +16 -13
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +2 -1
- package/dist/components/ag-grid/advancedFeature/record-detail.js +4 -1
- package/dist/components/ag-grid/advancedFeature/refresh-grid.js +2 -1
- package/dist/components/ag-grid/advancedFeature/remove-items.js +2 -1
- package/dist/components/ag-grid/utilComponents.js +10 -1
- package/dist/components/form/form-fields/form-fields.js +35 -44
- package/dist/components/froala-editor/FroalaEditor.js +65 -23
- package/dist/types/components/ag-grid/utilComponents.d.ts +1 -0
- package/dist/types/components/froala-editor/FroalaEditor.d.ts +5 -5
- package/dist/types/components/types/type.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const button_1 = require("primereact/button");
|
|
5
|
+
const utilComponents_1 = require("../utilComponents");
|
|
5
6
|
function BulkEditAction({ props }) {
|
|
6
7
|
var _a, _b, _c;
|
|
7
8
|
const { dynamicText } = props;
|
|
@@ -15,6 +16,6 @@ function BulkEditAction({ props }) {
|
|
|
15
16
|
return;
|
|
16
17
|
props === null || props === void 0 ? void 0 : props.discardBulkEdit();
|
|
17
18
|
};
|
|
18
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", text: true, onClick: onDiscard, label: ((_a = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _a === void 0 ? void 0 : _a.discard) || "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", disabled: !((_b = props === null || props === void 0 ? void 0 : props.bulkEditedRecords) === null || _b === void 0 ? void 0 : _b.length), onClick: onSave, label: ((_c = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _c === void 0 ? void 0 : _c.save) || "Update Changes" })] })));
|
|
19
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", text: true, onClick: onDiscard, label: ((_a = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _a === void 0 ? void 0 : _a.discard) || "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", disabled: !((_b = props === null || props === void 0 ? void 0 : props.bulkEditedRecords) === null || _b === void 0 ? void 0 : _b.length), onClick: onSave, label: ((_c = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _c === void 0 ? void 0 : _c.save) || "Update Changes" })] })));
|
|
19
20
|
}
|
|
20
21
|
exports.default = BulkEditAction;
|
|
@@ -11,6 +11,7 @@ const checkbox_1 = require("primereact/checkbox");
|
|
|
11
11
|
const button_1 = require("primereact/button");
|
|
12
12
|
const context_provider_1 = require("../context-provider");
|
|
13
13
|
const helper_1 = require("../helper");
|
|
14
|
+
const utilComponents_1 = require("../utilComponents");
|
|
14
15
|
// import { ColumnDef } from "../Types";
|
|
15
16
|
const ColumnGroup = (props) => {
|
|
16
17
|
var _a, _b, _c, _d;
|
|
@@ -196,7 +197,7 @@ const ColumnGroup = (props) => {
|
|
|
196
197
|
setRenderColumns(columnsFromGrid);
|
|
197
198
|
}
|
|
198
199
|
}, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
|
|
199
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
200
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
200
201
|
? "bg-primary-50 h-38"
|
|
201
202
|
: "bg-white icon-38x38"} hover:bg-primary-25 br-8 sc_icon_hover cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e) }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, disabled: isDisabled, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
202
203
|
? "text-primary-400"
|
|
@@ -10,9 +10,10 @@ const button_1 = require("primereact/button");
|
|
|
10
10
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
11
11
|
const context_provider_1 = require("../context-provider");
|
|
12
12
|
const helper_1 = require("../helper");
|
|
13
|
+
const utilComponents_1 = require("../utilComponents");
|
|
13
14
|
function Sort() {
|
|
14
15
|
var _a, _b;
|
|
15
|
-
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
|
+
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
17
|
const showShort = (0, react_1.useRef)(null);
|
|
17
18
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
18
19
|
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
@@ -88,8 +89,11 @@ function Sort() {
|
|
|
88
89
|
setIsApplyDisable(true);
|
|
89
90
|
}
|
|
90
91
|
}, [sortValue, sortBy]);
|
|
91
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isOverlayOpened || featureDetails.sort.isSortable
|
|
92
|
-
? "bg-primary-50"
|
|
92
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isOverlayOpened || featureDetails.sort.isSortable
|
|
93
|
+
? "bg-primary-50"
|
|
94
|
+
: "bg-white"}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort)
|
|
95
|
+
? sortModelText.onSelectedSort
|
|
96
|
+
: `Selected` }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover border-round-md`, onClick: (event) => !isDisabled && onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", disabled: isDisabled, size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
93
97
|
? "text-primary-400"
|
|
94
98
|
: "text-gray-700" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
95
99
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
@@ -99,12 +103,14 @@ function Sort() {
|
|
|
99
103
|
else {
|
|
100
104
|
return null;
|
|
101
105
|
}
|
|
102
|
-
}) })), ((_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.length) >
|
|
106
|
+
}) })), ((_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.length) >
|
|
107
|
+
0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_b = sortOptions
|
|
108
|
+
.filter((each) => each.dataType === sortType)) === null || _b === void 0 ? void 0 : _b.map((eachOption, index) => {
|
|
103
109
|
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
|
|
104
110
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachOption.label, className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer br-6 pl-0 px-3 py-2 flex align-items-center gap-2 hover:bg-primary-25 mb-1`, onClick: () => {
|
|
105
111
|
onSelectSortType(eachOption);
|
|
106
112
|
// setSortBy(eachOption);
|
|
107
113
|
} }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === 0 ? "arrow-down" : "arrow-up", size: 20 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${seletedSort && "text-primary-400 font-semibold"} text-gray-700 font-medium text-base` }, { children: eachOption.label }))] }), index));
|
|
108
|
-
}) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.clearAction) ? sortModelText.clearAction : "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.applyAction) ? sortModelText.applyAction : "Apply" }))] }))] }))] }));
|
|
114
|
+
}) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.clearAction) ? sortModelText.clearAction : "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.applyAction) ? sortModelText.applyAction : "Apply" }))] }))] }))] }));
|
|
109
115
|
}
|
|
110
116
|
exports.default = Sort;
|
|
@@ -9,6 +9,7 @@ const context_provider_1 = require("../context-provider");
|
|
|
9
9
|
const hooks_1 = require("primereact/hooks");
|
|
10
10
|
const constants_1 = require("../constants");
|
|
11
11
|
const helper_1 = require("../helper");
|
|
12
|
+
const utilComponents_1 = require("../utilComponents");
|
|
12
13
|
function Search({ searchPlaceHolder }) {
|
|
13
14
|
const { featureDetails, setFeatureDetails, rowModelType, gridApi, quickSearch, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
14
15
|
const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
|
|
@@ -31,9 +32,9 @@ function Search({ searchPlaceHolder }) {
|
|
|
31
32
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
|
|
32
33
|
}
|
|
33
34
|
}, [deboucedValue]);
|
|
34
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0
|
|
35
|
-
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }))
|
|
36
|
-
|
|
35
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0 ? "p-input-icon-right" : ""}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix zoom_animate" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18, disabled: isDisabled }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
|
|
36
|
+
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }));
|
|
37
|
+
setInputValue("");
|
|
37
38
|
}, title: "Clear" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: inputValue, onChange: (e) => !isDisabled && setInputValue(e.target.value), className: "w-21rem", placeholder: searchPlaceHolder || "Search by name or code", disabled: isDisabled })] })));
|
|
38
39
|
}
|
|
39
40
|
exports.default = Search;
|
|
@@ -7,6 +7,7 @@ const context_provider_1 = require("../context-provider");
|
|
|
7
7
|
const inputtext_1 = require("primereact/inputtext");
|
|
8
8
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
9
9
|
const helper_1 = require("../helper");
|
|
10
|
+
const utilComponents_1 = require("../utilComponents");
|
|
10
11
|
function GridSearch() {
|
|
11
12
|
const { gridApi, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
12
13
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySearch);
|
|
@@ -16,6 +17,6 @@ function GridSearch() {
|
|
|
16
17
|
(_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _a === void 0 ? void 0 : _a.setGridOption("quickFilterText", document.getElementById("filter-text-box").value);
|
|
17
18
|
}
|
|
18
19
|
}, []);
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-20rem" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md", size: 20, disabled: isDisabled }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, disabled: isDisabled, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
|
|
20
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading" })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-20rem" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md", size: 20, disabled: isDisabled }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, disabled: isDisabled, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
|
|
20
21
|
}
|
|
21
22
|
exports.default = GridSearch;
|
|
@@ -11,8 +11,9 @@ const inputtext_1 = require("primereact/inputtext");
|
|
|
11
11
|
const sidebar_1 = require("primereact/sidebar");
|
|
12
12
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
13
13
|
const helper_1 = require("../helper");
|
|
14
|
+
const utilComponents_1 = require("../utilComponents");
|
|
14
15
|
function HideColumn() {
|
|
15
|
-
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
|
+
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
17
|
const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
|
|
17
18
|
const [enableManageColumnsCallbackAPI, setEnableManageColumnsCallbackAPI] = (0, react_1.useState)(false);
|
|
18
19
|
const [inpValue, setInputValue] = (0, react_1.useState)("");
|
|
@@ -117,7 +118,7 @@ function HideColumn() {
|
|
|
117
118
|
});
|
|
118
119
|
updateColumnsForGrid({
|
|
119
120
|
columns: updatedColumnDefs,
|
|
120
|
-
enableManageColumnsCallback: enableManageColumnsCallbackAPI
|
|
121
|
+
enableManageColumnsCallback: enableManageColumnsCallbackAPI,
|
|
121
122
|
});
|
|
122
123
|
};
|
|
123
124
|
// When drag started
|
|
@@ -131,18 +132,18 @@ function HideColumn() {
|
|
|
131
132
|
if (draggedIndex !== index.toString()) {
|
|
132
133
|
const updatedColumns = [...storeNodes];
|
|
133
134
|
const [draggedItem] = updatedColumns.splice(draggedIndex, 1);
|
|
134
|
-
console.log(draggedItem,
|
|
135
|
+
console.log(draggedItem, "dragged item", draggedIndex);
|
|
135
136
|
updatedColumns.splice(index, 0, draggedItem);
|
|
136
|
-
console.log(updatedColumns, draggedIndex, draggedItem,
|
|
137
|
+
console.log(updatedColumns, draggedIndex, draggedItem, "data of dragging");
|
|
137
138
|
for (let i = 0; i < updatedColumns.length; i++) {
|
|
138
139
|
const currentColumn = updatedColumns[i];
|
|
139
|
-
console.log(i, currentColumn,
|
|
140
|
+
console.log(i, currentColumn, "columns in loop");
|
|
140
141
|
}
|
|
141
142
|
setNodes(updatedColumns);
|
|
142
143
|
setStoreNodes(updatedColumns);
|
|
143
144
|
}
|
|
144
145
|
};
|
|
145
|
-
// When drag is completed
|
|
146
|
+
// When drag is completed
|
|
146
147
|
const handleDragOver = (event) => {
|
|
147
148
|
event.preventDefault();
|
|
148
149
|
};
|
|
@@ -166,12 +167,14 @@ function HideColumn() {
|
|
|
166
167
|
setVisibleRight(false);
|
|
167
168
|
setInputValue("");
|
|
168
169
|
};
|
|
169
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => !isDisabled && setVisibleRight(true), className: "rounded_btn sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 18, disabled: isDisabled }) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4 overflow-hidden h-full ag_grid_sidebar", visible: visibleRight, position: "right", onHide: () => hidePanel() }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sticky top-0 z-5 bg-white" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center px-4 py-3 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-lg font-semibold line-height-3" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.header) || "Configure Columns" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", text: true, label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => hidePanel() }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", disabled: (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => node.checked).length) > 15
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
170
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => !isDisabled && setVisibleRight(true), className: "rounded_btn sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 18, disabled: isDisabled }) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4 overflow-hidden h-full ag_grid_sidebar", visible: visibleRight, position: "right", onHide: () => hidePanel() }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sticky top-0 z-5 bg-white" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center px-4 py-3 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-lg font-semibold line-height-3" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.header) || "Configure Columns" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", text: true, label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => hidePanel() }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", disabled: (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => node.checked).length) > 15
|
|
171
|
+
? true
|
|
172
|
+
: false, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pb-0" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_to_all_views) || "Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: enableManageColumnsCallbackAPI, onChange: (e) => setEnableManageColumnsCallbackAPI(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_subHeading) ||
|
|
173
|
+
"Apply the chosen column selection to all available views" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (inpValue === null || inpValue === void 0 ? void 0 : inpValue.length) > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: clearSearch }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
|
|
174
|
+
searchHandler(e.target.value);
|
|
175
|
+
}, disabled: false, placeholder: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.search_placeHolder) ||
|
|
176
|
+
"Search by column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full my-2 lh-40" })] })) }))] })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pt-0" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-semibold border-bottom-1 border-gray-200" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) || "Selected Attributes", " ", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-500 text-lg font-normal ml-1" }, { children: [`(`, nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.selected).length, "/", nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected || node.selected).length, `)`] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full -mt-2" }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ? (nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
|
|
177
|
+
(listItem === null || listItem === void 0 ? void 0 : listItem.selected) && ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3 text-gray-600 text-base", draggable: true, onDragStart: handleDragStart(idx), onDrop: handleDrop(idx), onDragOver: handleDragOver }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: drag_and_drop_icon_png_1.default, alt: "Drag and drop", className: "cursor-move" }), (0, jsx_runtime_1.jsx)("span", { children: listItem.headerName })] })), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem === null || listItem === void 0 ? void 0 : listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), idx)))) : ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column -mx-3" }, { children: (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-0 mb-2 flex align-items-center justify-content-center py-8 bg-gray-50 p-8 border-round-md mt-2 text-gray-900 font-normal" }, { children: "No results found on the search criteria" })) })) })) })) })), (0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: " mb-0 mt-0 py-2 border-bottom-1 border-gray-200" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.unselected_attributes) || "Unselected Attributes", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-500 text-lg font-normal ml-2" }, { children: [`(`, nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected).length, "/", nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected || node.selected).length, `)`] }))] })), (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 mt-2 ml-3" }, { children: nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
|
|
178
|
+
(listItem === null || listItem === void 0 ? void 0 : listItem.unSelected) && ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3 text-gray-600 text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: listItem.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), listItem.id))) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-0 mb-2 flex align-items-center justify-content-center py-8 bg-gray-50 p-8 border-round-md mt-4 text-gray-900 text-lg" }, { children: "No results found on the search criteria" })))] }))] }))] }));
|
|
176
179
|
}
|
|
177
180
|
exports.default = HideColumn;
|
|
@@ -12,6 +12,7 @@ const overlaypanel_1 = require("primereact/overlaypanel");
|
|
|
12
12
|
const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/svg-component"));
|
|
13
13
|
const constants_1 = tslib_1.__importDefault(require("../../constants"));
|
|
14
14
|
const helper_1 = require("../../helper");
|
|
15
|
+
const utilComponents_1 = require("../../utilComponents");
|
|
15
16
|
// import "./TableFilter.module.scss";
|
|
16
17
|
const TableFilter = () => {
|
|
17
18
|
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
@@ -162,7 +163,7 @@ const TableFilter = () => {
|
|
|
162
163
|
});
|
|
163
164
|
setAllFieldsFilled(isAllFieldsFilled && enbleApply);
|
|
164
165
|
}, [conditionsArray, enbleApply]);
|
|
165
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isOverlayOpened ||
|
|
166
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isOverlayOpened ||
|
|
166
167
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
167
168
|
? "bg-primary-50"
|
|
168
169
|
: "bg-white"}` }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
|
|
@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const context_provider_1 = require("../context-provider");
|
|
6
|
+
const utilComponents_1 = require("../utilComponents");
|
|
6
7
|
function RecordDetail() {
|
|
7
8
|
const { totalRecords, recordDetailModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader)
|
|
9
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader)
|
|
10
|
+
? `${recordDetailModelText.totalRecordHeader} ${totalRecords} `
|
|
11
|
+
: `Total ${totalRecords} records` }));
|
|
9
12
|
}
|
|
10
13
|
exports.default = RecordDetail;
|
|
@@ -6,6 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const context_provider_1 = require("../context-provider");
|
|
7
7
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
8
8
|
const helper_1 = require("../helper");
|
|
9
|
+
const utilComponents_1 = require("../utilComponents");
|
|
9
10
|
function RefreshGrid() {
|
|
10
11
|
const { removeFeaturesAndRefresh, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
12
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRefresh);
|
|
@@ -14,6 +15,6 @@ function RefreshGrid() {
|
|
|
14
15
|
removeFeaturesAndRefresh();
|
|
15
16
|
}
|
|
16
17
|
};
|
|
17
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: refreshHandler }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-700", disabled: isDisabled }) })));
|
|
18
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: refreshHandler }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-700", disabled: isDisabled }) })));
|
|
18
19
|
}
|
|
19
20
|
exports.default = RefreshGrid;
|
|
@@ -6,6 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const context_provider_1 = require("../context-provider");
|
|
7
7
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
8
8
|
const helper_1 = require("../helper");
|
|
9
|
+
const utilComponents_1 = require("../utilComponents");
|
|
9
10
|
function RemoveItems(props) {
|
|
10
11
|
const { featureDetails, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
12
|
const { removeCallBack } = props;
|
|
@@ -17,6 +18,6 @@ function RemoveItems(props) {
|
|
|
17
18
|
removeCallBack(currentFeature);
|
|
18
19
|
}
|
|
19
20
|
};
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: removeItemsCallBack }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", color: "text-red-800", size: 18, disabled: isDisabled }) })));
|
|
21
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: removeItemsCallBack }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", color: "text-red-800", size: 18, disabled: isDisabled }) })));
|
|
21
22
|
}
|
|
22
23
|
exports.default = RemoveItems;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.GridHeaderComponent = exports.GroupHeader = exports.dataCellRenderer = void 0;
|
|
3
|
+
exports.skeletonLoding = exports.GridHeaderComponent = exports.GroupHeader = exports.dataCellRenderer = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
// import Checkbox from "./grid-checkbox";
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const context_provider_1 = require("./context-provider");
|
|
6
8
|
// Render checkbox as well as initial component/data from props
|
|
7
9
|
const dataCellRenderer = (cellRendererParams, column, props) => {
|
|
8
10
|
var _a, _b, _c;
|
|
@@ -22,3 +24,10 @@ const GridHeaderComponent = (props) => {
|
|
|
22
24
|
return (0, jsx_runtime_1.jsx)("span", { children: "Group" });
|
|
23
25
|
};
|
|
24
26
|
exports.GridHeaderComponent = GridHeaderComponent;
|
|
27
|
+
const skeletonLoding = () => {
|
|
28
|
+
var _a;
|
|
29
|
+
const { gridData } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
30
|
+
const columnsData = ((_a = gridData === null || gridData === void 0 ? void 0 : gridData.columnData) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
31
|
+
return !columnsData;
|
|
32
|
+
};
|
|
33
|
+
exports.skeletonLoding = skeletonLoding;
|
|
@@ -12,76 +12,58 @@ const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
|
|
|
12
12
|
const inputnumber_1 = require("primereact/inputnumber");
|
|
13
13
|
const skeleton_1 = require("primereact/skeleton");
|
|
14
14
|
const InputTextField = (props) => {
|
|
15
|
-
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading } = props;
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ?
|
|
17
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))) }))] })
|
|
18
|
-
:
|
|
19
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] }), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
|
|
15
|
+
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading, } = props;
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })));
|
|
20
17
|
};
|
|
21
18
|
const InputNumberField = (props) => {
|
|
22
|
-
const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits } = props;
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
24
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({}) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ?
|
|
25
|
-
(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name })] }))
|
|
26
|
-
:
|
|
27
|
-
(0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }) })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
28
|
-
:
|
|
29
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
|
|
19
|
+
const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits, } = props;
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({}) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ? ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name })] }))) : ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name })) })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
30
21
|
};
|
|
31
22
|
const InputCurrencyField = (props) => {
|
|
32
|
-
const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
|
|
33
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
34
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({}) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name })] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
35
|
-
:
|
|
36
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
|
|
23
|
+
const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, } = props;
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({}) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name })] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
37
25
|
};
|
|
38
26
|
const InputTextAreaField = (props) => {
|
|
39
27
|
const [charCount, setCharCount] = (0, react_1.useState)(0);
|
|
40
|
-
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading } = props;
|
|
28
|
+
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading, } = props;
|
|
41
29
|
(0, react_1.useEffect)(() => {
|
|
42
30
|
setCharCount(values[name].length);
|
|
43
31
|
}, [values[name]]);
|
|
44
32
|
(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }));
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ?
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
33
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: {
|
|
34
|
+
height: "154px",
|
|
35
|
+
resize: "none",
|
|
36
|
+
overflowY: "scroll",
|
|
37
|
+
} }, field, { maxLength: maxLength, className: `pt-2 ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: "20px", right: "12px" } }, { children: [charCount, "/", maxLength] }))] })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
|
|
49
38
|
};
|
|
50
39
|
const DropDownField = (props) => {
|
|
51
|
-
const { errors, touched, name, length, label, onFocus, placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading } = props;
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
|
|
40
|
+
const { errors, touched, name, length, label, onFocus, placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, } = props;
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ onFocus: () => {
|
|
42
|
+
onFocus && onFocus();
|
|
43
|
+
}, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} mb-2` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
|
|
56
44
|
};
|
|
57
45
|
const MultiSelectField = (props) => {
|
|
58
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter } = props;
|
|
59
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
60
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
61
|
-
:
|
|
62
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
|
|
46
|
+
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, } = props;
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
|
|
63
48
|
};
|
|
64
49
|
const PhoneNumberField = (props) => {
|
|
65
|
-
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading } = props;
|
|
50
|
+
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading, } = props;
|
|
66
51
|
const customCountry = (props) => {
|
|
67
52
|
const customCountryTemplate = (options) => {
|
|
68
53
|
let callCode = (0, max_1.getCountryCallingCode)(options.value);
|
|
69
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className:
|
|
54
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt: "countries", className: "border-circle", style: { width: "1.5rem", height: "1.5rem", objectFit: "cover" } }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-medium text-gray-900 line-height-3" }, { children: options.label })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-lg font-normal text-gray-600 line-height-3" }, { children: ["+", callCode] }))] })));
|
|
70
55
|
};
|
|
71
56
|
const customSelectedVal = (options) => {
|
|
72
57
|
if (options) {
|
|
73
|
-
return ((0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt:
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt: "selected-country", className: "border-circle ml-2", style: { width: "1.5rem", height: "1.5rem", objectFit: "cover" } }));
|
|
74
59
|
}
|
|
75
|
-
return (
|
|
60
|
+
return (0, jsx_runtime_1.jsx)("div", { children: placeholder });
|
|
76
61
|
};
|
|
77
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id:
|
|
78
|
-
setFieldValue(
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: "customCountryDropDown" }, { children: (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: "countryCode" }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ filter: true, filterBy: "label", options: props.options }, field, { panelClassName: `${position === "left" ? "" : "phoneNumberClass"}`, panelStyle: { maxWidth: "18rem" } }, props, { itemTemplate: customCountryTemplate, valueTemplate: customSelectedVal, optionLabel: "value", onChange: (e) => {
|
|
63
|
+
setFieldValue("countryCode", e.value);
|
|
79
64
|
} }))) })) })));
|
|
80
65
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: !isLoading ?
|
|
82
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
83
|
-
:
|
|
84
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] }) })));
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && ((0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label }))), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] })) })));
|
|
85
67
|
};
|
|
86
68
|
// const InputGroupField = (props: any) => {
|
|
87
69
|
// const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate } = props;
|
|
@@ -102,4 +84,13 @@ const PhoneNumberField = (props) => {
|
|
|
102
84
|
// </div>
|
|
103
85
|
// )
|
|
104
86
|
// }
|
|
105
|
-
exports.default = {
|
|
87
|
+
exports.default = {
|
|
88
|
+
InputTextField,
|
|
89
|
+
InputNumberField,
|
|
90
|
+
InputCurrencyField,
|
|
91
|
+
InputTextAreaField,
|
|
92
|
+
DropDownField,
|
|
93
|
+
MultiSelectField,
|
|
94
|
+
PhoneNumberField,
|
|
95
|
+
Field: formik_1.Field,
|
|
96
|
+
};
|
|
@@ -9,7 +9,7 @@ const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wys
|
|
|
9
9
|
require("froala-editor/js/plugins.pkgd.min.js");
|
|
10
10
|
// import SvgComponent from '../../directives/svg-component';
|
|
11
11
|
// import { Bold, Italic } from '../../assets/svg/svg';
|
|
12
|
-
const FroalaTextEditor = ({ onChange, value, placeholderText, id, className }) => {
|
|
12
|
+
const FroalaTextEditor = ({ onChange, value, placeholderText, id, className, toolbar = false, }) => {
|
|
13
13
|
const editorRef = (0, react_1.useRef)(null);
|
|
14
14
|
// const html = ``;
|
|
15
15
|
const [editorContent, setEditorContent] = (0, react_1.useState)(value);
|
|
@@ -35,23 +35,31 @@ const FroalaTextEditor = ({ onChange, value, placeholderText, id, className }) =
|
|
|
35
35
|
// };
|
|
36
36
|
(0, react_1.useEffect)(() => {
|
|
37
37
|
if (editorRef.current) {
|
|
38
|
-
editorRef.current.editor.$el.on(
|
|
39
|
-
document.getElementById(id).classList.add(
|
|
38
|
+
editorRef.current.editor.$el.on("focus", () => {
|
|
39
|
+
document.getElementById(id).classList.add("focus-text-editor");
|
|
40
40
|
});
|
|
41
|
-
editorRef.current.editor.$el.on(
|
|
42
|
-
document.getElementById(id).classList.remove(
|
|
41
|
+
editorRef.current.editor.$el.on("focusout", () => {
|
|
42
|
+
document.getElementById(id).classList.remove("focus-text-editor");
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
}, []);
|
|
46
46
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `text-editor ${className}`, id: id }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
|
|
47
|
+
events: {
|
|
48
|
+
initialized: toolbar
|
|
49
|
+
? function () {
|
|
50
|
+
// this is the editor instance.
|
|
51
|
+
this.toolbar.hide();
|
|
52
|
+
}
|
|
53
|
+
: null,
|
|
54
|
+
},
|
|
47
55
|
fontFamilySelection: true,
|
|
48
56
|
fontFamily: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
"Arial,Helvetica,sans-serif": "sans-serif",
|
|
58
|
+
"Impact,Charcoal,sans-serif": "RobotoBold",
|
|
59
|
+
"RobotoItalic,Charcoal,sans-serif": "RobotoItalic",
|
|
52
60
|
// 'Tahoma,Geneva,sans-serif': 'Font 3'
|
|
53
61
|
},
|
|
54
|
-
fontFamilyDefaultSelection:
|
|
62
|
+
fontFamilyDefaultSelection: "sans-serif",
|
|
55
63
|
placeholderText: placeholderText,
|
|
56
64
|
key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
|
|
57
65
|
toolbarSticky: false,
|
|
@@ -61,24 +69,58 @@ const FroalaTextEditor = ({ onChange, value, placeholderText, id, className }) =
|
|
|
61
69
|
heightMax: 160,
|
|
62
70
|
heightMin: 130,
|
|
63
71
|
toolbarButtons: {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
72
|
+
fontFamily: {
|
|
73
|
+
buttons: ["fontFamily"],
|
|
74
|
+
class: "customCard",
|
|
67
75
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
moreText: {
|
|
77
|
+
buttons: [
|
|
78
|
+
"bold",
|
|
79
|
+
"italic",
|
|
80
|
+
"underline",
|
|
81
|
+
"strikeThrough",
|
|
82
|
+
"fontSize",
|
|
83
|
+
"subscript",
|
|
84
|
+
"superscript",
|
|
85
|
+
"textColor",
|
|
86
|
+
"backgroundColor",
|
|
87
|
+
"inlineClass",
|
|
88
|
+
"inlineStyle",
|
|
89
|
+
"clearFormatting",
|
|
90
|
+
],
|
|
91
|
+
buttonsVisible: 2,
|
|
71
92
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
93
|
+
moreParagraph: {
|
|
94
|
+
buttons: [
|
|
95
|
+
"formatOL",
|
|
96
|
+
"formatUL",
|
|
97
|
+
"alignLeft",
|
|
98
|
+
"alignCenter",
|
|
99
|
+
"formatOLSimple",
|
|
100
|
+
"alignRight",
|
|
101
|
+
"alignJustify",
|
|
102
|
+
"paragraphFormat",
|
|
103
|
+
"paragraphStyle",
|
|
104
|
+
"lineHeight",
|
|
105
|
+
"outdent",
|
|
106
|
+
"indent",
|
|
107
|
+
"quote",
|
|
108
|
+
],
|
|
109
|
+
buttonsVisible: 2,
|
|
75
110
|
},
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
111
|
+
moreRich: {
|
|
112
|
+
buttons: [
|
|
113
|
+
"insertLink",
|
|
114
|
+
"insertImage",
|
|
115
|
+
"insertHR",
|
|
116
|
+
"undo",
|
|
117
|
+
"redo",
|
|
118
|
+
"html",
|
|
119
|
+
],
|
|
120
|
+
buttonsVisible: 2,
|
|
79
121
|
},
|
|
80
|
-
|
|
81
|
-
|
|
122
|
+
fullscreen: {
|
|
123
|
+
button: "fullscreen",
|
|
82
124
|
},
|
|
83
125
|
},
|
|
84
126
|
}, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const dataCellRenderer: (cellRendererParams: any, column: any, props: any) => import("react/jsx-runtime").JSX.Element;
|
|
2
2
|
export declare const GroupHeader: (params: any) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare const GridHeaderComponent: (props: any) => any;
|
|
4
|
+
export declare const skeletonLoding: () => boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { FroalaTextEditorTypes } from
|
|
5
|
-
declare const FroalaTextEditor: ({ onChange, value, placeholderText, id, className }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import "froala-editor/css/froala_editor.pkgd.min.css";
|
|
2
|
+
import "froala-editor/css/froala_style.min.css";
|
|
3
|
+
import "froala-editor/js/plugins.pkgd.min.js";
|
|
4
|
+
import { FroalaTextEditorTypes } from "../types/type";
|
|
5
|
+
declare const FroalaTextEditor: ({ onChange, value, placeholderText, id, className, toolbar, }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export default FroalaTextEditor;
|