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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _TableActionCellSt = require('./TableActionCell.st.css');

var _TableActionCellSt2 = _interopRequireDefault(_TableActionCellSt);

var _HoverSlot = require('./HoverSlot');

var _HoverSlot2 = _interopRequireDefault(_HoverSlot);

var _Tooltip = require('../Tooltip/Tooltip');

var _Tooltip2 = _interopRequireDefault(_Tooltip);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _PopoverMenu = require('../PopoverMenu');

var _PopoverMenu2 = _interopRequireDefault(_PopoverMenu);

var _PopoverMenuItem = require('../PopoverMenuItem');

var _PopoverMenuItem2 = _interopRequireDefault(_PopoverMenuItem);

var _ChevronRight = require('../new-icons/ChevronRight');

var _ChevronRight2 = _interopRequireDefault(_ChevronRight);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

  return _react2.default.createElement(
    _Button2.default,
    {
      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 _react2.default.createElement(
      _Tooltip2.default,
      {
        key: index,
        dataHook: 'table-action-cell-visible-action-tooltip',
        content: text,
        theme: 'dark'
      },
      _react2.default.createElement(
        _Button2.default,
        {
          theme: 'icon-greybackground',
          onClick: function onClick(event) {
            _onClick2();
            event.stopPropagation();
          },
          withNewIcons: true
        },
        icon
      )
    );
  });
}

function renderHiddenActions(actions, popoverMenuProps) {
  return _react2.default.createElement(
    _PopoverMenu2.default,
    _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 _react2.default.createElement(_PopoverMenuItem2.default, {
        key: index,
        dataHook: 'table-action-cell-popover-menu-item',
        icon: icon,
        onClick: function onClick() {
          return _onClick3();
        },
        text: text,
        disabled: disabled
      });
    })
  );
}

function renderPlaceholder() {
  return _react2.default.createElement(
    _Button2.default,
    { theme: 'icon-white', withNewIcons: true },
    _react2.default.createElement(_ChevronRight2.default, 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 _react2.default.createElement(
    'span',
    _extends({ 'data-hook': dataHook }, (0, _TableActionCellSt2.default)('root', {}, props)),
    primaryAction && _react2.default.createElement(
      _HoverSlot2.default,
      {
        display: 'onHover',
        'data-hook': 'table-action-cell-primary-action'
      },
      renderPrimaryAction(primaryAction)
    ),
    visibleActions.length > 0 && _react2.default.createElement(
      _HoverSlot2.default,
      {
        display: alwaysShowSecondaryActions ? 'always' : 'onHover',
        'data-hook': 'table-action-cell-visible-actions'
      },
      renderVisibleActions(visibleActions)
    ),
    hiddenActions.length > 0 && _react2.default.createElement(
      'div',
      { onClick: function onClick(e) {
          return e.stopPropagation();
        }, className: _TableActionCellSt2.default.popoverMenu },
      _react2.default.createElement(
        _HoverSlot2.default,
        { display: 'always' },
        renderHiddenActions(hiddenActions, popoverMenuProps)
      )
    ),
    primaryAction && !(secondaryActions || []).length && _react2.default.createElement(
      _HoverSlot2.default,
      {
        display: 'notOnHover',
        className: _TableActionCellSt2.default.placeholderIcon,
        'data-hook': 'table-action-cell-placeholder'
      },
      renderPlaceholder()
    )
  );
};

TableActionCell.displayName = 'TableActionCell';

TableActionCell.propTypes = {
  dataHook: _propTypes2.default.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: _propTypes2.default.shape({
    text: _propTypes2.default.string.isRequired,
    theme: _propTypes2.default.oneOf(['whiteblue', 'fullblue']),
    onClick: _propTypes2.default.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: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    text: _propTypes2.default.string.isRequired,
    icon: _propTypes2.default.node.isRequired,
    onClick: _propTypes2.default.func.isRequired,
    disabled: _propTypes2.default.bool
  })),

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

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

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

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

exports.default = TableActionCell;