From 17fcebd10625dd4fa7721db3a99e27c149efc179 Mon Sep 17 00:00:00 2001 From: Chika Date: Wed, 9 Sep 2020 14:46:32 +0300 Subject: [PATCH] change debounce delay for different elements --- src/client/Elements/Checkbox.jsx | 4 +++- src/client/Elements/Input.jsx | 6 ++++-- src/client/Elements/InputNumber.jsx | 4 +++- src/client/Elements/Radio.jsx | 13 +++++-------- src/client/Elements/Select.jsx | 6 ++++-- src/client/Elements/Switch.jsx | 6 ++++-- src/client/Elements/TextArea.jsx | 8 +++++--- src/client/hooks/useStoreValue.js | 9 ++++----- src/core/constants/debounce.js | 3 ++- 9 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/client/Elements/Checkbox.jsx b/src/client/Elements/Checkbox.jsx index e7a13f7..4f470ee 100644 --- a/src/client/Elements/Checkbox.jsx +++ b/src/client/Elements/Checkbox.jsx @@ -5,11 +5,13 @@ import { Box } from 'client/UIKit/grid'; import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; +import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; const Checkbox = ({ name, readonly, valueName, computedValue }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, - valueName + valueName, + debounceDelay: DEFAULT_DEBOUNCE_DELAY }); const { status } = useStatus(name); diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx index 414674c..b73cd81 100644 --- a/src/client/Elements/Input.jsx +++ b/src/client/Elements/Input.jsx @@ -4,6 +4,7 @@ import { useStoreValue } from 'client/hooks/useStoreValue'; import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; +import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; const Input = ({ name, @@ -16,11 +17,12 @@ const Input = ({ addonBefore, addonAfter, valueName, - computedValue, + computedValue }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName, + debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY }); const { status } = useStatus(name); @@ -36,7 +38,7 @@ const Input = ({ addonBefore={addonBefore} addonAfter={addonAfter} value={value} - onChange={(e) => setCurrentValue(e.target.value)} + onChange={e => setCurrentValue(e.target.value)} /> ); }; diff --git a/src/client/Elements/InputNumber.jsx b/src/client/Elements/InputNumber.jsx index e168344..baa4405 100644 --- a/src/client/Elements/InputNumber.jsx +++ b/src/client/Elements/InputNumber.jsx @@ -4,6 +4,7 @@ import { useStoreValue } from 'client/hooks/useStoreValue'; import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; +import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; const InputNumber = ({ name, @@ -19,7 +20,8 @@ const InputNumber = ({ }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, - valueName + valueName, + debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY }); const { status } = useStatus(name); diff --git a/src/client/Elements/Radio.jsx b/src/client/Elements/Radio.jsx index 56f2257..fede3f0 100644 --- a/src/client/Elements/Radio.jsx +++ b/src/client/Elements/Radio.jsx @@ -2,7 +2,8 @@ import { Radio as AntRadio } from 'antd'; import { useOptions } from 'client/hooks/useOptions'; import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; -import { Status } from "core/types/statuses"; +import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; +import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; @@ -10,15 +11,11 @@ const Radio = ({ name, style, computedValue, valueName }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName, + debounceDelay: DEFAULT_DEBOUNCE_DELAY }); const { status } = useStatus(name); const { options } = useOptions(name); - /** - * TODO: style type in core - * TODO: column - */ - return ( { const styles = { radio: { - display: 'block', - }, + display: 'block' + } }; export default observer(Radio); diff --git a/src/client/Elements/Select.jsx b/src/client/Elements/Select.jsx index 49c110d..421429e 100644 --- a/src/client/Elements/Select.jsx +++ b/src/client/Elements/Select.jsx @@ -1,15 +1,17 @@ import { Select as AntSelect } from 'antd'; import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; -import { Status } from "core/types/statuses"; +import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; import { useOptions } from 'client/hooks/useOptions'; +import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; -const Select = ({ disabled, name, showSearch, computedValue, valueName }) => { +const Select = ({ name, showSearch, computedValue, valueName }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName, + debounceDelay: DEFAULT_DEBOUNCE_DELAY }); const { status } = useStatus(name); const { options, filter } = useOptions(name); diff --git a/src/client/Elements/Switch.jsx b/src/client/Elements/Switch.jsx index 7ce91dc..1d1ba4d 100644 --- a/src/client/Elements/Switch.jsx +++ b/src/client/Elements/Switch.jsx @@ -2,14 +2,16 @@ import { Switch as AntSwitch } from 'antd'; import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; import { Box } from 'client/UIKit/grid'; -import { Status } from "core/types/statuses"; +import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; +import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; const Switch = ({ name, valueName, computedValue }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, - valueName + valueName, + debounceDelay: DEFAULT_DEBOUNCE_DELAY }); const { status } = useStatus(name); diff --git a/src/client/Elements/TextArea.jsx b/src/client/Elements/TextArea.jsx index 5fe5cf5..5802865 100644 --- a/src/client/Elements/TextArea.jsx +++ b/src/client/Elements/TextArea.jsx @@ -1,9 +1,10 @@ import { Input as AntInput } from 'antd'; import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; -import { Status } from "core/types/statuses"; +import { Status } from 'core/types/statuses'; import { observer } from 'mobx-react'; import React from 'react'; +import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; const TextArea = ({ name, @@ -14,14 +15,15 @@ const TextArea = ({ }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, - valueName + valueName, + debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY }); const { status } = useStatus(name); return ( { +export const useStoreValue = ({ computedValue, valueName, debounceDelay }) => { const { calculationStore } = useStores(); const [currentValue, setCurrentValue] = useState(undefined); - const [debouncedValue] = useDebounce(currentValue, DEBOUNCE_DELAY); + const [debouncedValue] = useDebounce(currentValue, debounceDelay); const sourceValue = calculationStore.values[valueName]; diff --git a/src/core/constants/debounce.js b/src/core/constants/debounce.js index 3bc0649..cfbc483 100644 --- a/src/core/constants/debounce.js +++ b/src/core/constants/debounce.js @@ -1 +1,2 @@ -export const DEBOUNCE_DELAY = 800; +export const TEXT_INPUT_DEBOUNCE_DELAY = 800; +export const DEFAULT_DEBOUNCE_DELAY = 0;