antd-mobile-rn/lib/grid/index.native.js

基于蚂蚁金服移动设计规范的 React Native 组件库

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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 _index = require("../carousel/index.native");

var _index2 = _interopRequireDefault(_index);

var _index3 = require("../flex/index.native");

var _index4 = _interopRequireDefault(_index3);

var _index5 = require("./style/index.native");

var _index6 = _interopRequireDefault(_index5);

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

var GridStyles = _reactNative.StyleSheet.create(_index6["default"]); /* tslint:disable:jsx-no-multiline-js */

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(columnNum) {
            return {
                height: _reactNative.Dimensions.get("window").width / columnNum,
                borderRightWidth: this.props.hasLine ? _reactNative.StyleSheet.hairlineWidth : 0
            };
        }
    }, {
        key: "render",
        value: function render() {
            // tslint:disable-next-line:no-empty
            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,
                carouselProps = _props.carouselProps;
            // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640

            var columnNum = this.props.columnNum;
            var customItemStyle = this.props.itemStyle;
            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(
                    _index4["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(columnNum);
            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(
                            _index4["default"].Item,
                            { key: j, style: [styles.grayBorderBox, flexItemStyle, {
                                    borderLeftWidth: hasLine && j === 0 ? _reactNative.StyleSheet.hairlineWidth : 0
                                }, customItemStyle], onPress: function onPress() {
                                    return onClick(el, dataIndex);
                                } },
                            renderItem(el, dataIndex)
                        ));
                    } else {
                        rowArr.push(_react2["default"].createElement(_index4["default"].Item, { key: j, style: [styles.grayBorderBox, flexItemStyle] }));
                    }
                };

                for (var j = 0; j < columnNum; j++) {
                    _loop(j);
                }
                var boxBorderStyle = {
                    borderTopWidth: hasLine && i === 0 ? _reactNative.StyleSheet.hairlineWidth : 0,
                    borderBottomWidth: hasLine ? _reactNative.StyleSheet.hairlineWidth : 0
                };
                rowsArr.push(_react2["default"].createElement(
                    _index4["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(_index4["default"].Item, { key: jjj, style: [styles.grayBorderBox, flexItemStyle] }));
                            }
                            pageRows.push(_react2["default"].createElement(
                                _index4["default"],
                                { key: rowIndex, style: [styles.grayBorderBox, { borderBottomWidth: hasLine ? _reactNative.StyleSheet.hairlineWidth : 0 }] },
                                res
                            ));
                        }
                    }
                    pagesArr.push(_react2["default"].createElement(
                        _reactNative.View,
                        { key: pageIndex, style: [styles.grayBorderBox, {
                                borderTopWidth: hasLine && pageIndex !== 0 ? _reactNative.StyleSheet.hairlineWidth : 0
                            }] },
                        pageRows
                    ));
                }
            }
            return isCarousel && pageCount > 1 ? _react2["default"].createElement(
                _index2["default"],
                (0, _extends3["default"])({ infinite: false, dots: true }, carouselProps),
                pagesArr
            ) : _react2["default"].createElement(
                _index4["default"],
                { direction: "column" },
                rowsArr
            );
        }
    }]);
    return Grid;
}(_react2["default"].Component);

exports["default"] = Grid;

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