@easy-shadcn/react
Version:
Use shadcn/ui easy&enhance like component library
256 lines (250 loc) • 9.21 kB
JavaScript
;
var chunkYBXE5YRU_js = require('./chunk-YBXE5YRU.js');
var chunkBTCOSRGV_js = require('./chunk-BTCOSRGV.js');
var chunkKRHWFZUK_js = require('./chunk-KRHWFZUK.js');
var React = require('react');
var reactIcons = require('@radix-ui/react-icons');
var utils = require('@easy-shadcn/utils');
var cmdk = require('cmdk');
var jsxRuntime = require('react/jsx-runtime');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command,
{
ref,
className: utils.cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
),
...props
}
));
Command.displayName = cmdk.Command.displayName;
var CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }),
/* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.Input,
{
ref,
className: utils.cn(
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
),
...props
}
)
] }));
CommandInput.displayName = cmdk.Command.Input.displayName;
var CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.List,
{
ref,
className: utils.cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
...props
}
));
CommandList.displayName = cmdk.Command.List.displayName;
var CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.Empty,
{
ref,
className: "py-6 text-center text-sm",
...props
}
));
CommandEmpty.displayName = cmdk.Command.Empty.displayName;
var CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.Group,
{
ref,
className: utils.cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
),
...props
}
));
CommandGroup.displayName = cmdk.Command.Group.displayName;
var CommandSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.Separator,
{
ref,
className: utils.cn("-mx-1 h-px bg-border", className),
...props
}
));
CommandSeparator.displayName = cmdk.Command.Separator.displayName;
var CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
cmdk.Command.Item,
{
ref,
className: utils.cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
),
...props
}
));
CommandItem.displayName = cmdk.Command.Item.displayName;
var Select = ({
placeholder,
buttonProps,
showSearch,
searchProps,
contentProps,
empty,
options,
value,
onChange,
width,
allowClear,
multiple
}) => {
const [locale] = chunkBTCOSRGV_js.useLocale_default("Select");
const [open, setOpen] = React__namespace.default.useState(false);
const [innerValue, setInnerValue] = React__namespace.default.useState(
value
);
const [innerOption, setInnerOption] = React__namespace.default.useState(
Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)) : options.find((opt) => opt.value === value)
);
React.useEffect(() => {
setInnerValue(value);
setInnerOption(
Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)) : options.find((opt) => opt.value === value)
);
}, [value, options]);
const selectedLabelNode = React__namespace.default.useMemo(() => {
if (innerOption) {
if (Array.isArray(innerOption)) {
if (innerOption.length > 0) {
return innerOption.map((opt) => opt.label).join(",");
}
} else {
return innerOption.label;
}
}
return placeholder || null;
}, [innerOption, placeholder]);
const handleSelect = (opt) => {
if (multiple === true) {
const newValue = Array.isArray(innerValue) ? innerValue.includes(opt.value) ? innerValue.filter((v) => v !== opt.value) : [...innerValue, opt.value] : [opt.value];
const newOpt = Array.isArray(innerOption) ? innerOption.some((o) => o.value === opt.value) ? innerOption.filter((o) => o.value !== opt.value) : [...innerOption, opt] : [opt];
setInnerValue(newValue);
setInnerOption(newOpt);
onChange?.(newValue, opt);
} else {
if (opt.value === innerValue) {
return;
}
setInnerValue(opt.value);
setInnerOption(opt);
onChange?.(opt.value, opt);
setOpen(false);
}
};
const hasSelected = !!innerValue || Array.isArray(innerValue) && innerValue.length > 0;
return /* @__PURE__ */ jsxRuntime.jsxs(chunkYBXE5YRU_js.Popover, { open, onOpenChange: setOpen, children: [
/* @__PURE__ */ jsxRuntime.jsx(chunkYBXE5YRU_js.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
chunkKRHWFZUK_js.Button,
{
variant: "outline",
role: "combobox",
"aria-expanded": open,
...buttonProps,
className: utils.cn(
"group justify-between",
buttonProps?.className,
hasSelected ? undefined : "text-muted-foreground"
),
style: {
width,
...buttonProps?.style
},
icon: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactIcons.ChevronDownIcon,
{
className: utils.cn(
"size-4 shrink-0 text-gray-500 transition-transform duration-100",
open ? "rotate-180" : undefined
)
}
),
allowClear && hasSelected && // eslint-disable-next-line jsx-a11y/click-events-have-key-events
/* @__PURE__ */ jsxRuntime.jsx(
"span",
{
role: "button",
tabIndex: -1,
onClick: (e) => {
e.stopPropagation();
setInnerValue(undefined);
setInnerOption(undefined);
onChange?.(undefined, undefined);
},
className: "absolute left-0 top-0 hidden size-4 items-center justify-center rounded-full bg-slate-400 hover:bg-slate-500 group-hover:flex",
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, { className: utils.cn("size-3 shrink-0 text-white") })
}
)
] }),
iconPosition: "end",
children: selectedLabelNode
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(
chunkYBXE5YRU_js.PopoverContent,
{
...contentProps,
style: {
minWidth: width
},
className: utils.cn("p-0 w-auto", contentProps?.className),
children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
showSearch && /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { ...searchProps }),
/* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
/* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: empty || locale.empty }),
/* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
CommandItem,
{
value: opt.value,
onSelect: () => handleSelect(opt),
children: [
opt.label,
/* @__PURE__ */ jsxRuntime.jsx(
reactIcons.CheckIcon,
{
className: utils.cn(
"ml-auto",
(Array.isArray(innerValue) ? innerValue.includes(opt.value) : innerValue === opt.value) ? "opacity-100" : "opacity-0"
)
}
)
]
},
opt.value
)) })
] })
] })
}
)
] });
};
exports.Select = Select;