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

Set of react components.

import PropTypes from 'prop-types';
import { memo, Component, Fragment } from 'react';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
import { Gesture } from '@talend/react-a11y';
import Skeleton from '../../Skeleton';
import { extractSpecialFields, getCellData, getDataKey, getId, getLabel, getRowData, renderCell } from '../utils/gridrow';
import getDefaultT from '../../translate';
import { listTypes } from '../utils/constants';
import rowThemes from './RowThemes';
import theme from './RowLarge.module.scss';
import I18N_DOMAIN_COMPONENTS from '../../constants';
import { isEmpty } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  LARGE
} = listTypes;
const SKELETON_SIZES = [Skeleton.SIZES.xlarge, Skeleton.SIZES.large, Skeleton.SIZES.medium];
const LOADING_ROW_COLUMNS_COUNT = 3;
function RandomSizeSkeleton() {
  const size = Skeleton.SIZES[SKELETON_SIZES[Math.floor(Math.random() * SKELETON_SIZES.length)]];
  return /*#__PURE__*/_jsx(Skeleton, {
    size: size
  });
}
function LargeInnerRowLoading({
  columns,
  rows
}) {
  return /*#__PURE__*/_jsx("div", {
    className: theme['loading-large-column-wrapper'],
    children: Array(columns).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
      className: theme['loading-inner-column'],
      children: Array(rows).fill(0).map((__, innerIndex) => /*#__PURE__*/_jsx(RandomSizeSkeleton, {}, innerIndex))
    }, index))
  });
}
LargeInnerRowLoading.propTypes = {
  columns: PropTypes.number,
  rows: PropTypes.number
};
const MemoLargeInnerRowLoading = /*#__PURE__*/memo(LargeInnerRowLoading);

/**
 * Row renderer that displays a Large item
 */
class RowLarge extends Component {
  constructor(props) {
    super(props);
    this.renderKeyValue = this.renderKeyValue.bind(this);
  }
  renderKeyValue(field, fieldIndex) {
    const {
      index,
      parent
    } = this.props;
    const rawContent = getRowData(parent, index);
    const dataKey = getDataKey(field);
    const value = rawContent[dataKey];
    if (value == null) {
      return null;
    }
    const cellContent = renderCell(index, parent, field);
    const tooltip = typeof cellContent === 'string' ? cellContent : null;
    const label = getLabel(field);
    return /*#__PURE__*/_jsxs("div", {
      className: theme['field-group'],
      role: "group",
      children: [/*#__PURE__*/_jsxs("dt", {
        className: theme['field-label'],
        children: [label, this.props.t('COLON', {
          defaultValue: ':'
        })]
      }, fieldIndex), /*#__PURE__*/_jsx("dd", {
        className: theme['field-value'],
        title: tooltip,
        children: cellContent
      })]
    }, label || index);
  }
  render() {
    const {
      className,
      index,
      onKeyDown,
      parent,
      style
    } = this.props;
    const {
      titleField,
      selectionField,
      otherFields
    } = extractSpecialFields(parent);
    const parentId = getId(parent);
    const id = parentId && `${parentId}-${index}`;
    const titleCell = titleField && renderCell(index, parent, titleField, LARGE);
    const selectionCell = selectionField && renderCell(index, parent, selectionField);
    const rowData = getRowData(parent, index);
    let onRowClick;
    let onRowDoubleClick;
    if (parent.props.onRowClick) {
      onRowClick = event => parent.props.onRowClick({
        event,
        rowData
      });
    }
    if (parent.props.onRowDoubleClick) {
      onRowDoubleClick = event => parent.props.onRowDoubleClick({
        event,
        rowData
      });
    }
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions
      _jsx("div", {
        className: classNames('tc-list-item', 'tc-list-large-row', rowThemes, rowData.className, className),
        id: id,
        onClick: onRowClick,
        onDoubleClick: onRowDoubleClick,
        onKeyDown: e => onKeyDown(e, this.ref),
        style: style,
        ref: ref => {
          this.ref = ref;
        },
        role: "listitem",
        tabIndex: "0",
        "aria-posinset": index + 1,
        "aria-setsize": parent.props.rowCount,
        "aria-label": titleField && getCellData(titleField, parent, index),
        children: /*#__PURE__*/_jsx("div", {
          className: `tc-list-large-inner-box ${theme['inner-box']}`,
          children: isEmpty(rowData) ? /*#__PURE__*/_jsx(MemoLargeInnerRowLoading, {
            columns: LOADING_ROW_COLUMNS_COUNT,
            rows: Math.floor(otherFields.length / LOADING_ROW_COLUMNS_COUNT) + 1
          }) : /*#__PURE__*/_jsxs(Fragment, {
            children: [/*#__PURE__*/_jsxs("div", {
              className: theme.header,
              children: [titleCell, selectionCell]
            }, "header"), /*#__PURE__*/_jsx("dl", {
              className: `tc-list-large-content ${theme.content}`,
              children: otherFields.map(this.renderKeyValue)
            }, "content")]
          })
        }, "inner-box")
      })
    );
  }
}
RowLarge.displayName = 'VirtualizedList(RowLarge)';
RowLarge.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
  t: PropTypes.func
};
RowLarge.defaultProps = {
  t: getDefaultT()
};
export default Gesture.withListGesture(withTranslation(I18N_DOMAIN_COMPONENTS)(RowLarge));
//# sourceMappingURL=RowLarge.component.js.map