@talend/react-components/lib/VirtualizedList/CellTitle/CellTitleActions.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellTitleActionsComponent = CellTitleActionsComponent;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _Actions = require("../../Actions");
var _constants = require("../utils/constants");
var _translate = _interopRequireDefault(require("../../translate"));
var _constants2 = _interopRequireDefault(require("../../constants"));
var _CellTitleActionsModule = _interopRequireDefault(require("./CellTitleActions.module.scss"));
var _Action = _interopRequireDefault(require("../../Actions/Action/Action.component"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable react/display-name */

const {
  TITLE_MODE_INPUT,
  TITLE_MODE_TEXT
} = _constants.cellTitleDisplayModes;
const {
  LARGE
} = _constants.listTypes;
const MAX_DIRECT_NB_ICON = 4;
function isDropdown(actionDef) {
  return actionDef.displayMode === 'dropdown';
}
function renderActionsGroup(getComponent) {
  return actions => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Actions, {
    getComponent: getComponent,
    className: (0, _classnames.default)('cell-title-actions', _CellTitleActionsModule.default['cell-title-actions']),
    actions: actions,
    hideLabel: true,
    link: true
  }, "large-display-actions");
}
function getLargeDisplayActions(actions, getComponent) {
  if (!actions || !actions.length) {
    return null;
  }
  if (Array.isArray(actions) && actions.every(item => Array.isArray(item))) {
    return actions.map(renderActionsGroup(getComponent));
  }
  return renderActionsGroup(getComponent)(actions);
}
function getDefaultDisplayActions(actions, getComponent, t, id) {
  if (!actions || !actions.length) {
    return null;
  }
  const actionsBlocs = [];
  const hasFewActions = actions.length <= MAX_DIRECT_NB_ICON;

  // few actions : display them
  if (hasFewActions) {
    actionsBlocs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Actions, {
      getComponent: getComponent,
      actions: actions,
      hideLabel: true,
      link: true
    }, "direct-actions"));
  } else {
    // lot of actions, we extract 2 actions (including all dropdowns) to display them directly
    // the rest is in an ellipsis dropdown
    // always extract dropdowns
    const extractedDropdownActions = actions.filter(isDropdown);
    const simpleActions = actions.filter(action => !isDropdown(action));

    // 1 slot taken by the ellipsis menu
    const nbOfSimpleToExtract = Math.max(0, MAX_DIRECT_NB_ICON - 1 - extractedDropdownActions.length);

    // extract simple actions if space remaining
    const extractedSimpleActions = nbOfSimpleToExtract > 0 ? simpleActions.slice(0, nbOfSimpleToExtract) : [];
    const extractedActions = [...extractedDropdownActions, ...extractedSimpleActions];
    const remainingActions = simpleActions.slice(nbOfSimpleToExtract);
    extractedActions.sort((a, b) => actions.indexOf(a) - actions.indexOf(b)).forEach((action, i) => {
      actionsBlocs.push(/*#__PURE__*/(0, _react.createElement)(_Action.default, {
        ...action,
        getComponent: getComponent,
        key: `extracted-action-${i}`,
        hideLabel: true,
        link: true
      }));
    });

    // ellipsis dropdown
    actionsBlocs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.ActionDropdown, {
      id: `${id}-ellispsis-actions`,
      className: (0, _classnames.default)('cell-title-actions-menu', _CellTitleActionsModule.default['cell-title-actions-menu']),
      items: remainingActions,
      label: t('LIST_OPEN_ACTION_MENU', {
        defaultValue: 'Open menu'
      }),
      ellipsis: true
    }, "ellipsis-actions"));
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)('cell-title-actions', _CellTitleActionsModule.default['cell-title-actions']),
    children: actionsBlocs
  }, "cell-title-actions");
}
function getPersistentActions(actions, getComponent) {
  if (!actions || !actions.length) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Actions, {
    getComponent: getComponent,
    className: (0, _classnames.default)('persistent-actions', _CellTitleActionsModule.default['persistent-actions']),
    actions: actions,
    hideLabel: true,
    link: true
  }, "persistent-actions");
}
function isAvailable(actionDef) {
  return actionDef.available !== false;
}
function CellTitleActionsComponent({
  rowData,
  actionsKey,
  displayMode,
  getComponent,
  persistentActionsKey,
  id,
  t,
  type
}) {
  let dataActions = (0, _lodash.get)(rowData, actionsKey, []).filter(isAvailable);
  const persistentActions = (0, _lodash.get)(rowData, persistentActionsKey, []);
  const hasActions = dataActions.length || persistentActions.length;
  if (displayMode !== TITLE_MODE_TEXT || !hasActions) {
    return null;
  }
  const actions = [];
  if (type === LARGE) {
    actions.push(getLargeDisplayActions(dataActions, getComponent));
  } else {
    // flatening in tab case
    if (Array.isArray(dataActions) && dataActions.every(item => Array.isArray(item))) {
      dataActions = dataActions.flatMap(item => item);
    }
    actions.push(getDefaultDisplayActions(dataActions, getComponent, t, id));
  }
  actions.push(getPersistentActions(persistentActions, getComponent));
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    (0, _jsxRuntime.jsx)("div", {
      id: id,
      className: (0, _classnames.default)('main-title-actions-group', _CellTitleActionsModule.default['main-title-actions-group']),
      onKeyDown: e => {
        e.stopPropagation();
      },
      children: actions
    })
  );
}
CellTitleActionsComponent.displayName = 'VirtualizedList(CellTitleActions)';
CellTitleActionsComponent.propTypes = {
  id: _propTypes.default.string.isRequired,
  // The actions property key. Actions = props.rowData[props.actionsKey]
  actionsKey: _propTypes.default.string,
  // The persistent actions property key. Actions = props.rowData[props.persistentActionsKey]
  persistentActionsKey: _propTypes.default.string,
  /** The display mode. */
  displayMode: _propTypes.default.oneOf([TITLE_MODE_TEXT, TITLE_MODE_INPUT]),
  getComponent: _propTypes.default.func,
  // The collection item.
  rowData: _propTypes.default.object,
  t: _propTypes.default.func.isRequired,
  type: _propTypes.default.oneOf([LARGE])
};
CellTitleActionsComponent.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants2.default)(CellTitleActionsComponent);
//# sourceMappingURL=CellTitleActions.component.js.map