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

Set of react components.

import { Component } from 'react';
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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
class Item extends 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__*/_jsx("b", {
          children: part
        }) : part;
        return /*#__PURE__*/_jsx("span", {
          children: higlighted
        }, index);
      });
    }
    const itemId = id && `checkbox-${id}`;
    const itemClassName = classNames('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__*/_jsxs("div", {
      id: id,
      className: itemClassName,
      role: "option",
      "aria-selected": item.checked,
      "data-test": dataTest,
      "data-testid": dataTest,
      children: [/*#__PURE__*/_jsx(Checkbox, {
        id: itemId,
        onChange: event => item.onChange(event, item, parentItem),
        checked: item.checked,
        label: /*#__PURE__*/_jsxs(_Fragment, {
          children: [searchCriteria ? getSearchedLabel(item.label) : item.label, item.icon && /*#__PURE__*/_jsx(TooltipTrigger, {
            label: item.icon.title,
            tooltipPlacement: "bottom",
            children: /*#__PURE__*/_jsx("span", {
              children: /*#__PURE__*/_jsx(Icon, {
                ...item.icon
              })
            })
          })]
        }),
        "aria-label": ariaLabel,
        "data-test": dataTest && `${dataTest}.checkbox`,
        "data-testid": dataTest && `${dataTest}.checkbox`
      }), children && /*#__PURE__*/_jsx("div", {
        className: classNames('checkbox-nested-expand', {
          expanded: item.expanded
        }),
        "data-test": dataTest && `${dataTest}.checkbox-nested-expand`,
        "data-testid": dataTest && `${dataTest}.checkbox-nested-expand`,
        children: /*#__PURE__*/_jsx(Action, {
          bsStyle: "link",
          icon: "talend-caret-down",
          onClick: event => item.onExpandToggle(event, item),
          label: expandLabel,
          hideLabel: true
        })
      }), children && item.expanded && /*#__PURE__*/_jsx("div", {
        className: "checkbox-nested",
        children: children
      })]
    }, item.index);
  }
}
Item.propTypes = ItemPropTypes;
export default withTranslation(I18N_DOMAIN_COMPONENTS)(Item);
//# sourceMappingURL=Item.component.js.map