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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
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 _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class Item extends _react.Component {
  componentDidUpdate(prevProps) {
    const {
      children,
      measure,
      item
    } = this.props;
    const {
      children: prevChildren,
      item: prevItem
    } = prevProps;
    if (children && (children.length !== prevChildren.length || item.expanded !== prevItem.expanded)) {
      measure();
    }
  }
  render() {
    const {
      id,
      item,
      parentItem,
      isSwitchBox,
      searchCriteria,
      children,
      dataTest,
      t
    } = this.props;

    /**
     * This function allow to get component rendering based on searchCriteria
     * @param label the current label to parse & to render
     */
    function getSearchedLabel(label) {
      const splitRegex = new RegExp(`(${searchCriteria})`, 'gi');
      return label.split(splitRegex).map((part, index) => {
        const higlighted = part.toLowerCase() === searchCriteria.toLowerCase() ? /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
          children: part
        }) : part;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: higlighted
        }, index);
      });
    }
    const itemId = id && `checkbox-${id}`;
    const itemClassName = (0, _classnames.default)('checkbox', {
      'switch-nested': children
    }, {
      switch: isSwitchBox
    }, {
      'with-icon': item.icon
    });
    const ariaLabel = item.checked ? t('TC_LISTVIEW_DESELECT', {
      defaultValue: 'Deselect {{ value }}',
      value: item.label
    }) : t('TC_LISTVIEW_SELECT', {
      defaultValue: 'Select {{ value }}',
      value: item.label
    });
    let expandLabel;
    if (children) {
      expandLabel = item.expanded ? t('TC_LISTVIEW_COLLAPSE', {
        defaultValue: 'Collapse {{ value }}',
        value: item.label
      }) : t('TC_LISTVIEW_EXPAND', {
        defaultValue: 'Expand {{ value }}',
        value: item.label
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      id: id,
      className: itemClassName,
      role: "option",
      "aria-selected": item.checked,
      "data-test": dataTest,
      "data-testid": dataTest,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
        id: itemId,
        onChange: event => item.onChange(event, item, parentItem),
        checked: item.checked,
        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [searchCriteria ? getSearchedLabel(item.label) : item.label, 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-label": ariaLabel,
        "data-test": dataTest && `${dataTest}.checkbox`,
        "data-testid": dataTest && `${dataTest}.checkbox`
      }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('checkbox-nested-expand', {
          expanded: item.expanded
        }),
        "data-test": dataTest && `${dataTest}.checkbox-nested-expand`,
        "data-testid": dataTest && `${dataTest}.checkbox-nested-expand`,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
          bsStyle: "link",
          icon: "talend-caret-down",
          onClick: event => item.onExpandToggle(event, item),
          label: expandLabel,
          hideLabel: true
        })
      }), children && item.expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "checkbox-nested",
        children: children
      })]
    }, item.index);
  }
}
Item.propTypes = _Item.default;
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(Item);
//# sourceMappingURL=Item.component.js.map