sccoreui
Version:
ui-sccore
52 lines (51 loc) • 3.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const primereact_1 = require("primereact");
const multi_select_dropdown_1 = require("../../components/multi-select-dropdown/multi-select-dropdown");
const react_1 = require("react");
const CustomSelect = () => {
const [filterValus, setFilterValues] = (0, react_1.useState)([]);
const [filterValus1, setFilterValues1] = (0, react_1.useState)([]);
const [filterValus2, setFilterValues2] = (0, react_1.useState)([]);
const list = [
{ name: "Phoenix Baker", at: "@phoenix" },
{ name: "Olivia Rhye", at: "@olivia" },
{ name: "Lana Steiner", at: "@lana" },
{ name: "Demi Wilkinson", at: "@demi" },
{ name: "Candice Wu", at: "@candice" },
{ name: "Natali Craig", at: "@natali" },
{ name: "Drew Cano", at: "@drew" },
];
// const statusList = [
// { name: "Active", color:'#12B76A'},
// { name: "Inactive", color:'#F04438'},
// { name: "Draft", color:'#162578'},
// ]
// const onSelectionChange = (e:any) => {
// console.log('On Selection Change....')
// setFilterValues(e.value);
// }
const onClear = () => {
// debugger
};
const clearFilters = () => {
setFilterValues([]);
setFilterValues1([]);
setFilterValues2([]);
};
let statusOptions = [
{ name: "Requested", color: '#162578' },
{ name: "Waiting for Approval", color: '#fedf89' },
{ name: "Approved", color: '#d1fadf' },
{ name: "Development", color: '#b9afff' },
{ name: "UAT", color: '#583fff' },
{ name: "On Hold", color: '#f79009' },
{ name: "Completed", color: '#12b76a' },
{ name: "Rejected", color: '#f04438' },
];
// console.log(statusList)
// console.log(statusOptions)
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { value: filterValus, onChange: (e) => setFilterValues(e.value), maxSelectedLabels: 2, placeholder: "Multi Select", options: list, dropdownType: "" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, hidePanelHeader: true, value: filterValus, onChange: (e) => setFilterValues(e.value), maxSelectedLabels: 1, placeholder: "Multi Select", options: list, dropdownType: "default", clear: "x-close" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, hidePanelHeader: true, value: filterValus1, maxSelectedLabels: 1, onClear: onClear, dropdownType: "withIcon", onChange: (e) => setFilterValues1(e.value), leftIcon: "user-square", placeholder: "Select Cities", options: list, clear: "x-close" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, value: filterValus2, maxSelectedLabels: 1, onChange: (e) => setFilterValues2(e.value), dropdownType: "status", placeholder: "All Status", options: statusOptions, clear: "x-close" }), (0, jsx_runtime_1.jsx)(primereact_1.Button, { label: "clear", onClick: clearFilters })] }));
};
exports.default = CustomSelect;