shineout/lib/DataList/List.js

Shein 前端组件库

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _locale = require("../locale");

var _LazyList = _interopRequireDefault(require("../AnimationList/LazyList"));

var _styles = require("./styles");

var _is = require("../utils/is");

var _uid = require("../utils/uid");

var _lazyload = require("../utils/lazyload");

var _Spin = _interopRequireDefault(require("../Spin"));

var _getDataset = _interopRequireDefault(require("../utils/dom/getDataset"));

var _Checkbox = _interopRequireDefault(require("../Table/Checkbox"));

var _config = require("../config");

var DefaultProps = {
  colNum: 1,
  loading: false,
  size: 'default'
};

var Index =
/*#__PURE__*/
function (_Component) {
  (0, _inheritsLoose2.default)(Index, _Component);

  function Index(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "id", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "node", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "observer", void 0);
    _this.bindNode = _this.bindNode.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.bindObserver = _this.bindObserver.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.scrollLoading = _this.scrollLoading.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.renderItem = _this.renderItem.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.id = null;
    return _this;
  }

  var _proto = Index.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    (0, _lazyload.removeStack)(this.id, true);
    this.node = null;
    this.observer = null;
    this.id = null;
  };

  _proto.getItemClassName = function getItemClassName(value, index, flag, isLastCol) {
    var rowClassName = this.props.rowClassName;
    var base = (0, _styles.listClass)('item', flag && 'checkbox', isLastCol && 'item-last');
    if ((0, _is.isFunc)(rowClassName) && rowClassName) return (0, _classnames.default)(base, rowClassName(value, index));
    if ((0, _is.isString)(rowClassName)) return (0, _classnames.default)(base, rowClassName);
    return base;
  };

  _proto.getContent = function getContent(value, index) {
    var renderItem = this.props.renderItem;
    if (renderItem && typeof renderItem === 'function') return renderItem(value, index);
    if ((0, _is.isString)(renderItem)) return value[renderItem];
    if ((0, _is.isString)(value)) return value;
    return null;
  };

  _proto.scrollLoading = function scrollLoading() {
    var scrollLoading = this.props.scrollLoading;
    if (!(0, _is.isFunc)(scrollLoading)) return;
    if (scrollLoading) scrollLoading();
  };

  _proto.bindNode = function bindNode(node) {
    this.node = node;
  };

  _proto.bindObserver = function bindObserver(node) {
    this.observer = node;
    if (!node) return;
    (0, _lazyload.removeStack)(this.id, true);
    this.id = (0, _lazyload.addStack)({
      container: this.node,
      element: node,
      render: this.scrollLoading,
      offset: 20,
      noRemove: true
    });
  };

  _proto.renderCheckBox = function renderCheckBox(flag, data, index) {
    if (!flag) return null;
    var datum = this.props.datum;
    return _react.default.createElement(_Checkbox.default, {
      data: data,
      index: index,
      datum: datum,
      force: datum.check(data)
    });
  };

  _proto.renderItem = function renderItem(value, index) {
    var _this$props = this.props,
        keygen = _this$props.keygen,
        onChange = _this$props.onChange,
        data = _this$props.data,
        _this$props$colNum = _this$props.colNum,
        colNum = _this$props$colNum === void 0 ? 1 : _this$props$colNum;
    var haveRowSelected = (0, _is.isFunc)(onChange);
    var content = this.getContent(value, index);
    var lastColStart = data.length - (data.length % colNum || colNum);
    var isLast = index >= lastColStart;
    return _react.default.createElement("div", {
      className: this.getItemClassName(value, index, haveRowSelected, isLast),
      key: (0, _uid.getKey)(value, keygen, index)
    }, this.renderCheckBox(haveRowSelected, value, index), haveRowSelected ? _react.default.createElement("div", {
      className: (0, _styles.listClass)('item-meta')
    }, content) : content);
  };

  _proto.renderList = function renderList(isEmpty) {
    var _this$props2 = this.props,
        data = _this$props2.data,
        empty = _this$props2.empty,
        keygen = _this$props2.keygen,
        fixed = _this$props2.fixed,
        rowsInView = _this$props2.rowsInView,
        lineHeight = _this$props2.lineHeight,
        value = _this$props2.value,
        colNum = _this$props2.colNum;
    if (isEmpty) return _react.default.createElement("div", {
      className: (0, _styles.listClass)('item', 'empty')
    }, empty || (0, _locale.getLocale)('noData'));

    if (!fixed) {
      var items = data.map(this.renderItem);

      if (colNum && colNum > 1) {
        var frs = Array(colNum).fill('1fr').join(' ');
        return _react.default.createElement("div", {
          style: {
            display: 'grid',
            gridTemplateColumns: frs
          }
        }, items);
      }

      return items;
    }

    return _react.default.createElement(_LazyList.default, {
      lineHeight: lineHeight,
      data: data,
      keygen: keygen,
      renderItem: this.renderItem,
      itemsInView: rowsInView,
      force: value,
      colNum: colNum
    });
  };

  _proto.renderFooter = function renderFooter() {
    var footer = this.props.footer;
    if (footer && typeof footer === 'function') return _react.default.createElement("div", {
      className: (0, _styles.listClass)('footer')
    }, footer());
    if ((0, _react.isValidElement)(footer)) return _react.default.createElement("div", {
      className: (0, _styles.listClass)('footer')
    }, footer);
    return null;
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        data = _this$props3.data,
        loading = _this$props3.loading,
        style = _this$props3.style,
        size = _this$props3.size,
        bordered = _this$props3.bordered,
        fixed = _this$props3.fixed,
        height = _this$props3.height,
        scrollLoading = _this$props3.scrollLoading;
    var isEmpty = !(0, _is.isArray)(data) || data.length <= 0;
    var ms = Object.assign({}, style, height && {
      height: height
    });
    return _react.default.createElement("div", (0, _extends2.default)({
      className: (0, _classnames.default)((0, _styles.listClass)('container', size, bordered && 'bordered', fixed && 'fixed', (0, _config.isRTL)() && 'rtl'), this.props.className),
      style: ms,
      ref: this.bindNode
    }, (0, _getDataset.default)(this.props)), loading && _react.default.createElement("div", {
      className: (0, _styles.listClass)('loading')
    }, typeof loading === 'boolean' ? _react.default.createElement(_Spin.default, {
      size: 40
    }) : loading), _react.default.createElement("div", {
      className: (0, _styles.listClass)('list', isEmpty && 'empty')
    }, this.renderList(isEmpty)), !isEmpty && (0, _is.isFunc)(scrollLoading) && _react.default.createElement("div", {
      ref: this.bindObserver
    }), this.renderFooter());
  };

  return Index;
}(_react.Component);

(0, _defineProperty2.default)(Index, "defaultProps", DefaultProps);
(0, _defineProperty2.default)(Index, "displayName", void 0);
Index.displayName = 'ShineoutList';
var _default = Index;
exports.default = _default;