@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
102 lines (101 loc) • 5.13 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { ArrowTopRightOnSquareIcon, XMarkIcon } from "@heroicons/react/24/outline";
import external_clsx_default from "clsx";
import Link_mjs_default from "../common/Link.mjs";
import { useMemo } from "react";
import DoubleArrow_mjs_default from "../../assets/icons/DoubleArrow.mjs";
import { useConfig } from "../../context/ConfigContext.mjs";
import { useFormState } from "../../context/FormStateContext.mjs";
import useCloseOnOutsideClick_mjs_default from "../../hooks/useCloseOnOutsideClick.mjs";
import { useDisclosure } from "../../hooks/useDisclosure.mjs";
import { slugify } from "../../utils/tools.mjs";
import { Selector } from "./Selector.mjs";
const SelectWidget_SelectWidget = ({ options, onChange, value, disabled, required, ...props })=>{
const { isOpen, onToggle, onClose } = useDisclosure();
const containerRef = useCloseOnOutsideClick_mjs_default(()=>{
onClose();
});
const name = props.name;
const enumOptions = options.enumOptions?.map((option)=>option.value);
const { setFieldDirty } = useFormState();
const { basePath } = useConfig();
const handleChange = (option)=>{
setFieldDirty(props.name);
onChange(option);
onClose();
};
const hasValue = useMemo(()=>Object.keys(value || {}).length > 0, [
value
]);
return /*#__PURE__*/ jsxs("div", {
className: "relative",
children: [
/*#__PURE__*/ jsxs("div", {
className: external_clsx_default("ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong dark:bg-dark-nextadmin-background-subtle flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1", disabled && "cursor-not-allowed opacity-50"),
children: [
/*#__PURE__*/ jsx("select", {
name: name,
className: external_clsx_default("absolute inset-0 h-full w-full opacity-0", disabled ? "cursor-not-allowed" : "cursor-pointer"),
disabled: disabled,
required: required && !hasValue,
onMouseDown: (e)=>{
e.preventDefault();
},
onClick: ()=>{
if (!disabled) onToggle();
},
children: /*#__PURE__*/ jsx("option", {
value: value?.value
})
}),
/*#__PURE__*/ jsx("span", {
id: name,
className: "text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted h-full w-full flex-1 appearance-none bg-transparent focus:outline-none",
children: value?.label || props.placeholder
}),
/*#__PURE__*/ jsxs("div", {
className: "relative z-10 flex cursor-pointer space-x-3",
children: [
hasValue && props.schema.relation && /*#__PURE__*/ jsx(Link_mjs_default, {
href: `${basePath}/${slugify(props.schema.relation)}/${value?.value}`,
className: "flex items-center",
children: /*#__PURE__*/ jsx(ArrowTopRightOnSquareIcon, {
className: "h-5 w-5 cursor-pointer text-gray-400"
})
}),
hasValue && !disabled && /*#__PURE__*/ jsx("button", {
className: "flex items-center",
onClick: (e)=>{
e.preventDefault();
handleChange(null);
},
children: /*#__PURE__*/ jsx(XMarkIcon, {
className: "h-5 w-5 cursor-pointer text-gray-400"
})
}),
!disabled && /*#__PURE__*/ jsx("div", {
className: "flex items-center",
onClick: (e)=>{
if (!disabled) onToggle();
},
children: /*#__PURE__*/ jsx(DoubleArrow_mjs_default, {})
})
]
})
]
}),
/*#__PURE__*/ jsx(Selector, {
ref: containerRef,
open: isOpen,
options: enumOptions?.length ? enumOptions : void 0,
name: props.name,
onChange: handleChange,
selectedOptions: hasValue ? [
value?.value
] : []
})
]
});
};
const SelectWidget = SelectWidget_SelectWidget;
export { SelectWidget as default };