@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
138 lines (137 loc) • 6.93 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import external_clsx_default from "clsx";
import DoubleArrow_mjs_default from "../../../assets/icons/DoubleArrow.mjs";
import { useConfig } from "../../../context/ConfigContext.mjs";
import { useFormState } from "../../../context/FormStateContext.mjs";
import { useI18n } from "../../../context/I18nContext.mjs";
import useCloseOnOutsideClick_mjs_default from "../../../hooks/useCloseOnOutsideClick.mjs";
import { useDisclosure } from "../../../hooks/useDisclosure.mjs";
import Button_mjs_default from "../../radix/Button.mjs";
import { Selector } from "../Selector.mjs";
import external_MultiSelectDisplayList_mjs_default from "./MultiSelectDisplayList.mjs";
import external_MultiSelectDisplayTable_mjs_default from "./MultiSelectDisplayTable.mjs";
import external_MultiSelectItem_mjs_default from "./MultiSelectItem.mjs";
import { useFormData } from "../../../utils.mjs";
const MultiSelectWidget = (props)=>{
const { options: globalOptions, resource } = useConfig();
const { onToggle, isOpen, onClose } = useDisclosure();
const containerRef = useCloseOnOutsideClick_mjs_default(()=>onClose());
const { formData, onChange, options, name, schema } = props;
const { t } = useI18n();
const { setFieldDirty } = useFormState();
const fieldOptions = globalOptions?.model?.[resource]?.edit?.fields?.[name];
const { relationshipsRawData } = useFormData();
const onRemoveClick = (value)=>{
setFieldDirty(name);
onChange(formData?.filter((item)=>item.value !== value));
};
const selectedValues = formData?.map((item)=>item?.value) ?? [];
const displayMode = !!fieldOptions && "display" in fieldOptions ? fieldOptions.display ?? "select" : "select";
const fieldPagination = !!fieldOptions && "pagination" in fieldOptions ? fieldOptions.pagination : void 0;
const fieldSortable = "list" === displayMode && (!!fieldOptions?.orderField || !!schema.enum);
const select = /*#__PURE__*/ jsx("select", {
name: name,
className: external_clsx_default("absolute inset-0 h-full w-full opacity-0", props.disabled ? "cursor-not-allowed" : "cursor-pointer"),
disabled: props.disabled,
required: props.required,
onMouseDown: (e)=>{
e.preventDefault();
},
onClick: ()=>{
if (!props.disabled) onToggle();
},
children: !(props.required && 0 === selectedValues.length) && /*#__PURE__*/ jsx("option", {
value: JSON.stringify(selectedValues)
})
});
return /*#__PURE__*/ jsxs("div", {
className: "relative",
children: [
"select" === displayMode && /*#__PURE__*/ jsxs("div", {
className: external_clsx_default("dark:bg-dark-nextadmin-background-subtle dark:ring-dark-nextadmin-border-strong text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted dark:border-dark-nextadmin-border-default ring-nextadmin-border-default flex min-h-[38px] w-[100%] w-full appearance-none flex-wrap gap-x-1 gap-y-1 rounded-md border-0 border-gray-300 px-2 py-1.5 pr-10 text-sm placeholder-gray-500 shadow-sm ring-1 ring-inset transition-all duration-300 placeholder:text-gray-400 sm:leading-6", {
"cursor-not-allowed opacity-50": props.disabled
}),
"aria-disabled": props.disabled,
children: [
select,
formData?.map((value, index)=>value && /*#__PURE__*/ jsx(external_MultiSelectItem_mjs_default, {
item: value,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled
}, index)),
!props.disabled && /*#__PURE__*/ jsx("div", {
className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-3",
children: /*#__PURE__*/ jsx(DoubleArrow_mjs_default, {})
})
]
}),
"list" === displayMode && /*#__PURE__*/ jsxs("div", {
className: "space-y-2",
children: [
/*#__PURE__*/ jsx(external_MultiSelectDisplayList_mjs_default, {
formData: formData,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled,
sortable: fieldSortable,
onUpdateFormData: (value)=>{
setFieldDirty(name);
onChange(value);
},
pagination: fieldPagination
}),
/*#__PURE__*/ jsxs(Button_mjs_default, {
"aria-disabled": props.disabled,
type: "button",
disabled: props.disabled,
className: "relative",
children: [
select,
t("form.widgets.multiselect.select")
]
})
]
}),
"table" === displayMode && /*#__PURE__*/ jsxs("div", {
className: "space-y-2",
children: [
/*#__PURE__*/ jsx(external_MultiSelectDisplayTable_mjs_default, {
formData: formData,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled,
pagination: fieldPagination,
rawData: relationshipsRawData?.[name]
}),
/*#__PURE__*/ jsxs(Button_mjs_default, {
"aria-disabled": props.disabled,
type: "button",
disabled: props.disabled,
className: "relative",
children: [
select,
t("form.widgets.multiselect.select")
]
})
]
}),
/*#__PURE__*/ jsx(Selector, {
ref: containerRef,
open: isOpen,
name: name,
options: options?.length ? options : void 0,
onChange: (option)=>{
setFieldDirty(name);
onChange([
...formData || [],
option
]);
},
selectedOptions: selectedValues
})
]
});
};
const MultiSelect_MultiSelectWidget = MultiSelectWidget;
export { MultiSelect_MultiSelectWidget as default };