UNPKG

zent

Version:

一套前端设计语言和基于React的实现

121 lines (106 loc) 2.53 kB
import React, { Component, PropTypes } from 'react'; import Popover from 'zent-popover'; import Icon from 'zent-icon'; import cx from 'zent-utils/classnames'; import CommonMenu from './CommonMenu'; const PopoverContent = Popover.Content; const PopoverHoverTrigger = Popover.Trigger.Hover; const withPopover = Popover.withPopover; const HoverContent = withPopover(class _HoverContent extends CommonMenu { onClick = (e, index) => { const { onClick, popover } = this.props; popover.close(); onClick(e, index); }; renderMenuItem = (c, i, index) => { if (!c) { return null; } return this.renderCommonMenuItem(c, i, index); }; render() { const { prefix, children } = this.props; return ( <ul className={cx(`${prefix}-menu`, `${prefix}-sub-menu`)} > {React.Children.map(children, this.renderMenuItem)} </ul> ); } }); export default class MenuItem extends Component { static propTypes = { title: PropTypes.string, prefix: PropTypes.string, className: PropTypes.string, overlayClassName: PropTypes.string, disabled: PropTypes.bool, onClick: PropTypes.func, }; static defaultProps = { prefix: 'zent', disabled: false }; renderContent = () => { const { title, prefix, children, onClick, className, overlayClassName, disabled } = this.props; if (disabled) { return title; } return (<Popover wrapperClassName={`${prefix}-sub-menu-popover-wrapper`} className={cx(`${prefix}-sub-menu-overlay`, overlayClassName)} position={Popover.Position.RightTop} display="inline-block" cushion={5} > <PopoverHoverTrigger showDelay={200} hideDelay={200} > <div className={`${prefix}-sub-menu-trigger`}> {title} <Icon type="right" /> </div> </PopoverHoverTrigger> <PopoverContent> <HoverContent prefix={prefix} onClick={onClick} className={className} > {children} </HoverContent> </PopoverContent> </Popover>); } render() { const { prefix, className, disabled } = this.props; return ( <li className={ cx(`${prefix}-menu-item`, className, { [`${prefix}-menu-item-disabled`]: disabled }) } > {this.renderContent()} </li> ); } }