@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
37 lines (36 loc) • 1.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "../../../css/components.css";
import { useState } from "react";
import { SmartSelectRoot } from "./root.js";
import { Option } from "./option.js";
import { SmartSelectContainer } from "./container.js";
import { Chip } from "./chip.js";
import { MultiTrigger } from "./triggers/multi-trigger.js";
const options = [
{ id: "js", label: "JavaScript" },
{ id: "ts", label: "TypeScript" },
{ id: "py", label: "Python" },
{ id: "java", label: "Java" },
{ id: "cpp", label: "C++" },
{ id: "cs", label: "C#" },
{ id: "php", label: "PHP" },
{ id: "ruby", label: "Ruby" },
{ id: "go", label: "Go" },
{ id: "rust", label: "Rust" },
{ id: "swift", label: "Swift" },
];
export default function SmartSelect() {
const [value, setValue] = useState([options[0]]);
void setValue;
return (_jsx("div", { style: { display: "flex", justifyContent: "center", padding: 20 }, children: _jsx(SmartSelectRoot, { options: options, value: value, onOptionChange: (v) => {
if (!v)
return;
setValue(v);
}, closeOnSelect: false, kind: "multi", container: (p) => {
return (_jsxs(SmartSelectContainer, { children: [p.loading && _jsx("div", { children: "Loading...." }), p.children] }));
}, trigger: _jsx(MultiTrigger, { render: _jsxs("button", { "data-ln-button": "website", "data-ln-size": "md", children: [_jsx("div", { children: "Select Items" }), _jsx("div", {})] }), className: "flex items-center", children: value.map((x) => {
return (_jsx(Chip, { option: x, render: (p) => (_jsxs("div", { children: [x.label, p.active && "A"] })) }, x.id));
}) }), children: (p) => {
return (_jsxs(Option, { ...p, children: [_jsx("div", { children: p.option.label }), _jsx("div", { children: p.selected && "✔️" })] }));
} }) }));
}