react-misc-toolbox/dist/InputBox.js

'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 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, ['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 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)({
      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);