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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _reactA11y = require("@talend/react-a11y");
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
var _gridrow = require("../utils/gridrow");
var _translate = _interopRequireDefault(require("../../translate"));
var _constants = require("../utils/constants");
var _RowThemes = _interopRequireDefault(require("./RowThemes"));
var _RowLargeModule = _interopRequireDefault(require("./RowLarge.module.scss"));
var _constants2 = _interopRequireDefault(require("../../constants"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  LARGE
} = _constants.listTypes;
const SKELETON_SIZES = [_Skeleton.default.SIZES.xlarge, _Skeleton.default.SIZES.large, _Skeleton.default.SIZES.medium];
const LOADING_ROW_COLUMNS_COUNT = 3;
function RandomSizeSkeleton() {
  const size = _Skeleton.default.SIZES[SKELETON_SIZES[Math.floor(Math.random() * SKELETON_SIZES.length)]];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
    size: size
  });
}
function LargeInnerRowLoading({
  columns,
  rows
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: _RowLargeModule.default['loading-large-column-wrapper'],
    children: Array(columns).fill(0).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _RowLargeModule.default['loading-inner-column'],
      children: Array(rows).fill(0).map((__, innerIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(RandomSizeSkeleton, {}, innerIndex))
    }, index))
  });
}
LargeInnerRowLoading.propTypes = {
  columns: _propTypes.default.number,
  rows: _propTypes.default.number
};
const MemoLargeInnerRowLoading = /*#__PURE__*/(0, _react.memo)(LargeInnerRowLoading);

/**
 * Row renderer that displays a Large item
 */
class RowLarge extends _react.Component {
  constructor(props) {
    super(props);
    this.renderKeyValue = this.renderKeyValue.bind(this);
  }
  renderKeyValue(field, fieldIndex) {
    const {
      index,
      parent
    } = this.props;
    const rawContent = (0, _gridrow.getRowData)(parent, index);
    const dataKey = (0, _gridrow.getDataKey)(field);
    const value = rawContent[dataKey];
    if (value == null) {
      return null;
    }
    const cellContent = (0, _gridrow.renderCell)(index, parent, field);
    const tooltip = typeof cellContent === 'string' ? cellContent : null;
    const label = (0, _gridrow.getLabel)(field);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _RowLargeModule.default['field-group'],
      role: "group",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("dt", {
        className: _RowLargeModule.default['field-label'],
        children: [label, this.props.t('COLON', {
          defaultValue: ':'
        })]
      }, fieldIndex), /*#__PURE__*/(0, _jsxRuntime.jsx)("dd", {
        className: _RowLargeModule.default['field-value'],
        title: tooltip,
        children: cellContent
      })]
    }, label || index);
  }
  render() {
    const {
      className,
      index,
      onKeyDown,
      parent,
      style
    } = this.props;
    const {
      titleField,
      selectionField,
      otherFields
    } = (0, _gridrow.extractSpecialFields)(parent);
    const parentId = (0, _gridrow.getId)(parent);
    const id = parentId && `${parentId}-${index}`;
    const titleCell = titleField && (0, _gridrow.renderCell)(index, parent, titleField, LARGE);
    const selectionCell = selectionField && (0, _gridrow.renderCell)(index, parent, selectionField);
    const rowData = (0, _gridrow.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
      (0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('tc-list-item', 'tc-list-large-row', _RowThemes.default, 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 && (0, _gridrow.getCellData)(titleField, parent, index),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: `tc-list-large-inner-box ${_RowLargeModule.default['inner-box']}`,
          children: (0, _lodash.isEmpty)(rowData) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoLargeInnerRowLoading, {
            columns: LOADING_ROW_COLUMNS_COUNT,
            rows: Math.floor(otherFields.length / LOADING_ROW_COLUMNS_COUNT) + 1
          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              className: _RowLargeModule.default.header,
              children: [titleCell, selectionCell]
            }, "header"), /*#__PURE__*/(0, _jsxRuntime.jsx)("dl", {
              className: `tc-list-large-content ${_RowLargeModule.default.content}`,
              children: otherFields.map(this.renderKeyValue)
            }, "content")]
          })
        }, "inner-box")
      })
    );
  }
}
RowLarge.displayName = 'VirtualizedList(RowLarge)';
RowLarge.propTypes = {
  /** Custom classname to set on the row */
  className: _propTypes.default.string,
  /** Row index */
  index: _propTypes.default.number,
  /** Keydown to handle focus gesture */
  onKeyDown: _propTypes.default.func.isRequired,
  /** Parent (ListGrid) component instance */
  parent: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  /** Custom style that react-virtualized provides */
  style: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  t: _propTypes.default.func
};
RowLarge.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = _reactA11y.Gesture.withListGesture((0, _reactI18next.withTranslation)(_constants2.default)(RowLarge));
//# sourceMappingURL=RowLarge.component.js.map