sccoreui
Version:
ui-sccore
62 lines (61 loc) • 5.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const list_box_dropdown_1 = tslib_1.__importDefault(require("../../components/list-box-dropdown/list-box-dropdown"));
const react_1 = require("react");
const ListBoxPage = () => {
const [selectedValues, setSelectedValues] = (0, react_1.useState)([]);
const cities = [
{ name: "Color", optionCode: "CLR-0011", value: "CLR-0011" },
{ name: "Size", optionCode: "SZ-0022", value: "SZ-0022" },
{ name: "Fit", optionCode: "FT-0033", value: "FT-0033" },
{ name: "Color1", optionCode: "CLR-0101", value: "CLR-0101" },
{ name: "Size1", optionCode: "SZ-0202", value: "SZ-0202" },
{ name: "Fit1", optionCode: "FT-0303", value: "FT-0303" },
{ name: "London1", optionCode: "LD-34", value: "LD-34" },
{ name: "Istanbul1", optionCode: "IS-T1dd", value: "IS-T1dd" },
{ name: "Paris1", optionCode: "PR-S541", value: "PR-S541" },
];
const boxRef = (0, react_1.useRef)(null);
const headerTemplate = () => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-center justify-content-between p-3 list_box_header" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "box_tittle font-semibold text-base text-gray-900" }, { children: "Options" })), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "focus:shadow-none p-0", link: true, icon: "pi pi-plus", size: "small", iconPos: "left", label: "Create Option" })] })));
};
const footeTemplate = () => {
return (0, jsx_runtime_1.jsx)(button_1.Button, { label: "click", onClick: (e) => {
boxRef.current && boxRef.current.hide(e);
} });
};
const optionTemplate = (option) => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex text-primary-600 align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "item_content" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-base font-semibold\ttext-gray-600" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm text-gray-500" }, { children: option.optionCode }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "item_icon" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20, className: "text-gray-500" }) }))] }), option.name) }));
};
// const chilTemplate = (item:any) => {
// return(
// <>
// <div>
// {item.name}
// </div>
// </>
// )
// }
const onChange = (e) => {
setSelectedValues(e.value);
};
const clickOnRemove = (item) => {
let items = selectedValues.filter((x) => x !== item);
let selectetesItems = cities.filter((x) => items.indexOf(x.optionCode) !== -1);
setSelectedValues(selectetesItems);
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-red-500 cursor-pointer max-w-max", onClick: () => setSelectedValues([]) }, { children: "Remove" })), (0, jsx_runtime_1.jsx)(list_box_dropdown_1.default, { type: "sectionHeader", link: true, values: selectedValues, selectedOptionNone: true, onChange: onChange, optionLabel: "name", optionTemplate: optionTemplate, listClassName: "max-h-18rem overflow-y-auto", listBoxclassName: "w-16rem border-none", label: "Add Option", listItems: cities, headerTemplate: headerTemplate, labelIconPos: "left", labelIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus" }), labelIconSize: "small", selectAll: true, footeTemplate: footeTemplate, optionsMenuRef: boxRef, filter: true, filterPlaceholder: "Search by name", emptyFilterMessage: "No Result Found", emptyMessage: "No Data Found", menuClassName: "w-16rem p-0", listBoxParentClassName: " w-16rem", multiple: true, showChips: true, buttonClassName: "text-base", showRemoveIcon: "x-close", removeIconSize: 14, removeIconClassName: "", onSelectAll: (e) => {
if (e)
setSelectedValues(cities.map((x) => x === null || x === void 0 ? void 0 : x.optionCode));
else
setSelectedValues([]);
},
// chipTemplate={(item:any)=> chilTemplate(item)}
// 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-md"
onRemoveItem: (item) => clickOnRemove(item) })] }));
};
exports.default = ListBoxPage;