40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Input as AntInput } from "antd";
|
|
import { useDebounce } from "use-debounce";
|
|
import { useObserver } from "mobx-react";
|
|
import { useStores } from "client/hooks/useStores";
|
|
import runEffects from "client/tools/runEffects";
|
|
|
|
const Input = ({ placeholder, sourceValueName, getValue, Effects }) => {
|
|
const { calculationStore } = useStores();
|
|
const [currentValue, setCurrentValue] = useState(undefined);
|
|
const [debouncedValue] = useDebounce(currentValue, 800);
|
|
|
|
useEffect(() => {
|
|
if (sourceValueName) {
|
|
setCurrentValue(calculationStore.getValue(sourceValueName));
|
|
}
|
|
}, [sourceValueName]);
|
|
|
|
useEffect(() => {
|
|
if (sourceValueName) {
|
|
if (debouncedValue) {
|
|
calculationStore.setValue(sourceValueName, debouncedValue);
|
|
runEffects(Effects, calculationStore);
|
|
}
|
|
}
|
|
}, [debouncedValue]);
|
|
|
|
return useObserver(() => (
|
|
<AntInput
|
|
placeholder={placeholder}
|
|
value={sourceValueName ? currentValue : getValue(calculationStore)}
|
|
onChange={(e) => {
|
|
setCurrentValue(e.target.value);
|
|
}}
|
|
/>
|
|
));
|
|
};
|
|
|
|
export default Input;
|