@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
158 lines (157 loc) • 8.6 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__, {
Selector: ()=>Selector
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const react_namespaceObject = require("@headlessui/react");
const external_lodash_debounce_namespaceObject = require("lodash.debounce");
var external_lodash_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_lodash_debounce_namespaceObject);
const external_react_namespaceObject = require("react");
const I18nContext_js_namespaceObject = require("../../context/I18nContext.js");
const useSearchPaginatedResource_js_namespaceObject = require("../../hooks/useSearchPaginatedResource.js");
var useSearchPaginatedResource_js_default = /*#__PURE__*/ __webpack_require__.n(useSearchPaginatedResource_js_namespaceObject);
const external_LoaderRow_js_namespaceObject = require("../LoaderRow.js");
var external_LoaderRow_js_default = /*#__PURE__*/ __webpack_require__.n(external_LoaderRow_js_namespaceObject);
const Selector = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ open, name, onChange, options, selectedOptions }, ref)=>{
const currentQuery = (0, external_react_namespaceObject.useRef)("");
const searchInput = (0, external_react_namespaceObject.useRef)(null);
const { t } = (0, I18nContext_js_namespaceObject.useI18n)();
const { allOptions, isPending, runSearch, searchPage, setAllOptions, totalSearchedItems, hasNextPage } = useSearchPaginatedResource_js_default()({
fieldName: name,
initialOptions: options
});
const [optionsLeft, setOptionsLeft] = (0, external_react_namespaceObject.useState)(()=>allOptions.filter((item)=>!selectedOptions?.includes(item.value)));
const containerRef = (0, external_react_namespaceObject.useRef)(null);
(0, external_react_namespaceObject.useEffect)(()=>{
if (open && searchInput.current) searchInput.current.focus();
}, [
open,
searchInput
]);
(0, external_react_namespaceObject.useEffect)(()=>{
if (open && !options) runSearch(currentQuery.current, true);
return ()=>{
searchPage.current = 1;
};
}, [
open
]);
(0, external_react_namespaceObject.useEffect)(()=>{
setOptionsLeft(allOptions.filter((item)=>!selectedOptions?.includes(item.value)));
}, [
selectedOptions,
allOptions
]);
const onSearchChange = external_lodash_debounce_default()(async (e)=>{
if (options) {
const query = e.target.value.toLowerCase();
const filteredOptions = options.filter((option)=>option.label.toLowerCase().includes(query));
setAllOptions(filteredOptions);
return;
}
searchPage.current = 1;
currentQuery.current = e.target.value;
runSearch(currentQuery.current, true);
}, 300);
const onScroll = ()=>{
if (!containerRef.current || options || !hasNextPage) return;
const scrollY = containerRef.current.scrollHeight - containerRef.current.scrollTop;
const height = containerRef.current.offsetHeight;
const offset = height - scrollY;
if (offset >= -100 && offset <= 0 && !isPending && optionsLeft.length < totalSearchedItems.current) {
searchPage.current += 1;
runSearch(currentQuery.current, false);
}
};
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Transition, {
show: open,
as: "div",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.TransitionChild, {
as: "div",
className: "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong absolute z-20 mt-2 max-h-60 w-full overflow-auto rounded-md shadow-2xl ring-1",
enter: "transition-all ease-linear",
enterFrom: "opacity-0 -translate-y-1",
enterTo: "opacity-100 translate-y-0",
leave: "transition-all ease-linear",
leaveFrom: "opacity-100 translate-y-0",
leaveTo: "opacity-0 -translate-y-1",
ref: (r)=>{
containerRef.current = r;
if (ref && "object" == typeof ref) ref.current = r;
},
onScroll: onScroll,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "relative flex flex-col",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "dark:bg-dark-nextadmin-background-subtle dark:border-dark-nextadmin-border-strong sticky top-0 block items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "relative flex items-center",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
id: `${name}-search`,
ref: searchInput,
defaultValue: currentQuery.current,
type: "text",
className: "dark:bg-dark-nextadmin-background-subtle text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted ring-nextadmin-border-default focus:ring-nextadmin-brand-default dark:focus:ring-dark-nextadmin-brand-default dark:ring-dark-nextadmin-border-strong block w-full rounded-md border-0 px-2 py-1.5 text-sm shadow-sm ring-1 ring-inset transition-all duration-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:leading-6",
placeholder: `${t("list.header.search.placeholder")}...`,
onChange: onSearchChange
})
})
}),
optionsLeft && optionsLeft.length > 0 && optionsLeft?.map((option, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "dark:bg-dark-nextadmin-background-subtle dark:text-dark-nextadmin-content-inverted dark:hover:bg-dark-nextadmin-brand-default cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900",
onMouseDown: ()=>{
onChange(option);
},
children: option.label
}, index)),
isPending && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_LoaderRow_js_default(), {}),
optionsLeft && 0 === optionsLeft.length && !isPending && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "dark:bg-dark-nextadmin-background-subtle dark:text-dark-nextadmin-content-inverted px-3 py-2 text-sm text-gray-700",
children: "No results found"
})
]
})
})
});
});
exports.Selector = __webpack_exports__.Selector;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"Selector"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});