phoenix-ui

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" /> <title>src/modal/Dialog.js - phoenix-ui</title> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> </head> <body class="yui3-smart" _assetsPath="../assets"> <nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand mainlogo" href=""> <img alt="phoenix-ui" src="../assets/css/logo.png" title="phoenix-ui"> phoenix-ui </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">主页</a> </li> </ul> <div class="navbar-form navbar-right filterAPi" autocomplete="off"> <input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" /> <ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul> </div> </div> </div> </nav> <div id="sidebar"> <h3>模块/类</h3> <div id="api-tabview-filter"> <input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes"> </div> <dl id="sidebar_list"> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/基础组件.html">基础组件</a> </dt> <dd> <ul> <li> <a href="../classes/Button.html">Button</a> <ul> </ul> </li> <li> <a href="../classes/ButtonGroup.html">ButtonGroup</a> <ul> </ul> </li> <li> <a href="../classes/Star.html">Star</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/布局组件.html">布局组件</a> </dt> <dd> <ul> <li> <a href="../classes/Row.html">Row</a> <ul> </ul> </li> <li> <a href="../classes/TableView.html">TableView</a> <ul> </ul> </li> <li> <a href="../classes/Col.html">Col</a> <ul> </ul> </li> <li> <a href="../classes/Grid.html">Grid</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/弹出框组件.html">弹出框组件</a> </dt> <dd> <ul> <li> <a href="../classes/Alert.html">Alert</a> <ul> </ul> </li> <li> <a href="../classes/Dialog.html">Dialog</a> <ul> </ul> </li> <li> <a href="../classes/Prompt.html">Prompt</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/提示组件.html">提示组件</a> </dt> <dd> <ul> <li> <a href="../classes/Popover.html">Popover</a> <ul> </ul> </li> <li> <a href="../classes/Whisper.html">Whisper</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/操作类组件.html">操作类组件</a> </dt> <dd> <ul> <li> <a href="../classes/ImageList.html">ImageList</a> <ul> </ul> </li> <li> <a href="../classes/LoadingList.html">LoadingList</a> <ul> </ul> </li> <li> <a href="../classes/Popup.html">Popup</a> <ul> </ul> </li> <li> <a href="../classes/Slider.html">Slider</a> <ul> </ul> </li> <li> <a href="../classes/Steps.html">Steps</a> <ul> </ul> </li> <li> <a href="../classes/Toast.html">Toast</a> <ul> </ul> </li> <li> <a href="../classes/Accordion.html">Accordion</a> <ul> </ul> </li> <li> <a href="../classes/Swipe.html">Swipe</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/标签组件.html">标签组件</a> </dt> <dd> <ul> <li> <a href="../classes/Icon.html">Icon</a> <ul> </ul> </li> <li> <a href="../classes/Badge.html">Badge</a> <ul> </ul> </li> <li> <a href="../classes/Label.html">Label</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/菜单组件.html">菜单组件</a> </dt> <dd> <ul> <li> <a href="../classes/Menu.html">Menu</a> <ul> </ul> </li> <li> <a href="../classes/MenuBody.html">MenuBody</a> <ul> </ul> </li> <li> <a href="../classes/MenuHeader.html">MenuHeader</a> <ul> </ul> </li> <li> <a href="../classes/MenuItem.html">MenuItem</a> <ul> </ul> </li> <li> <a href="../classes/MenuList.html">MenuList</a> <ul> </ul> </li> <li> <a href="../classes/MenuNav.html">MenuNav</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/表单组件.html">表单组件</a> </dt> <dd> <ul> <li> <a href="../classes/Input.html">Input</a> <ul> </ul> </li> <li> <a href="../classes/Switch.html">Switch</a> <ul> </ul> </li> <li> <a href="../classes/FormGroup.html">FormGroup</a> <ul> </ul> </li> <li> <a href="../classes/TextArea.html">TextArea</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/辅助组件.html">辅助组件</a> </dt> <dd> <ul> <li> <a href="../classes/Drag.html">Drag</a> <ul> </ul> </li> <li> <a href="../classes/Animate.html">Animate</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/选项卡.html">选项卡</a> </dt> <dd> <ul> <li> <a href="../classes/Tab.html">Tab</a> <ul> </ul> </li> <li> <a href="../classes/Tabset.html">Tabset</a> <ul> </ul> </li> </ul> </dd> </dl> <div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div> </div> <div class="stdoc-content"> <div class="apidocs"> <div id="docs-main"> <div class="content"> <div class="page-header"> <h1>src/modal/Dialog.js <small>File</small></h1> </div> <div class="file"> <pre class="prettyprint linenums" id='src_code'> import React,{PropTypes} from 'react'; import Component from '../utils/Component'; import classnames from 'classnames'; import {setPhoenixPrefix} from '../utils/Tool'; import Animate from '../Animate'; /** * <h5>弹出框组件，主要包括组件:</h5> * <strong><a href='../classes/Dialog.html'>Dialog 基础弹框</a></strong><br/> * <strong><a href='../classes/Alert.html'>Alert弹框</a></strong><br> * <strong><a href='../classes/Prompt.html'>Prompt弹框</a></strong> * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6> * @module 弹出框组件 * @main 弹出框组件 * @static */ /** * 弹框组件<br/> * - 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。 * - 通过visible设置弹框是否显示, 可选true/false, 必需。 * - 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。 * - 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。 * - 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。 * * 主要属性和接口： * - visible:弹框是否显示标识, 默认false不可见<br/> * - onClose:关闭弹框的功能函数<br/> * - closeButton:右上角关闭按钮是否显示的标识, 默认不显示<br/> * - shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭<br/> * * 示例: * ```code * <Dialog visible={this.state.visible} onClose={::this.onClose} closeButton shadowDisabled> * <Dialog.Title>标题标题</Dialog.Title> * <Dialog.Body> * <p>可自定义表格内容</p> * </Dialog.Body> * <Dialog.Footer> * <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose}>取消</Button> * </Dialog.Footer> * </Dialog> * ``` * ```code * onShow(){ * this.setState({ * visible: true * }); * } * onClose(){ * this.setState({ * visible: false * }); * } * ``` * * @class Dialog * @module 弹出框组件 * @extends Component * @constructor * @since 0.4.0 * @demo dialog|dialog.js {展示} * @show true * */ class Dialog extends Component{ static propTypes = { /** * 样式前缀 * @property classPrefix * @type String * @default 'dialog' * */ classPrefix: PropTypes.string, /** * 标签tagName * @property componentTag * @type String * */ componentTag:PropTypes.string, /** * 是否可见标识 * @property visible * @type Boolean * */ visible: PropTypes.bool, /** * 关闭弹框的执行函数 * @method onClose * @type Function * */ onClose: PropTypes.func, /** * 右上角按钮是否可见, 默认不可见 * @property closeButton * @type Boolean * */ closeButton: PropTypes.bool, /** * 阴影部分是否点击可关闭弹框, 默认传了onClose之后可关闭 * @property shadowDisabled * @type Boolean * */ shadowDisabled: PropTypes.bool, }; static defaultProps = { visible: false, classPrefix:'dialog', componentTag:'div', classMapping : {} }; constructor(props, context) { super(props, context); } onShadowClose(){ let {shadowDisabled, onClose} = this.props; if(shadowDisabled) return; onClose(); } renderShadow(){ let {visible} = this.props; if(visible){ return <div className={classnames(setPhoenixPrefix("dialog-shadow"), "animated")} onClick={::this.onShadowClose}></div>; }else{ return ''; } } renderContent(){ let {visible, closeButton, onClose} = this.props; if(visible){ return ( <div className={classnames(setPhoenixPrefix("dialog-main"), "animated")}> <div className={classnames(setPhoenixPrefix("dialog-content"), "animated")}> <a href="javascript:;" onClick={onClose} className={classnames( setPhoenixPrefix("dialog-close"), closeButton ? "show":"hide", "gfs-icon icon-close" )}></a> {this.renderDialog()} </div> </div> ); }else{ return ''; } } renderDialog(){ let newChildren = []; let {visible, children} = this.props; React.Children.forEach(children, function(child, index){ // console.log(child.type.name); newChildren.push(React.cloneElement(child,{ key: index, visible: visible })); }); return newChildren; } render(){ let {componentTag:Component, className} = this.props; return ( <Component {...this.props} className={classnames( this.getProperty(true), className )}> <Animate> {this.renderShadow()} </Animate> <Animate> {this.renderContent()} </Animate> </Component> ); } } class DialogTitle extends Component{ constructor(props, context) { super(props, context); } render(){ return ( <h2 {...this.props} className={classnames( setPhoenixPrefix('dialog-title'), this.props.className )}> {this.props.children} </h2> ); } } class DialogBody extends Component{ constructor(props, context) { super(props, context); } render(){ return ( <div {...this.props} className={classnames( setPhoenixPrefix('dialog-body'), this.props.className )}> {this.props.children} </div> ); } } class DialogFooter extends Component{ constructor(props, context) { super(props, context); } render(){ return ( <div {...this.props} className={classnames( setPhoenixPrefix('dialog-footer'), this.props.className, 'clearfix' )}> {this.props.children} </div> ); } } Dialog.Title = DialogTitle; Dialog.Body = DialogBody; Dialog.Footer = DialogFooter; export default Dialog; </pre> </div> </div> </div> </div> </div> <a id="gotoTop" class='well well-small' href='#'> </a> <script src="../assets/vendor/jquery/jquery-1.8.2.js"></script> <script src="../assets/vendor/bootstrap/js/bootstrap.js"></script> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script src="../assets/js/config.js"></script> <script src="../assets/js/doc.js"></script> </body> </html>