UNPKG

@salesforce/design-system-react

Version:

Salesforce Lightning Design System for React

118 lines (97 loc) 6.45 kB
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } 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; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */ /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */ // ### React import React from 'react'; import PropTypes from 'prop-types'; // ### classNames // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames) // This project uses `classnames`, "a simple javascript utility for conditionally // joining classNames together." import classNames from 'classnames'; // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools) import checkProps from './check-props'; // ### Children import SLDSUtilityIcon from '../../utilities/utility-icon'; import { BUTTON_ICON } from '../../../utilities/constants'; /** * This is a non-interactive wrapper component for `UtilityIcon` that specifies button icon classes for an icon inside a `button` tag. Use of this component by itself is not recommended, but should be used as part of other components to obtain the correct styling for icons within buttons. This component only partially implements [Button Icons](http://www.lightningdesignsystem.com/components/button-icons). It does not return a `button` HTML tag. It only returns an icon for use within a button. Assistive text must also be rendered by the parent. */ var ButtonIcon = function ButtonIcon(_ref) { var _classNames; var _ref$category = _ref.category, category = _ref$category === void 0 ? 'utility' : _ref$category, _ref$size = _ref.size, size = _ref$size === void 0 ? 'medium' : _ref$size, hint = _ref.hint, icon = _ref.icon, className = _ref.className, inverse = _ref.inverse, name = _ref.name, path = _ref.path, position = _ref.position, rest = _objectWithoutProperties(_ref, ["category", "size", "hint", "icon", "className", "inverse", "name", "path", "position"]); checkProps(BUTTON_ICON, _objectSpread({ category: category, size: size, hint: hint, icon: icon, className: className, inverse: inverse, name: name, path: path, position: position }, rest)); return /*#__PURE__*/React.createElement(SLDSUtilityIcon, { "aria-hidden": "true", category: category, className: classNames('slds-button__icon', (_classNames = {}, _defineProperty(_classNames, "slds-button__icon_".concat(size), size && size !== 'medium'), _defineProperty(_classNames, 'slds-button__icon_inverse-hint', inverse && hint), _defineProperty(_classNames, 'slds-button__icon_hint', hint && !inverse), _defineProperty(_classNames, "slds-button__icon_".concat(position), position), _classNames), className) // iconClassName has been deprecated , icon: icon, name: name, path: path }); }; var propTypes = { /** * Icon category from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/) */ category: PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']), /** * Associates an icon button with another element on the page by changes the color of the SVG. Please reference <a href="http://www.lightningdesignsystem.com/components/buttons/#hint">Lightning Design System Buttons > Hint</a>. */ hint: PropTypes.bool, /** * An SVG object to use instead of name / category, look in `design-system-react/icons` for examples */ icon: PropTypes.object, /** * Class names to be added to the SVG. */ className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]), /** * Setting `inverse` to true will switch the color of the icon: light to dark, dark to light. */ inverse: PropTypes.bool, /** * Name of the icon. Visit <a href='http://www.lightningdesignsystem.com/resources/icons'>Lightning Design System Icons</a> to reference icon names. */ name: PropTypes.string, /** * Path to the icon. This will override any global icon settings. */ path: PropTypes.string, /** * Adds additional spacing on the opposite side specified between button icon and the button label */ position: PropTypes.oneOf(['left', 'right']), /** * Size of the icon. Visit [lightningdesignsystem.com/components/icons/#flavor-sizes](https://www.lightningdesignsystem.com/components/icons/#flavor-sizes) */ size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']) }; ButtonIcon.displayName = BUTTON_ICON; ButtonIcon.propTypes = propTypes; export default ButtonIcon; //# sourceMappingURL=index.js.map