reactlite/lib/RecycleList.js

react minimal components

/**
 * Created by vincent on 2016/9/7.
 */
"use strict";

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _ItemRenderer = require('./listClasses/ItemRenderer');

var _ItemRenderer2 = _interopRequireDefault(_ItemRenderer);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _default = (_temp2 = _class = function (_React$Component) {
    _inherits(_default, _React$Component);

    function _default() {
        var _ref;

        var _temp, _this, _ret;

        _classCallCheck(this, _default);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _default.__proto__ || Object.getPrototypeOf(_default)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
            numChildrenTop: 0,
            numChildrenToRender: 10,
            numChildrenBottom: 0
        }, _temp), _possibleConstructorReturn(_this, _ret);
    }

    _createClass(_default, [{
        key: 'onScroll',
        value: function onScroll() {
            var _props = this.props,
                height = _props.height,
                itemHeight = _props.itemHeight,
                dataProvider = _props.dataProvider;
            var numChildrenToRender = this.state.numChildrenToRender;


            var scrollTop = _reactDom2.default.findDOMNode(this).scrollTop;

            var numChildrenTop = Math.floor(scrollTop / itemHeight);
            var fixHeight = scrollTop - numChildrenTop * itemHeight > 0.1; // 如果向上滚动超过一点点 就用numChildrenToRender+1行显示

            var numChildrenBottom = dataProvider.length - numChildrenTop - numChildrenToRender;
            if (fixHeight) numChildrenBottom -= 1;
            if (numChildrenBottom < 0) numChildrenBottom = 0;
            var numChildrenToRender = Math.ceil(height / itemHeight);
            if (fixHeight) numChildrenToRender += 1;

            this.setState({
                numChildrenTop: numChildrenTop,
                numChildrenBottom: numChildrenBottom,
                numChildrenToRender: numChildrenToRender + 1
            });
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _props2 = this.props,
                dataProvider = _props2.dataProvider,
                height = _props2.height,
                itemHeight = _props2.itemHeight;

            var numChildrenToRender = Math.ceil(height / itemHeight);
            var numChildrenBottom = dataProvider.length - numChildrenToRender;
            this.setState({
                numChildrenTop: 0,
                numChildrenBottom: numChildrenBottom,
                numChildrenToRender: numChildrenToRender
            });
        }
    }, {
        key: 'calcPropValue',
        value: function calcPropValue(data, index, arr, propName) {
            if (this.props.hasOwnProperty(propName + 'Function')) return this.props[propName + 'Function'](data, index, arr);
            if (this.props.hasOwnProperty(propName)) return this.props[propName];
            return null;
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props3 = this.props,
                className = _props3.className,
                style = _props3.style,
                dataProvider = _props3.dataProvider,
                itemProps = _props3.itemProps,
                itemRenderer = _props3.itemRenderer,
                itemRendererFunction = _props3.itemRendererFunction,
                itemClassName = _props3.itemClassName,
                itemClassNameFunction = _props3.itemClassNameFunction,
                itemStyle = _props3.itemStyle,
                itemStyleFunction = _props3.itemStyleFunction,
                itemSelectedClassName = _props3.itemSelectedClassName,
                itemSelectedClassNameFunction = _props3.itemSelectedClassNameFunction,
                itemSelectedStyle = _props3.itemSelectedStyle,
                itemSelectedStyleFunction = _props3.itemSelectedStyleFunction,
                label = _props3.label,
                labelFunction = _props3.labelFunction,
                selectedIndex = _props3.selectedIndex,
                change = _props3.change,
                itemClick = _props3.itemClick,
                height = _props3.height,
                itemHeight = _props3.itemHeight,
                others = _objectWithoutProperties(_props3, ['className', 'style', 'dataProvider', 'itemProps', 'itemRenderer', 'itemRendererFunction', 'itemClassName', 'itemClassNameFunction', 'itemStyle', 'itemStyleFunction', 'itemSelectedClassName', 'itemSelectedClassNameFunction', 'itemSelectedStyle', 'itemSelectedStyleFunction', 'label', 'labelFunction', 'selectedIndex', 'change', 'itemClick', 'height', 'itemHeight']);

            itemProps = Object.assign({}, itemProps, { label: label, labelFunction: labelFunction, listDataProvider: dataProvider });
            var _state = this.state,
                numChildrenTop = _state.numChildrenTop,
                numChildrenBottom = _state.numChildrenBottom,
                numChildrenToRender = _state.numChildrenToRender;

            var dataProviderToRender = dataProvider.slice(numChildrenTop, numChildrenTop + numChildrenToRender);
            var selectedIndex = -1;
            var items = dataProviderToRender.map(function (data, index, arr) {
                var itemIndex = numChildrenTop + index;
                var renderProps = { key: itemIndex };
                if (index === 0) renderProps.ref = "firstChild";

                var itemClassName = _this2.calcPropValue(data, index, arr, "itemClassName");
                var itemStyle = _this2.calcPropValue(data, index, arr, "itemStyle");
                if (selectedIndex == itemIndex) {
                    itemClassName = classNames(itemClassName, _this2.calcPropValue(data, index, arr, "itemSelectedClassName"));
                    itemStyle = Object.assign({ height: 20 }, itemStyle, _this2.calcPropValue(data, index, arr, "itemSelectedStyle"));
                }
                renderProps.className = itemClassName;
                renderProps.style = itemStyle;
                renderProps.data = data;
                renderProps.itemIndex = itemIndex;

                var ItemRendererClass = _this2.calcPropValue(data, index, arr, "itemRenderer") || _ItemRenderer2.default;
                return _react2.default.createElement(ItemRendererClass, _extends({}, others, renderProps, { itemProps: _extends({}, itemProps, { itemIndex: index }) }));
            });

            items.unshift(_react2.default.createElement('div', { style: { height: numChildrenTop * itemHeight }, key: 'top' }));
            items.push(_react2.default.createElement('div', { style: { height: numChildrenBottom * itemHeight }, key: 'bottom' }));

            style = Object.assign({}, style, { height: height, overflowY: 'auto' });
            return _react2.default.createElement(
                'div',
                { className: className, style: style, onScroll: this.onScroll.bind(this) },
                items
            );
        }
    }]);

    return _default;
}(_react2.default.Component), _class.propTypes = {
    height: _react2.default.PropTypes.number
}, _class.defaultProps = {
    height: 500,
    itemHeight: 50
}, _temp2);

exports.default = _default;