UNPKG

@data-driven-forms/react-form-renderer

Version:

React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.

129 lines (111 loc) 5.15 kB
import _slicedToArray from "@babel/runtime/helpers/slicedToArray"; import _defineProperty from "@babel/runtime/helpers/defineProperty"; import _typeof from "@babel/runtime/helpers/typeof"; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } import { useCallback, useContext, useEffect, useMemo, useReducer } from 'react'; import isEqual from 'lodash/isEqual'; import useFormApi from '../use-form-api'; import parseCondition from '../parse-condition'; import RendererContext from '../renderer-context/renderer-context'; var setterValueCheck = function setterValueCheck(setterValue) { if (setterValue === null || Array.isArray(setterValue)) { console.error('Received invalid setterValue. Expected object, received: ', setterValue); return false; } return _typeof(setterValue) === 'object'; }; export var reducer = function reducer(state, _ref) { var type = _ref.type, sets = _ref.sets; switch (type) { case 'formResetted': return _objectSpread(_objectSpread({}, state), {}, { initial: true }); case 'rememberSets': return _objectSpread(_objectSpread({}, state), {}, { initial: false, sets: sets }); default: return state; } }; var Condition = function Condition(_ref2) { var condition = _ref2.condition, children = _ref2.children, field = _ref2.field; var formOptions = useFormApi(); var formState = formOptions.getState(); var _useContext = useContext(RendererContext), conditionMapper = _useContext.conditionMapper; var _useReducer = useReducer(reducer, { sets: [], initial: true }), _useReducer2 = _slicedToArray(_useReducer, 2), state = _useReducer2[0], dispatch = _useReducer2[1]; // It is required to get the context state values from in order to get the latest state. // Using the trigger values can cause issues with the radio field as each input is registered separately to state and does not yield the actual field value. var conditionResult = useMemo(function () { return parseCondition(condition, formState.values, field, conditionMapper); }, [formState.values, condition, field, conditionMapper]); var setters = conditionResult.set ? [conditionResult.set] : conditionResult.sets; useEffect(function () { if (!formState.dirty) { dispatch({ type: 'formResetted' }); } }, [formState.dirty]); var setValue = useCallback(function (setter) { Object.entries(setter).forEach(function (_ref3) { var _ref4 = _slicedToArray(_ref3, 2), name = _ref4[0], value = _ref4[1]; formOptions.change(name, value); }); }, []); useEffect(function () { if (setters && setters.length > 0 && (state.initial || !isEqual(setters, state.sets))) { setters.forEach(function (setter, index) { if (setter && (state.initial || !isEqual(setter, state.sets[index]))) { setTimeout(function () { /** * We have to get the meta in the timetout to wait for state initialization */ var meta = formOptions.getFieldState(field.name); var isFormModified = Object.values(formOptions.getState().modified).some(Boolean); /** * Apply setter only * - field has no initial value * - form is modified * - when meta is false = field was unmounted before timeout, we finish the condition */ if (!meta || isFormModified || typeof meta.initial === 'undefined') { formOptions.batch(function () { if (typeof setter !== 'function') { setValue(setter); } else { var setterValue = setter(formOptions.getState(), formOptions.getFieldState); if (setterValueCheck(setterValue)) { setValue(setterValue); } else { console.error('Received invalid setterValue. Expected object, received: ', setterValue); } } }); } }); } }); dispatch({ type: 'rememberSets', sets: setters }); } }, [setters, state.initial]); return conditionResult.visible ? children : null; }; export default Condition;