@brightleaf/elements/lib/form/form.js

React UI elements styled with Bulma CSS

"use strict";

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

/**
 * Form Component.
 *
 */
var Form = (0, _react.forwardRef)(function (_ref, ref) {
  var name = _ref.name,
      _onSubmit = _ref.onSubmit,
      children = _ref.children,
      className = _ref.className;
  var mapped = Array.isArray(children) ? children.map(function (child) {
    var displayName = child.type ? child.type.displayName : false;
    if (!displayName && !child.ref) return child;
    return Object.assign({}, child, {
      ref: (0, _react.createRef)(),
      displayName: displayName
    });
  }) : [Object.assign({}, children, {
    ref: (0, _react.createRef)(),
    displayName: children.type.displayName
  })];
  var formElements = mapped.map(function (fEl, index) {
    return {
      name: fEl.props ? fEl.props.name : "".concat(fEl.name, "-").concat(index),
      ref: fEl.ref,
      displayName: fEl.displayName
    };
  });
  var formRef = (0, _react.useRef)();
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      reset: function reset() {
        formRef.current.reset();
        var ins = formRef.current.querySelectorAll('input');
        var els = Array.from(ins);
        els.forEach(function (e) {
          return e.value = '';
        });
      }
    };
  });
  return _react.default.createElement("form", {
    ref: formRef,
    name: name,
    className: (0, _classnames.default)('form', className),
    onSubmit: function onSubmit(e) {
      e.preventDefault();
      var values = {};

      if (formElements.length === 1) {
        values = formElements[0].ref.current.getValues();
      }

      formElements.forEach(function (el) {
        if (!el.name) {
          return;
        }

        if (!el.ref) {
          return;
        }

        if (el.ref && (el.ref.current.isFieldset || el.ref.current.isRow)) {
          Object.assign(values, el.ref.current.getValues());
        } else {
          values[el.name] = el.ref.current.getValue ? el.ref.current.getValue() : el.ref.current.value;
        }
      });
      e.preventDefault();

      var flattenObject = function flattenObject(obj) {
        var flattened = {};
        Object.keys(obj).forEach(function (key) {
          if (_typeof(obj[key]) === 'object' && obj[key] !== null) {
            Object.assign(flattened, flattenObject(obj[key]));
          } else {
            flattened[key] = obj[key];
          }
        });
        return flattened;
      };

      _onSubmit(flattenObject(values));
    }
  }, mapped);
});
exports.Form = Form;
Form.displayName = 'Brightleaf.Elements(Form)';
Form.propTypes = {
  name: _propTypes.default.string.isRequired,
  onSubmit: _propTypes.default.func.isRequired
};
var _default = Form;
exports.default = _default;