@elliemae/ds-form 3.0.0-next.2 → 3.0.0-next.6

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -1,192 +0,0 @@
-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

@@ -1,47 +0,0 @@
-/* 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

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

package/esm/FormItem/DSFormItemLayout.js

@@ -1,196 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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 };