ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
48 lines • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePreferenceInput = void 0;
const react_1 = require("react");
const usePreference_1 = require("./usePreference.cjs");
/**
* Get the props for a preference input that changes the value on blur
*
* Relies on `usePreference`, so it's using the PreferenceKeyContext
*
* @example
* const FontSizePreferenceInput = () => {
* const field = usePreferenceInput('ui.font.size', 10);
* return (
* <div>
* <label for="font-size">Font size</label>
* <input id="font-size" {...field} />
* </div>
* );
* }
*/
const usePreferenceInput = (key, defaultValue) => {
const [valueFromStore, setValueFromStore] = (0, usePreference_1.usePreference)(key, defaultValue);
const [value, setValue] = (0, react_1.useState)(valueFromStore);
(0, react_1.useEffect)(() => {
setValue(valueFromStore || defaultValue);
}, [valueFromStore, defaultValue]);
const onChange = event => {
setValue(event.target.value === '' ? defaultValue : event.target.value);
};
const onBlur = () => {
setValueFromStore(value);
};
const onKeyDown = event => {
if (event.key === 'Enter') {
setValueFromStore(value);
const form = event.target.form;
if (form) {
const index = [...form].indexOf(event.target);
form.elements[index + 1]?.focus();
}
event.preventDefault();
}
};
return { value, onChange, onBlur, onKeyDown };
};
exports.usePreferenceInput = usePreferenceInput;
//# sourceMappingURL=usePreferenceInput.js.map