@talend/react-components/lib/ActionList/ActionList.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _Actions = require("../Actions");
var _constants = _interopRequireDefault(require("../constants"));
var _Inject = _interopRequireDefault(require("../Inject"));
var _ActionListModule = _interopRequireDefault(require("./ActionList.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * return the formatted action id
 * if there is no action id, it is generated from the action label
 * @param  {string} id        sidepanel id
 * @param  {string} action    current action
 * @return {string}            formatted id
 */function getActionId(id, action) {
  if (action.id || action.label) {
    const actionId = action.id || action.label.toLowerCase().split(' ').join('-');
    return id && `${id}-nav-${actionId}`;
  }
  return undefined;
}
function ActionListItem({
  getComponent,
  id,
  onSelect,
  action,
  isSelected,
  isNav,
  itemClassName
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const a11y = {
    role: 'presentation'
  };
  const extra = {};
  const Renderers = _Inject.default.getAll(getComponent, {
    Action: _Actions.Action
  });
  if (isSelected && isNav) {
    // @see https://tink.uk/using-the-aria-current-attribute/
    a11y['aria-current'] = true;
  }
  if (onSelect) {
    extra.onClick = event => {
      onSelect(event, action);
      if (action.onClick) {
        action.onClick(event);
      }
    };
  }
  const actionProps = {
    ...action,
    active: undefined,
    // active scope is only the list item
    id: getActionId(id, action),
    bsStyle: 'link',
    role: 'link',
    ...extra
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
    className: (0, _classnames.default)(_ActionListModule.default['tc-action-list-item'], 'tc-action-list-item', itemClassName, {
      active: isSelected,
      [_ActionListModule.default.active]: isSelected
    }),
    ...a11y,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.Action, {
      ...actionProps,
      children: action.beta && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.TagBeta, {
        children: t('BETA', 'Beta')
      })
    })
  }, action.key || action.label);
}
function ActionList(props) {
  const {
    className,
    actions,
    selected,
    ...rest
  } = props;
  const isActionSelected = action => {
    if (selected) {
      return action === selected;
    }
    return action.active;
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
    className: (0, _classnames.default)('nav', 'nav-pills', 'nav-stacked', _ActionListModule.default['tc-action-list'], 'tc-action-list', className, {
      'nav-inverse': !props.reverse
    }),
    children: actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionListItem, {
      action: action,
      isSelected: isActionSelected(action),
      ...rest
    }, action.id || index))
  });
}
ActionList.displayName = 'ActionList';
ActionList.defaultProps = {
  actions: []
};
if (process.env.NODE_ENV !== 'production') {
  const actionPropType = _propTypes.default.shape({
    id: _propTypes.default.string,
    active: _propTypes.default.bool,
    icon: _propTypes.default.string,
    key: _propTypes.default.string,
    label: _propTypes.default.string,
    beta: _propTypes.default.bool,
    onClick: _propTypes.default.func
  });
  ActionListItem.propTypes = {
    id: _propTypes.default.string,
    itemClassName: _propTypes.default.string,
    onSelect: _propTypes.default.func,
    action: actionPropType,
    isSelected: _propTypes.default.bool,
    isNav: _propTypes.default.bool,
    getComponent: _propTypes.default.func
  };
  ActionList.propTypes = {
    id: _propTypes.default.string,
    actions: _propTypes.default.arrayOf(actionPropType),
    onSelect: _propTypes.default.func,
    selected: actionPropType,
    className: _propTypes.default.string,
    reverse: _propTypes.default.bool
  };
}
var _default = exports.default = ActionList;
//# sourceMappingURL=ActionList.component.js.map