@talend/react-components/lib-esm/Enumeration/Items/Item/Item.component.js

Set of react components.

import { withTranslation } from 'react-i18next';
import classNames from 'classnames';
import Action from '../../../Actions/Action';
import Checkbox from '../../../Checkbox';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import Icon from '../../../Icon';
import TooltipTrigger from '../../../TooltipTrigger';
import ItemPropTypes from './Item.propTypes';
import { allIndexOf, removeDuplicates } from './utils';
import theme from './Item.module.scss';
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function itemClasses(isSelected) {
  return classNames({
    [theme['tc-enumeration-item']]: true,
    [theme['selected-item']]: isSelected,
    'tc-enumeration-item': true,
    'selected-item': isSelected
  });
}
function itemLabelClasses(className) {
  return classNames({
    [theme['tc-enumeration-item-label']]: true,
    'tc-enumeration-item-label': true,
    [className]: className
  });
}
function itemDefaultActionsClasses() {
  return classNames({
    [theme['tc-enumeration-item-actions']]: true,
    'tc-enumeration-item-actions': true,
    [theme.editable]: true
  });
}
function Item({
  id,
  item,
  searchCriteria,
  showCheckboxes,
  style,
  t
}) {
  const {
    key,
    actions,
    onSelectItem,
    persistentActions
  } = item.itemProps;
  const actualLabel = item[key] instanceof Array ? item[key].join(',') : item[key];
  function getAction(action, index) {
    function onClick(event) {
      if (action.onClick) {
        action.onClick(event, {
          value: event.target.value,
          index: item.index
        });
      }
    }
    return /*#__PURE__*/_createElement(Action, {
      ...action,
      key: index,
      onClick: onClick,
      tooltipPlacement: "bottom",
      hideLabel: true,
      link: true
    });
  }

  /**
   * This function allow to get component rendering based on searchCriteria
   * @param label the current label to parse & to render
   */
  function getSearchedLabel(label) {
    let indexes = allIndexOf(label.toLowerCase(), searchCriteria.toLowerCase());
    indexes = removeDuplicates(indexes, searchCriteria);
    return /*#__PURE__*/_jsxs("span", {
      children: [indexes[0] !== 0 ? label.substring(0, indexes[0]) : null, indexes.map((matchIndex, index, matchIndexes) => /*#__PURE__*/_jsxs("span", {
        children: [/*#__PURE__*/_jsx("strong", {
          children: label.substring(matchIndex, matchIndex + searchCriteria.length)
        }), index === matchIndex.length + 1 ? null : label.substring(matchIndex + searchCriteria.length, matchIndexes[index + 1])]
      }, index))]
    });
  }
  function getActionLabel() {
    if (searchCriteria) {
      return /*#__PURE__*/_jsx("button", {
        role: "gridcell",
        className: itemLabelClasses(item.className),
        disabled: "disabled",
        children: getSearchedLabel(actualLabel)
      });
    }
    return /*#__PURE__*/_jsxs(Action, {
      className: itemLabelClasses(item.className),
      role: "gridcell",
      onClick: event => onSelectItem(item, event),
      "aria-label": t('TC_ENUMERATION_SELECT', {
        defaultValue: 'Select item "{{label}}"',
        label: actualLabel
      }),
      bsStyle: "link",
      children: [showCheckboxes && /*#__PURE__*/_jsx(Checkbox, {
        "aria-label": t('TC_ENUMERATION_CHECK', {
          defaultValue: 'Check item "{{label}}"',
          label: actualLabel
        }),
        className: classNames(theme['tc-enumeration-checkbox'], 'tc-enumeration-checkbox'),
        checked: item.isSelected
      }), /*#__PURE__*/_jsx("span", {
        children: actualLabel
      }), item.icon && /*#__PURE__*/_jsx(TooltipTrigger, {
        label: item.icon.title,
        tooltipPlacement: "bottom",
        children: /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx(Icon, {
            ...item.icon,
            "aria-hidden": "false"
          })
        })
      })]
    }, item.index);
  }
  return /*#__PURE__*/_jsxs("div", {
    role: "row",
    className: itemClasses(item.isSelected),
    id: id,
    style: style,
    children: [getActionLabel(), /*#__PURE__*/_jsxs("div", {
      className: itemDefaultActionsClasses(),
      role: "gridcell",
      children: [persistentActions && /*#__PURE__*/_jsx("div", {
        className: "persistent",
        children: persistentActions.filter(action => !action.disabled).map((action, index) => getAction(action, index))
      }), actions.filter(action => !action.disabled).map((action, index) => getAction(action, index))]
    })]
  });
}
Item.propTypes = ItemPropTypes;
export default withTranslation(I18N_DOMAIN_COMPONENTS)(Item);
//# sourceMappingURL=Item.component.js.map