yylib-quick-mobile
Version:
yylib-quick-mobile
64 lines (60 loc) • 2.11 kB
JavaScript
/**
* Created by gaoly on 2018.3.13. 移动端布局容器
*/
import React from 'react'
import { Flex } from 'antd-mobile'
import classnames from 'classnames';
import './YYArea.less';
class YYArea extends React.Component {
render () {
let control;
let {className,avage,positiontype,children,position,top,left,bottom,right,direction,wrap,justify,align,width,height,autoheight,visible}=this.props;
children=(children&&children.length)?children:<span>容器</span>;/****为了显示**/
let flexStyle={position:"relative",width:width,"zIndex":1,height:height};
let areaClz = classnames('yy-area',(!visible&&'hidden'), className);
if(autoheight){
height="auto";
}
if(position&&position!="relative"){
/****绝对定位和固定位置情况下****/
if(positiontype=="left-top"){
flexStyle={"position":position,"top":top,"left":left,width:width,height:height,"zIndex":1};
}
else if(positiontype=="left-bottom"){
flexStyle={"position":position,"bottom":bottom,"left":left,width:width,height:height,"zIndex":1};
}
else if(positiontype=="right-bottom"){
flexStyle={"position":position,"bottom":bottom,"right":right,width:width,height:height,"zIndex":1};
}
else if(positiontype=="right-top"){
flexStyle={"position":position,"top":top,"right":right,width:width,height:height,"zIndex":1};
}
}
if(children&&children.length&&avage){
children=Array.prototype.slice.call(children);
var itemheight={"height":"auto"};
if(children.length==1){
itemheight={"height":"100%"};
}
control=children.map((com,index)=>(<Flex.Item key={index} style={itemheight}>{com}</Flex.Item>));
}else{
control=children;
}
return (
<Flex
className={areaClz}
style={flexStyle}
direction={direction}
wrap={wrap}
justify={justify}
align={align}
>{control}</Flex>
);
}
}
YYArea.defaultProps = {
position:"relative",
autoheight:true,
visible:true
}
module.exports = YYArea;