mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-02-20 15:43:58 -05:00
b4dad087e4
* WIP * Some minor fixes for light theme - Fix `useIsDark` not reading the initial theme value (only reacting to theme changes) - Fix `Inspector` always showing a dark image when no item was selected - Fix `Thumb` video extension using black text on light theme * Improve form error messages - Fix `addLocationDialog` not registering the path input - Remove `@hookform/error-message` * Fix Dialog not respecting max-width - Fix ErrorMessage animation jumping * A lot of misc fixes - Implement an `useExplorerItemData` (cleaner fix for thumbnail flicker) - Fix broken image showing for `Thumb` due a rece condition when props are updated - Implement an `ExternalObject` component that hacks an alternative for `onLoad` and `onError` events for <object> - Fix `Overview` broken layout when `Inspector` is open and window is small - Improve `IndexerRuleEditor` UX in `AddLocationDialog` - Improve the way `IndexerRuleEditor` handles rules deletion - Fix `IndexerRuleEditor` closing the the new rule form even when the rule creation fails - Add an editable prop to `IndexerRuleEditor` to disable all editable functions - Fix `getIcon` fallbacking to Document instead of the dark version of an icon if it exists - Add some missing colors to white theme * Format * Fix Backup restore key dialog not resetting after error * Feedback * Format * Normalize imports * Fix ColorPicker export * Fix Thumb video ext not showing in MediaView with show square thumbnails - Fix AddLocationDialog Error resetting when changing IndexRules
33 lines
910 B
TypeScript
33 lines
910 B
TypeScript
import clsx from 'clsx';
|
|
import { HexColorInput, HexColorPicker } from 'react-colorful';
|
|
import { FieldValues, UseControllerProps, useController } from 'react-hook-form';
|
|
import { Popover, inputStyles } from '@sd/ui';
|
|
|
|
interface Props<T extends FieldValues> extends UseControllerProps<T> {
|
|
className?: string;
|
|
}
|
|
|
|
export const ColorPicker = <T extends FieldValues>({ className, ...props }: Props<T>) => {
|
|
const { field } = useController({ name: props.name });
|
|
|
|
return (
|
|
<Popover
|
|
trigger={
|
|
<div
|
|
className={clsx('h-4 w-4 rounded-full shadow', className)}
|
|
style={{ backgroundColor: field.value }}
|
|
/>
|
|
}
|
|
className="p-3"
|
|
sideOffset={5}
|
|
>
|
|
<HexColorPicker color={field.value} onChange={field.onChange} />
|
|
<HexColorInput
|
|
color={field.value}
|
|
onChange={field.onChange}
|
|
className={inputStyles({ size: 'md', className: '!mt-5 bg-app px-3' })}
|
|
/>
|
|
</Popover>
|
|
);
|
|
};
|