formit/lib/renderFormElement.js

A speedy way to create HTML forms.

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import { isNodeElement, el, addClass, addPropsToNode } from './utilities/dom';
import { createFormTokenName, createFormId } from './utilities/id';
import { createFragment, createField, createLabel } from './utilities/elements';

const renderFormElement = (props, index, options = {}, isNested = false) => {

  const {
    classNames,
    shouldNestFieldWithinLabel
  } = options;

  const {
    fieldGroupClassName,
    fieldClassName,
    labelClassName,
    nestedFieldClassName,
    nestedGroupClassName,
    submitClassName
  } = classNames;

  const node = el('div');
  addClass(node, createFormTokenName(`FieldGroup`));
  addClass(node, createFormTokenName(`id-${index}`));
  addClass(node, fieldGroupClassName);

  if (Array.isArray(props)) {
    const nodes = props.map((p, i) => renderFormElement(p, `${index}-${i}`, options, true));
    if (nodes) {
      nodes.forEach(n => node.appendChild(n));
    }
    addClass(node, 'has-fieldGroups');
    addClass(node, nestedGroupClassName);
    return node;
  }

  const { html, label, type } = props,
        rest = _objectWithoutProperties(props, ['html', 'label', 'type']);
  const id = createFormId(index);
  const labelNode = createLabel(label, {
    class: labelClassName,
    for: id
  });
  const fieldNode = createField(_extends({
    type,
    id
  }, rest, {
    fieldClassName,
    submitClassName
  }));

  if (!labelNode && !fieldNode) return null;

  maybeAddLabel(node, labelNode);
  maybeAddField(node, labelNode, fieldNode, shouldNestFieldWithinLabel);
  maybeAddHTML(node, html);

  if (isNested) {
    addClass(node, nestedFieldClassName);
    addClass(node, 'is-nested');
  }

  return node;
};

const maybeAddLabel = (node, label) => {
  if (label) {
    node.appendChild(label);
  }
};

const maybeAddField = (node, label, field, shouldNest = true) => {
  if (label && shouldNest) {
    label.appendChild(field);
  } else {
    node.appendChild(field);
  }
};

const maybeAddHTML = (node, html) => {
  if (html && (typeof html === 'string' || isNodeElement(html))) {
    const htmlFragment = typeof html === 'string' ? createFragment(html) : html;
    if (htmlFragment) {
      node.appendChild(htmlFragment);
    }
  }
};

export default renderFormElement;