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

wix-style-react

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

import React from 'react';
import { any, bool, oneOf, string } from 'prop-types';
import classNames from 'classnames';
import styles from './ButtonLayout.scss';

import deprecationLog from '../utils/deprecationLog';

deprecationLog('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 = classNames((_classNames = {}, _defineProperty(_classNames, styles.button, true), _defineProperty(_classNames, styles[theme], true), _defineProperty(_classNames, styles.hover, hover), _defineProperty(_classNames, styles.active, active), _defineProperty(_classNames, styles.disabled, disabled), _defineProperty(_classNames, styles['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 (React.Children.count(children) === 1) {
    return React.cloneElement(children, { className: className, style: _style }, React.createElement(
      'div',
      { className: styles.inner },
      children.props.children
    ));
  }
};

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

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

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

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

  /** The theme of the button */
  theme: 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: oneOf(['button', 'submit', 'reset'])
};

ButtonLayout.displayName = 'ButtonLayout';

export default ButtonLayout;