evo/EvoCalculator
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change debounce delay for different elements

Browse Source
This commit is contained in:
Chika 2020-09-09 14:46:32 +03:00
parent be071545a6
commit 17fcebd106
9 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/Elements/Checkbox.jsx
View File

@ -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);

6
src/client/Elements/Input.jsx
View File

@ -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)}
/>
);
};

4
src/client/Elements/InputNumber.jsx
View File

@ -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);

13
src/client/Elements/Radio.jsx
View File

@ -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 (
<AntRadio.Group
disabled={status === Status.Disabled}
@ -60,8 +57,8 @@ const Radio = ({ name, style, computedValue, valueName }) => {
const styles = {
radio: {
display: 'block',
},
display: 'block'
}
};
export default observer(Radio);

6
src/client/Elements/Select.jsx
View File

@ -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);

6
src/client/Elements/Switch.jsx
View File

@ -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);

8
src/client/Elements/TextArea.jsx
View File

@ -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 (
<AntInput.TextArea
style={{
height: '150px',
height: '150px'
}}
disabled={status === Status.Disabled}
readOnly={readonly}

9
src/client/hooks/useStoreValue.js
View File

@ -1,12 +1,11 @@
import { useStores } from './useStores';
import { useState, useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useDebounce } from 'use-debounce/lib';
import { DEBOUNCE_DELAY } from 'core/constants/debounce';
import { useStores } from './useStores';
export const useStoreValue = ({ computedValue, valueName }) => {
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];

3
src/core/constants/debounce.js
View File

@ -1 +1,2 @@
export const DEBOUNCE_DELAY = 800;
export const TEXT_INPUT_DEBOUNCE_DELAY = 800;
export const DEFAULT_DEBOUNCE_DELAY = 0;