sccoreui
Version:
ui-sccore
139 lines (138 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const overlaypanel_1 = require("primereact/overlaypanel");
// import { Divider } from "primereact/divider";
const radiobutton_1 = require("primereact/radiobutton");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
const context_provider_1 = require("../context-provider");
const helper_1 = require("../helper");
const utilComponents_1 = require("../utilComponents");
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
function Sort() {
var _a, _b;
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, setFeatureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
const showShort = (0, react_1.useRef)(null);
const [sortInfo, setSortInfo] = (0, react_1.useState)();
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
const [isApplyDisable, setIsApplyDisable] = (0, react_1.useState)(true);
const [showBorder, setShowBorder] = (0, react_1.useState)(false);
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySort);
const onClickSort = (event) => {
showShort.current.toggle(event);
};
// Add selected row to state
const onSelectSortValue = (eachColumn) => {
if (eachColumn.headerName !== (sortValue === null || sortValue === void 0 ? void 0 : sortValue.headerName)) {
const sortDetails = {
isSortable: false,
columnToSort: eachColumn,
orderToSort: sortBy,
};
if ((Object === null || Object === void 0 ? void 0 : Object.keys(sortBy).length) > 0) {
sortDetails.isSortable = true;
}
setSortInfo(sortDetails);
setSortValue(eachColumn);
setShowBorder(true);
}
};
const onSelectSortType = (column) => {
const sortDetails = {
isSortable: false,
columnToSort: sortValue,
orderToSort: column,
};
if ((Object === null || Object === void 0 ? void 0 : Object.keys(sortValue).length) > 0) {
sortDetails.isSortable = true;
}
setSortInfo(sortDetails);
setSortBy(column);
};
// Add sort details to parent component state
const addSortDetails = () => {
if (!((sortInfo === null || sortInfo === void 0 ? void 0 : sortInfo.isSortable) && (sortInfo === null || sortInfo === void 0 ? void 0 : sortInfo.columnToSort) && (sortInfo === null || sortInfo === void 0 ? void 0 : sortInfo.orderToSort))) {
return;
}
const currentFeature = Object.assign({}, featureDetails);
currentFeature.sort = sortInfo;
return currentFeature;
};
// Trigger action to apply
const applyTableSort = (e) => {
const getCurrentFeature = addSortDetails();
setFeatureDetails(getCurrentFeature);
callGrid(getCurrentFeature);
onClickSort(e);
};
// Trigger action to clear
const clearSort = (e) => {
onClickSort(e);
setSortBy({});
setSortValue({});
setShowBorder(false);
const sortDetails = {
isSortable: false,
columnToSort: "",
orderToSort: "",
};
const currentFeatureDetails = Object.assign({}, featureDetails);
currentFeatureDetails.sort = sortDetails;
setFeatureDetails(currentFeatureDetails);
callGrid(currentFeatureDetails);
};
(0, react_1.useEffect)(() => {
if (Object.keys(sortValue).length && Object.keys(sortBy).length) {
setIsApplyDisable(false);
}
else {
setIsApplyDisable(true);
}
}, [sortValue, sortBy]);
(0, react_1.useEffect)(() => {
const handleSortingScroll = (e) => {
var _a;
const scrollEl = document.querySelector("#sorting_columns");
if (!scrollEl)
return;
const target = e.target;
// ✅ If scrolling inside the panel → do nothing
if (scrollEl.contains(target)) {
return;
}
// ❌ If scrolling outside → hide properly
(_a = showShort.current) === null || _a === void 0 ? void 0 : _a.hide(e);
};
document.addEventListener("scroll", handleSortingScroll, true);
return () => {
document.removeEventListener("scroll", handleSortingScroll, true);
};
}, [showShort]);
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `icon-40x40 cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isDisabled && "disabled"} ${isOverlayOpened || featureDetails.sort.isSortable
? "bg-primary-50"
: "bg-white"}`, title: "Column Sorting" }, { children: (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
? "text-primary-400"
: "text-gray-500" }) })) })), (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 overflow-hidden", id: "sorting_columns" }, { 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) => {
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName, className: `${isSelected && "bg-primary-25"} cursor-pointer br-6 flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700 hover:bg-primary-25 mb-1`, 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: `cursor-pointer line-clamp line-clamp-1 block w-15rem ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
}
else {
return null;
}
}) })), ((_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.length) >
0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_b = sortOptions
.filter((each) => each.dataType === sortType)) === null || _b === void 0 ? void 0 : _b.map((eachOption, index) => {
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachOption.label, className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer br-6 pl-0 px-3 py-2 flex align-items-center gap-2 hover:bg-primary-25 mb-1`, onClick: () => {
onSelectSortType(eachOption);
// setSortBy(eachOption);
} }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === 0 ? "arrow-down" : "arrow-up", size: 20, color: seletedSort ? "text-primary-400" : "text-gray-700" }), (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));
}) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.clearAction) ? sortModelText.clearAction : "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.applyAction) ? sortModelText.applyAction : "Apply" }))] }))] }))] }));
}
exports.default = Sort;