Linted the whole project with eslint
This commit was merged in pull request #3.
This commit is contained in:
@@ -2,51 +2,51 @@ import * as React from "react";
|
||||
import { wrapFieldsWithMeta } from "tinacms";
|
||||
|
||||
export const colorOptions = [
|
||||
"blue",
|
||||
"teal",
|
||||
"green",
|
||||
"yellow",
|
||||
"orange",
|
||||
"red",
|
||||
"pink",
|
||||
"purple",
|
||||
"white",
|
||||
"blue",
|
||||
"teal",
|
||||
"green",
|
||||
"yellow",
|
||||
"orange",
|
||||
"red",
|
||||
"pink",
|
||||
"purple",
|
||||
"white"
|
||||
];
|
||||
|
||||
export const ColorPickerInput = wrapFieldsWithMeta(({ input }) => {
|
||||
const inputClasses = {
|
||||
blue: "bg-blue-500 border-blue-600",
|
||||
teal: "bg-teal-500 border-teal-600",
|
||||
green: "bg-green-500 border-green-600",
|
||||
yellow: "bg-yellow-500 border-yellow-600",
|
||||
orange: "bg-orange-500 border-orange-600",
|
||||
red: "bg-red-500 border-red-600",
|
||||
pink: "bg-pink-500 border-pink-600",
|
||||
purple: "bg-purple-500 border-purple-600",
|
||||
white: "bg-white border-gray-150",
|
||||
};
|
||||
const inputClasses = {
|
||||
blue: "bg-blue-500 border-blue-600",
|
||||
teal: "bg-teal-500 border-teal-600",
|
||||
green: "bg-green-500 border-green-600",
|
||||
yellow: "bg-yellow-500 border-yellow-600",
|
||||
orange: "bg-orange-500 border-orange-600",
|
||||
red: "bg-red-500 border-red-600",
|
||||
pink: "bg-pink-500 border-pink-600",
|
||||
purple: "bg-purple-500 border-purple-600",
|
||||
white: "bg-white border-gray-150"
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<input type="text" id={input.name} className="hidden" {...input} />
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{colorOptions.map((color) => {
|
||||
return (
|
||||
<button
|
||||
className={`w-9 h-9 rounded-full shadow border ${
|
||||
inputClasses[color]
|
||||
} ${
|
||||
input.value === color
|
||||
? "ring-[3px] ring-offset-2 ring-blue-400"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
input.onChange(color);
|
||||
}}
|
||||
></button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<input type="text" id={ input.name } className="hidden" { ...input } />
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{ colorOptions.map((color) => {
|
||||
return (
|
||||
<button
|
||||
className={ `w-9 h-9 rounded-full shadow border ${
|
||||
inputClasses[color]
|
||||
} ${
|
||||
input.value === color
|
||||
? "ring-[3px] ring-offset-2 ring-blue-400"
|
||||
: ""
|
||||
}` }
|
||||
onClick={ () => {
|
||||
input.onChange(color);
|
||||
} }
|
||||
/>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -6,129 +6,128 @@ 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(" ");
|
||||
} else {
|
||||
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 [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;
|
||||
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">
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
</>
|
||||
) }
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user