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

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

"use client";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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=(0,_getPrototypeOf2.default)(derived);return(0,_possibleConstructorReturn2.default)(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],(0,_getPrototypeOf2.default)(_this).constructor):derived.apply(_this,args));}var Grid=function(_React$Component){function Grid(){(0,_classCallCheck2.default)(this,Grid);return _callSuper(this,Grid,arguments);}(0,_inherits2.default)(Grid,_React$Component);return(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 _this2=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=_this2.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=_this2.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);});}}]);}(_react.default.Component);Grid.defaultProps={data:[],hasLine:true,isCarousel:false,columnNum:4,carouselMaxRow:2,itemStyle:{},carouselProps:{}};var _default=Grid;exports.default=_default;