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 (
- setInnerValue(v)} - value={sliderValue} + { + setInnerValue(parseInt(e.target.value)) + setInputValue(parseInt(e.target.value)) + }} />
0} + checked={enable} onCheckedChange={(v) => { - setInnerValue(v ? 30 : -1); + setEnable(!!v); + v ? props.setValue(inputValue) : props.setValue(0); }} > - {`${t('limit')}${innerValue > 0 ? `: ${innerValue}` : ''}`} + { t('limit') }
); diff --git a/packages/graphic-walker/src/locales/en-US.json b/packages/graphic-walker/src/locales/en-US.json index 0c8b2bac..cd47d91e 100644 --- a/packages/graphic-walker/src/locales/en-US.json +++ b/packages/graphic-walker/src/locales/en-US.json @@ -222,7 +222,7 @@ "cancel": "Cancel", "delete_paint": "Delete Painting" }, - "limit": "Limit", + "limit": "enable query limit (rows)", "size": "Resize", "size_setting": { "width": "Width", diff --git a/packages/graphic-walker/src/locales/ja-JP.json b/packages/graphic-walker/src/locales/ja-JP.json index e60742b6..eb9e35a8 100644 --- a/packages/graphic-walker/src/locales/ja-JP.json +++ b/packages/graphic-walker/src/locales/ja-JP.json @@ -216,7 +216,7 @@ "cancel": "キャンセル", "delete_paint": "キャンバスを削除" }, - "limit": "上限", + "limit": "クエリ制限 (行数) を有効にする", "size": "サイズ変更", "size_setting": { "width": "幅", diff --git a/packages/graphic-walker/src/locales/zh-CN.json b/packages/graphic-walker/src/locales/zh-CN.json index b49ae418..58fa5d0b 100644 --- a/packages/graphic-walker/src/locales/zh-CN.json +++ b/packages/graphic-walker/src/locales/zh-CN.json @@ -222,7 +222,7 @@ "cancel": "取消改动", "delete_paint": "删除画板" }, - "limit": "上限", + "limit": "启用查询限制(行)", "size": "调整尺寸", "size_setting": { "width": "宽度",