@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
188 lines (187 loc) • 10.1 kB
JavaScript
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
default: ()=>MultiSelect_MultiSelectWidget
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_clsx_namespaceObject = require("clsx");
var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
const DoubleArrow_js_namespaceObject = require("../../../assets/icons/DoubleArrow.js");
var DoubleArrow_js_default = /*#__PURE__*/ __webpack_require__.n(DoubleArrow_js_namespaceObject);
const ConfigContext_js_namespaceObject = require("../../../context/ConfigContext.js");
const FormStateContext_js_namespaceObject = require("../../../context/FormStateContext.js");
const I18nContext_js_namespaceObject = require("../../../context/I18nContext.js");
const useCloseOnOutsideClick_js_namespaceObject = require("../../../hooks/useCloseOnOutsideClick.js");
var useCloseOnOutsideClick_js_default = /*#__PURE__*/ __webpack_require__.n(useCloseOnOutsideClick_js_namespaceObject);
const useDisclosure_js_namespaceObject = require("../../../hooks/useDisclosure.js");
const Button_js_namespaceObject = require("../../radix/Button.js");
var Button_js_default = /*#__PURE__*/ __webpack_require__.n(Button_js_namespaceObject);
const external_Selector_js_namespaceObject = require("../Selector.js");
const external_MultiSelectDisplayList_js_namespaceObject = require("./MultiSelectDisplayList.js");
var external_MultiSelectDisplayList_js_default = /*#__PURE__*/ __webpack_require__.n(external_MultiSelectDisplayList_js_namespaceObject);
const external_MultiSelectDisplayTable_js_namespaceObject = require("./MultiSelectDisplayTable.js");
var external_MultiSelectDisplayTable_js_default = /*#__PURE__*/ __webpack_require__.n(external_MultiSelectDisplayTable_js_namespaceObject);
const external_MultiSelectItem_js_namespaceObject = require("./MultiSelectItem.js");
var external_MultiSelectItem_js_default = /*#__PURE__*/ __webpack_require__.n(external_MultiSelectItem_js_namespaceObject);
const external_utils_js_namespaceObject = require("../../../utils.js");
const MultiSelectWidget = (props)=>{
const { options: globalOptions, resource } = (0, ConfigContext_js_namespaceObject.useConfig)();
const { onToggle, isOpen, onClose } = (0, useDisclosure_js_namespaceObject.useDisclosure)();
const containerRef = useCloseOnOutsideClick_js_default()(()=>onClose());
const { formData, onChange, options, name, schema } = props;
const { t } = (0, I18nContext_js_namespaceObject.useI18n)();
const { setFieldDirty } = (0, FormStateContext_js_namespaceObject.useFormState)();
const fieldOptions = globalOptions?.model?.[resource]?.edit?.fields?.[name];
const { relationshipsRawData } = (0, external_utils_js_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("option", {
value: JSON.stringify(selectedValues)
})
});
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "relative",
children: [
"select" === displayMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_MultiSelectItem_js_default(), {
item: value,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled
}, index)),
!props.disabled && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-3",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DoubleArrow_js_default(), {})
})
]
}),
"list" === displayMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "space-y-2",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_MultiSelectDisplayList_js_default(), {
formData: formData,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled,
sortable: fieldSortable,
onUpdateFormData: (value)=>{
setFieldDirty(name);
onChange(value);
},
pagination: fieldPagination
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Button_js_default(), {
"aria-disabled": props.disabled,
type: "button",
disabled: props.disabled,
className: "relative",
children: [
select,
t("form.widgets.multiselect.select")
]
})
]
}),
"table" === displayMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "space-y-2",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_MultiSelectDisplayTable_js_default(), {
formData: formData,
schema: schema,
onRemoveClick: onRemoveClick,
deletable: !props.disabled,
pagination: fieldPagination,
rawData: relationshipsRawData?.[name]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Button_js_default(), {
"aria-disabled": props.disabled,
type: "button",
disabled: props.disabled,
className: "relative",
children: [
select,
t("form.widgets.multiselect.select")
]
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Selector_js_namespaceObject.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;
exports["default"] = __webpack_exports__["default"];
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"default"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});