@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.10

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -0,0 +1,192 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import React, { Component } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { getComponentFromProps } from '@elliemae/ds-utilities';
+import DSTextWrapper from '@elliemae/ds-text-wrapper';
+import { ResizeObserver } from 'resize-observer';
+import getSvgPath from './getSvgPath.js';
+import RequiredMark from '../RequiredMark/RequiredMark.js';
+
+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; }
+const blockName = 'labeled-outline';
+const Wrapper = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    'has-value': isOpen
+  };
+});
+const FloatingLabel = aggregatedClasses('label')(blockName, 'label');
+const OutlineIdle = aggregatedClasses('div')(blockName, 'idle');
+const Outline = aggregatedClasses('div')(blockName, 'outline');
+const OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');
+
+const shouldUpdateSvgPath = (_ref2, prevSizes) => {
+  let {
+    width,
+    height,
+    labelWidth
+  } = _ref2;
+  if (width !== prevSizes.width) return true;
+  if (height !== prevSizes.height) return true;
+  return labelWidth !== prevSizes.labelWidth;
+};
+
+class FloatingLabelInputImpl extends Component {
+  constructor(props) {
+    super(props);
+    this.resizeObserver = new ResizeObserver(() => this.updatePath());
+    this.prevSizes = {};
+    this.wrapperRef = /*#__PURE__*/React.createRef();
+    this.outlinePathRef = /*#__PURE__*/React.createRef();
+    this.outlineIdleRef = /*#__PURE__*/React.createRef();
+    this.labelRef = /*#__PURE__*/React.createRef();
+    this.updatePath = this.updatePath.bind(this);
+  }
+
+  componentDidMount() {
+    this.resizeObserver.observe(this.wrapperRef.current);
+  }
+
+  componentDidUpdate() {
+    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;
+    this.updatePath();
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver.unobserve(this.wrapperRef.current);
+  }
+
+  get sizes() {
+    const {
+      current: labelEl
+    } = this.labelRef;
+    const {
+      current: wrapperEl
+    } = this.wrapperRef;
+    const {
+      current: outlineIdleEl
+    } = this.outlineIdleRef;
+    const elStyles = window.getComputedStyle(outlineIdleEl);
+    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');
+    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');
+    const hasLeftRadius = parseFloat(leftRadius) !== 0;
+    const hasRightRadius = parseFloat(rightRadius) !== 0;
+    return {
+      labelWidth: labelEl.offsetWidth * 0.9,
+      width: wrapperEl.offsetWidth,
+      height: wrapperEl.offsetHeight,
+      radiusStyle: leftRadius,
+      hasLeftRadius,
+      hasRightRadius
+    };
+  }
+
+  get isOpened() {
+    const {
+      focused,
+      isOpen,
+      value
+    } = this.props;
+    return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;
+  }
+
+  getValue(value) {
+    const {
+      valueAccessor
+    } = this.props;
+    if (valueAccessor) return valueAccessor(value); // is an event
+
+    if (value && value.target) return value.target.value;
+    return value;
+  }
+
+  updatePath() {
+    const path = getSvgPath(this.sizes);
+    this.prevSizes = this.sizes;
+    this.outlinePathRef.current.setAttribute('d', path);
+  }
+
+  render() {
+    const {
+      ariaLabel,
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      labelText,
+      onBlur,
+      onFocus,
+      innerRef,
+      extraInputProps,
+      required,
+      value,
+      onChange,
+      mask,
+      useSubfix,
+      optional
+    } = this.props;
+
+    const inputProps = _objectSpread({
+      ariaLabel,
+      className: 'floating-label-input-controller',
+      disabled,
+      hasError,
+      onBlur,
+      onChange,
+      onFocus,
+      readOnly,
+      value,
+      innerRef,
+      mask,
+      useSubfix
+    }, extraInputProps);
+
+    const InputComponent = getComponentFromProps(inputComponent, inputProps);
+    const isOpen = this.isOpened;
+    return /*#__PURE__*/_jsx(Wrapper, {
+      classProps: {
+        hasError,
+        isOpen,
+        readOnly,
+        disabled
+      },
+      innerRef: this.wrapperRef,
+      onBlur: () => null,
+      onFocus: () => null,
+      onMouseOut: this.handleMouseOut,
+      onMouseOver: this.handleMouseOver
+    }, void 0, InputComponent, /*#__PURE__*/_jsx(FloatingLabel, {
+      classProps: {
+        isOpen
+      },
+      innerRef: this.labelRef
+    }, void 0, /*#__PURE__*/_jsx(DSTextWrapper, {
+      maxWidth: "100%",
+      text: labelText
+    }), /*#__PURE__*/_jsx(RequiredMark, {
+      optional: optional,
+      required: required
+    })), /*#__PURE__*/_jsx(Outline, {}, void 0, /*#__PURE__*/_jsx("svg", {}, void 0, /*#__PURE__*/_jsx(OutlinePath, {
+      innerRef: this.outlinePathRef
+    }))), /*#__PURE__*/_jsx(OutlineIdle, {
+      innerRef: this.outlineIdleRef
+    }));
+  }
+
+}
+
+FloatingLabelInputImpl.defaultProps = {
+  onChange: () => null
+};
+
+export { FloatingLabelInputImpl as default };

package/esm/FloatingLabelInput/getSvgPath.js

@@ -0,0 +1,47 @@
+/* eslint-disable prefer-template,max-statements,no-nested-ternary */
+function getSvgPath(_ref) {
+  let {
+    labelWidth = 50,
+    width = 200,
+    height = 35,
+    radiusStyle,
+    hasRightRadius = true,
+    hasLeftRadius = true
+  } = _ref;
+  const notchWidth = labelWidth;
+  const radius = parseFloat(radiusStyle);
+  const cornerWidth = radius + 1.3;
+  const leadingStrokeLength = 4;
+  const paddedNotchWidth = notchWidth + 8;
+  let extraSizeForH = 0;
+  let extraSizeForLeftV = 0;
+  let extraSizeForRightV = 0;
+  let extraSizeForTopH = radius;
+
+  if (!hasRightRadius) {
+    extraSizeForH += radius;
+    extraSizeForRightV = radius * 2;
+  }
+
+  if (!hasLeftRadius) {
+    extraSizeForH += radius;
+    extraSizeForLeftV = radius * 2;
+  }
+
+  if (!hasLeftRadius && hasRightRadius || hasRightRadius && hasLeftRadius) {
+    extraSizeForTopH = 0;
+  }
+
+  const pathMiddle = '' + (hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius : '') + 'v' + (height - (2 * cornerWidth - (extraSizeForRightV + 1.5))) + ( // right vertical line
+  hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius : '') + 'h' + (-width + 2 * cornerWidth - extraSizeForH) + (hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius : '') + 'v' + (-height + (2 * cornerWidth - (extraSizeForLeftV + 1.5))) + ( // left vertical line
+  hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius : '');
+  let path;
+
+  {
+    path = '' + 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 0.5 + 'h' + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength + extraSizeForTopH) + pathMiddle + 'h' + leadingStrokeLength;
+  }
+
+  return path;
+}
+
+export { getSvgPath as default };

package/esm/FloatingLabelInput/index.js

@@ -0,0 +1 @@
+export { default } from './DSFloatingLabelInput.js';

package/esm/FormItem/DSFormItemLayout.js

@@ -0,0 +1,196 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { describe } from 'react-desc';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { getComponentFromProps } from '@elliemae/ds-utilities';
+import Group from '@elliemae/ds-shared/GroupContext/Group';
+import DSInputGroup from '../InputGroup/DSInputGroup.js';
+import DSFloatingLabelInput from '../FloatingLabelInput/DSFloatingLabelInput.js';
+export { default as DSError } from './Error/DSError.js';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+export { FORMITEM_LAYOUT_VARIANTS } from './variants.js';
+import { SuffixWrapper, SuffixInputWrapper, Suffix } from './Suffix/Suffix.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _Group;
+
+const _excluded = ["leftLabel", "floatingLabel", "name", "id", "value", "inputComponent", "labelComponent", "feedbackComponent", "labelText", "truncateText", "hasError", "validationState", "validationMessage", "feedbackMessage", "readOnly", "focused", "type", "autoFocus", "disabled", "onChange", "onBlur", "onFocus", "onPaste", "onKeyUp", "extraInputProps", "extraContent", "leftAddon", "rightAddon", "required", "optional", "mask", "useSubfix", "suffix", "variant", "fitContent", "withHighlight", "containerProps"];
+
+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; }
+const blockName = 'form-item';
+const Wrapper = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    leftLabel,
+    variant,
+    fitContent,
+    withHighlight
+  } = _ref;
+  return {
+    'with-left-label': leftLabel,
+    'fit-content': fitContent,
+    [variant]: variant,
+    'with-highlight': withHighlight
+  };
+});
+const WrapperContent = aggregatedClasses('div')("".concat(blockName, "-content"));
+const WrapperContentGroup = aggregatedClasses('fieldset')("".concat(blockName, "-content"));
+
+const DSFormItemLayout = _ref2 => {
+  var _WrapperContentComp;
+
+  let {
+    leftLabel,
+    floatingLabel,
+    name,
+    id,
+    value,
+    inputComponent: InputComponent,
+    labelComponent: LabelComponent,
+    feedbackComponent: FeedbackComponent,
+    labelText,
+    truncateText,
+    hasError,
+    // orientation = 'vertical', // one of [ vertical, horizontal ]
+    validationState,
+    // one of [ success, error, warning ]
+    validationMessage,
+    feedbackMessage,
+    readOnly,
+    focused,
+    type,
+    autoFocus,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    onPaste,
+    onKeyUp,
+    extraInputProps,
+    extraContent,
+    leftAddon,
+    rightAddon,
+    required,
+    optional,
+    mask,
+    useSubfix,
+    suffix,
+    variant,
+    fitContent,
+    withHighlight,
+    containerProps
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  const isGroup = InputComponent.type === (_Group || (_Group = /*#__PURE__*/_jsx(Group, {}))).type;
+
+  const floatingLabelOverride = floatingLabel === 'UNSAFE';
+  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup; // group the input props to not duplicate it inside the specific inputComponent (floating or not)
+
+  const inputProps = _objectSpread(_objectSpread({}, extraInputProps), {}, {
+    disabled,
+    hasError: hasError || validationState === 'error',
+    id,
+    name,
+    type,
+    autoFocus,
+    onBlur,
+    onChange,
+    onFocus,
+    onPaste,
+    onKeyUp,
+    readOnly,
+    value,
+    mask,
+    useSubfix,
+    variant,
+    required
+  }, rest);
+
+  const renderInput = Input => leftAddon || rightAddon ? /*#__PURE__*/_jsx(DSInputGroup, {
+    leftAddon: leftAddon,
+    rightAddon: rightAddon,
+    variant: variant
+  }, void 0, Input) : Input;
+
+  const renderFloating = /*#__PURE__*/jsx(DSFloatingLabelInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    extraInputProps: extraInputProps,
+    focused: focused,
+    inputComponent: InputComponent,
+    labelComponent: LabelComponent,
+    labelText: labelText,
+    optional: optional,
+    required: required,
+    variant: variant
+  }));
+
+  const InputWithLabel = floatingLabelOverride ? renderInput(renderFloating) : /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(LabelComponent, {
+      htmlFor: id || name,
+      label: labelText,
+      optional: optional,
+      required: required,
+      isGroup: isGroup,
+      truncateText: truncateText
+    }), renderInput(getComponentFromProps(InputComponent, inputProps))]
+  });
+
+  if (suffix) {
+    return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({
+      classProps: {
+        disabled,
+        readOnly,
+        hasError,
+        leftLabel,
+        variant,
+        fitContent,
+        withHighlight
+      }
+    }, containerProps), {}, {
+      children: /*#__PURE__*/_jsx(SuffixWrapper, {
+        className: "suffix-wrapper"
+      }, void 0, /*#__PURE__*/_jsx(SuffixInputWrapper, {
+        className: "suffix-input-wrapper"
+      }, void 0, _WrapperContentComp || (_WrapperContentComp = /*#__PURE__*/_jsx(WrapperContentComp, {}, void 0, InputWithLabel, extraContent)), /*#__PURE__*/_jsx(FeedbackComponent, {
+        hasError: hasError,
+        text: validationState || hasError ? validationMessage : feedbackMessage
+      })), /*#__PURE__*/_jsx(Suffix, {
+        className: "suffix-label",
+        label: !!labelText,
+        withFeedback: Boolean(validationMessage || feedbackMessage)
+      }, void 0, suffix))
+    }));
+  }
+
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
+    classProps: {
+      disabled,
+      readOnly,
+      hasError,
+      leftLabel,
+      variant,
+      fitContent,
+      withHighlight
+    }
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/_jsx(WrapperContentComp, {}, void 0, InputWithLabel, extraContent), /*#__PURE__*/_jsx(FeedbackComponent, {
+      hasError: hasError,
+      text: validationState || hasError ? validationMessage : feedbackMessage
+    })]
+  }));
+};
+
+DSFormItemLayout.defaultProps = defaultProps;
+const DSFormItemLayoutWithSchema = describe(DSFormItemLayout);
+DSFormItemLayoutWithSchema.propTypes = props;
+
+export { DSFormItemLayoutWithSchema, DSFormItemLayout as default };

package/esm/FormItem/Error/DSError.js

@@ -0,0 +1,26 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+
+const DSError = _ref => {
+  let {
+    hasError = false,
+    errorText = 'Error'
+  } = _ref;
+  if (!hasError) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: "em-ds-error"
+  }, void 0, errorText);
+};
+
+const props = {
+  /** error state */
+  hasError: PropTypes.bool.description('error state'),
+
+  /** error label text */
+  errorText: PropTypes.string.description('error label text')
+};
+const DSErrorWithSchema = describe(DSError);
+DSErrorWithSchema.propTypes = props;
+
+export { DSErrorWithSchema, DSError as default };

package/esm/FormItem/Feedback.js

@@ -0,0 +1,19 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const blockName = 'form-item';
+const FeedbackSpan = aggregatedClasses('span')(blockName, 'feedback');
+
+const Feedback = _ref => {
+  let {
+    text,
+    hasError
+  } = _ref;
+  if (!text) return null;
+  return /*#__PURE__*/_jsx(FeedbackSpan, {
+    classProps: hasError
+  }, void 0, text);
+};
+
+export { Feedback as default };

package/esm/FormItem/Label/DSLabel.js

@@ -0,0 +1,32 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import RequiredMark from '../../RequiredMark/RequiredMark.js';
+
+const blockName = 'em-ds-label';
+const Text = aggregatedClasses('span')(blockName, 'text');
+
+const DSLabel = _ref => {
+  let {
+    children,
+    label,
+    htmlFor,
+    required,
+    optional,
+    truncateText = true,
+    isGroup = false
+  } = _ref;
+  const Tag = isGroup ? 'legend' : 'label';
+  return /*#__PURE__*/_jsx(Tag, {
+    className: "".concat(blockName).concat(isGroup ? " ".concat(blockName, "--group") : ''),
+    htmlFor: htmlFor
+  }, void 0, truncateText ? /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: children || label
+  }) : /*#__PURE__*/_jsx(Text, {}, void 0, label), /*#__PURE__*/_jsx(RequiredMark, {
+    optional: optional,
+    required: required
+  }));
+};
+
+export { DSLabel as default };

package/esm/FormItem/Suffix/Suffix.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+/* eslint-disable consistent-return */
+const Suffix = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-126c671-0"
+})(["height:2.16rem;align-items:center;display:flex;", ""], props => {
+  if (props.label && !props.withFeedback) {
+    return "\n      padding-top: 1.2rem;\n      ";
+  }
+
+  if (!props.label && !props.withFeedback) {
+    return "\n      padding-top: 1rem;\n      ";
+  }
+});
+const SuffixInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-126c671-1"
+})(["padding-right:0.32rem;flex:1;"]);
+const SuffixWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-126c671-2"
+})(["display:flex;align-items:center;"]);
+
+export { Suffix, SuffixInputWrapper, SuffixWrapper, Suffix as default };

package/esm/FormItem/ValidationFieldWrapper.js

@@ -0,0 +1,119 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { Component } from 'react';
+
+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; }
+class ValidationFieldWrapper extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value
+    };
+  }
+
+  componentDidMount() {
+    const {
+      value
+    } = this.state;
+    this.executeValidations(value);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      value
+    } = nextProps;
+    if (value === prevState.value) return null;
+    return _objectSpread(_objectSpread({}, prevState), {}, {
+      value
+    });
+  }
+
+  handleChange(e) {
+    const {
+      onChange
+    } = this.props;
+    this.setState({
+      value: e.target.value
+    });
+    if (onChange) onChange(e);
+  }
+
+  handleBlur(e) {
+    const {
+      onBlur,
+      validateOnBlur
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    if (validateOnBlur) this.executeValidations(value);
+    onBlur(e);
+  }
+
+  executeValidations(value) {
+    const {
+      validations
+    } = this.props;
+
+    if (validations && Array.isArray(validations)) {
+      if (!validations.some(validation => {
+        const {
+          error,
+          payload
+        } = validation({
+          value
+        });
+        if (error) this.setState({
+          validationMessage: payload,
+          state: error
+        });
+        return error;
+      })) {
+        this.setState({
+          hasError: false
+        });
+      }
+    }
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      value,
+      validationMessage,
+      validationState,
+      hasError
+    } = this.state;
+    return children({
+      value,
+      validationMessage,
+      validationState,
+      hasError,
+      onChange: this.handleChange,
+      onBlur: this.handleBlur
+    });
+  }
+
+}
+ValidationFieldWrapper.defaultProps = {
+  validateOnBlur: false,
+  validateOnChange: false,
+  name: '',
+  // name in context of the form
+  value: '',
+  validate: () => null,
+  onChange: () => null,
+  onBlur: () => null
+};
+
+export { ValidationFieldWrapper as default };