diff --git a/packages/graphic-walker/src/components/limitSetting.tsx b/packages/graphic-walker/src/components/limitSetting.tsx index dc6f89c3..676d858e 100644 --- a/packages/graphic-walker/src/components/limitSetting.tsx +++ b/packages/graphic-walker/src/components/limitSetting.tsx @@ -1,35 +1,43 @@ -import React, { useMemo } from 'react'; +import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useDebounceValueBind } from '../hooks'; +import { createStreamedValueBindHook } from '../hooks'; import { Checkbox } from './ui/checkbox'; -import { Slider } from './ui/slider'; +import { Input } from './ui/input'; +import debounce from 'lodash-es/debounce'; + +const useDebounceValueBind = createStreamedValueBindHook((f) => debounce(f, 600)); +const default_limit_value = 100; export default function LimitSetting(props: { value: number; setValue: (v: number) => void }) { const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' }); - const [innerValue, setInnerValue] = useDebounceValueBind(props.value, (v) => props.setValue(v)); - const sliderValue = useMemo(() => (innerValue > 0 ? [innerValue] : [0]), [innerValue]); + const setInnerValue = useDebounceValueBind(0, (v) => props.setValue(v))[1]; + const [inputValue, setInputValue] = React.useState(props.value > 0 ? props.value : default_limit_value); + const [enable, setEnable] = React.useState(props.value > 0); return (