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