@r3l/app/lib/modules/styled/form/reduxformfield.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _web = require("../web");

var _ = require("./..");

ReduxFormField.propTypes = {
  error: _propTypes.default.string,
  type: _propTypes.default.string,
  name: _propTypes.default.string,
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
  placeholder: _propTypes.default.string,
  meta: _propTypes.default.object,
  input: _propTypes.default.object,
  autocomplete: _propTypes.default.string
};
ReduxFormField.defaultProps = {
  autocomplete: null
};

function ReduxFormField(_ref) {
  var label = _ref.label,
      type = _ref.type,
      input = _ref.input,
      meta = _ref.meta,
      placeholder = _ref.placeholder,
      autocomplete = _ref.autocomplete,
      form = _ref.form;
  var dirty = meta.dirty,
      touched = meta.touched,
      error = meta.error,
      warning = meta.warning;
  return /*#__PURE__*/_react.default.createElement(_.View, {
    sx: {
      mt: 3
    }
  }, label ? /*#__PURE__*/_react.default.createElement("label", {
    "html-for": name
  }, /*#__PURE__*/_react.default.createElement(_.LinkFont, {
    sx: {
      color: 'black'
    }
  }, label)) : null, /*#__PURE__*/_react.default.createElement(_web.Input, (0, _extends2.default)({}, input, {
    type: type,
    placeholder: placeholder || label,
    autoComplete: autocomplete,
    border: 1,
    p: "2 2",
    mt: 1,
    onBlur: function onBlur(event) {
      var _form$mutators;

      input.onBlur(event); // our mutator accepts variadic field names on which validation will be triggered
      // to trigger validation on more fields, simply pass all its names

      form === null || form === void 0 ? void 0 : (_form$mutators = form.mutators) === null || _form$mutators === void 0 ? void 0 : _form$mutators.triggerValidation(input.name);
    }
  })), (dirty || touched) && (error && /*#__PURE__*/_react.default.createElement(_.SecondaryText, {
    sx: {
      color: 'red',
      mt: 4.001
    }
  }, error) || warning && /*#__PURE__*/_react.default.createElement(_.SecondaryText, {
    sx: {
      color: 'red'
    }
  }, warning)));
}

var _default = ReduxFormField;
exports.default = _default;
//# sourceMappingURL=reduxformfield.component.js.map