- import React,{PropTypes} from 'react';
- import Component from '../utils/Component';
- import classnames from 'classnames';
- import {setPhoenixPrefix} from '../utils/Tool';
-
- import Animate from '../Animate';
- import Icon from '../Icon';
-
- /**
- * 菜单内容组件<br/>
- * - 通过placement设置菜单出现的位置和类型, 可选 [top,left,right,left-full,right-full,full-screen]。
- * - 可通过width设置侧边菜单的宽度, 当前placement为top和full-screen不生效。
- * - 可通过closeButton来配置菜单主体右上角X按钮是否显示。
- *
- * 主要属性和接口:
- * - placement:菜单出现的位置和类型, 默认top。
- * - width:侧边菜单的宽度, 当前placement为top和full-screen不生效。
- * - closeButton:菜单主体右上角X按钮是否显示, 默认不显示。<br/>
- * 如:
- * ```code
- * <Menu>
- * <Menu.Header>
- * 标题一
- * </Menu.Header>
- * <Menu.Body width={60} placement="left" closeButton>
- * ...
- * </Menu.Body>
- * </Menu>
- * ```
- *
- * @class MenuBody
- * @module 菜单组件
- * @extends Component
- * @constructor
- * @since 1.3.0
- * @demo menu|menu.js {展示}
- * @show true
- * */
- export default class MenuBody extends Component{
- static propTypes = {
- /**
- * 样式前缀
- * @property classPrefix
- * @type String
- * @default 'menu-body'
- * */
- classPrefix: PropTypes.string,
- /**
- * 菜单位置, 可选[top,left,right,left-full,right-full,full-screen], 默认top
- * @property placement
- * @type String
- * @default 'top'
- * */
- placement: PropTypes.string,
- /**
- * 自定义菜单宽度百分比(限左右)
- * @property width
- * @type Number
- * @default 50
- * */
- width: PropTypes.number,
- // closeMode: PropTypes.string,
- /**
- * 右上角按钮是否可见, 默认不可见
- * @property closeButton
- * @type Boolean
- * */
- closeButton: PropTypes.bool,
- };
-
- static defaultProps = {
- width: 50,
- classPrefix:'menu-body',
- placement: 'top',
- classMapping : {
- 'top':'top',
- 'left':'left',
- 'right':'right',
- 'left-full':'left-full',
- 'right-full':'right-full',
- 'full-screen':'full-screen'
- }
- };
-
- constructor(props, context) {
- super(props, context);
- }
-
- componentDidMount(){
- this.setSize();
- }
-
- componentDidUpdate(){
- this.setSize();
- }
-
- setSize(){
- let {visible, placement, width} = this.props;
-
- // if(placement=="top") this.menuBodyParent.style.height = visible? this.menuBody.offsetHeight+'px' : 0;
-
- if(this.props.visible && width){
- if(placement=="top") return;
- if(placement=="full-screen") width = 100;
- this.menuBodyParent.style.width = width +'%';
- }
- }
-
- renderAnimation(){
- let {visible,children,className} = this.props;
-
- if(visible){
- return (
- <div {...this.props} className={classnames(this.getProperty(true),className, 'animated')}
- ref={(menuBodyParent)=>{this.menuBodyParent = menuBodyParent;}}>
- {this.renderCloseButton()}
- {children}
- </div>
- );
- }else{
- return '';
- }
- }
-
- renderCloseButton(){
- let {closeButton} = this.props;
-
- if(closeButton){
- return <Icon phIcon="close" className={classnames(setPhoenixPrefix('menu-close-button'))} onClick={::this.onChange} />;
- }else{
- return '';
- }
- }
-
- onChange(){
- this.props.changeVisible();
- }
-
- render(){
- let {placement} = this.props;
- let animateName = `slide-${this.props.placement}`;
-
- if(placement=="full-screen") animateName = "fade";
-
- return (
- <Animate transitionName={animateName}>
- {this.renderAnimation()}
- </Animate>
- );
- }
- }
-