yylib-quick-mobile/source/yylib/list-view/YYList.js

yylib-quick-mobile

'use strict';

var _pullToRefresh = require('antd-mobile/lib/pull-to-refresh');

var _pullToRefresh2 = _interopRequireDefault(_pullToRefresh);

var _swipeAction = require('antd-mobile/lib/swipe-action');

var _swipeAction2 = _interopRequireDefault(_swipeAction);

var _badge = require('antd-mobile/lib/badge');

var _badge2 = _interopRequireDefault(_badge);

var _listView = require('antd-mobile/lib/list-view');

var _listView2 = _interopRequireDefault(_listView);

var _list = require('antd-mobile/lib/list');

var _list2 = _interopRequireDefault(_list);

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; }; }();

require('antd-mobile/lib/pull-to-refresh/style/css');

require('antd-mobile/lib/swipe-action/style/css');

require('antd-mobile/lib/badge/style/css');

require('antd-mobile/lib/list-view/style/css');

require('antd-mobile/lib/list/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _YYIcon = require('../icon/YYIcon');

var _YYIcon2 = _interopRequireDefault(_YYIcon);

require('./YYList.less');

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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 Item = _list2.default.Item;
var Brief = Item.Brief;

function MyBody(props) {
    return _react2.default.createElement(
        'div',
        { className: 'am-list-body my-body' },
        props.children
    );
}

var YYList = function (_React$Component) {
    _inherits(YYList, _React$Component);

    function YYList(props) {
        _classCallCheck(this, YYList);

        var _this = _possibleConstructorReturn(this, (YYList.__proto__ || Object.getPrototypeOf(YYList)).call(this, props));

        _this.onRefresh = function () {
            var _self = _this;
            _self.setState({ refreshing: true, isLoading: false });
            if (_this.props.onRefresh) {
                _this.props.onRefresh();
            } else {
                setTimeout(function () {
                    _self.rData = [].concat(_toConsumableArray(_self.state.initdata));
                    _self.setState({
                        dataSource: _self.state.dataSource.cloneWithRows(_self.rData),
                        refreshing: false,
                        isLoading: false
                    });
                }, 300);
            }
        };

        _this.firstPress = function (rowData) {
            if (_this.props.firstPress) {
                _this.props.firstPress(rowData);
            }
        };

        _this.secondPress = function (rowData) {
            if (_this.props.secondPress) {
                _this.props.secondPress(rowData);
            }
        };

        _this.onOpen = function (rowData) {
            if (_this.props.onOpen) {
                _this.props.onOpen(rowData);
            }
        };

        _this.onClose = function (rowData) {
            if (_this.props.onClose) {
                _this.props.onClose(rowData);
            }
        };

        _this.onEndReached = function (event) {
            setTimeout(function () {
                _this.setState({ refreshing: false, isLoading: true });
                if (_this.props.onEndReached) {
                    _this.props.onEndReached();
                }
            }, 300);
        };

        var dataSource = new _listView2.default.DataSource({
            rowHasChanged: function rowHasChanged(row1, row2) {
                return row1 !== row2;
            }
        });

        _this.state = {
            dataSource: dataSource,
            appendData: [],
            isLoading: true,
            refreshing: true,
            initdata: [],
            footer: '',
            pageSize: 1,
            postUrl: "",
            current: 1,
            hasMore: true
        };
        return _this;
    }

    _createClass(YYList, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _this2 = this;

            var RunInDesign = this.props.RunInDesign;

            if (RunInDesign) {
                this.createDesignData(this.props);
            }
            if (this.props.pullToRefresh) {
                setTimeout(function () {
                    _this2.setState({ isLoading: false });
                }, 300);
            }
        }
    }, {
        key: 'createDesignData',
        value: function createDesignData(props) {
            this.setState({ footer: "" });
            var initialListSize = props.initialListSize,
                titleName = props.titleName,
                rightName = props.rightName,
                bottomName = props.bottomName,
                thumbName = props.thumbName;

            var data = [];
            for (var i = 0; i < initialListSize; i++) {
                var item = {};
                item[titleName] = "title" + (i + 1);
                item[rightName] = "extra content";
                item[bottomName] = "subtitle";
                item[thumbName] = "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png";
                data.push(item);
            }
            var ds = this.state.dataSource.cloneWithRows(data);
            this.setState({ dataSource: ds, isLoading: false, refreshing: false });
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextprops) {
            var _self = this;
            if (nextprops.data && nextprops.data.length > 0) {
                var data = nextprops.data;
                this.setState({
                    initdata: data,
                    dataSource: this.state.dataSource.cloneWithRows(data),
                    isLoading: false,
                    refreshing: false
                });
            } else if (nextprops.appendData && nextprops.appendData.length > 0) {
                if (_self.state.isLoading && !_self.state.hasMore) {
                    return;
                }
                _self.setState({ isLoading: true });
                _self.rData = [].concat(_toConsumableArray(_self.state.initdata), _toConsumableArray(nextprops.appendData));
                _self.setState({
                    dataSource: _self.state.dataSource.cloneWithRows(_self.rData),
                    isLoading: false

                });
            }
            if (nextprops.RunInDesign) {
                this.createDesignData(nextprops);
            }
        }
    }, {
        key: '_clickItem',
        value: function _clickItem(row) {
            if (this.props.onClick) {
                this.props.onClick(row);
            }
        }
    }, {
        key: 'createRow',
        value: function createRow(rowData, sectionID, rowID, highlightRow) {
            var _self = this;
            var cloneData = _lodash2.default.cloneDeep(rowData);
            var _props = this.props,
                secondButtonText = _props.secondButtonText,
                firstButtonText = _props.firstButtonText,
                RunInDesign = _props.RunInDesign,
                titleName = _props.titleName,
                rightName = _props.rightName,
                bottomName = _props.bottomName,
                thumbName = _props.thumbName,
                showRight = _props.showRight,
                showThumb = _props.showThumb,
                showArrow = _props.showArrow,
                showBottom = _props.showBottom,
                showHeader = _props.showHeader,
                arrow = _props.arrow,
                showSwipeAction = _props.showSwipeAction,
                autoClose = _props.autoClose,
                wrap = _props.wrap,
                disabledFirst = _props.disabledFirst,
                disabledSecond = _props.disabledSecond,
                renderRow = _props.renderRow,
                damping = _props.damping;

            if (renderRow) {
                return renderRow(rowData, sectionID, rowID, highlightRow);
            }
            var rightButtons = [];
            if (disabledFirst) {
                rightButtons.push({ text: firstButtonText ? firstButtonText : "取消", onPress: this.firstPress.bind(this, rowData), style: { backgroundColor: '#ddd', color: 'white' } });
            }
            if (disabledSecond) {
                rightButtons.push({ text: secondButtonText ? secondButtonText : '删除', onPress: this.secondPress.bind(this, rowData), style: { backgroundColor: '#F4333C', color: 'white' } });
            }
            if (showSwipeAction) {
                var renderListItem = null;
                if (this.props.renderItem && typeof this.props.renderItem == "function") {
                    this.props.renderItem(cloneData);
                }
                renderListItem = _react2.default.createElement(
                    _swipeAction2.default,
                    {
                        right: rightButtons,
                        autoClose: autoClose,
                        onOpen: this.onOpen.bind(_self, rowData),
                        onClose: this.onClose.bind(this, rowData) },
                    _react2.default.createElement(
                        Item,
                        { key: rowData.id ? rowData.id : rowID, onClick: this._clickItem.bind(this, rowData), extra: showRight ? cloneData[rightName] : "", arrow: showArrow ? arrow : "", thumb: showThumb ? this.getThumb(cloneData) : "", wrap: wrap },
                        cloneData['isOffline'] && _react2.default.createElement(_badge2.default, { text: '暂', style: { marginRight: 2 } }),
                        cloneData[titleName],
                        !showBottom || _react2.default.createElement(
                            Brief,
                            null,
                            cloneData[bottomName]
                        )
                    )
                );
                return renderListItem;
            } else {
                var renderListItem = null;
                if (this.props.renderItem && typeof this.props.renderItem == "function") {
                    this.props.renderItem(cloneData);
                }
                renderListItem = _react2.default.createElement(
                    Item,
                    { key: rowData.id ? rowData.id : rowID, onClick: this._clickItem.bind(this, rowData), extra: showRight ? cloneData[rightName] : "", arrow: showArrow ? arrow : "", thumb: showThumb ? this.getThumb(cloneData) : "", wrap: wrap },
                    cloneData['isOffline'] && _react2.default.createElement(_badge2.default, { text: '暂', style: { marginRight: 2 } }),
                    cloneData[titleName],
                    !showBottom || _react2.default.createElement(
                        Brief,
                        null,
                        cloneData[bottomName]
                    )
                );
                return renderListItem;
            }
        }
    }, {
        key: 'getThumb',
        value: function getThumb(data) {
            var _props2 = this.props,
                useIcon = _props2.useIcon,
                thumbIcon = _props2.thumbIcon,
                thumbIconColor = _props2.thumbIconColor,
                thumbName = _props2.thumbName,
                IconSize = _props2.IconSize;

            if (useIcon) {
                if (thumbIcon) {
                    return _react2.default.createElement(_YYIcon2.default, { type: thumbIcon, color: thumbIconColor, size: IconSize });
                }
                return null;
            } else {
                if (data && data[thumbName]) {
                    return data[thumbName];
                }
                return "";
            }
        }
    }, {
        key: 'setData',
        value: function setData(data) {
            var _this3 = this;

            var ds = this.state.dataSource.cloneWithRows(data);
            setTimeout(function () {
                _this3.setState({ initdata: data, dataSource: ds, isLoading: false, refreshing: false });
            }, 300);
        }
    }, {
        key: 'setIsLoading',
        value: function setIsLoading(flag) {
            this.setState({ isLoading: flag });
        }
    }, {
        key: 'setAppendData',
        value: function setAppendData(data) {
            var initdata = this.state.initdata;

            this.rData = [].concat(_toConsumableArray(initdata), _toConsumableArray(data));
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                initdata: this.rData,
                isLoading: false,
                appendData: data
            });
        }
    }, {
        key: 'renderHeader',
        value: function renderHeader() {
            var header = this.props.header;

            return _react2.default.createElement(
                'div',
                null,
                header
            );
        }
    }, {
        key: 'renderFooter',
        value: function renderFooter() {
            var _props3 = this.props,
                footerBefore = _props3.footerBefore,
                footerAfter = _props3.footerAfter,
                showFooter = _props3.showFooter,
                lastPage = _props3.lastPage;

            if (showFooter) {
                return _react2.default.createElement(
                    'div',
                    { style: { padding: 10, textAlign: 'center' } },
                    this.state.isLoading ? footerBefore : lastPage ? footerAfter : ''
                );
            }
            return _react2.default.createElement('div', null);
        }
    }, {
        key: 'render',
        value: function render() {
            var _this4 = this;

            var _state = this.state,
                refreshing = _state.refreshing,
                isLoading = _state.isLoading,
                dataSource = _state.dataSource;

            var _props4 = this.props,
                onEndReachedThreshold = _props4.onEndReachedThreshold,
                cutheight = _props4.cutheight,
                RunInDesign = _props4.RunInDesign,
                pageSize = _props4.pageSize,
                header = _props4.header,
                showHeader = _props4.showHeader,
                initialListSize = _props4.initialListSize,
                style = _props4.style,
                rightAlign = _props4.rightAlign,
                visible = _props4.visible,
                damping = _props4.damping,
                restProps = _objectWithoutProperties(_props4, ['onEndReachedThreshold', 'cutheight', 'RunInDesign', 'pageSize', 'header', 'showHeader', 'initialListSize', 'style', 'rightAlign', 'visible', 'damping']);

            var height = "calc(100% - " + cutheight + ")";
            var wrapClz = (0, _classnames2.default)('yy-list am-list', !visible && 'hidden', this.props.rightAlign, this.props.className);
            return _react2.default.createElement(_listView2.default, _extends({}, restProps, {
                initialListSize: initialListSize,
                ref: function ref(el) {
                    return _this4.lv = el;
                },
                key: 1,
                dataSource: dataSource,
                renderHeader: showHeader ? this.renderHeader.bind(this) : null,
                renderFooter: this.renderFooter.bind(this),
                renderRow: function renderRow(rowData, sectionID, rowID, highlightRow) {
                    return _this4.createRow(rowData, sectionID, rowID, highlightRow);
                },
                className: wrapClz,
                pageSize: pageSize,
                renderBodyComponent: function renderBodyComponent() {
                    return _react2.default.createElement(MyBody, null);
                },
                style: Object.assign({}, style, { height: height, overflow: 'auto' }),
                onScroll: function onScroll() {},
                scrollRenderAheadDistance: 500,
                onEndReached: this.onEndReached,
                onEndReachedThreshold: onEndReachedThreshold,
                pullToRefresh: this.props.onRefresh ? _react2.default.createElement(_pullToRefresh2.default, {
                    distanceToRefresh: 25,
                    refreshing: refreshing,
                    onRefresh: this.onRefresh,
                    damping: damping }) : null }));
        }
    }]);

    return YYList;
}(_react2.default.Component);

YYList.defaultProps = {
    data: [],
    appendData: [],
    initialListSize: 4,
    visible: true,
    autoClose: true,
    customDraw: false,
    showFooter: true,
    lastPage: false,
    footerBefore: "正在加载",
    footerAfter: "加载完成",
    useIcon: false,
    thumbIcon: "Home",
    thumbIconColor: "#0091fa",
    IconSize: "md",
    damping: 100
};
module.exports = YYList;