antd/lib/list/index.js

An enterprise-class UI design language and React-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _typeof2 = require("babel-runtime/helpers/typeof");

var _typeof3 = _interopRequireDefault(_typeof2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _addEventListener = require("rc-util/lib/Dom/addEventListener");

var _addEventListener2 = _interopRequireDefault(_addEventListener);

var _spin = require("../spin");

var _spin2 = _interopRequireDefault(_spin);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

var _pagination = require("../pagination");

var _pagination2 = _interopRequireDefault(_pagination);

var _button = require("../button");

var _button2 = _interopRequireDefault(_button);

var _grid = require("../grid");

var _throttleByAnimationFrame = require("../_util/throttleByAnimationFrame");

var _Item = require("./Item");

var _Item2 = _interopRequireDefault(_Item);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var __decorate = undefined && undefined.__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" : (0, _typeof3["default"])(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 = undefined && undefined.__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;
};

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) {
    (0, _inherits3["default"])(List, _Component);

    function List() {
        (0, _classCallCheck3["default"])(this, List);

        var _this = (0, _possibleConstructorReturn3["default"])(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;
    }

    (0, _createClass3["default"])(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] = (0, _addEventListener2["default"])(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 = (0, _classnames2["default"])(prefixCls, className, (_classNames = {}, (0, _defineProperty3["default"])(_classNames, prefixCls + "-vertical", itemLayout === 'vertical'), (0, _defineProperty3["default"])(_classNames, prefixCls + "-bordered", bordered), (0, _defineProperty3["default"])(_classNames, prefixCls + "-loading", loading), (0, _defineProperty3["default"])(_classNames, prefixCls + "-grid", grid), (0, _defineProperty3["default"])(_classNames, prefixCls + "-infinite", infinite.onLoad), _classNames));
            var moreButton = _react2["default"].createElement(
                _button2["default"],
                { onClick: onLoadMore },
                _react2["default"].createElement(_icon2["default"], { type: "loading" }),
                "\u52A0\u8F7D\u4E2D..."
            );
            var moreContent = _react2["default"].createElement(
                "div",
                { className: prefixCls + "-more" },
                loadingMore ? moreButton : _react2["default"].createElement(
                    _button2["default"],
                    { onClick: onLoadMore },
                    "\u52A0\u8F7D\u66F4\u591A..."
                )
            );
            var paginationContent = _react2["default"].createElement(
                "div",
                { className: prefixCls + "-pagination" },
                _react2["default"].createElement(_pagination2["default"], pagination)
            );
            var childrenContent = grid ? _react2["default"].createElement(
                _grid.Row,
                { gutter: grid.gutter },
                children
            ) : children;
            var content = loading ? _react2["default"].createElement(
                _spin2["default"],
                { size: "large" },
                childrenContent,
                showLoadMore && moreContent,
                !showLoadMore && pagination && paginationContent
            ) : _react2["default"].createElement(
                "div",
                null,
                childrenContent,
                showLoadMore && moreContent,
                !showLoadMore && pagination && paginationContent,
                infinite.loading && _react2["default"].createElement(
                    "div",
                    { className: prefixCls + "-spin" },
                    _react2["default"].createElement(_spin2["default"], null)
                )
            );
            return _react2["default"].createElement(
                "div",
                (0, _extends3["default"])({ className: classString }, rest, { ref: this.getNode }),
                content
            );
        }
    }]);
    return List;
}(_react.Component);

exports["default"] = List;

List.Item = _Item2["default"];
List.childContextTypes = {
    grid: _propTypes2["default"].any
};
__decorate([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], List.prototype, "infiniteLoad", null);
module.exports = exports["default"];