formik-fields/dist/formik-fields.esm.js

An extension to the great formik-library

import memoizeOne from 'memoize-one';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import { createElement, PureComponent, Component } from 'react';
import { Formik } from 'formik';

function getFieldKeys(props) {
  return Object.keys(props.fields);
}
function calcInitialValues(props) {
  var res = {};
  getFieldKeys(props).forEach(function (key) {
    return res[key] = props.fields[key].initialValue;
  });
  return res;
}

function toMemoizedValidator(props, key) {
  return memoizeOne(props.fields[key].validate);
}

function calcMemoizedValidatorsFromProps(props) {
  var memoizedValidators = {};
  getFieldKeys(props).filter(function (key) {
    return props.fields[key].validate;
  }).forEach(function (key) {
    return memoizedValidators[key] = toMemoizedValidator(props, key);
  });
  return memoizedValidators;
}

function toFormikFieldStateMemoizedByKey(key) {
  return memoizeOne(function (value, error, isTouched, setFieldValue, setFieldTouched) {
    return {
      name: key,
      error: error,
      isTouched: isTouched,
      value: value,
      handleChange: function handleChange(e) {
        return setFieldValue(key, e.target.value);
      },
      handleBlur: function handleBlur() {
        return setFieldTouched(key, true);
      },
      setValue: function setValue(newValue, shouldValidate) {
        return setFieldValue(key, newValue, shouldValidate);
      },
      setIsTouched: function setIsTouched(newTouched, shouldValidate) {
        return setFieldTouched(key, newTouched, shouldValidate);
      }
    };
  });
}

function calcMemoizedFormikBagToFormikFieldStateMap(props) {
  var res = {};
  getFieldKeys(props).forEach(function (key) {
    return res[key] = toFormikFieldStateMemoizedByKey(key);
  });
  return res;
}

var shallowEq = function shallowEq(a, b) {
  for (var key in a) {
    // @ts-ignore
    if (a[key] !== b[key]) {
      return false;
    }
  }

  return true;
};

var RenderPureFormikFields =
/*#__PURE__*/
function (_React$Component) {
  _inherits(RenderPureFormikFields, _React$Component);

  function RenderPureFormikFields() {
    _classCallCheck(this, RenderPureFormikFields);

    return _possibleConstructorReturn(this, _getPrototypeOf(RenderPureFormikFields).apply(this, arguments));
  }

  _createClass(RenderPureFormikFields, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      var formikFields = nextProps.formikFields,
          errors = nextProps.errors,
          rest = _objectWithoutProperties(nextProps, ["formikFields", "errors"]);

      if (shallowEq(rest, this.props) && shallowEq(formikFields, this.props.formikFields) && shallowEq(errors, this.props.errors)) {
        return false;
      }

      return true;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          render = _this$props.render,
          children = _this$props.children,
          formikFields = _this$props.formikFields,
          formikBag = _objectWithoutProperties(_this$props, ["render", "children", "formikFields"]);

      if (render) {
        return render(formikFields, formikBag);
      }

      if (children) {
        return children(formikFields, formikBag);
      }

      throw new Error('you have to provide either the children- or the render-prop');
    }
  }]);

  return RenderPureFormikFields;
}(Component);

var withoutFalsies = function withoutFalsies(obj) {
  var res = {};
  Object.keys(obj) // @ts-ignore
  .filter(function (key) {
    return !!obj[key];
  }) // @ts-ignore
  .forEach(function (key) {
    return res[key] = obj[key];
  });
  return res;
};

var FormikFields =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(FormikFields, _React$PureComponent);

  function FormikFields(props) {
    var _this;

    _classCallCheck(this, FormikFields);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(FormikFields).call(this, props));
    _this.initialValues = void 0;
    _this.memoizedValidatorMap = void 0;
    _this.memoizedFormikBagToFormikFieldStateMap = void 0;

    _this.fieldKeys = function () {
      return getFieldKeys(_this.props);
    };

    _this.validateKey = function (key, values) {
      if (!_this.memoizedValidatorMap[key]) {
        return false;
      }

      var validator = _this.memoizedValidatorMap[key];
      return validator(values[key]);
    };

    _this.validate = function (values) {
      var res = {};

      _this.fieldKeys().filter(function (key) {
        return _this.memoizedValidatorMap[key];
      }).forEach(function (key) {
        return res[key] = _this.validateKey(key, values);
      });

      if (_this.props.validate) {
        return withoutFalsies(Object.assign(res, _this.props.validate(values)));
      }

      return withoutFalsies(res);
    };

    _this.formikFieldStateByKey = function (key, formikBag) {
      return _this.memoizedFormikBagToFormikFieldStateMap[key](formikBag.values[key], formikBag.errors[key], !!formikBag.touched[key], formikBag.setFieldValue, formikBag.setFieldTouched);
    };

    _this.getState = function (formikBag) {
      var res = {};

      _this.fieldKeys().forEach(function (key) {
        return res[key] = _this.formikFieldStateByKey(key, formikBag);
      });

      return res;
    };

    _this.renderCustomFieldsForm = function (formikBag) {
      var isValidating = formikBag.isValidating,
          other = _objectWithoutProperties(formikBag, ["isValidating"]);

      return createElement(RenderPureFormikFields, Object.assign({}, other, {
        render: _this.props.render,
        children: _this.props.children,
        formikFields: _this.getState(formikBag)
      }));
    };

    _this.initialValues = calcInitialValues(props);
    _this.memoizedValidatorMap = calcMemoizedValidatorsFromProps(props);
    _this.memoizedFormikBagToFormikFieldStateMap = calcMemoizedFormikBagToFormikFieldStateMap(props);
    return _this;
  }

  _createClass(FormikFields, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          fields = _this$props.fields,
          render = _this$props.render,
          children = _this$props.children,
          props = _objectWithoutProperties(_this$props, ["fields", "render", "children"]);

      return createElement(Formik, Object.assign({}, props, {
        initialValues: this.initialValues,
        validate: this.validate,
        render: this.renderCustomFieldsForm
      }));
    }
  }]);

  return FormikFields;
}(PureComponent);

export { FormikFields };
//# sourceMappingURL=formik-fields.esm.js.map