antd-mobile/lib/grid/index.js

基于 React 的移动设计规范实现

'use strict';

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

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _flex = require('../flex');

var _flex2 = _interopRequireDefault(_flex);

var _carousel = require('../carousel');

var _carousel2 = _interopRequireDefault(_carousel);

var _style = require('./style');

var _style2 = _interopRequireDefault(_style);

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

var Grid = function (_React$Component) {
    (0, _inherits3['default'])(Grid, _React$Component);

    function Grid() {
        (0, _classCallCheck3['default'])(this, Grid);
        return (0, _possibleConstructorReturn3['default'])(this, (Grid.__proto__ || Object.getPrototypeOf(Grid)).apply(this, arguments));
    }

    (0, _createClass3['default'])(Grid, [{
        key: 'getFlexItemStyle',
        value: function getFlexItemStyle() {
            return {
                height: _reactNative.Dimensions.get('window').width / 4,
                borderRightWidth: this.props.hasLine ? 1 : 0
            };
        }
    }, {
        key: 'render',
        value: function render() {
            var _props = this.props,
                data = _props.data,
                hasLine = _props.hasLine,
                isCarousel = _props.isCarousel,
                _props$onClick = _props.onClick,
                onClick = _props$onClick === undefined ? function () {} : _props$onClick,
                styles = _props.styles;
            // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640

            var columnNum = this.props.columnNum;
            var carouselMaxRow = this.props.carouselMaxRow;
            var dataLength = data && data.length || 0;
            var rowCount = Math.ceil(dataLength / columnNum);
            var renderItem = this.props.renderItem || function (dataItem, index) {
                return _react2['default'].createElement(
                    _flex2['default'],
                    { direction: 'column', justify: 'center', style: { flex: 1 }, onPress: function onPress() {
                            return onClick(dataItem, index);
                        } },
                    _react2['default'].isValidElement(dataItem.icon) ? dataItem.icon : _react2['default'].createElement(_reactNative.Image, { source: { uri: dataItem.icon }, style: styles.icon }),
                    _react2['default'].createElement(
                        _reactNative.Text,
                        { style: styles.text },
                        dataItem.text
                    )
                );
            };
            var flexItemStyle = this.getFlexItemStyle();
            var rowsArr = [];
            for (var i = 0; i < rowCount; i++) {
                var rowArr = [];

                var _loop = function _loop(j) {
                    var dataIndex = i * columnNum + j;
                    if (dataIndex < dataLength) {
                        var el = data && data[dataIndex];
                        rowArr.push(_react2['default'].createElement(
                            _flex2['default'].Item,
                            { key: j, style: [styles.grayBorderBox, flexItemStyle, { borderLeftWidth: hasLine && j === 0 ? 1 : 0 }], onPress: function onPress() {
                                    return onClick(el, dataIndex);
                                } },
                            renderItem(el, dataIndex)
                        ));
                    } else {
                        rowArr.push(_react2['default'].createElement(_flex2['default'].Item, { key: j, style: [styles.grayBorderBox, flexItemStyle] }));
                    }
                };

                for (var j = 0; j < columnNum; j++) {
                    _loop(j);
                }
                var boxBorderStyle = {
                    borderTopWidth: hasLine && i === 0 ? 1 : 0,
                    borderBottomWidth: hasLine ? 1 : 0
                };
                rowsArr.push(_react2['default'].createElement(
                    _flex2['default'],
                    { key: i, style: [styles.grayBorderBox, boxBorderStyle] },
                    rowArr
                ));
            }
            var pageCount = Math.ceil(rowCount / carouselMaxRow);
            var pagesArr = [];
            if (isCarousel && pageCount > 1) {
                for (var pageIndex = 0; pageIndex < pageCount; pageIndex++) {
                    var pageRows = [];
                    for (var ii = 0; ii < carouselMaxRow; ii++) {
                        var rowIndex = pageIndex * carouselMaxRow + ii;
                        if (rowIndex < rowCount) {
                            pageRows.push(rowsArr[rowIndex]);
                        } else {
                            var res = [];
                            for (var jjj = 0; jjj < columnNum; jjj++) {
                                res.push(_react2['default'].createElement(_flex2['default'].Item, { key: jjj, style: [styles.grayBorderBox, flexItemStyle] }));
                            }
                            pageRows.push(_react2['default'].createElement(
                                _flex2['default'],
                                { key: rowIndex, style: [styles.grayBorderBox, { borderBottomWidth: hasLine ? 1 : 0 }] },
                                res
                            ));
                        }
                    }
                    pagesArr.push(_react2['default'].createElement(
                        _reactNative.View,
                        { key: pageIndex, style: [styles.grayBorderBox, { borderTopWidth: hasLine && pageIndex !== 0 ? 1 : 0 }] },
                        pageRows
                    ));
                }
            }
            return isCarousel && pageCount > 1 ? _react2['default'].createElement(
                _carousel2['default'],
                { infinite: false, dots: true },
                pagesArr
            ) : _react2['default'].createElement(
                _flex2['default'],
                { direction: 'column' },
                rowsArr
            );
        }
    }]);
    return Grid;
}(_react2['default'].Component); /* tslint:disable:jsx-no-multiline-js */


exports['default'] = Grid;

Grid.defaultProps = {
    data: [],
    hasLine: true,
    isCarousel: false,
    columnNum: 4,
    carouselMaxRow: 2,
    styles: _style2['default']
};
module.exports = exports['default'];