@talend/react-components/lib/Enumeration/Items/Item/Item.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 _Action = _interopRequireDefault(require("../../../Actions/Action"));
var _Checkbox = _interopRequireDefault(require("../../../Checkbox"));
var _constants = _interopRequireDefault(require("../../../constants"));
var _Icon = _interopRequireDefault(require("../../../Icon"));
var _TooltipTrigger = _interopRequireDefault(require("../../../TooltipTrigger"));
var _Item = _interopRequireDefault(require("./Item.propTypes"));
var _utils = require("./utils");
var _ItemModule = _interopRequireDefault(require("./Item.module.scss"));
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function itemClasses(isSelected) {
  return (0, _classnames.default)({
    [_ItemModule.default['tc-enumeration-item']]: true,
    [_ItemModule.default['selected-item']]: isSelected,
    'tc-enumeration-item': true,
    'selected-item': isSelected
  });
}
function itemLabelClasses(className) {
  return (0, _classnames.default)({
    [_ItemModule.default['tc-enumeration-item-label']]: true,
    'tc-enumeration-item-label': true,
    [className]: className
  });
}
function itemDefaultActionsClasses() {
  return (0, _classnames.default)({
    [_ItemModule.default['tc-enumeration-item-actions']]: true,
    'tc-enumeration-item-actions': true,
    [_ItemModule.default.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__*/(0, _react.createElement)(_Action.default, {
      ...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 = (0, _utils.allIndexOf)(label.toLowerCase(), searchCriteria.toLowerCase());
    indexes = (0, _utils.removeDuplicates)(indexes, searchCriteria);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      children: [indexes[0] !== 0 ? label.substring(0, indexes[0]) : null, indexes.map((matchIndex, index, matchIndexes) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("button", {
        role: "gridcell",
        className: itemLabelClasses(item.className),
        disabled: "disabled",
        children: getSearchedLabel(actualLabel)
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Action.default, {
      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__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
        "aria-label": t('TC_ENUMERATION_CHECK', {
          defaultValue: 'Check item "{{label}}"',
          label: actualLabel
        }),
        className: (0, _classnames.default)(_ItemModule.default['tc-enumeration-checkbox'], 'tc-enumeration-checkbox'),
        checked: item.isSelected
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: actualLabel
      }), item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
        label: item.icon.title,
        tooltipPlacement: "bottom",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            ...item.icon,
            "aria-hidden": "false"
          })
        })
      })]
    }, item.index);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    role: "row",
    className: itemClasses(item.isSelected),
    id: id,
    style: style,
    children: [getActionLabel(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: itemDefaultActionsClasses(),
      role: "gridcell",
      children: [persistentActions && /*#__PURE__*/(0, _jsxRuntime.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 = _Item.default;
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(Item);
//# sourceMappingURL=Item.component.js.map