mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekayandHanzo Dev
252e15250f
The same @hookform/resolvers 5 change, in the dialogs, settings forms, the envelope editor and embedded authoring: `useForm<T>` pinned a form to its schema's output, the resolver no longer matches that, so each form lets the resolver type it, and whatever takes its control or context says input and output — Control<Input, unknown, Output>, UseFormReturn likewise. What the input exposed: - zod 4 types z.preprocess's input as unknown unless the function names it. The distribute dialog's and the settings dialog's emailReplyTo hold a string or nothing, and now say so, as the two flow steps do. - Combobox and ColorPicker already render an unset value as their placeholder and default; their props now allow one. - The embed's signature types and the editor's signers' actionAuth may be unset in the form. The multiselect reads `?? []` and the signer check `?? []`, the schemas' own defaults; every writer sets both, so nothing reachable changes. Co-authored-by: Hanzo Dev <[email protected]>
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import type { HTMLAttributes } from 'react';
|
|
import React, { useState } from 'react';
|
|
|
|
import { HexColorInput, HexColorPicker } from 'react-colorful';
|
|
|
|
import { cn } from '../lib/utils';
|
|
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
|
|
|
export type ColorPickerProps = {
|
|
disabled?: boolean;
|
|
value?: string;
|
|
defaultValue?: string;
|
|
onChange: (color: string) => void;
|
|
} & HTMLAttributes<HTMLDivElement>;
|
|
|
|
export const ColorPicker = ({
|
|
className,
|
|
disabled = false,
|
|
value,
|
|
defaultValue = '#000000',
|
|
onChange,
|
|
...props
|
|
}: ColorPickerProps) => {
|
|
const [color, setColor] = useState(value || defaultValue);
|
|
const [inputColor, setInputColor] = useState(value || defaultValue);
|
|
|
|
const onColorChange = (newColor: string) => {
|
|
setColor(newColor);
|
|
setInputColor(newColor);
|
|
onChange(newColor);
|
|
};
|
|
|
|
const onInputChange = (newColor: string) => {
|
|
setInputColor(newColor);
|
|
};
|
|
|
|
const onInputBlur = () => {
|
|
setColor(inputColor);
|
|
onChange(inputColor);
|
|
};
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger>
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
className="bg-background h-12 w-12 rounded-md border p-1 disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
<div className="h-full w-full rounded-sm" style={{ backgroundColor: color }} />
|
|
</button>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent className="w-auto">
|
|
<HexColorPicker
|
|
className={cn(
|
|
className,
|
|
'w-full aria-disabled:pointer-events-none aria-disabled:opacity-50',
|
|
)}
|
|
color={color}
|
|
onChange={onColorChange}
|
|
aria-disabled={disabled}
|
|
{...props}
|
|
/>
|
|
|
|
<HexColorInput
|
|
className="mt-4 h-10 rounded-md border bg-transparent px-3 py-2 text-sm disabled:pointer-events-none disabled:opacity-50"
|
|
color={inputColor}
|
|
onChange={onInputChange}
|
|
onBlur={onInputBlur}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
onInputBlur();
|
|
}
|
|
}}
|
|
disabled={disabled}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|