@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
112 lines (111 loc) • 6.09 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Transition, TransitionChild } from "@headlessui/react";
import external_lodash_debounce_default from "lodash.debounce";
import { forwardRef, useEffect, useRef, useState } from "react";
import { useI18n } from "../../context/I18nContext.mjs";
import useSearchPaginatedResource_mjs_default from "../../hooks/useSearchPaginatedResource.mjs";
import external_LoaderRow_mjs_default from "../LoaderRow.mjs";
const Selector = /*#__PURE__*/ forwardRef(({ open, name, onChange, options, selectedOptions }, ref)=>{
const currentQuery = useRef("");
const searchInput = useRef(null);
const { t } = useI18n();
const { allOptions, isPending, runSearch, searchPage, setAllOptions, totalSearchedItems, hasNextPage } = useSearchPaginatedResource_mjs_default({
fieldName: name,
initialOptions: options
});
const [optionsLeft, setOptionsLeft] = useState(()=>allOptions.filter((item)=>!selectedOptions?.includes(item.value)));
const containerRef = useRef(null);
useEffect(()=>{
if (open && searchInput.current) searchInput.current.focus();
}, [
open,
searchInput
]);
useEffect(()=>{
if (open && !options) runSearch(currentQuery.current, true);
return ()=>{
searchPage.current = 1;
};
}, [
open
]);
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__*/ jsx(Transition, {
show: open,
as: "div",
children: /*#__PURE__*/ jsx(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__*/ jsxs("div", {
className: "relative flex flex-col",
children: [
/*#__PURE__*/ 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__*/ jsx("div", {
className: "relative flex items-center",
children: /*#__PURE__*/ 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__*/ 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__*/ jsx(external_LoaderRow_mjs_default, {}),
optionsLeft && 0 === optionsLeft.length && !isPending && /*#__PURE__*/ 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"
})
]
})
})
});
});
export { Selector };