antd-mobile/es/grid/index.js

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

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/* tslint:disable:jsx-no-multiline-js */
import React from 'react';
import { Image, Text, Dimensions, View } from 'react-native';
import Flex from '../flex';
import Carousel from '../carousel';
import GridStyle from './style';

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

    function Grid() {
        _classCallCheck(this, Grid);

        return _possibleConstructorReturn(this, (Grid.__proto__ || Object.getPrototypeOf(Grid)).apply(this, arguments));
    }

    _createClass(Grid, [{
        key: 'getFlexItemStyle',
        value: function getFlexItemStyle() {
            return {
                height: 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 React.createElement(
                    Flex,
                    { direction: 'column', justify: 'center', style: { flex: 1 }, onPress: function onPress() {
                            return onClick(dataItem, index);
                        } },
                    React.isValidElement(dataItem.icon) ? dataItem.icon : React.createElement(Image, { source: { uri: dataItem.icon }, style: styles.icon }),
                    React.createElement(
                        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(React.createElement(
                            Flex.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(React.createElement(Flex.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(React.createElement(
                    Flex,
                    { 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(React.createElement(Flex.Item, { key: jjj, style: [styles.grayBorderBox, flexItemStyle] }));
                            }
                            pageRows.push(React.createElement(
                                Flex,
                                { key: rowIndex, style: [styles.grayBorderBox, { borderBottomWidth: hasLine ? 1 : 0 }] },
                                res
                            ));
                        }
                    }
                    pagesArr.push(React.createElement(
                        View,
                        { key: pageIndex, style: [styles.grayBorderBox, { borderTopWidth: hasLine && pageIndex !== 0 ? 1 : 0 }] },
                        pageRows
                    ));
                }
            }
            return isCarousel && pageCount > 1 ? React.createElement(
                Carousel,
                { infinite: false, dots: true },
                pagesArr
            ) : React.createElement(
                Flex,
                { direction: 'column' },
                rowsArr
            );
        }
    }]);

    return Grid;
}(React.Component);

export default Grid;

Grid.defaultProps = {
    data: [],
    hasLine: true,
    isCarousel: false,
    columnNum: 4,
    carouselMaxRow: 2,
    styles: GridStyle
};