react-lightning-design-system/module/scripts/Button.js

Salesforce Lightning Design System components built with React

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["icon", "category", "align", "size", "className", "style"],
  _excluded2 = ["className", "type", "size", "icon", "iconAlign", "iconMore", "selected", "alt", "label", "loading", "iconSize", "inverse", "htmlType", "children", "buttonRef", "iconMoreSize", "onClick", "tabIndex"];
import React, { useRef } from 'react';
import classnames from 'classnames';
import { SvgIcon } from './Icon';
import { Spinner } from './Spinner';
import { useEventCallback, useMergeRefs } from './hooks';
var ICON_SIZES = ['x-small', 'small', 'medium', 'large'];
var ICON_ALIGNS = ['left', 'right'];

/**
 *
 */

/**
 *
 */
export var ButtonIcon = function ButtonIcon(_ref) {
  var icon = _ref.icon,
    _ref$category = _ref.category,
    category = _ref$category === void 0 ? 'utility' : _ref$category,
    align = _ref.align,
    size = _ref.size,
    className = _ref.className,
    style = _ref.style,
    props = _objectWithoutProperties(_ref, _excluded);
  var alignClassName = align && ICON_ALIGNS.indexOf(align) >= 0 ? "slds-button__icon_".concat(align) : null;
  var sizeClassName = size && ICON_SIZES.indexOf(size) >= 0 ? "slds-button__icon_".concat(size) : null;
  var iconClassNames = classnames('slds-button__icon', alignClassName, sizeClassName, className);
  if (icon.indexOf(':') > 0) {
    var _ref2 = icon.split(':');
    var _ref3 = _slicedToArray(_ref2, 2);
    category = _ref3[0];
    icon = _ref3[1];
  }
  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
    className: iconClassNames,
    icon: icon,
    category: category,
    pointerEvents: "none",
    style: style
  }, props));
};

/**
 *
 */

/**
 *
 */
export var Button = function Button(props) {
  var className = props.className,
    type = props.type,
    size = props.size,
    icon = props.icon,
    iconAlign = props.iconAlign,
    iconMore = props.iconMore,
    selected = props.selected,
    alt = props.alt,
    label = props.label,
    loading = props.loading,
    iconSize = props.iconSize,
    inverse_ = props.inverse,
    _props$htmlType = props.htmlType,
    htmlType = _props$htmlType === void 0 ? 'button' : _props$htmlType,
    children = props.children,
    buttonRef_ = props.buttonRef,
    iconMoreSize_ = props.iconMoreSize,
    onClick_ = props.onClick,
    tabIndex = props.tabIndex,
    rprops = _objectWithoutProperties(props, _excluded2);
  var adjoining = icon && (iconAlign === 'right' || !(label || children));
  var iconMoreSize = iconMoreSize_ || adjoining ? 'x-small' : 'small';
  var inverse = inverse_ || /-?inverse$/.test(type || '');
  var buttonElRef = useRef(null);
  var buttonRef = useMergeRefs([buttonElRef, buttonRef_]);
  var onClick = useEventCallback(function (e) {
    if (buttonElRef.current !== null) {
      // Safari, FF to trigger focus event on click
      buttonElRef.current.focus();
    }
    onClick_ === null || onClick_ === void 0 || onClick_(e);
  });
  var content = children || label;
  var isIconOnly = type && /^icon-/.test(type) && icon && !content;
  var typeClassName = type ? "slds-button_".concat(type) : null;
  var btnClassNames = classnames(className, 'slds-button', typeClassName, _defineProperty(_defineProperty({
    'slds-is-selected': selected
  }, 'slds-button_icon', /^icon-/.test(type !== null && type !== void 0 ? type : '')), "slds-button_icon-".concat(size !== null && size !== void 0 ? size : ''), /^(x-small|small)$/.test(size !== null && size !== void 0 ? size : '') && /^icon-/.test(type !== null && type !== void 0 ? type : '')));
  return /*#__PURE__*/React.createElement("button", _extends({
    ref: buttonRef,
    className: btnClassNames,
    type: htmlType,
    title: isIconOnly || alt ? alt : undefined,
    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : -1
  }, rprops, {
    onClick: onClick
  }), icon && iconAlign !== 'right' ? /*#__PURE__*/React.createElement(ButtonIcon, {
    icon: icon,
    align: iconAlign,
    size: iconSize,
    inverse: inverse
  }) : undefined, content, icon && iconAlign === 'right' ? /*#__PURE__*/React.createElement(ButtonIcon, {
    icon: icon,
    align: iconAlign,
    size: iconSize,
    inverse: inverse
  }) : undefined, iconMore ? /*#__PURE__*/React.createElement(ButtonIcon, {
    icon: iconMore,
    align: "right",
    size: iconMoreSize
  }) : undefined, isIconOnly || alt ? /*#__PURE__*/React.createElement("span", {
    className: "slds-assistive-text"
  }, alt !== null && alt !== void 0 ? alt : icon) : undefined, loading ? /*#__PURE__*/React.createElement(Spinner, null) : undefined);
};
//# sourceMappingURL=Button.js.map