js/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost synced 2025-03-28 21:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

prevent slider flickers

Browse Source
This commit is contained in:
Philipinho 2025-03-10 01:15:21 +00:00
parent a812cdcf15
commit 2205ce0c3b
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/features/editor/components/common/node-width-resize.tsx
View File

@ -1,4 +1,4 @@
import { memo, useCallback, useEffect, useState } from 'react'; import { memo, useCallback, useEffect, useLayoutEffect, useState } from 'react';
import { Slider } from '@mantine/core'; import { Slider } from '@mantine/core';
export type ImageWidthProps = { export type ImageWidthProps = {
@ -10,11 +10,11 @@ export type ImageWidthProps = {
export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps) => { export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps) => {
const [currentValue, setCurrentValue] = useState(value); const [currentValue, setCurrentValue] = useState(value);
useEffect(() => { useLayoutEffect(() => {
setCurrentValue(value); setCurrentValue(value);
}, [value]); }, [value]);
const handleChange = useCallback( const handleChangeEnd = useCallback(
(newValue: number) => { (newValue: number) => {
onChange(newValue); onChange(newValue);
}, },
@ -27,7 +27,7 @@ export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps
min={10} min={10}
value={currentValue} value={currentValue}
onChange={setCurrentValue} onChange={setCurrentValue}
onChangeEnd={handleChange} onChangeEnd={handleChangeEnd}
w={width || 100} w={width || 100}
label={(value) => `${value}%`} label={(value) => `${value}%`}
/> />