react-misc-toolbox/dist/InputBox.js

- [ ] diagramexample | optimize creating from blank slate

"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);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  background: none;\n  color: #dadada;\n  padding: 0rem 0 0.675rem 0rem;\n  display: block;\n  width: ", ";\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid #dadada;\n  :valid {\n    color: black;\n  }\n  :focus {\n    outline: none;\n  }\n  &::placeholder {\n    font-family: \"PT Sans\";\n  }\n  &:focus ~ ", ", &:valid ~ ", " {\n    /* top: -15px;\n    left: 0px; */\n    font-size: 3.75rem;\n    color: #224233;\n  }\n"], ["\n  background: none;\n  color: #dadada;\n  padding: 0rem 0 0.675rem 0rem;\n  display: block;\n  width: ", ";\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid #dadada;\n  :valid {\n    color: black;\n  }\n  :focus {\n    outline: none;\n  }\n  &::placeholder {\n    font-family: \"PT Sans\";\n  }\n  &:focus ~ ", ", &:valid ~ ", " {\n    /* top: -15px;\n    left: 0px; */\n    font-size: 3.75rem;\n    color: #224233;\n  }\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  margin-top: 0.25rem;\n  font-size: 1.25rem;\n  width: 25.5rem;\n"], ["\n  margin-top: 0.25rem;\n  font-size: 1.25rem;\n  width: 25.5rem;\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  position: relative;\n  display: flex;\n\n  :before {\n    content: \"\";\n\n    height: 1px;\n    width: 0rem;\n    bottom: 0px;\n    position: absolute;\n    /* background: #424242; */\n    background: #d93025;\n    transition: 300ms ease all;\n    left: 0%;\n    ", ":focus ~ & {\n      width: ", ";\n    }\n    ", ":valid ~ & {\n      background: black;\n      height: 2px;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  :before {\n    content: \"\";\n\n    height: 1px;\n    width: 0rem;\n    bottom: 0px;\n    position: absolute;\n    /* background: #424242; */\n    background: #d93025;\n    transition: 300ms ease all;\n    left: 0%;\n    ", ":focus ~ & {\n      width: ", ";\n    }\n    ", ":valid ~ & {\n      background: black;\n      height: 2px;\n    }\n  }\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)([""], [""]),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(["\n  color: #d93025;\n"], ["\n  color: #d93025;\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require("./helperFunctions");

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _StyledForm = require("./StyledForm");

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

var INPUT = (0, _styledComponents2.default)("input")(_templateObject, function (_ref) {
  var width = _ref.width;
  return width;
}, LABEL, LABEL);

var SUBLABEL = (0, _styledComponents2.default)("div")(_templateObject2);

var BAR = (0, _styledComponents2.default)("div")(_templateObject3, INPUT, function (_ref2) {
  var width = _ref2.width;
  return width;
}, INPUT);

var LABEL = (0, _styledComponents2.default)(_StyledForm.INPUTBOX.LABEL)(_templateObject4);
var ASTERISK = (0, _styledComponents2.default)("span")(_templateObject5);

var getClassName = function getClassName(className, primary, secondary) {
  return (0, _helperFunctions.advancedMulti)({
    unflattenedBases: ["form", className],
    suffixes: ["__" + primary, "__" + secondary + "__" + primary]
  });
};

var InputBox = function InputBox(_ref3) {
  var externalInputRef = _ref3.externalInputRef,
      id = _ref3.id,
      _ref3$border = _ref3.border,
      border = _ref3$border === undefined ? "1px solid" : _ref3$border,
      className = _ref3.className,
      placeholder = _ref3.placeholder,
      value = _ref3.value,
      onBlur = _ref3.onBlur,
      onChange = _ref3.onChange,
      _ref3$margin = _ref3.margin,
      margin = _ref3$margin === undefined ? 0 : _ref3$margin,
      _ref3$width = _ref3.width,
      width = _ref3$width === undefined ? "100%" : _ref3$width,
      _ref3$label = _ref3.label,
      label = _ref3$label === undefined ? null : _ref3$label,
      _ref3$sublabel = _ref3.sublabel,
      sublabel = _ref3$sublabel === undefined ? null : _ref3$sublabel,
      _ref3$required = _ref3.required,
      required = _ref3$required === undefined ? true : _ref3$required,
      _ref3$autoFocus = _ref3.autoFocus,
      autoFocus = _ref3$autoFocus === undefined ? false : _ref3$autoFocus,
      autocomplete = _ref3.autocomplete,
      children = _ref3.children,
      props = (0, _objectWithoutProperties3.default)(_ref3, ["externalInputRef", "id", "border", "className", "placeholder", "value", "onBlur", "onChange", "margin", "width", "label", "sublabel", "required", "autoFocus", "autocomplete", "children"]);

  var getLocalClassName = function getLocalClassName(primary) {
    return getClassName(className, primary, "inputbox");
  };
  var renderAsterisk = function renderAsterisk() {
    return required && _react2.default.createElement(
      ASTERISK,
      null,
      " *"
    );
  };
  var ref = externalInputRef ? externalInputRef : (0, _react.useRef)(null);
  var renderLabel = function renderLabel() {
    return label && _react2.default.createElement(
      LABEL,
      { className: getLocalClassName("label") },
      label,
      renderAsterisk()
    );
  };
  var renderSublabel = function renderSublabel() {
    return sublabel && _react2.default.createElement(
      SUBLABEL,
      { className: getLocalClassName("sublabel") },
      sublabel
    );
  };
  return _react2.default.createElement(
    _react.Fragment,
    null,
    renderLabel(),
    _react2.default.createElement(INPUT, (0, _extends3.default)({
      ref: ref,
      id: id,
      onBlur: onBlur,
      className: getLocalClassName("input"),
      width: width,
      placeholder: placeholder,
      value: value,
      onChange: onChange,
      type: "text",
      required: required,
      autoFocus: false,
      autocomplete: autocomplete
    }, props)),
    _react2.default.createElement(BAR, { className: getLocalClassName("bar"), width: width }),
    renderSublabel(),
    children
  );
};

exports.default = _react2.default.memo(InputBox);