@sergiodxa/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 _polished = require("polished");

var _palette = require("@sergiodxa/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([["3080423022", [horizontal ? "row" : "column"]]]) + " " + (props.className != null && props.className || "")
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: "3080423022",
      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([["907417217", [_palette.gray, _palette.primary, _palette.danger, (0, _polished.lighten)(0.3, _palette.gray)]]]) + " " + (props.className != null && props.className || "")
    })),
    _react2.default.createElement(_style2.default, {
      styleId: "907417217",
      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, _polished.lighten)(0.3, _palette.gray) + ";}",
      dynamic: [_palette.gray, _palette.primary, _palette.danger, (0, _polished.lighten)(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([["2358470763", [backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _polished.lighten)(0.3, (0, _polished.mix)(0.5, backColor, textColor)), backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor]]])
    },
    _react2.default.createElement(
      "select",
      (0, _extends3.default)({}, props, {
        className: _style2.default.dynamic([["2358470763", [backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _polished.lighten)(0.3, (0, _polished.mix)(0.5, backColor, textColor)), backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor]]]) + " " + (props.className != null && props.className || "")
      }),
      children
    ),
    _react2.default.createElement(
      "span",
      {
        className: _style2.default.dynamic([["2358470763", [backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _polished.lighten)(0.3, (0, _polished.mix)(0.5, backColor, textColor)), backColor, (0, _polished.mix)(0.5, backColor, textColor), textColor]]])
      },
      "\u25BD"
    ),
    _react2.default.createElement(_style2.default, {
      styleId: "2358470763",
      css: "select.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:" + backColor + ";border:1px solid " + (0, _polished.mix)(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, _polished.lighten)(0.3, (0, _polished.mix)(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, _polished.mix)(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, _polished.mix)(0.5, backColor, textColor), textColor, textColor, _palette.danger, (0, _polished.lighten)(0.3, (0, _polished.mix)(0.5, backColor, textColor)), backColor, (0, _polished.mix)(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;}"
    })
  );
}