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

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonIcon = exports.Button = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _Icon = require("./Icon");
var _Spinner = require("./Spinner");
var _hooks = require("./hooks");
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"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var ICON_SIZES = ['x-small', 'small', 'medium', 'large'];
var ICON_ALIGNS = ['left', 'right'];

/**
 *
 */

/**
 *
 */
var ButtonIcon = exports.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 = (0, _objectWithoutProperties2["default"])(_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 = (0, _classnames2["default"])('slds-button__icon', alignClassName, sizeClassName, className);
  if (icon.indexOf(':') > 0) {
    var _ref2 = icon.split(':');
    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2);
    category = _ref3[0];
    icon = _ref3[1];
  }
  return /*#__PURE__*/_react["default"].createElement(_Icon.SvgIcon, (0, _extends2["default"])({
    className: iconClassNames,
    icon: icon,
    category: category,
    pointerEvents: "none",
    style: style
  }, props));
};

/**
 *
 */

/**
 *
 */
var Button = exports.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 = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var adjoining = icon && (iconAlign === 'right' || !(label || children));
  var iconMoreSize = iconMoreSize_ || adjoining ? 'x-small' : 'small';
  var inverse = inverse_ || /-?inverse$/.test(type || '');
  var buttonElRef = (0, _react.useRef)(null);
  var buttonRef = (0, _hooks.useMergeRefs)([buttonElRef, buttonRef_]);
  var onClick = (0, _hooks.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 = (0, _classnames2["default"])(className, 'slds-button', typeClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
    '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["default"].createElement("button", (0, _extends2["default"])({
    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["default"].createElement(ButtonIcon, {
    icon: icon,
    align: iconAlign,
    size: iconSize,
    inverse: inverse
  }) : undefined, content, icon && iconAlign === 'right' ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
    icon: icon,
    align: iconAlign,
    size: iconSize,
    inverse: inverse
  }) : undefined, iconMore ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
    icon: iconMore,
    align: "right",
    size: iconMoreSize
  }) : undefined, isIconOnly || alt ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-assistive-text"
  }, alt !== null && alt !== void 0 ? alt : icon) : undefined, loading ? /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, null) : undefined);
};
//# sourceMappingURL=Button.js.map