diff options
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/editor/panels/timeline/index.tsx | 1 | ||||
| -rw-r--r-- | apps/web/src/components/ui/number-field.tsx | 47 |
2 files changed, 30 insertions, 18 deletions
diff --git a/apps/web/src/components/editor/panels/timeline/index.tsx b/apps/web/src/components/editor/panels/timeline/index.tsx index f1ecd9f4..f02f8461 100644 --- a/apps/web/src/components/editor/panels/timeline/index.tsx +++ b/apps/web/src/components/editor/panels/timeline/index.tsx @@ -551,7 +551,6 @@ export function Timeline() { timelineRef={timelineRef} tracksScrollRef={tracksScrollRef} isVisible={showSnapIndicator} - tracks={tracks} /> </div> </section> diff --git a/apps/web/src/components/ui/number-field.tsx b/apps/web/src/components/ui/number-field.tsx index 18d71591..acedff10 100644 --- a/apps/web/src/components/ui/number-field.tsx +++ b/apps/web/src/components/ui/number-field.tsx @@ -134,20 +134,28 @@ function NumberField({ ref, ...props }: NumberFieldProps & { ref?: React.Ref<HTMLInputElement> }) { - const iconRef = useRef<HTMLSpanElement>(null); + const iconRef = useRef<HTMLButtonElement>(null); const inputRef = useRef<HTMLInputElement>(null); const ghostRef = useRef<HTMLSpanElement>(null); const startValueRef = useRef(0); const cumulativeDeltaRef = useRef(0); const [isInputFocused, setIsInputFocused] = useState(false); const [suffixLeft, setSuffixLeft] = useState(0); + const ghostValue = Array.isArray(value) ? value.join(", ") : String(value ?? ""); useLayoutEffect(() => { - if (!suffix || !ghostRef.current || !inputRef.current) return; + if (!suffix) { + setSuffixLeft(0); + return; + } + if (!ghostRef.current || !inputRef.current) return; + if (ghostRef.current.textContent !== ghostValue) { + ghostRef.current.textContent = ghostValue; + } const paddingLeft = parseFloat(getComputedStyle(inputRef.current).paddingLeft) || 0; setSuffixLeft(paddingLeft + ghostRef.current.offsetWidth); - }, [value, suffix]); + }, [ghostValue, suffix]); const { containerRef: wrapperRef } = useFocusLock<HTMLDivElement>({ isActive: isInputFocused, @@ -243,19 +251,24 @@ function NumberField({ className, )} > - {icon && ( - <span - ref={iconRef} - className={cn( - "text-muted-foreground [&_svg]:size-3.5! shrink-0 select-none pl-2.5 text-sm leading-none", - canScrub && "cursor-ew-resize", - )} - onMouseDown={canScrub ? (event) => event.preventDefault() : undefined} - onPointerDown={canScrub ? handleIconPointerDown : undefined} - > - {icon} - </span> - )} + {icon && + (canScrub ? ( + <button + ref={iconRef} + type="button" + aria-label="Drag to adjust value" + disabled={disabled} + className="text-muted-foreground [&_svg]:size-3.5! shrink-0 select-none pl-2.5 text-sm leading-none cursor-ew-resize" + onMouseDown={(event) => event.preventDefault()} + onPointerDown={handleIconPointerDown} + > + {icon} + </button> + ) : ( + <span className="text-muted-foreground [&_svg]:size-3.5! shrink-0 select-none pl-2.5 text-sm leading-none"> + {icon} + </span> + ))} <span className={cn( "relative flex flex-1 min-w-0 items-center", @@ -272,7 +285,7 @@ function NumberField({ className="invisible absolute text-sm leading-none whitespace-pre pointer-events-none" aria-hidden="true" > - {value} + {ghostValue} </span> <span className={cn( |