@talend/react-components/lib-esm/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.component.js

Set of react components.

/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import PropTypes from 'prop-types';
import { memo, Component } from 'react';
import classNames from 'classnames';
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import Skeleton from '../../Skeleton';
import CollapsiblePanel from '../../CollapsiblePanel/CollapsiblePanel.component';
import { getId, getRowData } from '../utils/gridrow';
import { Gesture } from '@talend/react-a11y';
import theme from './RowCollapsiblePanel.module.scss';
import { get, isEmpty } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const cache = new CellMeasurerCache({
  fixedWidth: true
});
const options = {
  deferredMeasurementCache: cache,
  rowHeight: cache.rowHeight
};
function LoadingCollapsiblePanel() {
  return /*#__PURE__*/_jsxs("div", {
    className: theme['loading-collapsible-panel'],
    children: [/*#__PURE__*/_jsxs("span", {
      children: [/*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.circle,
        size: Skeleton.SIZES.small
      }), /*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.text,
        size: Skeleton.SIZES.xlarge
      })]
    }), /*#__PURE__*/_jsxs("span", {
      children: [/*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.circle,
        size: Skeleton.SIZES.small
      }), /*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.text,
        size: Skeleton.SIZES.medium
      })]
    }), /*#__PURE__*/_jsx("span", {
      children: /*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.text,
        size: Skeleton.SIZES.small
      })
    }), /*#__PURE__*/_jsx("span", {
      children: /*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.text,
        size: Skeleton.SIZES.medium
      })
    })]
  });
}
const MemoLoadingCollapsiblePanel = /*#__PURE__*/memo(LoadingCollapsiblePanel);

/**
 * Row renderer that displays a Collapsible Panel
 */
class RowCollapsiblePanel extends Component {
  constructor(props) {
    super(props);
    this.onToggle = this.onToggle.bind(this);
  }
  onToggle(event) {
    const {
      parent,
      index
    } = this.props;
    if (parent.props.onRowClick) {
      parent.props.onRowClick({
        event,
        rowData: {
          ...getRowData(parent, index),
          index
        }
      });
    }
  }
  render() {
    const {
      className,
      index,
      onKeyDown,
      parent,
      style
    } = this.props;
    const parentId = getId(parent);
    const id = parentId && `${parentId}-${index}`;
    const rowData = getRowData(parent, index);
    return /*#__PURE__*/_jsx(CellMeasurer, {
      cache: cache,
      columnIndex: 0,
      parent: parent,
      rowIndex: index,
      children: ({
        measure
      }) =>
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      _jsx("div", {
        className: classNames('tc-collapsible-row', rowData.className, className),
        id: id,
        onKeyDown: e => onKeyDown(e, this.ref),
        ref: ref => {
          this.ref = ref;
        },
        role: "listitem",
        tabIndex: "0",
        "aria-posinset": index + 1,
        "aria-setsize": parent.props.rowCount,
        "aria-label": get(rowData, 'header[0].label'),
        style: style,
        children: isEmpty(rowData) ? /*#__PURE__*/_jsx(MemoLoadingCollapsiblePanel, {}) : /*#__PURE__*/_jsx(CollapsiblePanel, {
          onEntered: measure,
          onExited: measure,
          onToggle: this.onToggle,
          ...rowData
        })
      })
    }, index);
  }
}
RowCollapsiblePanel.displayName = 'VirtualizedList(RowCollapsiblePanel)';
RowCollapsiblePanel.propTypes = {
  /** Custom classname to set on the row */
  className: PropTypes.string,
  /** Row index */
  index: PropTypes.number,
  /** Keydown to handle focus gesture */
  onKeyDown: PropTypes.func.isRequired,
  /** Parent (ListGrid) component instance */
  parent: PropTypes.object,
  // eslint-disable-line react/forbid-prop-types
  /** Custom style that react-virtualized provides */
  style: PropTypes.object // eslint-disable-line react/forbid-prop-types
};
const RowCollapsiblePanelWrapper = Gesture.withListGesture(RowCollapsiblePanel);
RowCollapsiblePanelWrapper.options = options;
export default RowCollapsiblePanelWrapper;
//# sourceMappingURL=RowCollapsiblePanel.component.js.map