src/Toast.js File

  1. import React,{PropTypes} from 'react';
  2. import ReactDOM from 'react/lib/ReactDOM';
  3. import Component from './utils/Component';
  4. import classnames from 'classnames';
  5. import {setPhoenixPrefix} from './utils/Tool';
  6.  
  7. /**
  8.  * 飘字组件<br/>
  9.  * - 由于飘字的使用范围可预估, 为方便使用在原组件的基础上更进一步改为函数式的使用方式。
  10.  * - 普通信息: `Toast.info(message, duration, callback)`
  11.  * - 成功信息: `Toast.success(message, duration, callback)`
  12.  * - 失败信息: `Toast.fail(message, duration, callback)`
  13.  * - 加载中: `Toast.loading(message, duration, callback)`
  14.  * - 移除: `Toast.remove()`
  15.  * - 如果不根据设置的时间移除飘字，`duration`设置为false，`Toast.remove()`移除飘字。
  16.  *
  17.  * 示例: <br/>
  18.  * - 显示普通飘字, 如:<br/>
  19.  * `Toast.info('只显示信息的toast！', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
  20.  * - 显示成功信息, 如:<br/>
  21.  * `Toast.success('操作成功', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
  22.  * - 显示失败信息, 如:<br/>
  23.  * `Toast.fail('操作失败', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
  24.  * - 显示加载中, 如:<br/>
  25.  * `Toast.loading('加载中...', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
  26.  * - 移除飘字, 如:<br/>
  27.  * `Toast.remove()`
  28.  *
  29.  * @class Toast
  30.  * @module 操作类组件
  31.  * @extends Component
  32.  * @constructor
  33.  * @since 0.3.0
  34.  * @demo toast|toast.js
  35.  * @show true
  36.  * */
  37.  
  38. class Toast extends Component{
  39.  
  40.     static propTypes = {};
  41.  
  42.     static defaultProps = {
  43.         classPrefix:'toast',
  44.         componentTag:'div',
  45.         classMapping : {}
  46.     };
  47.  
  48.     constructor(props, context) {
  49.         super(props, context);
  50.     }
  51.  
  52.     render(){
  53.         let {componentTag:Component, className} = this.props;
  54.  
  55.         return (
  56.             <Component {...this.props} className={classnames(
  57.                 this.getProperty(true),
  58.                 className
  59.             )}>
  60.                 <div className={setPhoenixPrefix("toast-shadow")}></div>
  61.                 <div className={setPhoenixPrefix("toast-main")}>
  62.                     <div className={setPhoenixPrefix("toast-content")}>
  63.                         {this.props.children}
  64.                     </div>
  65.                 </div>
  66.             </Component>
  67.         );
  68.     }
  69.  
  70. }
  71.  
  72. let _layer = document.createElement('div'),
  73.     timer  = null,
  74.     visible = false;
  75.  
  76. function renderLayer(content,className){
  77.     return <Toast className={className}>{content}</Toast>;
  78. }
  79.  
  80. function _renderLayer(layerElement, duration, callback){
  81.     visible = true;
  82.  
  83.     ReactDOM.render(layerElement, _layer);
  84.     document.body.appendChild(_layer);
  85.  
  86.     window.addEventListener('hashchange', _unrenderLayer, false);
  87.  
  88.     if(duration){
  89.         timer = setTimeout(function(){
  90.             visible = false;
  91.  
  92.             _unrenderLayer();
  93.             callback();
  94.         }, duration);
  95.     }    
  96. }
  97.  
  98. function _unrenderLayer(){
  99.     ReactDOM.unmountComponentAtNode(_layer);
  100.     if(visible) document.body.removeChild(_layer);
  101.  
  102.     window.removeEventListener('hashchange', _unrenderLayer, false);
  103.     clearTimeout(timer);
  104. }
  105.  
  106. export default {
  107.     info(content, duration, callback){
  108.         let layerElement = renderLayer(content);
  109.         _renderLayer(layerElement, duration, callback);
  110.     },
  111.     success(content, duration, callback){
  112.         let layerElement = renderLayer(content, setPhoenixPrefix('toast-success'));
  113.         _renderLayer(layerElement, duration, callback);
  114.     },
  115.     fail(content, duration, callback){
  116.         let layerElement = renderLayer(content, setPhoenixPrefix('toast-fail'));
  117.         _renderLayer(layerElement, duration, callback);
  118.     },
  119.     loading(content, duration, callback){
  120.         let layerElement = renderLayer(content, setPhoenixPrefix('toast-loading'));
  121.         _renderLayer(layerElement, duration, callback);
  122.     },
  123.     remove(){
  124.         _unrenderLayer();
  125.         clearTimeout(timer);
  126.     }
  127. }
  128.