formit/lib/utilities/elements.js

A speedy way to create HTML forms.

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 { el, addClass, addPropsToNode } from './dom';
import { createFormTokenName, createFormId } from './id';

export const createFragment = html => {
  const fragment = document.createDocumentFragment();
  const containerNode = el('div');
  containerNode.innerHTML = html;
  Array.from(containerNode.childNodes).forEach(n => {
    fragment.appendChild(n);
  });

  return fragment;
};

const createField = props => {
  const {
    fieldClassName,
    submitClassName,
    type
  } = props,
        rest = _objectWithoutProperties(props, ['fieldClassName', 'submitClassName', 'type']);
  const nodeType = type.toLowerCase() === 'textarea' ? 'textarea' : 'input';
  const node = el(nodeType);
  if (nodeType !== 'textarea') {
    node.type = type;
  }
  const className = type === 'submit' ? submitClassName : fieldClassName;

  addPropsToNode(node, rest);
  addClass(node, createFormTokenName('Field'));
  addClass(node, className);

  return node;
};

export { createField };
const createLabel = (label, props) => {
  if (!label) return;
  const node = el('label');
  const rest = _objectWithoutProperties(props, []);
  addPropsToNode(node, rest);
  addClass(node, createFormTokenName('Label'));

  const labelNode = el('div');
  labelNode.innerHTML = label;
  addClass(labelNode, createFormTokenName('Label__text'));
  node.appendChild(labelNode);

  return node;
};
export { createLabel };