@lyra/components/lib/buttons/InInput.js

Basic UX components

'use strict';

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

var _omit3 = require('lodash/omit');

var _omit4 = _interopRequireDefault(_omit3);

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactInk = require('react-ink');

var _reactInk2 = _interopRequireDefault(_reactInk);

var _inInputStyle = require('part:@lyra/components/buttons/in-input-style');

var _inInputStyle2 = _interopRequireDefault(_inInputStyle);

var _spinner = require('part:@lyra/components/loading/spinner');

var _spinner2 = _interopRequireDefault(_spinner);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }

class InInputButton extends _react2.default.Component {

  constructor(...args) {
    super(...args);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.props.onClick(event);
  }

  render() {
    var _omit2 = (0, _omit4.default)(this.props, 'onAction');

    const kind = _omit2.kind,
          ripple = _omit2.ripple,
          inverted = _omit2.inverted,
          colored = _omit2.colored,
          icon = _omit2.icon,
          loading = _omit2.loading,
          className = _omit2.className,
          rest = _objectWithoutProperties(_omit2, ['kind', 'ripple', 'inverted', 'colored', 'icon', 'loading', 'className']);

    const Icon = icon;

    if (!_inInputStyle2.default[kind] && kind) {
      console.error(`There is no ${kind} button`); // eslint-disable-line no-console
    }

    const style = `
      ${className || ''}
      ${inverted && _inInputStyle2.default.inverted || ''}
      ${_inInputStyle2.default[kind] ? _inInputStyle2.default[kind] : _inInputStyle2.default.root}
      ${colored && _inInputStyle2.default.colored ? _inInputStyle2.default.colored : ''}
      ${Icon && _inInputStyle2.default.hasIcon ? _inInputStyle2.default.hasIcon : ''}
    `;

    return _react2.default.createElement(
      'button',
      _extends({}, rest, {
        className: style,
        type: 'button',
        onClick: this.handleClick
      }),
      _react2.default.createElement(
        'span',
        { className: _inInputStyle2.default.content },
        loading && _react2.default.createElement(_spinner2.default, null),
        Icon && _react2.default.createElement(
          'span',
          { className: _inInputStyle2.default.iconContainer },
          _react2.default.createElement(Icon, { className: _inInputStyle2.default.icon })
        ),
        _react2.default.createElement(
          'span',
          { className: _inInputStyle2.default.text },
          this.props.children
        )
      ),
      ripple && _react2.default.createElement(_reactInk2.default, { duration: 200, opacity: 0.1, radius: 200 })
    );
  }
}
exports.default = InInputButton;
InInputButton.propTypes = {
  kind: _propTypes2.default.oneOf(['add', 'danger', 'colored', 'secondary']),
  onClick: _propTypes2.default.func,
  children: _propTypes2.default.node.isRequired,
  inverted: _propTypes2.default.bool,
  icon: _propTypes2.default.func,
  loading: _propTypes2.default.bool,
  ripple: _propTypes2.default.bool,
  colored: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  disabled: _propTypes2.default.bool
};
InInputButton.defaultProps = {
  ripple: true,
  icon() {
    return null;
  },
  onClick() {}
};