@salesforce/design-system-react/module/components/data-table/row-actions.js

Salesforce Lightning Design System for React

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

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
// ### React
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; // ### isFunction

import isFunction from 'lodash.isfunction'; // ## Children

import Dropdown from '../menu-dropdown'; // ### Event Helpers

import EventUtil from '../../utilities/event';
import InteractiveElement from './interactive-element';
import CellContext from './private/cell-context';
import TableContext from './private/table-context';
import useContextHelper from './private/context-helper'; // ## Constants

import { DATA_TABLE_ROW_ACTIONS } from '../../utilities/constants';
var InteractiveDropdown = InteractiveElement(Dropdown);
var propTypes = {
  /**
   * Description of the menu for screenreaders.
   */
  assistiveText: PropTypes.object,

  /**
   * Class names to be added to the actions menu.
   */
  className: PropTypes.string,

  /**
   * HTML ID to be added to the actions menu.
   */
  id: PropTypes.string,

  /**
   * `DataTable` row item
   */
  item: PropTypes.object,

  /**
   * Disable hint styling which changes the color of the dropdown svg on hover over.
   */
  noHint: PropTypes.bool,

  /**
   * Triggered when an item is selected.
   */
  onAction: PropTypes.func,

  /**
   * `Dropdown` options. See `Dropdown`.
   */
  options: PropTypes.array,

  /**
   * A [Dropdown](http://react.lightningdesignsystem.com/components/dropdown-menus/) component. The props from this drop will be merged and override any default props.
   * **Note:** onAction will not be overridden, both `DropDown`'s onSelect(dropDownActionOption) and onAction(rowItem, dropdownActionOption) will be called with appropriate parameters
   */
  dropdown: PropTypes.node
};
/**
 * RowActions provide a mechanism for defining a menu to display alongside each row in the DataTable.
 */

var DataTableRowActions = function DataTableRowActions(_ref) {
  var _ref$assistiveText = _ref.assistiveText,
      assistiveText = _ref$assistiveText === void 0 ? {
    icon: 'Actions'
  } : _ref$assistiveText,
      _ref$noHint = _ref.noHint,
      noHint = _ref$noHint === void 0 ? false : _ref$noHint,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? [] : _ref$options,
      className = _ref.className,
      id = _ref.id,
      item = _ref.item,
      onAction = _ref.onAction,
      dropdown = _ref.dropdown,
      fixedLayout = _ref.fixedLayout;
  var tableContext = useContext(TableContext);
  var cellContext = useContext(CellContext);

  var _useContextHelper = useContextHelper(tableContext, cellContext, fixedLayout),
      tabIndex = _useContextHelper.tabIndex,
      hasFocus = _useContextHelper.hasFocus,
      handleFocus = _useContextHelper.handleFocus,
      handleKeyDown = _useContextHelper.handleKeyDown;

  var handleClick = function handleClick(e) {
    EventUtil.trap(e);
  };

  var handleSelect = function handleSelect(selection) {
    if (isFunction(onAction)) {
      onAction(item, selection);
    }

    if (dropdown && isFunction(dropdown.props.onSelect)) {
      dropdown.props.onSelect(selection);
    }
  }; // i18n


  var defaultDropdownProps = {
    align: 'right',
    buttonClassName: 'slds-button_icon-x-small',
    buttonVariant: 'icon',
    iconCategory: 'utility',
    iconName: 'down',
    iconSize: 'small',
    iconVariant: 'border-filled',
    assistiveText: assistiveText,
    className: className,
    options: options,
    hint: !noHint,
    id: id
  };
  var dropdownProps = dropdown ? dropdown.props : {};
  dropdownProps = _objectSpread(_objectSpread(_objectSpread({}, defaultDropdownProps), dropdownProps), {}, {
    onSelect: handleSelect
  });
  return (
    /*#__PURE__*/

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    React.createElement("td", {
      className: classNames({
        'slds-has-focus': hasFocus
      }),
      "data-label": "Actions",
      onClick: handleClick,
      style: {
        width: '3.25rem'
      },
      onFocus: handleFocus,
      onKeyDown: handleKeyDown,
      ref: function ref(_ref2) {
        if (_ref2 && hasFocus) {
          _ref2.focus();
        }
      },
      role: fixedLayout ? 'gridcell' : null,
      tabIndex: tabIndex
    }, /*#__PURE__*/React.createElement(InteractiveDropdown, dropdownProps))
  );
};

DataTableRowActions.propTypes = propTypes;
DataTableRowActions.displayName = DATA_TABLE_ROW_ACTIONS;
export default DataTableRowActions;
//# sourceMappingURL=row-actions.js.map