@dmartss/ui/lib/form.js

UI components for my projects

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports.Form = Form;
exports.Input = Input;
exports.Select = Select;
exports.Fieldset = Fieldset;
exports.Legend = Legend;

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mix = require('@dmartss/polish/lib/mix');

var _mix2 = _interopRequireDefault(_mix);

var _lighten = require('@dmartss/polish/lib/lighten');

var _lighten2 = _interopRequireDefault(_lighten);

var _palette = require('@dmartss/palette');

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

/**
 * @function Form
 * @param {Object} props
 * @param {Object} props.children
 * @param {Boolean} props.horizontal
 * @param {Object} [props.props={}]
 */
function Form(_ref) {
  var children = _ref.children,
      horizontal = _ref.horizontal,
      props = (0, _objectWithoutProperties3.default)(_ref, ['children', 'horizontal']);

  return _react2.default.createElement(
    'form',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['1194606164', [horizontal ? 'row' : 'column']]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '1194606164',
      css: 'form.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:' + (horizontal ? 'row' : 'column') + ';-ms-flex-direction:' + (horizontal ? 'row' : 'column') + ';flex-direction:' + (horizontal ? 'row' : 'column') + ';}',
      dynamic: [horizontal ? 'row' : 'column']
    })
  );
}

/**
 * @function Input
 * @param {Object} props
 */
/** @module ui/form */
function Input(props) {
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement('input', (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['858536940', [_palette.gray, _palette.primary, _palette.danger, (0, _lighten2.default)(0.3, _palette.gray)]]]) + ' ' + (props.className != null && props.className || '')
    })),
    _react2.default.createElement(_style2.default, {
      styleId: '858536940',
      css: 'input.__jsx-style-dynamic-selector{background-color:none;border:1px solid ' + _palette.gray + ';border-radius:4px;outline:none;font-size:1em;padding:0.5em;margin:0.5em 0;}input.__jsx-style-dynamic-selector:focus{border-color:' + _palette.primary + ';}input.__jsx-style-dynamic-selector:user-error{border-color:' + _palette.danger + ';}input.__jsx-style-dynamic-selector:disabled{background-color:' + (0, _lighten2.default)(0.3, _palette.gray) + ';}',
      dynamic: [_palette.gray, _palette.primary, _palette.danger, (0, _lighten2.default)(0.3, _palette.gray)]
    })
  );
}

/**
 * @function Select
 * @param {Object} props
 * @param {Object} props.children
 * @param {String} [props.backColor=secondary]
 * @param {String} [props.textColor=primary]
 * @param {Object} [props.props={}]
 */
function Select(_ref2) {
  var children = _ref2.children,
      _ref2$backColor = _ref2.backColor,
      backColor = _ref2$backColor === undefined ? _palette.secondary : _ref2$backColor,
      _ref2$textColor = _ref2.textColor,
      textColor = _ref2$textColor === undefined ? _palette.primary : _ref2$textColor,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['children', 'backColor', 'textColor']);

  return _react2.default.createElement(
    'label',
    {
      className: _style2.default.dynamic([['3635187052', [backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _lighten2.default)(0.3, (0, _mix2.default)(0.5, backColor, textColor)), backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor]]])
    },
    _react2.default.createElement(
      'select',
      (0, _extends3.default)({}, props, {
        className: _style2.default.dynamic([['3635187052', [backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _lighten2.default)(0.3, (0, _mix2.default)(0.5, backColor, textColor)), backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor]]]) + ' ' + (props.className != null && props.className || '')
      }),
      children
    ),
    _react2.default.createElement(
      'span',
      {
        className: _style2.default.dynamic([['3635187052', [backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _lighten2.default)(0.3, (0, _mix2.default)(0.5, backColor, textColor)), backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor]]])
      },
      '\u25BD'
    ),
    _react2.default.createElement(_style2.default, {
      styleId: '3635187052',
      css: 'select.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:' + backColor + ';border:1px solid ' + (0, _mix2.default)(0.5, backColor, textColor) + ';border-radius:5px 0 0 5px;color:' + textColor + ';font-size:1em;outline:none;padding:0.5em 0.75em;text-align:center;}select.__jsx-style-dynamic-selector:focus{border-color:' + textColor + ';}select.__jsx-style-dynamic-selector:user-error{border-color:' + _palette.danger + ';}select.__jsx-style-dynamic-selector:disabled{background-color:' + (0, _lighten2.default)(0.3, (0, _mix2.default)(0.5, backColor, textColor)) + ';}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}span.__jsx-style-dynamic-selector{background:' + backColor + ';border:1px solid ' + (0, _mix2.default)(0.5, backColor, textColor) + ';border-left:0;border-radius:0 5px 5px 0;color:' + textColor + ';display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5em;}',
      dynamic: [backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _lighten2.default)(0.3, (0, _mix2.default)(0.5, backColor, textColor)), backColor, (0, _mix2.default)(0.5, backColor, textColor), textColor]
    })
  );
}

/**
 * @function Fieldset
 * @param {Object} props
 * @param {Object} props.children
 * @param {String} [props.legend]
 * @param {Object} [props.style={}]
 * @param {String} [props.color=primary]
 * @param {Object} [props.props={}]]
 */
function Fieldset(_ref3) {
  var children = _ref3.children,
      legend = _ref3.legend,
      _ref3$style = _ref3.style,
      style = _ref3$style === undefined ? {} : _ref3$style,
      _ref3$color = _ref3.color,
      color = _ref3$color === undefined ? _palette.primary : _ref3$color,
      props = (0, _objectWithoutProperties3.default)(_ref3, ['children', 'legend', 'style', 'color']);

  return _react2.default.createElement(
    'fieldset',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['738720098', [_palette.primary]]]) + ' ' + (props.className != null && props.className || '')
    }),
    legend && _react2.default.createElement(
      Legend,
      null,
      legend
    ),
    _react2.default.createElement(
      'div',
      { style: style, className: _style2.default.dynamic([['738720098', [_palette.primary]]])
      },
      children
    ),
    _react2.default.createElement(_style2.default, {
      styleId: '738720098',
      css: 'fieldset.__jsx-style-dynamic-selector{border-style:solid;border-color:' + _palette.primary + ';}div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}',
      dynamic: [_palette.primary]
    })
  );
}

/**
 * @function Legend
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
function Legend(_ref4) {
  var children = _ref4.children,
      props = (0, _objectWithoutProperties3.default)(_ref4, ['children']);

  return _react2.default.createElement(
    'legend',
    (0, _extends3.default)({}, props, {
      className: 'jsx-946743209' + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '946743209',
      css: 'legend.jsx-946743209{font-size:1.25em;font-weight:lighter;margin:0.25em 0;}'
    })
  );
}