yylib-quick-mobile/source/yylib/library/YYReply.js

yylib-quick-mobile

'use strict';

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

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

var _pullToRefresh2 = _interopRequireDefault(_pullToRefresh);

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

var _listView2 = _interopRequireDefault(_listView);

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/list-view/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _YYComment = require('./YYComment');

var _YYComment2 = _interopRequireDefault(_YYComment);

require('./YYReply.less');

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

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

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

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

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

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

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

        _this.state = {
            dataSource: dataSource,
            isLoading: true,
            refreshing: true,
            height: document.documentElement.clientHeight - 148,
            initdata: [],
            footer: '' };
        return _this;
    }

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

            var hei = this.state.height - _reactDom2.default.findDOMNode(this.lv).offsetTop;
            setTimeout(function () {
                var data = _this2.props.data;
                if (_this2.props.isreached) {
                    _this2.setState({
                        footer: '加载完成'
                    });
                } else {
                    _this2.setState({
                        footer: ''
                    });
                }
                if (_this2.props.data.length !== 0) {
                    _this2.setState({
                        initdata: data,
                        height: hei,
                        dataSource: _this2.state.dataSource.cloneWithRows(data),
                        isLoading: false,
                        refreshing: false
                    });
                } else {
                    _this2.setState({
                        isLoading: false,
                        refreshing: false
                    });
                }
            }, 1000);
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextprops) {
            var _this3 = this;

            var _self = this;
            if (nextprops.data !== this.props.data) {
                var hei = this.state.height - _reactDom2.default.findDOMNode(this.lv).offsetTop;
                setTimeout(function () {
                    var data = _this3.props.data;
                    if (_this3.props.isreached) {
                        _this3.setState({
                            footer: '加载完成'
                        });
                    } else {
                        _this3.setState({
                            footer: ''
                        });
                    }
                    _this3.setState({
                        initdata: data,
                        height: hei,
                        dataSource: _this3.state.dataSource.cloneWithRows(data),
                        isLoading: false,
                        refreshing: false
                    });
                }, 600);
            } else if (nextprops.appendData !== this.props.appendData) {
                if (_self.state.isLoading && !_self.state.hasMore) {
                    return;
                }
                _self.setState({ isLoading: true });
                setTimeout(function () {
                    _self.rData = [].concat(_toConsumableArray(_self.state.initdata), _toConsumableArray(_self.props.appendData));
                    _self.setState({
                        initdata: _self.rData,
                        dataSource: _self.state.dataSource.cloneWithRows(_self.rData),
                        isLoading: false
                    });
                }, 1000);
            }
        }
    }, {
        key: 'renderReplies',
        value: function renderReplies(replies) {
            var repliesData = [];
            if (replies && replies.length) {
                replies.map(function (item, index) {
                    var reply = _react2.default.createElement(
                        'div',
                        { key: item.id, className: 'reply-item' },
                        _react2.default.createElement(
                            'span',
                            { className: 'createDate' },
                            item.createDate
                        ),
                        _react2.default.createElement(
                            'span',
                            { className: 'name' },
                            item.username
                        ),
                        '\u56DE\u590D',
                        _react2.default.createElement(
                            'span',
                            { className: 'name' },
                            item.replyName
                        ),
                        ':',
                        item.content
                    );
                    repliesData.push(reply);
                });
            }
            if (repliesData.length) {
                return _react2.default.createElement(
                    'div',
                    { className: 'reply-list' },
                    repliesData
                );
            }
        }
    }, {
        key: 'createRow',
        value: function createRow(rowData, sectionID, rowID, highlightRow) {
            return _react2.default.createElement(
                'div',
                { className: 'comment-item', key: rowData.id },
                _react2.default.createElement(
                    'div',
                    { className: 'name' },
                    rowData.username
                ),
                _react2.default.createElement(
                    'div',
                    { className: 'content' },
                    rowData.content
                ),
                this.renderReplies(rowData.replies),
                _react2.default.createElement(
                    'div',
                    { className: 'oper' },
                    _react2.default.createElement(
                        'div',
                        { className: 'createDate' },
                        rowData.createDate
                    ),
                    _react2.default.createElement(_YYComment2.default, { item: rowData,
                        selectRow: this.props.selectRow,
                        send: this.send.bind(this),
                        liked: this.liked.bind(this) })
                )
            );
        }
    }, {
        key: 'send',
        value: function send(param) {
            this.props.send(param);
        }
    }, {
        key: 'liked',
        value: function liked(id) {
            this.props.liked(id);
        }
    }, {
        key: 'onEndReached',
        value: function onEndReached() {
            this.props.reached();
        }
    }, {
        key: 'onRefresh',
        value: function onRefresh() {
            this.props.refresh();
        }
    }, {
        key: 'render',
        value: function render() {
            var _this4 = this;

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

            return _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(_listView2.default, {
                    className: 'yy-reply-list',
                    ref: function ref(el) {
                        return _this4.lv = el;
                    },
                    dataSource: dataSource,
                    renderFooter: function renderFooter() {
                        return _react2.default.createElement(
                            'div',
                            { style: { padding: 30, textAlign: 'center' } },
                            isLoading ? '正在加载...' : footer
                        );
                    },
                    renderBodyComponent: function renderBodyComponent() {
                        return _react2.default.createElement(MyBody, null);
                    },
                    renderRow: function renderRow(rowData, sectionID, rowID, highlightRow) {
                        return _this4.createRow(rowData, sectionID, rowID, highlightRow);
                    },
                    style: {
                        height: height,
                        overflow: 'auto'
                    },
                    pageSize: 10,
                    onScroll: function onScroll() {
                        console.log('scroll');
                    },
                    scrollRenderAheadDistance: 500,
                    onEndReached: this.onEndReached.bind(this),
                    onEndReachedThreshold: 10,
                    pullToRefresh: _react2.default.createElement(_pullToRefresh2.default, {
                        distanceToRefresh: 25,
                        refreshing: refreshing,
                        onRefresh: this.onRefresh.bind(this) }) }),
                _react2.default.createElement(_YYComment2.default, {
                    position: 'fixed',
                    selectRow: this.props.selectRow,
                    send: this.send.bind(this) })
            );
        }
    }]);

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

YYReply.defaultProps = {
    data: [],
    init: []
};
exports.default = YYReply;