diff options
Diffstat (limited to 'apps/web/src/components/editor/panels/properties/effect-param-field.tsx')
| -rw-r--r-- | apps/web/src/components/editor/panels/properties/effect-param-field.tsx | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/apps/web/src/components/editor/panels/properties/effect-param-field.tsx b/apps/web/src/components/editor/panels/properties/effect-param-field.tsx deleted file mode 100644 index 408d430a..00000000 --- a/apps/web/src/components/editor/panels/properties/effect-param-field.tsx +++ /dev/null @@ -1,152 +0,0 @@ -"use client"; - -import type { EffectParamDefinition, NumberEffectParamDefinition } from "@/types/effects"; -import { clamp } from "@/utils/math"; -import { SectionField } from "./section"; -import { Slider } from "@/components/ui/slider"; -import { NumberField } from "@/components/ui/number-field"; -import { Switch } from "@/components/ui/switch"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { usePropertyDraft } from "./hooks/use-property-draft"; - -export function EffectParamField({ - param, - value, - onPreview, - onCommit, -}: { - param: EffectParamDefinition; - value: number | string | boolean; - onPreview: (value: number | string | boolean) => void; - onCommit: () => void; -}) { - return ( - <SectionField label={param.label}> - <EffectParamInput param={param} value={value} onPreview={onPreview} onCommit={onCommit} /> - </SectionField> - ); -} - -function EffectParamInput({ - param, - value, - onPreview, - onCommit, -}: { - param: EffectParamDefinition; - value: number | string | boolean; - onPreview: (value: number | string | boolean) => void; - onCommit: () => void; -}) { - if (param.type === "number") { - return ( - <NumberParamField - param={param} - value={typeof value === "number" ? value : Number(value)} - onPreview={onPreview} - onCommit={onCommit} - /> - ); - } - - if (param.type === "boolean") { - return ( - <Switch - checked={Boolean(value)} - onCheckedChange={(checked) => { - onPreview(checked); - onCommit(); - }} - /> - ); - } - - if (param.type === "select") { - return ( - <Select - value={String(value)} - onValueChange={(selected) => { - onPreview(selected); - onCommit(); - }} - > - <SelectTrigger className="w-full"> - <SelectValue /> - </SelectTrigger> - <SelectContent> - {param.options.map((option) => ( - <SelectItem key={option.value} value={option.value}> - {option.label} - </SelectItem> - ))} - </SelectContent> - </Select> - ); - } - - if (param.type === "color") { - return ( - <input - type="color" - className="h-8 w-full cursor-pointer rounded border" - value={String(value)} - onChange={(event) => onPreview(event.target.value)} - onBlur={onCommit} - /> - ); - } - - return null; -} - -function NumberParamField({ - param, - value, - onPreview, - onCommit, -}: { - param: NumberEffectParamDefinition; - value: number; - onPreview: (value: number) => void; - onCommit: () => void; -}) { - const { min, max, step } = param; - - const draft = usePropertyDraft({ - displayValue: String(value), - parse: (input) => { - const parsed = parseFloat(input); - if (Number.isNaN(parsed)) return null; - return clamp({ value: parsed, min, max }); - }, - onPreview, - onCommit, - }); - - return ( - <div className="flex items-center gap-3"> - <Slider - className="flex-1" - min={min} - max={max} - step={step} - value={[value]} - onValueChange={([newValue]) => onPreview(newValue)} - onValueCommit={onCommit} - /> - <NumberField - className="w-16 shrink-0" - value={draft.displayValue} - onFocus={draft.onFocus} - onChange={draft.onChange} - onBlur={draft.onBlur} - /> - </div> - ); -} |
