kitten-components/dist/javascripts/kitten/components/form/text-input-and-select.js

Front-end components library

'use strict';

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

var _TextInputAndSelect$d;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _selectWithState = require('kitten/components/form/select-with-state');

var _textInput = require('kitten/components/form/text-input');

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; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var TextInputAndSelect = function TextInputAndSelect(props) {
  var className = props.className,
      tiny = props.tiny,
      disabled = props.disabled,
      selectOptions = props.selectOptions,
      selectName = props.selectName,
      selectValue = props.selectValue,
      onSelectChange = props.onSelectChange,
      errorOnSelect = props.errorOnSelect,
      validOnSelect = props.validOnSelect,
      appendSelect = props.appendSelect,
      textInputProps = _objectWithoutProperties(props, ['className', 'tiny', 'disabled', 'selectOptions', 'selectName', 'selectValue', 'onSelectChange', 'errorOnSelect', 'validOnSelect', 'appendSelect']);

  // TODO: use another prop that digits to handle
  // `k-FormComposer__element--main` class.


  var inputWrapperClassName = (0, _classnames2.default)('k-FormComposer__element', {
    'k-FormComposer__element--main': !props.digits
  }, className);

  // TODO: handle key without currencyName prop
  var renderTextInputWrapper = function renderTextInputWrapper() {
    return _react2.default.createElement(
      'div',
      { className: inputWrapperClassName, key: props.currencyName + '1' },
      _react2.default.createElement(_textInput.TextInput, _extends({ tiny: tiny, disabled: disabled }, textInputProps))
    );
  };

  var renderSelectWrapper = function renderSelectWrapper() {
    return _react2.default.createElement(
      'div',
      { className: 'k-FormComposer__element', key: props.currencyName + '2' },
      _react2.default.createElement(_selectWithState.SelectWithState, {
        name: selectName,
        options: selectOptions,
        value: selectValue,
        tiny: tiny,
        onInputChange: onSelectChange,
        error: errorOnSelect,
        valid: validOnSelect,
        disabled: disabled
      })
    );
  };

  var renderTextInputAndSelect = function renderTextInputAndSelect() {
    if (appendSelect) {
      return [renderSelectWrapper(), renderTextInputWrapper()];
    }

    return [renderTextInputWrapper(), renderSelectWrapper()];
  };

  return _react2.default.createElement(
    'div',
    { className: 'k-FormComposer' },
    renderTextInputAndSelect()
  );
};

exports.TextInputAndSelect = TextInputAndSelect;
TextInputAndSelect.defaultProps = (_TextInputAndSelect$d = {
  tiny: false,
  disabled: false,
  selectOptions: [{ value: 'myValue', label: 'My label' }],
  selectName: null,
  selectValue: null,
  onSelectChange: function onSelectChange() {},
  errorOnSelect: false,
  validOnSelect: false
}, _defineProperty(_TextInputAndSelect$d, 'disabled', false), _defineProperty(_TextInputAndSelect$d, 'digits', null), _defineProperty(_TextInputAndSelect$d, 'appendSelect', false), _TextInputAndSelect$d);