sccoreui 5.9.9 → 5.9.10
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.scss
CHANGED
|
@@ -17,6 +17,7 @@ function Sort() {
|
|
|
17
17
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
18
18
|
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
19
19
|
const [isApplyDisable, setIsApplyDisable] = (0, react_1.useState)(true);
|
|
20
|
+
const [isSelectedColumn, setSelectedColumn] = (0, react_1.useState)(false);
|
|
20
21
|
const onClickSort = (event) => {
|
|
21
22
|
showShort.current.toggle(event);
|
|
22
23
|
};
|
|
@@ -46,6 +47,7 @@ function Sort() {
|
|
|
46
47
|
}
|
|
47
48
|
setSortInfo(sortDetails);
|
|
48
49
|
setSortBy(column);
|
|
50
|
+
setSelectedColumn(true);
|
|
49
51
|
};
|
|
50
52
|
// Add sort details to parent component state
|
|
51
53
|
const addSortDetails = () => {
|
|
@@ -84,11 +86,11 @@ function Sort() {
|
|
|
84
86
|
setIsApplyDisable(true);
|
|
85
87
|
}
|
|
86
88
|
}, [sortValue, sortBy]);
|
|
87
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer mr-3 sc_icon_hover flex align-items-center border-round-md bg-primary-50 ${isOverlayOpened || featureDetails.sort.isSortable
|
|
88
90
|
? "bg-primary-50"
|
|
89
|
-
: ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400
|
|
91
|
+
: ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400" }, { children: `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-1 h-auto", text: true, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
90
92
|
? "text-gray-700"
|
|
91
|
-
: "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" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
93
|
+
: "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 sorting_overlay_pael" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
92
94
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
93
95
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
94
96
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${isSelected && "bg-primary-25"} cursor-pointer border-round-md flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { id: "tableSort", checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
|
|
@@ -96,12 +98,12 @@ function Sort() {
|
|
|
96
98
|
else {
|
|
97
99
|
return null;
|
|
98
100
|
}
|
|
99
|
-
}) })), (0, jsx_runtime_1.jsx)(
|
|
101
|
+
}) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `pl-0 m-1 ${isSelectedColumn && "border-top-1 border-gray-200"}` }, { children: (_a = constants_1.COLUMN_SORT_OPTIONS.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
|
|
100
102
|
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
|
|
101
103
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${seletedSort && "bg-primary-25"} cursor-pointer border-round-md pl-0 px-3 py-2 flex align-items-center gap-2`, onClick: () => {
|
|
102
104
|
onSelectSortType(eachOption);
|
|
103
105
|
// setSortBy(eachOption);
|
|
104
106
|
} }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === 0 ? "arrow-down" : "arrow-up", size: 20 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${seletedSort && "text-primary-400 font-semibold"} text-gray-700 font-medium text-base` }, { children: eachOption.label }))] }), index));
|
|
105
|
-
}) })), (0, jsx_runtime_1.
|
|
107
|
+
}) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex justify-content-between px-2 py-2 border-top-1 border-gray-200` }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: "Apply" }))] }))] }))] })));
|
|
106
108
|
}
|
|
107
109
|
exports.default = Sort;
|
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const checkbox_1 = require("primereact/checkbox");
|
|
6
6
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
7
|
const GridCheckBOx = ({ checked, onChange, isIndeterminate }) => {
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { icon: isIndeterminate && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { icon: isIndeterminate && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus" }), onChange: onChange, checked: checked, className: "" })
|
|
9
9
|
// <input
|
|
10
10
|
// type="checkbox"
|
|
11
11
|
// checked={checked}
|
|
@@ -48,9 +48,9 @@ const InputTextAreaField = (props) => {
|
|
|
48
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" }) }))] }) })));
|
|
49
49
|
};
|
|
50
50
|
const DropDownField = (props) => {
|
|
51
|
-
const { errors, touched, name, length, label, placeholder, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading } = props;
|
|
51
|
+
const { errors, touched, name, length, label, placeholder, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, panelClassName } = props;
|
|
52
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({ 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" }) }))] })
|
|
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({ showClear: showClear, panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, panelClassName: panelClassName, 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
54
|
:
|
|
55
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" }) }))] }) })));
|
|
56
56
|
};
|