kitten-components/dist/javascripts/kitten/components/form/text-input-with-unit-form.js

Front-end components library

'use strict';

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

var _button;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _marger = require('kitten/components/layout/marger');

var _grid = require('kitten/components/grid/grid');

var _textInputWithUnit = require('kitten/components/form/text-input-with-unit');

var _text = require('kitten/components/typography/text');

var _label = require('kitten/components/form/label');

var _button2 = require('kitten/components/buttons/button');

var _screenConfig = require('kitten/constants/screen-config');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Button = (0, _radium2.default)(_button2.Button);
var Grid = (0, _radium2.default)(_grid.Grid);
var Marger = (0, _radium2.default)(_marger.Marger);

var TextInputWithUnitForm = exports.TextInputWithUnitForm = function TextInputWithUnitForm(_ref) {
  var align = _ref.align,
      formIsDisabled = _ref.formIsDisabled,
      inputId = _ref.inputId,
      inputPlaceholder = _ref.inputPlaceholder,
      inputUnit = _ref.inputUnit,
      inputLabel = _ref.inputLabel,
      inputDefaultValue = _ref.inputDefaultValue,
      inputIsOnError = _ref.inputIsOnError,
      errorMessage = _ref.errorMessage,
      buttonLabel = _ref.buttonLabel,
      onButtonMouseEnter = _ref.onButtonMouseEnter,
      onButtonMouseLeave = _ref.onButtonMouseLeave,
      onFormSubmit = _ref.onFormSubmit,
      onInputBlur = _ref.onInputBlur,
      onInputChange = _ref.onInputChange,
      onInputFocus = _ref.onInputFocus,
      version = _ref.version;

  var formStyle = align === 'center' && styles.form.centered;
  var isTinyVersion = version === 'tiny';
  var gridColProps = isTinyVersion ? {} : { 'col-xs': 7, 'col-m': 5 };
  var buttonStyles = isTinyVersion ? styles.button.tinyVersion : styles.button;

  return _react2.default.createElement(
    'form',
    { onSubmit: onFormSubmit, style: styles.form.grid },
    _react2.default.createElement(
      Marger,
      { top: '3', bottom: !inputIsOnError ? 3 : 1 },
      _react2.default.createElement(
        Grid,
        { style: formStyle },
        _react2.default.createElement(
          _grid.GridCol,
          gridColProps,
          _react2.default.createElement(
            Marger,
            { bottom: '1.5' },
            _react2.default.createElement(
              _label.Label,
              { size: 'micro', htmlFor: inputId },
              inputLabel
            )
          ),
          _react2.default.createElement(
            Marger,
            { top: '1.5', bottom: inputIsOnError ? 1 : null },
            _react2.default.createElement(_textInputWithUnit.TextInputWithUnit, {
              error: inputIsOnError,
              id: inputId,
              type: 'number',
              placeholder: inputPlaceholder,
              unit: inputUnit,
              disabled: formIsDisabled,
              onBlur: onInputBlur,
              onChange: onInputChange,
              onFocus: onInputFocus,
              defaultValue: inputDefaultValue,
              autoComplete: 'off'
            })
          ),
          inputIsOnError && _react2.default.createElement(
            Marger,
            { top: '1' },
            _react2.default.createElement(
              _text.Text,
              { size: 'micro', color: 'error', weight: 'regular' },
              errorMessage
            )
          )
        )
      )
    ),
    _react2.default.createElement(
      Marger,
      { style: formStyle },
      _react2.default.createElement(
        _radium.StyleRoot,
        { style: buttonStyles },
        _react2.default.createElement(
          Button,
          {
            size: 'big',
            modifier: 'helium',
            type: 'submit',
            'aria-label': buttonLabel,
            style: buttonStyles,
            onMouseEnter: onButtonMouseEnter,
            onMouseLeave: onButtonMouseLeave,
            disabled: formIsDisabled
          },
          buttonLabel
        )
      )
    )
  );
};

TextInputWithUnitForm.propTypes = {
  inputId: _propTypes2.default.string.isRequired,
  inputPlaceholder: _propTypes2.default.string,
  inputLabel: _propTypes2.default.string.isRequired,
  inputUnit: _propTypes2.default.string.isRequired,
  inputDefaultValue: _propTypes2.default.string,
  onInputBlur: _propTypes2.default.func,
  onInputChange: _propTypes2.default.func,
  onInputFocus: _propTypes2.default.func,
  inputIsOnError: _propTypes2.default.bool,
  errorMessage: _propTypes2.default.string,

  buttonLabel: _propTypes2.default.string.isRequired,
  onButtonMouseEnter: _propTypes2.default.func,
  onButtonMouseLeave: _propTypes2.default.func,

  align: _propTypes2.default.string,
  formIsDisabled: _propTypes2.default.bool,
  onFormSubmit: _propTypes2.default.func,

  version: _propTypes2.default.oneOf(['default', 'tiny'])
};

TextInputWithUnitForm.defaultProps = {
  inputPlaceholder: '',
  inputDefaultValue: '',
  onInputBlur: function onInputBlur() {},
  onInputChange: function onInputChange() {},
  onInputFocus: function onInputFocus() {},
  inputIsOnError: false,
  errorMessage: '',
  onButtonMouseEnter: function onButtonMouseEnter() {},
  onButtonMouseLeave: function onButtonMouseLeave() {},
  formIsDisabled: false,
  onFormSubmit: function onFormSubmit() {},
  align: 'center',
  version: 'default'
};

var styles = {
  form: {
    grid: {
      margin: 0,
      padding: 0
    },

    centered: {
      display: 'flex',
      justifyContent: 'center'
    }
  },

  button: (_button = {}, _defineProperty(_button, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
    width: '100%'
  }), _defineProperty(_button, 'tinyVersion', {
    width: '100%'
  }), _button)
};