yylib-quick-mobile/dist/yylib/layout/YYLayoutPanel.js

yylib-quick-mobile

import React from 'react';
import './YYLayoutPanel.less';
import classnames from 'classnames';
class YYLayoutPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
      lineClass: '',
    };
  }
  getCondition(position, visible) {
    let {children} = this.props;
    let style = {position}
    let panelClassName = classnames({
      'yy-layout-panel': true,
      'hidden': !visible
    });
    panelClassName = panelClassName;
    return panelClassName;
  }
  getContent (position) {
    let {children} = this.props;
    let positionContent = '';
    switch (position) {
      case 'top': positionContent = '头部区域';
      break;
      case 'center': positionContent = '中部区域';
      break;
      case 'bottom': positionContent = '底部区域';
      break;
      default: positionContent = '';
      break;
    }
    this.setState({
      content: positionContent,
      lineClass: (children&&children.length>0||position==='center')?"":position
    });
  }
  componentDidMount() {
    let {RunInDesign, position}=this.props;
    if (RunInDesign) {
      this.getContent(position);
    }
  }
  componentWillReceiveProps(nextprops){
    if(nextprops.RunInDesign){
      this.getContent(nextprops.position);
    }
  }
  render() {
    let {position, height, visible, children, style} = this.props;
    let {content,lineClass} = this.state;
    let panelClassName = this.getCondition(position, visible)+' '+lineClass;
    children = (children&&children.constructor==Array)?children:[children];
    return(
      <div style={Object.assign({},style,{height:height})}
        className={panelClassName}>
        {children&&children.length>0?children:content}
      </div>
    );
  }
}
YYLayoutPanel.defaultProps = {
  position: "",
  visible: true
};
module.exports = YYLayoutPanel;