@talend/react-components

Version:
Set of react components.
github.com/Talend/ui/tree/master/packages/components
147 lines (144 loc) • 5.38 kB
JavaScript
"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 _reactVirtualized = require("react-virtualized");
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
var _CollapsiblePanel = _interopRequireDefault(require("../../CollapsiblePanel/CollapsiblePanel.component"));
var _gridrow = require("../utils/gridrow");
var _reactA11y = require("@talend/react-a11y");
var _RowCollapsiblePanelModule = _interopRequireDefault(require("./RowCollapsiblePanel.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

const cache = new _reactVirtualized.CellMeasurerCache({
  fixedWidth: true
});
const options = {
  deferredMeasurementCache: cache,
  rowHeight: cache.rowHeight
};
function LoadingCollapsiblePanel() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _RowCollapsiblePanelModule.default['loading-collapsible-panel'],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.circle,
        size: _Skeleton.default.SIZES.small
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.text,
        size: _Skeleton.default.SIZES.xlarge
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.circle,
        size: _Skeleton.default.SIZES.small
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.text,
        size: _Skeleton.default.SIZES.medium
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.text,
        size: _Skeleton.default.SIZES.small
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        type: _Skeleton.default.TYPES.text,
        size: _Skeleton.default.SIZES.medium
      })
    })]
  });
}
const MemoLoadingCollapsiblePanel = /*#__PURE__*/(0, _react.memo)(LoadingCollapsiblePanel);

/**
 * Row renderer that displays a Collapsible Panel
 */
class RowCollapsiblePanel extends _react.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: {
          ...(0, _gridrow.getRowData)(parent, index),
          index
        }
      });
    }
  }
  render() {
    const {
      className,
      index,
      onKeyDown,
      parent,
      style
    } = this.props;
    const parentId = (0, _gridrow.getId)(parent);
    const id = parentId && `${parentId}-${index}`;
    const rowData = (0, _gridrow.getRowData)(parent, index);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
      cache: cache,
      columnIndex: 0,
      parent: parent,
      rowIndex: index,
      children: ({
        measure
      }) =>
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      (0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('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": (0, _lodash.get)(rowData, 'header[0].label'),
        style: style,
        children: (0, _lodash.isEmpty)(rowData) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoLoadingCollapsiblePanel, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsiblePanel.default, {
          onEntered: measure,
          onExited: measure,
          onToggle: this.onToggle,
          ...rowData
        })
      })
    }, index);
  }
}
RowCollapsiblePanel.displayName = 'VirtualizedList(RowCollapsiblePanel)';
RowCollapsiblePanel.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
};
const RowCollapsiblePanelWrapper = _reactA11y.Gesture.withListGesture(RowCollapsiblePanel);
RowCollapsiblePanelWrapper.options = options;
var _default = exports.default = RowCollapsiblePanelWrapper;
//# sourceMappingURL=RowCollapsiblePanel.component.js.map