@talend/react-components/lib/Enumeration/Items/Items.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 _reactVirtualized = require("react-virtualized");
var _Action = _interopRequireDefault(require("../../Actions/Action/Action.component"));
var _Item = _interopRequireDefault(require("./Item/Item.component"));
var _ItemEdit = _interopRequireDefault(require("./Item/ItemEdit.component"));
var _ItemEdit2 = _interopRequireDefault(require("./Item/ItemEdit.propTypes"));
var _ItemsModule = _interopRequireDefault(require("./Items.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DISPLAY_MODE_EDIT = 'DISPLAY_MODE_EDIT';
const virtualizedListClassName = 'ReactVirtualized__List';
class Items extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.lazyLoadingTimer = null;
    this.getItem = this.getItem.bind(this);
    this.getRowHeight = this.getRowHeight.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
    this.scrollEnumeration = this.scrollEnumeration.bind(this);
  }
  getItem(item, index, style) {
    // affecting index to the item
    const itemWithIndex = {
      ...item,
      index
    };
    switch (item.displayMode) {
      case DISPLAY_MODE_EDIT:
        {
          let actions = this.props.itemsProp.actionsEdit;
          if (typeof actions === 'function') {
            actions = actions(itemWithIndex);
          }
          itemWithIndex.itemProps = {
            key: this.props.itemsProp.key,
            actions,
            onSubmitItem: this.props.itemsProp.onSubmitItem,
            onAbortItem: this.props.itemsProp.onAbortItem,
            onChangeItem: this.props.itemsProp.onChangeItem
          };
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemEdit.default, {
            id: `${this.props.id}-${index}-item`,
            item: itemWithIndex,
            currentEdit: this.props.currentEdit,
            style: style
          }, `${index}-item`);
        }
      default:
        {
          let actions = this.props.itemsProp.actionsDefault;
          if (typeof actions === 'function') {
            actions = actions(itemWithIndex);
          }
          let persistentActions = this.props.itemsProp.actionsDefaultPersistent;
          if (typeof persistentActions === 'function') {
            persistentActions = persistentActions(itemWithIndex);
          }
          const itemPropDefault = {
            key: this.props.itemsProp.key,
            actions,
            persistentActions,
            onSelectItem: this.props.itemsProp.onSelectItem
          };
          itemWithIndex.itemProps = itemPropDefault;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
            id: `${this.props.id}-${index}-item`,
            item: itemWithIndex,
            itemProps: itemPropDefault,
            searchCriteria: this.props.searchCriteria,
            showCheckboxes: this.props.showCheckboxes,
            style: style
          }, `${index}-item`);
        }
    }
  }
  getRowHeight({
    index
  }) {
    const isEditMode = this.props.items[index].displayMode === DISPLAY_MODE_EDIT;
    return this.props.itemsProp.getItemHeight(isEditMode);
  }
  scrollEnumeration(event) {
    // needed because of React's event pooling
    event.persist();
    if (this.lazyLoadingTimer !== null) {
      clearTimeout(this.lazyLoadingTimer);
    }
    this.lazyLoadingTimer = setTimeout(() => {
      // react-virtualized fire scroll events not to be considered
      if (event.target.className.includes(virtualizedListClassName) && event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
        this.props.itemsProp.onLoadData();
      }
    }, 500);
  }
  rowRenderer({
    index,
    // eslint-disable-line react/prop-types
    style // eslint-disable-line react/prop-types
  }) {
    return this.getItem(this.props.items[index], index, style);
  }
  render() {
    const calculateListHeight = (0, _lodash.get)(this.props, 'itemsProp.calculateListHeight');
    const actions = this.props.itemsProp && this.props.itemsProp.actionsDefault;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "test-id": "enumeration-items-list",
      className: (0, _classnames.default)(_ItemsModule.default['tc-enumeration-items'], 'tc-enumeration-items'),
      onScroll: this.scrollEnumeration,
      style: calculateListHeight ? {
        height: `${calculateListHeight(this.props.items)}px`
      } : {},
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
        children: ({
          height,
          width
        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List
        /**
         * The props 'items' and 'actions' does not exist in <List>
         * but only way to refresh component when items or actions change
         * See https://github.com/bvaughn/react-virtualized/#pure-components
         */, {
          items: this.props.items,
          actions: actions,
          className: _ItemsModule.default['tc-list-items'],
          rowRenderer: this.rowRenderer,
          width: width,
          height: height,
          rowCount: this.props.items.length,
          rowHeight: this.getRowHeight
        })
      })
    });
  }
}
Items.propTypes = {
  id: _propTypes.default.string,
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    values: _propTypes.default.arrayOf(_propTypes.default.string)
  })),
  searchCriteria: _propTypes.default.string,
  itemsProp: _propTypes.default.shape({
    calculateListHeight: _propTypes.default.func,
    key: _propTypes.default.string.isRequired,
    getItemHeight: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
    onSubmitItem: _propTypes.default.func,
    onAbortItem: _propTypes.default.func,
    onSelectItem: _propTypes.default.func,
    actionsDefault: _propTypes.default.arrayOf(_propTypes.default.shape(_Action.default.propTypes)),
    actionsDefaultPersistent: _propTypes.default.arrayOf(_propTypes.default.shape(_Action.default.propTypes)),
    actionsEdit: _propTypes.default.arrayOf(_propTypes.default.shape(_Action.default.propTypes))
  }).isRequired,
  ..._ItemEdit2.default
};
var _default = exports.default = Items;
//# sourceMappingURL=Items.component.js.map