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

Basic UX components

'use strict';

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

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

exports.default = createButtonLike;

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 _defaultStyle = require('part:@lyra/components/buttons/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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

var _spinner2 = _interopRequireDefault(_spinner);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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; } /*eslint-disable complexity */


function createButtonLike(Component, { displayName, defaultProps = {} }) {
  var _class, _temp2;

  return _temp2 = _class = class ButtonLike extends _react2.default.Component {
    constructor(...args) {
      var _temp;

      return _temp = super(...args), this.setRootElement = el => {
        this._element = el;
      }, this.handleClick = event => {
        this.setState({
          recentlyHovered: true
        });

        this.props.onClick(event);
      }, _temp;
    }

    focus() {
      if (this._element.focus) {
        this._element.focus();
      }
    }

    render() {
      var _props = this.props;

      const kind = _props.kind,
            ripple = _props.ripple,
            inverted = _props.inverted,
            color = _props.color,
            Icon = _props.icon,
            loading = _props.loading,
            className = _props.className,
            children = _props.children,
            padding = _props.padding,
            rest = _objectWithoutProperties(_props, ['kind', 'ripple', 'inverted', 'color', 'icon', 'loading', 'className', 'children', 'padding']);

      // Should not be part of the destructing, cause it should be passed to component through rest


      const disabled = this.props.disabled;

      const style = (0, _classnames2.default)(className, [_defaultStyle2.default.root, _defaultStyle2.default[kind], _defaultStyle2.default[`padding_${padding}`], inverted && _defaultStyle2.default.inverted, color && _defaultStyle2.default[`color__${color}`], disabled && _defaultStyle2.default.disabled, !children && _defaultStyle2.default.onlyIcon]);

      return _react2.default.createElement(
        Component,
        _extends({}, rest, {
          className: style,
          onClick: this.handleClick,
          ref: this.setRootElement,
          tabIndex: 0
        }),
        _react2.default.createElement(
          'span',
          { className: _defaultStyle2.default.inner },
          loading && _react2.default.createElement(
            'span',
            { className: _defaultStyle2.default.spinner },
            _react2.default.createElement(_spinner2.default, { inline: true })
          ),
          Icon && _react2.default.createElement(Icon, { className: _defaultStyle2.default.icon }),
          children && _react2.default.createElement(
            'span',
            { className: _defaultStyle2.default.content },
            children
          ),
          ripple && !disabled && _react2.default.createElement(_reactInk2.default, { duration: 1000, opacity: 0.1, radius: 200 })
        )
      );
    }
  }, _class.displayName = displayName || `ButtonLike(${typeof Component === 'string' ? Component : Component.displayName || Component.name})`, _class.propTypes = {
    kind: _propTypes2.default.oneOf(['default', 'simple']),
    color: _propTypes2.default.oneOf(['primary', 'success', 'danger', 'white']),
    onClick: _propTypes2.default.func,
    children: _propTypes2.default.node,
    inverted: _propTypes2.default.bool,
    icon: _propTypes2.default.func,
    loading: _propTypes2.default.bool,
    ripple: _propTypes2.default.bool,
    className: _propTypes2.default.string,
    disabled: _propTypes2.default.bool,
    tabIndex: _propTypes2.default.number,
    padding: _propTypes2.default.oneOf(['default', 'small'])
  }, _class.defaultProps = _extends({
    ripple: true,
    icon: null,
    onClick() {},
    kind: 'default',
    padding: 'default'
  }, defaultProps), _temp2;
}