wix-style-react/dist/src/ButtonLayout/ButtonLayout.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ButtonLayout = require('./ButtonLayout.scss');

var _ButtonLayout2 = _interopRequireDefault(_ButtonLayout);

var _deprecationLog = require('../utils/deprecationLog');

var _deprecationLog2 = _interopRequireDefault(_deprecationLog);

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

(0, _deprecationLog2.default)('Using "ButtonLayout" is deprecated. Please see "5 Buttons" updated documentation section for custom component rendering.');

/**
 * General Buttons
 */
var ButtonLayout = function ButtonLayout(props) {
  var _classNames;

  var theme = props.theme,
      hover = props.hover,
      active = props.active,
      disabled = props.disabled,
      height = props.height,
      children = props.children,
      matchParent = props.matchParent,
      extendingClassName = props.className;


  var className = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, _ButtonLayout2.default.button, true), _defineProperty(_classNames, _ButtonLayout2.default[theme], true), _defineProperty(_classNames, _ButtonLayout2.default.hover, hover), _defineProperty(_classNames, _ButtonLayout2.default.active, active), _defineProperty(_classNames, _ButtonLayout2.default.disabled, disabled), _defineProperty(_classNames, _ButtonLayout2.default['height' + height], height !== 'medium'), _classNames), children.props.className, extendingClassName);

  var _style = Object.assign({}, children.props.style, {
    height: height,
    display: 'inline-block'
  });

  if (matchParent) {
    _style.width = '100%';
  }

  if (_react2.default.Children.count(children) === 1) {
    return _react2.default.cloneElement(children, { className: className, style: _style }, _react2.default.createElement(
      'div',
      { className: _ButtonLayout2.default.inner },
      children.props.children
    ));
  }
};

ButtonLayout.defaultProps = {
  height: 'medium',
  theme: 'fullblue',
  type: 'button'
};

ButtonLayout.propTypes = {
  className: _propTypes.string,
  active: _propTypes.bool,
  children: _propTypes.any,
  disabled: _propTypes.bool,

  /** The size of the button */
  height: (0, _propTypes.oneOf)(['x-small', 'small', 'medium', 'large', 'x-large']),
  hover: _propTypes.bool,

  /** When true the button will match its parent width */
  matchParent: _propTypes.bool,

  /** The theme of the button */
  theme: (0, _propTypes.oneOf)(['transparent', 'fullred', 'fullgreen', 'fullpurple', 'emptyred', 'emptygreen', 'emptybluesecondary', 'emptyblue', 'emptypurple', 'fullblue', 'login', 'emptylogin', 'transparentblue', 'whiteblue', 'whiteblueprimary', 'whitebluesecondary', 'close-standard', 'close-dark', 'close-transparent', 'icon-greybackground', 'icon-standard', 'icon-standardsecondary', 'icon-white', 'icon-whitesecondary', 'no-border', 'dark-no-border', 'outlined']),

  type: (0, _propTypes.oneOf)(['button', 'submit', 'reset'])
};

ButtonLayout.displayName = 'ButtonLayout';

exports.default = ButtonLayout;