sccoreui 6.2.68 → 6.2.70
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/App.js +1 -1
- package/dist/App.scss +53 -57
- package/dist/components/ag-grid/advancedFeature/advanced-feature.js +13 -2
- package/dist/components/ag-grid/advancedFeature/column-group.js +4 -3
- package/dist/components/ag-grid/advancedFeature/custom-sort.js +4 -2
- package/dist/components/ag-grid/advancedFeature/global-search.js +5 -3
- package/dist/components/ag-grid/advancedFeature/gridS-search.js +5 -3
- package/dist/components/ag-grid/advancedFeature/hide-column.js +4 -2
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +5 -3
- package/dist/components/ag-grid/advancedFeature/refresh-grid.js +9 -2
- package/dist/components/ag-grid/advancedFeature/remove-items.js +9 -5
- package/dist/components/ag-grid/context-provider.js +2 -1
- package/dist/components/ag-grid/helper.js +16 -5
- package/dist/components/ag-grid/parent-for-grid.js +2 -2
- package/dist/components/dropdown/dropdown.js +6 -6
- package/dist/components/form/form-fields/form-fields.js +44 -35
- package/dist/components/formula-template/FormulaCoponent.js +7 -1
- package/dist/components/list-box-dropdown/list-box-dropdown.js +3 -1
- package/dist/components/types/type.js +7 -5
- package/dist/directives/svg-component.js +2 -2
- package/dist/types/components/ag-grid/Types.d.ts +12 -12
- package/dist/types/components/ag-grid/context-provider.d.ts +2 -1
- package/dist/types/components/ag-grid/helper.d.ts +1 -0
- package/dist/types/components/dropdown/dropdown.d.ts +1 -1
- package/dist/types/components/types/type.d.ts +5 -0
- package/dist/types/directives/svg-component.d.ts +2 -1
- package/package.json +1 -1
package/dist/App.js
CHANGED
package/dist/App.scss
CHANGED
|
@@ -47,29 +47,29 @@
|
|
|
47
47
|
--grey-bg: #101828;
|
|
48
48
|
--border-none: border-none;
|
|
49
49
|
--box-shadow-none: none;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
50
|
+
--_primary-800: #0e184f;
|
|
51
|
+
--_primary-700: #111c5b;
|
|
52
|
+
--_primary-600: #132067;
|
|
53
|
+
--_primary-500: #162578;
|
|
54
|
+
--_primary-400: #243dc6;
|
|
55
|
+
--_primary-300: #d0d5dd;
|
|
56
|
+
--_primary-100: #ced4f6;
|
|
57
|
+
--_primary-200: #8794db;
|
|
58
|
+
--_primary-50: #e2e5fa;
|
|
59
|
+
--_primary-25: #f5f6fd;
|
|
60
|
+
|
|
61
|
+
--_gray-700: #344054;
|
|
62
|
+
--_gray-800: #1d2939;
|
|
63
|
+
--_gray-200: #eaecf0;
|
|
64
|
+
--_gray-300: #d0d5dd;
|
|
65
|
+
--_gray-50: #f9fafb;
|
|
66
|
+
--_base-white: #fff;
|
|
67
|
+
|
|
68
|
+
--_text-secondary-600: #475467;
|
|
69
|
+
--_outline-800: #1d2939;
|
|
70
|
+
--_outline-200: #eaecf0;
|
|
71
|
+
--_outline-300: #d0d5dd;
|
|
72
|
+
--_outline-50: #f9fafb;
|
|
73
73
|
--_base-white: #fff;
|
|
74
74
|
}
|
|
75
75
|
|
|
@@ -97,90 +97,90 @@
|
|
|
97
97
|
.p-button {
|
|
98
98
|
border: 0 !important;
|
|
99
99
|
&.btn-primary {
|
|
100
|
-
background-color: var(--
|
|
100
|
+
background-color: var(--_primary-500);
|
|
101
101
|
color: var(--_base-white);
|
|
102
102
|
padding: 8px 14px;
|
|
103
103
|
&:hover {
|
|
104
|
-
background-color: var(--
|
|
104
|
+
background-color: var(--_primary-700);
|
|
105
105
|
}
|
|
106
106
|
&:focus {
|
|
107
|
-
background-color: var(--
|
|
107
|
+
background-color: var(--_primary-700);
|
|
108
108
|
}
|
|
109
109
|
&:disabled {
|
|
110
|
-
background-color: var(--
|
|
110
|
+
background-color: var(--_primary-200);
|
|
111
111
|
color: var(--_base-white);
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
&.btn-outline {
|
|
116
|
-
background-color: var(--
|
|
117
|
-
color: var(--
|
|
118
|
-
border: 1px solid var(--
|
|
116
|
+
background-color: var(--base-white);
|
|
117
|
+
color: var(--_gray-600);
|
|
118
|
+
border: 1px solid var(--_gray-300) !important;
|
|
119
119
|
padding: 6px 12px;
|
|
120
120
|
&:hover {
|
|
121
|
-
background-color: var(--
|
|
122
|
-
color: var(--
|
|
121
|
+
background-color: var(--_gray-50) !important;
|
|
122
|
+
color: var(--_gray-700) !important;
|
|
123
123
|
}
|
|
124
124
|
&:focus {
|
|
125
125
|
background-color: var(--gray-50);
|
|
126
126
|
}
|
|
127
127
|
&:disabled {
|
|
128
|
-
background-color: var(--
|
|
128
|
+
background-color: var(--_gray-200);
|
|
129
129
|
color: var(--_base-white);
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
&.btn-secondary {
|
|
134
|
-
background-color: var(--
|
|
135
|
-
color: var(--
|
|
134
|
+
background-color: var(--_primary-50);
|
|
135
|
+
color: var(--_primary-500);
|
|
136
136
|
padding: 8px 14px;
|
|
137
137
|
&:hover {
|
|
138
|
-
background-color: var(--
|
|
139
|
-
color: var(--
|
|
138
|
+
background-color: var(--_primary-100) !important;
|
|
139
|
+
color: var(--_primary-800) !important;
|
|
140
140
|
}
|
|
141
141
|
&:focus {
|
|
142
|
-
background-color: var(--
|
|
142
|
+
background-color: var(--_primary-100);
|
|
143
143
|
}
|
|
144
144
|
&:disabled {
|
|
145
|
-
background-color: var(--
|
|
146
|
-
color: var(--
|
|
145
|
+
background-color: var(--_primary-50);
|
|
146
|
+
color: var(--_gray-300);
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
&.btn-text {
|
|
151
151
|
background-color: var(--_base-white);
|
|
152
|
-
color: var(--
|
|
152
|
+
color: var(--_gray-600);
|
|
153
153
|
padding: 8px 14px;
|
|
154
154
|
border: 0 !important;
|
|
155
155
|
&:hover {
|
|
156
|
-
background-color: var(--
|
|
157
|
-
color: var(--
|
|
156
|
+
background-color: var(--_gray-50) !important;
|
|
157
|
+
color: var(--_gray-700) !important;
|
|
158
158
|
}
|
|
159
159
|
&:focus {
|
|
160
|
-
background-color: var(--
|
|
161
|
-
color: var(--
|
|
160
|
+
background-color: var(--_gray-50);
|
|
161
|
+
color: var(--_gray-700);
|
|
162
162
|
border: 0px !important;
|
|
163
163
|
}
|
|
164
164
|
&:disabled {
|
|
165
|
-
background-color: var(--
|
|
166
|
-
color: var(--
|
|
165
|
+
background-color: var(--_primary-50) !important;
|
|
166
|
+
color: var(--_gray-300);
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
&.btn-text-primary {
|
|
170
170
|
background-color: var(--_base-white);
|
|
171
|
-
color: var(--
|
|
171
|
+
color: var(--_primary-400);
|
|
172
172
|
padding: 8px 14px;
|
|
173
173
|
border: 0 !important;
|
|
174
174
|
&:hover {
|
|
175
|
-
background-color: var(--
|
|
176
|
-
color: var(--
|
|
175
|
+
background-color: var(--_primary-25) !important;
|
|
176
|
+
color: var(--_primary-600) !important;
|
|
177
177
|
}
|
|
178
178
|
&:focus {
|
|
179
|
-
background-color: var(--
|
|
180
|
-
color: var(--
|
|
179
|
+
background-color: var(--_primary-25) !important;
|
|
180
|
+
color: var(--_primary-600) !important;
|
|
181
181
|
}
|
|
182
182
|
&:disabled {
|
|
183
|
-
color: var(--
|
|
183
|
+
color: var(--_gray-300);
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
186
|
}
|
|
@@ -223,10 +223,6 @@ code {
|
|
|
223
223
|
padding-right: 60px !important;
|
|
224
224
|
}
|
|
225
225
|
|
|
226
|
-
.h-32 {
|
|
227
|
-
height: 32px;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
226
|
// h1 {
|
|
231
227
|
// font-size: var(--fs-24);
|
|
232
228
|
// font-weight: var(--fw-600);
|
|
@@ -14,13 +14,24 @@ const hide_column_1 = tslib_1.__importDefault(require("./hide-column"));
|
|
|
14
14
|
const gridS_search_1 = tslib_1.__importDefault(require("./gridS-search"));
|
|
15
15
|
const bulk_edit_action_1 = tslib_1.__importDefault(require("./bulk-edit-action"));
|
|
16
16
|
const column_group_1 = tslib_1.__importDefault(require("./column-group"));
|
|
17
|
+
const type_1 = require("../../types/type");
|
|
17
18
|
function AdvancedFeatures({ props }) {
|
|
18
19
|
const { featureDetails } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
19
20
|
const conditionsToDisplay = props === null || props === void 0 ? void 0 : props.conditionsToDisplay;
|
|
20
21
|
const { bulkActionComponent: BulkAction, BulkEditComponent: BulkEdit,
|
|
21
22
|
// discardEditComponent: DiscardEdit,
|
|
22
23
|
// SaveEdit: SaveChanges,
|
|
23
|
-
EditHeadingDetails: EditDetails, AdvancedFilter } = props;
|
|
24
|
-
|
|
24
|
+
EditHeadingDetails: EditDetails, AdvancedFilter, } = props;
|
|
25
|
+
const isComponentVisible = (state) => {
|
|
26
|
+
return (state === type_1.VisibilityState.ENABLE || state === type_1.VisibilityState.DISABLE);
|
|
27
|
+
};
|
|
28
|
+
const AdvanceFilterWrapper = () => {
|
|
29
|
+
return AdvancedFilter && (0, jsx_runtime_1.jsx)(AdvancedFilter, {});
|
|
30
|
+
};
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props === null || props === void 0 ? void 0 : props.editMode) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: (isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayEditHeading) &&
|
|
32
|
+
(props === null || props === void 0 ? void 0 : props.EditHeadingDetails)) && (0, jsx_runtime_1.jsx)(EditDetails, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(gridS_search_1.default, {})) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && (0, jsx_runtime_1.jsx)(hide_column_1.default, {}), (isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
|
|
33
|
+
(props === null || props === void 0 ? void 0 : props.BulkEditComponent)) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (props === null || props === void 0 ? void 0 : props.editMode) && (0, jsx_runtime_1.jsx)(bulk_edit_action_1.default, { props: props })] }))] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && ((0, jsx_runtime_1.jsx)(table_filter_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayAdvancedFilter) && ((0, jsx_runtime_1.jsx)(AdvanceFilterWrapper, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRowGroupingElement) && (0, jsx_runtime_1.jsx)(column_group_1.default, { dataFromProps: props })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && (0, jsx_runtime_1.jsx)(hide_column_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && ((0, jsx_runtime_1.jsx)(remove_items_1.default, { removeCallBack: props.removeCallBack })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
|
|
34
|
+
(props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkAction) &&
|
|
35
|
+
(props === null || props === void 0 ? void 0 : props.bulkActionComponent)) && ((0, jsx_runtime_1.jsx)(BulkAction, { checkBoxSelection: featureDetails.checkBoxSelection })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRecords) && (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] }))) }));
|
|
25
36
|
}
|
|
26
37
|
exports.default = AdvancedFeatures;
|
|
@@ -19,13 +19,14 @@ const ColumnGroup = (props) => {
|
|
|
19
19
|
const btnRef = (0, react_1.useRef)(null);
|
|
20
20
|
const [searchText, setSearchedText] = (0, react_1.useState)("");
|
|
21
21
|
const [checkedColumns, setCheckedColumns] = (0, react_1.useState)(new Set());
|
|
22
|
-
const { gridApi, setGridData, setSelectedGroup, setFeatureDetails, featureDetails, initialCheckBoxData, intialColumns,
|
|
22
|
+
const { gridApi, setGridData, setSelectedGroup, setFeatureDetails, featureDetails, initialCheckBoxData, intialColumns, conditionsToDisplay,
|
|
23
23
|
// setIntialColumns,
|
|
24
24
|
} = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
25
25
|
const [columns, setColumns] = (0, react_1.useState)([]);
|
|
26
26
|
const [renderColumns, setRenderColumns] = (0, react_1.useState)([]);
|
|
27
27
|
const [columnsSelectedForGroup, setColumnsSelectedForGroup] = (0, react_1.useState)([]);
|
|
28
28
|
const [selectedCheckBoxesLength, setSelectedCheckBoxesLength] = (0, react_1.useState)(null);
|
|
29
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRowGroupingElement);
|
|
29
30
|
console.log("intiallllllllll", intialColumns, selectedCheckBoxesLength);
|
|
30
31
|
// const [featureDetails, setFeatureDetails] = useState<Features>({
|
|
31
32
|
// searchedText: "",
|
|
@@ -197,9 +198,9 @@ const ColumnGroup = (props) => {
|
|
|
197
198
|
}, [(_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]);
|
|
198
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
|
|
199
200
|
? "bg-primary-50 h-38"
|
|
200
|
-
: "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: showColumnOptions }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
201
|
+
: "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
|
|
201
202
|
? "text-primary-400"
|
|
202
|
-
: "text-gray-500" }), (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
|
|
203
|
+
: "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
|
|
203
204
|
? "col-gr-icon-active mr-2"
|
|
204
205
|
: "col-gr-icon" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
|
|
205
206
|
!checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-28rem line-clamp line-clamp-1 inline-block", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id)))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "no-content" }, { children: "No Content" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", text: true, label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
|
|
@@ -9,14 +9,16 @@ const radiobutton_1 = require("primereact/radiobutton");
|
|
|
9
9
|
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
|
+
const helper_1 = require("../helper");
|
|
12
13
|
function Sort() {
|
|
13
14
|
var _a, _b;
|
|
14
|
-
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
|
+
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
16
|
const showShort = (0, react_1.useRef)(null);
|
|
16
17
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
17
18
|
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
18
19
|
const [isApplyDisable, setIsApplyDisable] = (0, react_1.useState)(true);
|
|
19
20
|
const [showBorder, setShowBorder] = (0, react_1.useState)(false);
|
|
21
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySort);
|
|
20
22
|
const onClickSort = (event) => {
|
|
21
23
|
showShort.current.toggle(event);
|
|
22
24
|
};
|
|
@@ -87,7 +89,7 @@ function Sort() {
|
|
|
87
89
|
}
|
|
88
90
|
}, [sortValue, sortBy]);
|
|
89
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
|
|
90
|
-
? "bg-primary-50" : "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) ? sortModelText.onSelectedSort : `Selected` }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover border-round-md`, onClick: (event) => onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
92
|
+
? "bg-primary-50" : "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) ? sortModelText.onSelectedSort : `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
|
|
91
93
|
? "text-primary-400"
|
|
92
94
|
: "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) => {
|
|
93
95
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
@@ -8,9 +8,11 @@ const react_1 = require("react");
|
|
|
8
8
|
const context_provider_1 = require("../context-provider");
|
|
9
9
|
const hooks_1 = require("primereact/hooks");
|
|
10
10
|
const constants_1 = require("../constants");
|
|
11
|
+
const helper_1 = require("../helper");
|
|
11
12
|
function Search({ searchPlaceHolder }) {
|
|
12
|
-
const { featureDetails, setFeatureDetails, rowModelType, gridApi, quickSearch, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
13
|
+
const { featureDetails, setFeatureDetails, rowModelType, gridApi, quickSearch, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
13
14
|
const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
|
|
15
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySearch);
|
|
14
16
|
(0, react_1.useEffect)(() => {
|
|
15
17
|
var _a, _b, _c;
|
|
16
18
|
if (rowModelType === constants_1.ROWMODELTYPE.CLIENT_SIDE && quickSearch) {
|
|
@@ -29,9 +31,9 @@ function Search({ searchPlaceHolder }) {
|
|
|
29
31
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
|
|
30
32
|
}
|
|
31
33
|
}, [deboucedValue]);
|
|
32
|
-
return ((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 }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
|
|
34
|
+
return ((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: () => {
|
|
33
35
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" })),
|
|
34
36
|
setInputValue("");
|
|
35
|
-
}, 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) => setInputValue(e.target.value), className: "w-21rem", placeholder: searchPlaceHolder || "Search by name or code" })] })));
|
|
37
|
+
}, 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 })] })));
|
|
36
38
|
}
|
|
37
39
|
exports.default = Search;
|
|
@@ -6,14 +6,16 @@ const react_1 = require("react");
|
|
|
6
6
|
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
|
+
const helper_1 = require("../helper");
|
|
9
10
|
function GridSearch() {
|
|
10
|
-
const { gridApi } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
|
+
const { gridApi, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
12
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySearch);
|
|
11
13
|
const onFilterTextBoxChanged = (0, react_1.useCallback)(() => {
|
|
12
14
|
var _a;
|
|
13
|
-
if (gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) {
|
|
15
|
+
if ((gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) && !isDisabled) {
|
|
14
16
|
(_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);
|
|
15
17
|
}
|
|
16
18
|
}, []);
|
|
17
|
-
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 }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
|
|
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" })] })));
|
|
18
20
|
}
|
|
19
21
|
exports.default = GridSearch;
|
|
@@ -10,14 +10,16 @@ const inputswitch_1 = require("primereact/inputswitch");
|
|
|
10
10
|
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
|
+
const helper_1 = require("../helper");
|
|
13
14
|
function HideColumn() {
|
|
14
|
-
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
|
+
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
16
|
const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
|
|
16
17
|
const [enableManageColumnsCallbackAPI, setEnableManageColumnsCallbackAPI] = (0, react_1.useState)(false);
|
|
17
18
|
const [inpValue, setInputValue] = (0, react_1.useState)("");
|
|
18
19
|
const [storeNodes, setStoreNodes] = (0, react_1.useState)();
|
|
19
20
|
const [nodes, setNodes] = (0, react_1.useState)();
|
|
20
21
|
const [hidePanelNodes, setHidePanelNodes] = (0, react_1.useState)([]);
|
|
22
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySidePanel);
|
|
21
23
|
const addColumns = () => {
|
|
22
24
|
var _a;
|
|
23
25
|
const columns = [];
|
|
@@ -164,7 +166,7 @@ function HideColumn() {
|
|
|
164
166
|
setVisibleRight(false);
|
|
165
167
|
setInputValue("");
|
|
166
168
|
};
|
|
167
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => setVisibleRight(true), className: "rounded_btn sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 18 }) })), (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 ? true : false, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback &&
|
|
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 ? true : false, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback &&
|
|
168
170
|
(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) || "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) => {
|
|
169
171
|
searchHandler(e.target.value);
|
|
170
172
|
}, disabled: false, placeholder: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.search_placeHolder) || "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 ?
|
|
@@ -11,9 +11,10 @@ const inputtext_1 = require("primereact/inputtext");
|
|
|
11
11
|
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
|
+
const helper_1 = require("../../helper");
|
|
14
15
|
// import "./TableFilter.module.scss";
|
|
15
16
|
const TableFilter = () => {
|
|
16
|
-
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
17
|
+
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);
|
|
17
18
|
const columnId = "field";
|
|
18
19
|
const columnName = "headerName";
|
|
19
20
|
const showFilter = (0, react_1.useRef)(null);
|
|
@@ -22,6 +23,7 @@ const TableFilter = () => {
|
|
|
22
23
|
const [enbleApply, setEnableApply] = (0, react_1.useState)(true);
|
|
23
24
|
const [isOverlayOpened, setIsOverlayOpened] = (0, react_1.useState)(false);
|
|
24
25
|
const [displayInput, setDisplayInput] = (0, react_1.useState)(false);
|
|
26
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayFilter);
|
|
25
27
|
const tableColumns = columnData === null || columnData === void 0 ? void 0 : columnData.filter((eachColumn) => eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isFilterable).map((eachColumn) => ({
|
|
26
28
|
name: eachColumn[columnName],
|
|
27
29
|
code: eachColumn[columnId],
|
|
@@ -163,10 +165,10 @@ const TableFilter = () => {
|
|
|
163
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 ||
|
|
164
166
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
165
167
|
? "bg-primary-50"
|
|
166
|
-
: "bg-white"}` }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => 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 ||
|
|
168
|
+
: "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 ||
|
|
167
169
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
168
170
|
? "#243DC6"
|
|
169
|
-
: "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
|
|
171
|
+
: "#667085", disabled: isDisabled }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
|
|
170
172
|
? filterModelText.onSelectedFilter
|
|
171
173
|
: "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
|
|
172
174
|
e.preventDefault();
|
|
@@ -5,8 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
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
|
+
const helper_1 = require("../helper");
|
|
8
9
|
function RefreshGrid() {
|
|
9
|
-
const { removeFeaturesAndRefresh } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
10
|
-
|
|
10
|
+
const { removeFeaturesAndRefresh, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRefresh);
|
|
12
|
+
const refreshHandler = () => {
|
|
13
|
+
if (!isDisabled) {
|
|
14
|
+
removeFeaturesAndRefresh();
|
|
15
|
+
}
|
|
16
|
+
};
|
|
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 }) })));
|
|
11
18
|
}
|
|
12
19
|
exports.default = RefreshGrid;
|
|
@@ -5,14 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
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
|
+
const helper_1 = require("../helper");
|
|
8
9
|
function RemoveItems(props) {
|
|
9
|
-
const { featureDetails } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
10
|
+
const { featureDetails, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
10
11
|
const { removeCallBack } = props;
|
|
12
|
+
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRemoveItems);
|
|
11
13
|
const removeItemsCallBack = () => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
if (!isDisabled && removeCallBack) {
|
|
15
|
+
const currentFeature = Object.assign({}, featureDetails);
|
|
16
|
+
// Callback from products
|
|
17
|
+
removeCallBack(currentFeature);
|
|
18
|
+
}
|
|
15
19
|
};
|
|
16
|
-
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 }) })));
|
|
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 }) })));
|
|
17
21
|
}
|
|
18
22
|
exports.default = RemoveItems;
|
|
@@ -6,7 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const helper_1 = require("./helper");
|
|
7
7
|
exports.FeatureContext = (0, react_1.createContext)(null);
|
|
8
8
|
function MyProvider({ children, value }) {
|
|
9
|
-
const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sidePanelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, columnToRender, selectedGroup, setSelectedGroup, initialCheckBoxData, intialColumns, setIntialColumns, rowModelType, quickSearch, enableAdvancedFilter, } = value;
|
|
9
|
+
const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sidePanelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, columnToRender, selectedGroup, setSelectedGroup, initialCheckBoxData, intialColumns, setIntialColumns, rowModelType, quickSearch, enableAdvancedFilter, conditionsToDisplay, } = value;
|
|
10
10
|
// States for sort
|
|
11
11
|
const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
|
|
12
12
|
const [sortValue, setSortValue] = (0, react_1.useState)({});
|
|
@@ -108,6 +108,7 @@ function MyProvider({ children, value }) {
|
|
|
108
108
|
rowModelType,
|
|
109
109
|
quickSearch,
|
|
110
110
|
enableAdvancedFilter,
|
|
111
|
+
conditionsToDisplay,
|
|
111
112
|
} }, { children: children })));
|
|
112
113
|
}
|
|
113
114
|
exports.default = MyProvider;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.deepClone = exports.handleCheckboxClick = exports.getGroupIds = exports.handleUncheckedState = exports.handleCheckedState = exports.updateGroupState = exports.determineConditions = exports.updateRecords = exports.autoGroupColumnDef = exports.fillOperation = exports.updateCells = exports.getCheckedStatus = exports.sortColumns = exports.parseIfNeeded = exports.applyDefaultFilters = exports.initialCheckBoxData = void 0;
|
|
3
|
+
exports.deepClone = exports.handleCheckboxClick = exports.getGroupIds = exports.handleUncheckedState = exports.handleCheckedState = exports.updateGroupState = exports.determineConditions = exports.updateRecords = exports.autoGroupColumnDef = exports.fillOperation = exports.updateCells = exports.getCheckedStatus = exports.sortColumns = exports.parseIfNeeded = exports.applyDefaultFilters = exports.isComponentDisable = exports.initialCheckBoxData = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const constants_1 = require("./constants");
|
|
7
|
+
const type_1 = require("../types/type");
|
|
7
8
|
// initial checkbox data
|
|
8
9
|
exports.initialCheckBoxData = {
|
|
9
10
|
allBoxChecked: false,
|
|
@@ -12,6 +13,10 @@ exports.initialCheckBoxData = {
|
|
|
12
13
|
excludedRecords: [],
|
|
13
14
|
headerCheckBoxStatus: constants_1.GRID_CHECKBOX_STATUS.NEUTRAL,
|
|
14
15
|
};
|
|
16
|
+
const isComponentDisable = (state) => {
|
|
17
|
+
return state === type_1.VisibilityState.DISABLE;
|
|
18
|
+
};
|
|
19
|
+
exports.isComponentDisable = isComponentDisable;
|
|
15
20
|
const applyDefaultFilters = (defaultFilters) => {
|
|
16
21
|
const filters = defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.map((item) => {
|
|
17
22
|
const obj = {
|
|
@@ -402,16 +407,22 @@ exports.handleUncheckedState = handleUncheckedState;
|
|
|
402
407
|
// Utility function to update checkbox data in the state
|
|
403
408
|
const updateCheckboxData = (newIncludedRecords, newExcludedRecords, gridData, featureDetails, setFeatureDetails, allBoxChecked) => {
|
|
404
409
|
var _a, _b, _c, _d;
|
|
405
|
-
if ((newIncludedRecords === null || newIncludedRecords === void 0 ? void 0 : newIncludedRecords.length) === 0 &&
|
|
410
|
+
if ((newIncludedRecords === null || newIncludedRecords === void 0 ? void 0 : newIncludedRecords.length) === 0 &&
|
|
411
|
+
((_a = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _a === void 0 ? void 0 : _a.length) === 0 &&
|
|
412
|
+
!allBoxChecked) {
|
|
406
413
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { excludedRecords: [], includedRecords: [], isIndeterminate: false, allBoxChecked: false }) }));
|
|
407
414
|
}
|
|
408
|
-
else if ((newIncludedRecords === null || newIncludedRecords === void 0 ? void 0 : newIncludedRecords.length) === ((_b = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _b === void 0 ? void 0 : _b.length) &&
|
|
415
|
+
else if ((newIncludedRecords === null || newIncludedRecords === void 0 ? void 0 : newIncludedRecords.length) === ((_b = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _b === void 0 ? void 0 : _b.length) &&
|
|
416
|
+
(newIncludedRecords === null || newIncludedRecords === void 0 ? void 0 : newIncludedRecords.length) > 0) {
|
|
409
417
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { excludedRecords: [], includedRecords: [], isIndeterminate: false, allBoxChecked: true }) }));
|
|
410
418
|
}
|
|
411
|
-
else if ((newExcludedRecords === null || newExcludedRecords === void 0 ? void 0 : newExcludedRecords.length) === 0 &&
|
|
419
|
+
else if ((newExcludedRecords === null || newExcludedRecords === void 0 ? void 0 : newExcludedRecords.length) === 0 &&
|
|
420
|
+
((_c = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _c === void 0 ? void 0 : _c.length) === 0 &&
|
|
421
|
+
allBoxChecked) {
|
|
412
422
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { excludedRecords: [], includedRecords: [], isIndeterminate: false, allBoxChecked: true }) }));
|
|
413
423
|
}
|
|
414
|
-
else if ((newExcludedRecords === null || newExcludedRecords === void 0 ? void 0 : newExcludedRecords.length) === ((_d = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _d === void 0 ? void 0 : _d.length) &&
|
|
424
|
+
else if ((newExcludedRecords === null || newExcludedRecords === void 0 ? void 0 : newExcludedRecords.length) === ((_d = gridData === null || gridData === void 0 ? void 0 : gridData.rowData) === null || _d === void 0 ? void 0 : _d.length) &&
|
|
425
|
+
(newExcludedRecords === null || newExcludedRecords === void 0 ? void 0 : newExcludedRecords.length) > 0) {
|
|
415
426
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { excludedRecords: [], includedRecords: [], isIndeterminate: false, allBoxChecked: false }) }));
|
|
416
427
|
}
|
|
417
428
|
else {
|
|
@@ -408,7 +408,7 @@ function ParentForGrid(props) {
|
|
|
408
408
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData }));
|
|
409
409
|
}
|
|
410
410
|
}, [props === null || props === void 0 ? void 0 : props.emptyCheckboxStatus]);
|
|
411
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "wrapper", style: { height: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.height, width: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.width }, className: `ag-grid-container ${(props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) ? "hide-advance-filter" : ""}` }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_provider_1.default, Object.assign({ value: Object.assign({ rowModelType: props.rowModelType, quickSearch: props === null || props === void 0 ? void 0 : props.quickSearch, featureDetails,
|
|
411
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "wrapper", style: { height: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.height, width: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.width }, className: `ag-grid-container ${(props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) ? "hide-advance-filter" : ""}` }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_provider_1.default, Object.assign({ value: Object.assign(Object.assign({ rowModelType: props.rowModelType, quickSearch: props === null || props === void 0 ? void 0 : props.quickSearch, featureDetails,
|
|
412
412
|
setFeatureDetails,
|
|
413
413
|
gridData,
|
|
414
414
|
callGrid,
|
|
@@ -417,6 +417,6 @@ function ParentForGrid(props) {
|
|
|
417
417
|
defaultFilters, createView: props === null || props === void 0 ? void 0 : props.createView, enableViewCreate: (_k = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _k === void 0 ? void 0 : _k.enableViewCreate, filterModelText: (_l = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _l === void 0 ? void 0 : _l.filterModelText, sortModelText: (_m = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _m === void 0 ? void 0 : _m.sortModelText, recordDetailModelText: (_o = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _o === void 0 ? void 0 : _o.recordDetailModelText, sidePanelText: (_p = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _p === void 0 ? void 0 : _p.sidePanelText, sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions)
|
|
418
418
|
? props.sortOptions
|
|
419
419
|
: constants_1.COLUMN_SORT_OPTIONS, filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions, clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters, setGridData, gridApi: gridRef, updateColumnsForGrid: props === null || props === void 0 ? void 0 : props.updateColumnsForGrid, enableManageColumnsCallback: props.enableManageColumnsCallback, columnToRender: gridData.columnData, selectedGroup: selectedGroup, setSelectedGroup: setSelectedGroup, initialCheckBoxData: initialCheckBoxData, intialColumns,
|
|
420
|
-
setIntialColumns, enableAdvancedFilter: props === null || props === void 0 ? void 0 : props.enableAdvancedFilter }, ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })) }, { children: ((_q = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _q === void 0 ? void 0 : _q.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle, gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef })] }) })) }) }));
|
|
420
|
+
setIntialColumns, enableAdvancedFilter: props === null || props === void 0 ? void 0 : props.enableAdvancedFilter }, ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })), { conditionsToDisplay: props === null || props === void 0 ? void 0 : props.conditionsToDisplay }) }, { children: ((_q = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _q === void 0 ? void 0 : _q.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle, gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef })] }) })) }) }));
|
|
421
421
|
}
|
|
422
422
|
exports.default = ParentForGrid;
|
|
@@ -7,13 +7,13 @@ const dropdown_1 = require("primereact/dropdown");
|
|
|
7
7
|
const DropdownComponent = () => {
|
|
8
8
|
const [selectedCity, setSelectedCity] = (0, react_1.useState)(null);
|
|
9
9
|
const cities = [
|
|
10
|
-
{ name:
|
|
11
|
-
{ name:
|
|
12
|
-
{ name:
|
|
13
|
-
{ name:
|
|
14
|
-
{ name:
|
|
10
|
+
{ name: 'New York', code: 'NY' },
|
|
11
|
+
{ name: 'Rome', code: 'RM' },
|
|
12
|
+
{ name: 'London', code: 'LDN' },
|
|
13
|
+
{ name: 'Istanbul', code: 'IST' },
|
|
14
|
+
{ name: 'Paris', code: 'PRS' },
|
|
15
15
|
];
|
|
16
|
-
return ((0, jsx_runtime_1.
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card flex justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCity, onChange: (e) => setSelectedCity(e.value), options: cities, optionLabel: "name", placeholder: "Select a City", className: "w-full md:w-14rem" }) })));
|
|
17
17
|
};
|
|
18
18
|
exports.DropdownComponent = DropdownComponent;
|
|
19
19
|
exports.default = dropdown_1.Dropdown;
|
|
@@ -12,58 +12,76 @@ 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
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ?
|
|
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" }) }))] })));
|
|
17
20
|
};
|
|
18
21
|
const InputNumberField = (props) => {
|
|
19
|
-
const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits
|
|
20
|
-
return ((0, jsx_runtime_1.
|
|
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" }) }))] }) })));
|
|
21
30
|
};
|
|
22
31
|
const InputCurrencyField = (props) => {
|
|
23
|
-
const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading
|
|
24
|
-
return ((0, jsx_runtime_1.
|
|
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" }) }))] }) })));
|
|
25
37
|
};
|
|
26
38
|
const InputTextAreaField = (props) => {
|
|
27
39
|
const [charCount, setCharCount] = (0, react_1.useState)(0);
|
|
28
|
-
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading
|
|
40
|
+
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading } = props;
|
|
29
41
|
(0, react_1.useEffect)(() => {
|
|
30
42
|
setCharCount(values[name].length);
|
|
31
43
|
}, [values[name]]);
|
|
32
44
|
(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }));
|
|
33
|
-
return ((0, jsx_runtime_1.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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] }))] })) }))] })) : ((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" }) })))] })));
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ?
|
|
46
|
+
(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: { height: '154px', resize: 'none', overflowY: 'scroll' } }, 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" }) }))] })
|
|
47
|
+
:
|
|
48
|
+
(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" }) }))] }) })));
|
|
38
49
|
};
|
|
39
50
|
const DropDownField = (props) => {
|
|
40
|
-
const { errors, touched, name, length, label, onFocus, placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading
|
|
41
|
-
return ((0, jsx_runtime_1.
|
|
42
|
-
|
|
43
|
-
|
|
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
|
+
(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: () => { onFocus && onFocus(); }, 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" }) }))] })
|
|
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" }) }))] }) })));
|
|
44
56
|
};
|
|
45
57
|
const MultiSelectField = (props) => {
|
|
46
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter
|
|
47
|
-
return ((0, jsx_runtime_1.
|
|
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" }) }))] }) })));
|
|
48
63
|
};
|
|
49
64
|
const PhoneNumberField = (props) => {
|
|
50
|
-
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading
|
|
65
|
+
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading } = props;
|
|
51
66
|
const customCountry = (props) => {
|
|
52
67
|
const customCountryTemplate = (options) => {
|
|
53
68
|
let callCode = (0, max_1.getCountryCallingCode)(options.value);
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className:
|
|
69
|
+
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] }))] })));
|
|
55
70
|
};
|
|
56
71
|
const customSelectedVal = (options) => {
|
|
57
72
|
if (options) {
|
|
58
|
-
return ((0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt:
|
|
73
|
+
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' } }));
|
|
59
74
|
}
|
|
60
|
-
return (0, jsx_runtime_1.jsx)("div", { children: placeholder });
|
|
75
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: placeholder }));
|
|
61
76
|
};
|
|
62
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id:
|
|
63
|
-
setFieldValue(
|
|
77
|
+
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) => {
|
|
78
|
+
setFieldValue('countryCode', e.value);
|
|
64
79
|
} }))) })) })));
|
|
65
80
|
};
|
|
66
|
-
return ((0, jsx_runtime_1.
|
|
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` })] }) })));
|
|
67
85
|
};
|
|
68
86
|
// const InputGroupField = (props: any) => {
|
|
69
87
|
// const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate } = props;
|
|
@@ -84,13 +102,4 @@ const PhoneNumberField = (props) => {
|
|
|
84
102
|
// </div>
|
|
85
103
|
// )
|
|
86
104
|
// }
|
|
87
|
-
exports.default = {
|
|
88
|
-
InputTextField,
|
|
89
|
-
InputNumberField,
|
|
90
|
-
InputCurrencyField,
|
|
91
|
-
InputTextAreaField,
|
|
92
|
-
DropDownField,
|
|
93
|
-
MultiSelectField,
|
|
94
|
-
PhoneNumberField,
|
|
95
|
-
Field: formik_1.Field,
|
|
96
|
-
};
|
|
105
|
+
exports.default = { InputTextField, InputNumberField, InputCurrencyField, InputTextAreaField, DropDownField, MultiSelectField, PhoneNumberField, Field: formik_1.Field };
|
|
@@ -493,7 +493,13 @@ const FormulaComponent = (props) => {
|
|
|
493
493
|
}
|
|
494
494
|
case "INCREASE_BY_PERCENTAGE":
|
|
495
495
|
case "DECREASE_BY_PERCENTAGE": {
|
|
496
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 relative" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute left-0 h-full flex align-items-center px-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: "#344054" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, max:
|
|
496
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 relative" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute left-0 h-full flex align-items-center px-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: "#344054" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, max: 100, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => {
|
|
497
|
+
const value = e.value > 100 ? 100 : e.value;
|
|
498
|
+
e.originalEvent.target.value = value
|
|
499
|
+
? value === null || value === void 0 ? void 0 : value.toFixed(2)
|
|
500
|
+
: 0;
|
|
501
|
+
console.log(e.value + "onCHange");
|
|
502
|
+
}, onValueChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-full", inputClassName: "border-none pl-8 focus:shadow-none" }))] })));
|
|
497
503
|
}
|
|
498
504
|
case "MANUAL": {
|
|
499
505
|
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onValueChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
|
|
@@ -111,7 +111,9 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
111
111
|
? listBoxclassName
|
|
112
112
|
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
113
113
|
},
|
|
114
|
-
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
|
|
114
|
+
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
|
|
115
|
+
// className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
|
|
116
|
+
link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef }) })), selectedItems &&
|
|
115
117
|
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
116
118
|
var _a, _b;
|
|
117
119
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName ? chipClassName : ""} cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof item === "object"
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
;
|
|
4
|
-
;
|
|
5
|
-
|
|
6
|
-
;
|
|
7
|
-
;
|
|
3
|
+
exports.VisibilityState = void 0;
|
|
4
|
+
var VisibilityState;
|
|
5
|
+
(function (VisibilityState) {
|
|
6
|
+
VisibilityState["ENABLE"] = "ENABLE";
|
|
7
|
+
VisibilityState["DISABLE"] = "DISABLE";
|
|
8
|
+
VisibilityState["HIDE"] = "HIDE";
|
|
9
|
+
})(VisibilityState = exports.VisibilityState || (exports.VisibilityState = {}));
|
|
@@ -22,12 +22,12 @@ const colorFunction = (data) => {
|
|
|
22
22
|
return data;
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
const SvgComponent = ({ icon, size, color, className }) => {
|
|
25
|
+
const SvgComponent = ({ icon, size, color, className, disabled }) => {
|
|
26
26
|
const data2 = svg_icons_1.iconList.find((iconObject) => iconObject.name === icon);
|
|
27
27
|
const data = data2 === null || data2 === void 0 ? void 0 : data2.svg.replace('width="24" height="24"', `width=${size ? `${size}` : 16} size=${size ? `${size}` : 16}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`).replace('stroke="#667085"', `stroke=${color ? colorFunction(color) : "#667085"}`);
|
|
28
28
|
if (data === undefined) {
|
|
29
29
|
return null;
|
|
30
30
|
}
|
|
31
|
-
return (0, jsx_runtime_1.jsx)("span", { className: `flex align-items-center justify-content-center${!className ? "" : ` ${className}`}`, dangerouslySetInnerHTML: { __html: data } });
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)("span", { className: `flex align-items-center justify-content-center${!className ? "" : ` ${className}`} ${disabled && "p-disabled"}`, dangerouslySetInnerHTML: { __html: data } }));
|
|
32
32
|
};
|
|
33
33
|
exports.default = SvgComponent;
|
|
@@ -79,30 +79,30 @@ export interface GridData {
|
|
|
79
79
|
columnData: ColumnDef[];
|
|
80
80
|
}
|
|
81
81
|
export interface ConditionsToDisplay {
|
|
82
|
-
displayFilter?:
|
|
83
|
-
displayAdvancedFilter?:
|
|
84
|
-
displaySort?:
|
|
85
|
-
displaySearch?:
|
|
86
|
-
displayRefresh?:
|
|
87
|
-
displayRemoveItems?:
|
|
88
|
-
displayRecords?:
|
|
82
|
+
displayFilter?: string;
|
|
83
|
+
displayAdvancedFilter?: string;
|
|
84
|
+
displaySort?: string;
|
|
85
|
+
displaySearch?: string;
|
|
86
|
+
displayRefresh?: string;
|
|
87
|
+
displayRemoveItems?: string;
|
|
88
|
+
displayRecords?: string;
|
|
89
89
|
displayGrouping?: boolean;
|
|
90
90
|
displayColumnHide?: boolean;
|
|
91
|
-
displayBulkAction?:
|
|
91
|
+
displayBulkAction?: string;
|
|
92
92
|
enableViewCreate?: boolean;
|
|
93
|
-
displaySidePanel?:
|
|
93
|
+
displaySidePanel?: string;
|
|
94
94
|
enableFillHandle?: boolean;
|
|
95
|
-
displayBulkEdit?:
|
|
95
|
+
displayBulkEdit?: string;
|
|
96
96
|
displayDiscardEdit?: boolean;
|
|
97
97
|
displaySaveEditButton?: boolean;
|
|
98
|
-
displayEditHeading?:
|
|
98
|
+
displayEditHeading?: string;
|
|
99
99
|
displayFeaturesHeader?: boolean;
|
|
100
100
|
displayCheckboxOnRight?: boolean;
|
|
101
101
|
displayCheckboxForGroupChild?: boolean;
|
|
102
102
|
enableCheckboxForGroupHeader?: boolean;
|
|
103
103
|
displayCheckboxForGroups?: boolean;
|
|
104
104
|
displayGroupCount?: boolean;
|
|
105
|
-
displayRowGroupingElement?:
|
|
105
|
+
displayRowGroupingElement?: string;
|
|
106
106
|
isGridAutoHeight?: boolean;
|
|
107
107
|
}
|
|
108
108
|
export interface PropsFromProduct {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CheckBoxSelection, ColumnDef, Features, FilterCondition, FilterModelText, GridData, RecordDetailModelText, SidePanelText, SortModelText } from "./Types";
|
|
1
|
+
import { CheckBoxSelection, ColumnDef, ConditionsToDisplay, Features, FilterCondition, FilterModelText, GridData, RecordDetailModelText, SidePanelText, SortModelText } from "./Types";
|
|
2
2
|
export declare const FeatureContext: import("react").Context<any>;
|
|
3
3
|
interface MyProviderProps {
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -32,6 +32,7 @@ interface MyProviderProps {
|
|
|
32
32
|
rowModelType: string;
|
|
33
33
|
quickSearch?: boolean;
|
|
34
34
|
enableAdvancedFilter?: boolean;
|
|
35
|
+
conditionsToDisplay: ConditionsToDisplay;
|
|
35
36
|
};
|
|
36
37
|
}
|
|
37
38
|
declare function MyProvider({ children, value }: MyProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CheckBoxSelection } from "./Types";
|
|
3
3
|
export declare const initialCheckBoxData: CheckBoxSelection;
|
|
4
|
+
export declare const isComponentDisable: (state?: string) => boolean;
|
|
4
5
|
export declare const applyDefaultFilters: (defaultFilters: any) => any;
|
|
5
6
|
export declare const parseIfNeeded: (value: any) => any;
|
|
6
7
|
export declare const sortColumns: (columns: any) => any;
|
|
@@ -4,6 +4,7 @@ interface icon {
|
|
|
4
4
|
color?: string;
|
|
5
5
|
size?: number;
|
|
6
6
|
className?: string;
|
|
7
|
+
disabled?: boolean;
|
|
7
8
|
}
|
|
8
|
-
declare const SvgComponent: ({ icon, size, color, className }: icon) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const SvgComponent: ({ icon, size, color, className, disabled }: icon) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default SvgComponent;
|