@ant-design/react-native/lib/grid/index.js

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

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _index=_interopRequireDefault(require("../carousel/index"));var _index2=_interopRequireDefault(require("../flex/index"));var _style=require("../style");var _index3=_interopRequireDefault(require("./style/index"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var Grid=function(_React$Component){(0,_inherits2["default"])(Grid,_React$Component);var _super=_createSuper(Grid);function Grid(){(0,_classCallCheck2["default"])(this,Grid);return _super.apply(this,arguments);}(0,_createClass2["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(){var _this=this;var _this$props=this.props,data=_this$props.data,hasLine=_this$props.hasLine,isCarousel=_this$props.isCarousel,_this$props$onPress=_this$props.onPress,_onPress=_this$props$onPress===void 0?function(){}:_this$props$onPress,carouselProps=_this$props.carouselProps;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);return _react["default"].createElement(_style.WithTheme,{styles:this.props.styles,themeStyles:_index3["default"]},function(styles){var renderItem=_this.props.renderItem||function(dataItem,index){return _react["default"].createElement(_index2["default"],{direction:"column",justify:"center",style:{flex:1},onPress:function onPress(){return _onPress(dataItem,index);}},_react["default"].isValidElement(dataItem.icon)?dataItem.icon:_react["default"].createElement(_reactNative.Image,{source:{uri:dataItem.icon},style:styles.icon}),_react["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(_react["default"].createElement(_index2["default"].Item,{key:j,style:[styles.grayBorderBox,flexItemStyle,{borderLeftWidth:hasLine&&j===0?_reactNative.StyleSheet.hairlineWidth:0},customItemStyle],onPress:function onPress(){return _onPress(el,dataIndex);}},el&&renderItem(el,dataIndex)));}else{rowArr.push(_react["default"].createElement(_index2["default"].Item,{key:j,style:[styles.grayBorderBox,flexItemStyle,customItemStyle]}));}};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(_react["default"].createElement(_index2["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(_react["default"].createElement(_index2["default"].Item,{key:jjj,style:[styles.grayBorderBox,flexItemStyle]}));}pageRows.push(_react["default"].createElement(_index2["default"],{key:rowIndex,style:[styles.grayBorderBox,{borderBottomWidth:hasLine?_reactNative.StyleSheet.hairlineWidth:0}]},res));}}pagesArr.push(_react["default"].createElement(_reactNative.View,{key:pageIndex,style:[styles.grayBorderBox,{borderTopWidth:hasLine&&pageIndex!==0?_reactNative.StyleSheet.hairlineWidth:0}]},pageRows));}}return isCarousel&&pageCount>1?_react["default"].createElement(_index["default"],(0,_extends2["default"])({infinite:false,dots:true},carouselProps),pagesArr):_react["default"].createElement(_reactNative.View,null,rowsArr);});}}]);return Grid;}(_react["default"].Component);exports["default"]=Grid;Grid.defaultProps={data:[],hasLine:true,isCarousel:false,columnNum:4,carouselMaxRow:2,itemStyle:{},carouselProps:{}};