134 lines
8.0 KiB
TypeScript
134 lines
8.0 KiB
TypeScript
import * as React from "react";
|
|
import { GoCircleSlash } from "react-icons/go";
|
|
import { Button, wrapFieldsWithMeta } from "tinacms";
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
import { Icon, IconOptions } from "../../components/util/icon";
|
|
import { BiChevronRight } from "react-icons/bi";
|
|
|
|
const parseIconName = (name: string) => {
|
|
const splitName = name.split(/(?=[A-Z])/);
|
|
if (splitName.length > 1) {
|
|
return splitName.slice(1).join(" ");
|
|
}
|
|
return name;
|
|
};
|
|
|
|
export const IconPickerInput = wrapFieldsWithMeta(({ input }) => {
|
|
const [filter, setFilter] = React.useState("");
|
|
const filteredBlocks = React.useMemo(() => {
|
|
return Object.keys(IconOptions).filter((name) => {
|
|
return name.toLowerCase().includes(filter.toLowerCase());
|
|
});
|
|
}, [filter]);
|
|
|
|
const inputLabel = Object.keys(IconOptions).includes(input.value)
|
|
? parseIconName(input.value)
|
|
: "Select Icon";
|
|
const InputIcon = IconOptions[input.value] ? IconOptions[input.value] : null;
|
|
|
|
return (
|
|
<div className="relative z-[1000]">
|
|
<input type="text" id={ input.name } className="hidden" { ...input } />
|
|
<Popover>
|
|
{ ({ open }) => (
|
|
<>
|
|
<Popover.Button as={ "span" }>
|
|
<Button
|
|
className={ `text-sm h-11 px-4 ${ InputIcon ? "h-11" : "h-10" }` }
|
|
size="custom"
|
|
rounded="full"
|
|
variant={ open ? "secondary" : "white" }
|
|
>
|
|
{ InputIcon && (
|
|
<InputIcon className="w-7 mr-1 h-auto fill-current text-blue-500" />
|
|
) }
|
|
{ inputLabel }
|
|
{ !InputIcon && (
|
|
<BiChevronRight className="w-5 h-auto fill-current opacity-70 ml-1" />
|
|
) }
|
|
</Button>
|
|
</Popover.Button>
|
|
<div
|
|
className="absolute w-full min-w-[192px] max-w-2xl -bottom-2 left-0 translate-y-full"
|
|
style={ { zIndex: 1000 } }
|
|
>
|
|
<Transition
|
|
enter="transition duration-150 ease-out"
|
|
enterFrom="transform opacity-0 -translate-y-2"
|
|
enterTo="transform opacity-100 translate-y-0"
|
|
leave="transition duration-75 ease-in"
|
|
leaveFrom="transform opacity-100 translate-y-0"
|
|
leaveTo="transform opacity-0 -translate-y-2"
|
|
>
|
|
<Popover.Panel className="relative overflow-hidden rounded-lg shadow-lg bg-white border border-gray-150 z-50">
|
|
{ ({ close }) => (
|
|
<div className="max-h-[24rem] flex flex-col w-full h-full">
|
|
<div className="bg-gray-50 p-2 border-b border-gray-100 z-10 shadow-sm">
|
|
<input
|
|
type="text"
|
|
className="bg-white text-sm rounded-sm border border-gray-100 shadow-inner py-1.5 px-2.5 w-full block placeholder-gray-200"
|
|
onClick={ (event: any) => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
} }
|
|
value={ filter }
|
|
onChange={ (event: any) => {
|
|
setFilter(event.target.value);
|
|
} }
|
|
placeholder="Filter..."
|
|
/>
|
|
</div>
|
|
{ filteredBlocks.length === 0 && (
|
|
<span className="relative text-center text-xs px-2 py-3 text-gray-300 bg-gray-50 italic">
|
|
No matches found
|
|
</span>
|
|
) }
|
|
{ filteredBlocks.length > 0 && (
|
|
<div className="w-full grid grid-cols-6 auto-rows-auto p-2 overflow-y-auto">
|
|
<button
|
|
className="relative rounded-lg text-center text-xs py-2 px-3 flex-1 outline-none transition-all ease-out duration-150 hover:text-blue-500 focus:text-blue-500 focus:bg-gray-50 hover:bg-gray-50"
|
|
key={ "clear-input" }
|
|
onClick={ () => {
|
|
input.onChange("");
|
|
setFilter("");
|
|
close();
|
|
} }
|
|
>
|
|
<GoCircleSlash className="w-6 h-auto text-gray-200" />
|
|
</button>
|
|
{ filteredBlocks.map((name) => {
|
|
return (
|
|
<button
|
|
className="relative flex items-center justify-center rounded-lg text-center text-xs py-2 px-3 flex-1 outline-none transition-all ease-out duration-150 hover:text-blue-500 focus:text-blue-500 focus:bg-gray-50 hover:bg-gray-50"
|
|
key={ name }
|
|
onClick={ () => {
|
|
input.onChange(name);
|
|
setFilter("");
|
|
close();
|
|
} }
|
|
>
|
|
<Icon
|
|
data={ {
|
|
name: name,
|
|
size: "custom",
|
|
color: "blue"
|
|
} }
|
|
className="w-7 h-auto"
|
|
/>
|
|
</button>
|
|
);
|
|
}) }
|
|
</div>
|
|
) }
|
|
</div>
|
|
) }
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</div>
|
|
</>
|
|
) }
|
|
</Popover>
|
|
</div>
|
|
);
|
|
});
|