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

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import PropTypes from 'prop-types';

import style from './TableActionCell.st.css';
import HoverSlot from './HoverSlot';
import Tooltip from '../Tooltip/Tooltip';
import Button from '../Button';
import PopoverMenu from '../PopoverMenu';
import PopoverMenuItem from '../PopoverMenuItem';
import ChevronRight from '../new-icons/ChevronRight';

/* eslint-disable react/prop-types */
function renderPrimaryAction(_ref) {
  var text = _ref.text,
      theme = _ref.theme,
      _onClick = _ref.onClick;

  return React.createElement(
    Button,
    {
      theme: theme,
      onClick: function onClick(event) {
        _onClick();

        // Making sure we don't also trigger onRowClick
        event.stopPropagation();
      }
    },
    text
  );
}
/* eslint-enable react/prop-types */

function renderVisibleActions(actions) {
  return actions.map(function (_ref2, index) {
    var text = _ref2.text,
        icon = _ref2.icon,
        _onClick2 = _ref2.onClick;
    return React.createElement(
      Tooltip,
      {
        key: index,
        dataHook: 'table-action-cell-visible-action-tooltip',
        content: text,
        theme: 'dark'
      },
      React.createElement(
        Button,
        {
          theme: 'icon-greybackground',
          onClick: function onClick(event) {
            _onClick2();
            event.stopPropagation();
          },
          withNewIcons: true
        },
        icon
      )
    );
  });
}

function renderHiddenActions(actions, popoverMenuProps) {
  return React.createElement(
    PopoverMenu,
    _extends({
      buttonTheme: 'icon-greybackground',
      dataHook: 'table-action-cell-popover-menu',
      appendToParent: true
    }, popoverMenuProps),
    actions.map(function (_ref3, index) {
      var text = _ref3.text,
          icon = _ref3.icon,
          _onClick3 = _ref3.onClick,
          disabled = _ref3.disabled;
      return React.createElement(PopoverMenuItem, {
        key: index,
        dataHook: 'table-action-cell-popover-menu-item',
        icon: icon,
        onClick: function onClick() {
          return _onClick3();
        },
        text: text,
        disabled: disabled
      });
    })
  );
}

function renderPlaceholder() {
  return React.createElement(
    Button,
    { theme: 'icon-white', withNewIcons: true },
    React.createElement(ChevronRight, null)
  );
}

var TableActionCell = function TableActionCell(props) {
  var dataHook = props.dataHook,
      primaryAction = props.primaryAction,
      secondaryActions = props.secondaryActions,
      numOfVisibleSecondaryActions = props.numOfVisibleSecondaryActions,
      alwaysShowSecondaryActions = props.alwaysShowSecondaryActions,
      popoverMenuProps = props.popoverMenuProps;


  var visibleActions = secondaryActions.slice(0, numOfVisibleSecondaryActions);
  var hiddenActions = secondaryActions.slice(numOfVisibleSecondaryActions);

  return React.createElement(
    'span',
    _extends({ 'data-hook': dataHook }, style('root', {}, props)),
    primaryAction && React.createElement(
      HoverSlot,
      {
        display: 'onHover',
        'data-hook': 'table-action-cell-primary-action'
      },
      renderPrimaryAction(primaryAction)
    ),
    visibleActions.length > 0 && React.createElement(
      HoverSlot,
      {
        display: alwaysShowSecondaryActions ? 'always' : 'onHover',
        'data-hook': 'table-action-cell-visible-actions'
      },
      renderVisibleActions(visibleActions)
    ),
    hiddenActions.length > 0 && React.createElement(
      'div',
      { onClick: function onClick(e) {
          return e.stopPropagation();
        }, className: style.popoverMenu },
      React.createElement(
        HoverSlot,
        { display: 'always' },
        renderHiddenActions(hiddenActions, popoverMenuProps)
      )
    ),
    primaryAction && !(secondaryActions || []).length && React.createElement(
      HoverSlot,
      {
        display: 'notOnHover',
        className: style.placeholderIcon,
        'data-hook': 'table-action-cell-placeholder'
      },
      renderPlaceholder()
    )
  );
};

TableActionCell.displayName = 'TableActionCell';

TableActionCell.propTypes = {
  dataHook: PropTypes.string,

  /**
   * An object containing the primary action properties: `text` is the action
   * text , `theme` is the button theme (can be `whiteblue` or `fullblue`),
   * `onClick` is the callback function for the action, whose signature is
   * `onClick(rowData, rowNum)`.
   */
  primaryAction: PropTypes.shape({
    text: PropTypes.string.isRequired,
    theme: PropTypes.oneOf(['whiteblue', 'fullblue']),
    onClick: PropTypes.func.isRequired
  }),

  /**
   * An array containing the secondary actions: `text` is the action text
   * (will be shown in the tooltip), `icon` is the icon component for the
   * action, `onClick` is the callback function for the action, whose
   * signature is `onClick(rowData, rowNum)`.
   * `disabled` is an optional prop for the secondary action to be disabled
   */
  secondaryActions: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    icon: PropTypes.node.isRequired,
    onClick: PropTypes.func.isRequired,
    disabled: PropTypes.bool
  })),

  /** The number of secondary actions to show outside the PopoverMenu */
  numOfVisibleSecondaryActions: PropTypes.number,

  /** Whether to show the secondary action also when not hovering the row */
  alwaysShowSecondaryActions: PropTypes.bool,

  /** Props being passed to the secondary actions' <PopoverMenu/> */
  popoverMenuProps: PropTypes.shape(PopoverMenu.propTypes)
};

TableActionCell.defaultProps = {
  primaryAction: null,
  secondaryActions: [],
  numOfVisibleSecondaryActions: 0,
  alwaysShowSecondaryActions: false
};

export default TableActionCell;