@jdcfe/yep-react/es/indexed-list/ListView.js

一套移动端的React组件库

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import * as React from 'react';

var StaticRenderer = /*#__PURE__*/function (_React$Component) {
  _inherits(StaticRenderer, _React$Component);

  var _super = _createSuper(StaticRenderer);

  function StaticRenderer() {
    _classCallCheck(this, StaticRenderer);

    return _super.apply(this, arguments);
  }

  _createClass(StaticRenderer, [{
    key: "render",
    value: function render() {
      return this.props.render();
    }
  }]);

  return StaticRenderer;
}(React.Component);

var ListView = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(ListView, _React$PureComponent);

  var _super2 = _createSuper(ListView);

  function ListView() {
    _classCallCheck(this, ListView);

    return _super2.apply(this, arguments);
  }

  _createClass(ListView, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
          className = _this$props.className,
          renderHeader = _this$props.renderHeader,
          renderFooter = _this$props.renderFooter,
          renderSectionWrapper = _this$props.renderSectionWrapper,
          renderSectionHeader = _this$props.renderSectionHeader,
          renderSectionBodyWrapper = _this$props.renderSectionBodyWrapper,
          sectionBodyClassName = _this$props.sectionBodyClassName,
          renderBodyComponent = _this$props.renderBodyComponent,
          data = _this$props.data,
          renderRow = _this$props.renderRow,
          keyLabel = _this$props.keyLabel,
          children = _this$props.children,
          useBodyScroll = _this$props.useBodyScroll,
          _this$props$style = _this$props.style,
          style = _this$props$style === void 0 ? {} : _this$props$style;
      var rowIdentities = [];
      var sectionIdentities = Object.keys(data);
      Object.keys(data).forEach(function (item, index) {
        rowIdentities[index] = [];
        data[item].forEach(function (ss) {
          rowIdentities[index].push(ss[keyLabel]);
        });
      });
      var contentComponents = [];

      for (var sectionIdx = 0; sectionIdx < rowIdentities.length; sectionIdx++) {
        var sectionId = sectionIdentities[sectionIdx];
        var rowIds = rowIdentities[sectionIdx];

        if (rowIds.length === 0) {
          continue;
        }

        var renderSectionHeaderComponent = void 0;

        if (renderSectionHeader) {
          renderSectionHeaderComponent = /*#__PURE__*/React.createElement(StaticRenderer, {
            key: "s_".concat(sectionId),
            render: renderSectionHeader.bind(null, sectionId, sectionId)
          });
        }

        var sectionBody = [];

        for (var rowIdx = 0; rowIdx < rowIds.length; rowIdx++) {
          var rowID = rowIds[rowIdx];
          var comboID = "".concat(sectionId, "_").concat(rowID);
          var row = /*#__PURE__*/React.createElement(StaticRenderer, {
            key: "r_".concat(comboID),
            render: renderRow.bind(null, data[sectionIdentities[sectionIdx]][rowIdx], rowIdx, sectionId)
          }); //@ts-ignore

          sectionBody.push(row);
        }

        var rowsAndSeparators = /*#__PURE__*/React.cloneElement(renderSectionBodyWrapper(sectionId), {
          className: sectionBodyClassName
        }, sectionBody);

        if (renderSectionWrapper) {
          //@ts-ignore
          contentComponents.push(
          /*#__PURE__*/
          //@ts-ignore
          React.cloneElement(renderSectionWrapper(sectionId), {}, renderSectionHeaderComponent, rowsAndSeparators));
        } else {
          //@ts-ignore
          contentComponents.push(renderSectionHeaderComponent); //@ts-ignore

          contentComponents.push(rowsAndSeparators);
        }
      }

      var baseStyle = {
        position: 'relative',
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch'
      };
      var containerStyle = Object.assign(Object.assign({}, useBodyScroll ? {} : baseStyle), style);
      return /*#__PURE__*/React.createElement("div", {
        ref: function ref(el) {
          return _this.listViewRef = el;
        },
        className: className,
        style: containerStyle
      }, renderHeader && renderHeader(), /*#__PURE__*/React.cloneElement(renderBodyComponent(), {}, contentComponents), renderFooter && renderFooter(), children);
    }
  }]);

  return ListView;
}(React.PureComponent);

export { ListView as default };
ListView.defaultProps = {
  renderSectionBodyWrapper: function renderSectionBodyWrapper(sectionId) {
    return /*#__PURE__*/React.createElement("div", {
      key: sectionId
    });
  },
  renderBodyComponent: function renderBodyComponent() {
    return /*#__PURE__*/React.createElement("div", null);
  }
};