antd
Version:
An enterprise-class UI design language and React-based implementation
252 lines (237 loc) • 10 kB
JavaScript
import _extends from "babel-runtime/helpers/extends";
import _defineProperty from "babel-runtime/helpers/defineProperty";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _typeof from "babel-runtime/helpers/typeof";
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
}return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
}return t;
};
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import addEventListener from "rc-util/es/Dom/addEventListener";
import Spin from '../spin';
import Icon from '../icon';
import Pagination from '../pagination';
import Button from '../button';
import { Row } from '../grid';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
import Item from './Item';
function getDefaultTarget() {
return typeof window !== 'undefined' ? window : null;
}
function getOffsetTop(element) {
if (!element) {
return 0;
}
if (!element.getClientRects().length) {
return 0;
}
var rect = element.getBoundingClientRect();
if (rect.width || rect.height) {
var doc = element.ownerDocument;
var docElem = doc.documentElement;
return rect.top - docElem.clientTop;
}
return rect.top;
}
function getViewportHeight() {
var win = getDefaultTarget();
if (!win) {
return 0;
}
return Math.max(win.document.documentElement.clientHeight, win.innerHeight || 0);
}
var List = function (_Component) {
_inherits(List, _Component);
function List() {
_classCallCheck(this, List);
var _this = _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
_this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
_this.infiniteLoaded = false;
_this.eventHandlers = {};
_this.getNode = function (n) {
_this.node = n;
};
return _this;
}
_createClass(List, [{
key: "getChildContext",
value: function getChildContext() {
return {
grid: this.props.grid
};
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (!this.isInfinite()) {
return;
}
var target = getDefaultTarget;
// Wait for parent component ref has its value
this.timeout = setTimeout(function () {
_this2.setTargetEventListeners(target);
});
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (!this.isInfinite()) {
return;
}
this.clearEventListeners();
clearTimeout(this.timeout);
this.infiniteLoad.cancel();
}
}, {
key: "isInfinite",
value: function isInfinite() {
var infinite = this.props.infinite;
return infinite && typeof infinite.onLoad === 'function';
}
}, {
key: "setTargetEventListeners",
value: function setTargetEventListeners(getTarget) {
var _this3 = this;
var target = getTarget();
if (!target) {
return;
}
this.clearEventListeners();
this.events.forEach(function (eventName) {
_this3.eventHandlers[eventName] = addEventListener(target, eventName, _this3.infiniteLoad);
});
}
}, {
key: "clearEventListeners",
value: function clearEventListeners() {
var _this4 = this;
this.events.forEach(function (eventName) {
var handler = _this4.eventHandlers[eventName];
if (handler && handler.remove) {
handler.remove();
}
});
}
}, {
key: "infiniteLoad",
value: function infiniteLoad() {
var _this5 = this;
var _props$infinite = this.props.infinite,
infinite = _props$infinite === undefined ? {} : _props$infinite;
var targetElement = this.node;
if (this.infiniteLoaded || !targetElement) {
return;
}
var viewportHeight = getViewportHeight();
var eleOffsetTop = getOffsetTop(targetElement);
var bottomPositionY = eleOffsetTop + targetElement.offsetHeight - viewportHeight + (infinite.offset || 0);
if (bottomPositionY < 0) {
this.infiniteLoaded = true;
infinite.onLoad(function () {
_this5.infiniteLoaded = false;
});
}
}
}, {
key: "render",
value: function render() {
var _classNames;
var _a = this.props,
_a$bordered = _a.bordered,
bordered = _a$bordered === undefined ? true : _a$bordered,
className = _a.className,
children = _a.children,
_a$loading = _a.loading,
loading = _a$loading === undefined ? false : _a$loading,
itemLayout = _a.itemLayout,
_a$showLoadMore = _a.showLoadMore,
showLoadMore = _a$showLoadMore === undefined ? false : _a$showLoadMore,
_a$loadingMore = _a.loadingMore,
loadingMore = _a$loadingMore === undefined ? false : _a$loadingMore,
_a$onLoadMore = _a.onLoadMore,
onLoadMore = _a$onLoadMore === undefined ? function () {} : _a$onLoadMore,
_a$pagination = _a.pagination,
pagination = _a$pagination === undefined ? false : _a$pagination,
_a$prefixCls = _a.prefixCls,
prefixCls = _a$prefixCls === undefined ? 'ant-list' : _a$prefixCls,
grid = _a.grid,
_a$infinite = _a.infinite,
infinite = _a$infinite === undefined ? {} : _a$infinite,
rest = __rest(_a, ["bordered", "className", "children", "loading", "itemLayout", "showLoadMore", "loadingMore", "onLoadMore", "pagination", "prefixCls", "grid", "infinite"]);
var classString = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, prefixCls + "-vertical", itemLayout === 'vertical'), _defineProperty(_classNames, prefixCls + "-bordered", bordered), _defineProperty(_classNames, prefixCls + "-loading", loading), _defineProperty(_classNames, prefixCls + "-grid", grid), _defineProperty(_classNames, prefixCls + "-infinite", infinite.onLoad), _classNames));
var moreButton = React.createElement(
Button,
{ onClick: onLoadMore },
React.createElement(Icon, { type: "loading" }),
"\u52A0\u8F7D\u4E2D..."
);
var moreContent = React.createElement(
"div",
{ className: prefixCls + "-more" },
loadingMore ? moreButton : React.createElement(
Button,
{ onClick: onLoadMore },
"\u52A0\u8F7D\u66F4\u591A..."
)
);
var paginationContent = React.createElement(
"div",
{ className: prefixCls + "-pagination" },
React.createElement(Pagination, pagination)
);
var childrenContent = grid ? React.createElement(
Row,
{ gutter: grid.gutter },
children
) : children;
var content = loading ? React.createElement(
Spin,
{ size: "large" },
childrenContent,
showLoadMore && moreContent,
!showLoadMore && pagination && paginationContent
) : React.createElement(
"div",
null,
childrenContent,
showLoadMore && moreContent,
!showLoadMore && pagination && paginationContent,
infinite.loading && React.createElement(
"div",
{ className: prefixCls + "-spin" },
React.createElement(Spin, null)
)
);
return React.createElement(
"div",
_extends({ className: classString }, rest, { ref: this.getNode }),
content
);
}
}]);
return List;
}(Component);
export default List;
List.Item = Item;
List.childContextTypes = {
grid: PropTypes.any
};
__decorate([throttleByAnimationFrameDecorator()], List.prototype, "infiniteLoad", null);