useformbee/dist/hooks/useFormBee.js

useFormBee is a custom react hook that helps handle form input, validations and other similar functionalities

"use strict";

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

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

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

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

var _react = require("react");

var _validatorjs = _interopRequireDefault(require("validatorjs"));

var _formatter = _interopRequireDefault(require("../helpers/formatter"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var useForm = function useForm(_ref) {
  var callback = _ref.callback,
      rules = _ref.rules;

  var initialState = function initialState() {
    var state = {};
    Object.keys(rules).forEach(function (key) {
      state[key] = '';
    });
    return state;
  };

  var _useState = (0, _react.useState)(initialState()),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      values = _useState2[0],
      setValues = _useState2[1];

  var _useState3 = (0, _react.useState)({}),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      errors = _useState4[0],
      setErrors = _useState4[1];

  _validatorjs["default"].setAttributeFormatter(function (attribute) {
    return (0, _formatter["default"])(attribute);
  });

  var validateOnSubmit = function validateOnSubmit() {
    var hasError = true;

    var newErrors = _objectSpread({}, errors);

    Object.keys(rules).forEach(function (key) {
      var validate = function validate(name, value) {
        var validation = new _validatorjs["default"]((0, _defineProperty2["default"])({}, name, value), (0, _defineProperty2["default"])({}, name, rules[name]));
        var errorMessage = validation.fails() && validation.errors.first(name);

        if (errorMessage) {
          newErrors[name] = errorMessage;
          hasError = false;
        } else {
          delete newErrors[name];
        }
      };

      if (Array.isArray(values[key])) {
        values[key].forEach(function (value) {
          return validate(key, value);
        });
      } else {
        validate(key, values[key]);
      }
    });
    setErrors(_objectSpread({}, newErrors));
    return hasError;
  };

  var errorHandler = function errorHandler(name, value, message) {
    setErrors(_objectSpread({}, errors, (0, _defineProperty2["default"])({}, name, message)));
    setValues(_objectSpread({}, values, (0, _defineProperty2["default"])({}, name, value)));
    return false;
  };

  var validateOnChange = function validateOnChange(event) {
    var target = event.target;
    var required = target.required,
        name = target.name,
        type = target.type;
    var value = target.value;

    if (type === 'checkbox') {
      value = target.checked;

      if (required && !value) {
        return errorHandler(name, value, "The ".concat((0, _formatter["default"])(name), " must be accepted."));
      }
    } else if (required && value.trim() === '') {
      return errorHandler(name, value, "The ".concat((0, _formatter["default"])(name), " field cannot be empty."));
    }

    var validation = new _validatorjs["default"]((0, _defineProperty2["default"])({}, name, value), (0, _defineProperty2["default"])({}, name, rules[name]));

    if (validation.fails()) {
      return errorHandler(name, value, validation.errors.first(name));
    }

    return true;
  };

  var getMultipleSelection = function getMultipleSelection(event) {
    var options = event.target.options;
    var selected = Object.entries(options).filter(function (_ref6) {
      var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
          option = _ref7[1];

      return option.selected;
    });
    var value = selected.map(function (_ref8) {
      var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
          option = _ref9[1];

      return option.value;
    });
    return value;
  };

  var handleChange = function handleChange(event) {
    var target = event.target;

    if (validateOnChange(event)) {
      var value = target.value;

      if (target.type === 'select-multiple') {
        value = getMultipleSelection(event);
      }

      if (target.type === 'checkbox') {
        value = target.checked;
      }

      setValues(_objectSpread({}, values, (0, _defineProperty2["default"])({}, target.name, value)));
      delete errors[target.name];
      setErrors(_objectSpread({}, errors));
      return true;
    }

    return false;
  };

  var sanitizeData = function sanitizeData() {
    var data = {};
    Object.keys(values).forEach(function (field) {
      if (Array.isArray(values[field])) {
        data[field] = values[field].map(function (value) {
          return value.trim();
        });
      } else if (typeof values[field] === 'boolean') {
        data[field] = values[field];
      } else {
        data[field] = values[field].trim();
      }
    });
    return data;
  };

  var handleSubmit = function handleSubmit(event) {
    event.preventDefault();

    if (validateOnSubmit()) {
      var data = sanitizeData();
      return callback(data);
    }

    return false;
  };

  var handleReset = function handleReset() {
    setValues(initialState());
    setErrors({});
  };

  return {
    values: values,
    handleChange: handleChange,
    handleSubmit: handleSubmit,
    errors: errors,
    handleReset: handleReset
  };
};

var _default = useForm;
exports["default"] = _default;