zarm-web/es/notification/Notification.js

基于 React 的桌面端UI库

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import classnames from 'classnames';
import Transition from '../transition';
import Icon from '../icon';
export default class Notification extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      visible: false
    };
    this.timeout = void 0;
    this.offsetHeight = void 0;
    this.notification = void 0;

    this.onClick = event => {
      if (this.props.onClick) {
        this.props.onClick(event);
      }
    };

    this.onClose = event => {
      const {
        onClose
      } = this.props;
      this.stopTimer();
      this.leave();

      if (typeof onClose === 'function') {
        onClose(event);
      }
    };

    this.onMouseEnter = () => {
      this.stopTimer();
    };

    this.onMouseLeave = () => {
      this.startTimer();
    };
  }

  componentDidMount() {
    this.enter();
    this.startTimer();
  }

  componentWillUnmount() {
    clearInterval(this.timeout);
  }

  get type() {
    const {
      theme
    } = this.props;

    switch (theme) {
      case 'success':
        return 'right-round-fill';

      case 'danger':
        return 'wrong-round-fill';

      case 'primary':
        return 'info-round-fill';

      case 'warning':
        return 'warning-round-fill';
      // case 'loading':
      //   return 'loading';

      default:
        return '';
    }
  }

  startTimer() {
    const {
      stayTime
    } = this.props;

    if (stayTime) {
      this.timeout = setTimeout(() => {
        this.onClose();
      }, stayTime);
    }
  }

  stopTimer() {
    clearInterval(this.timeout);
  }

  enter() {
    this.setState({
      visible: true
    });
  }

  leave() {
    this.setState({
      visible: false
    });
  }

  render() {
    const {
      prefixCls,
      className,
      top,
      style,
      title,
      message,
      theme,
      isMessage,
      willUnMount,
      btn
    } = this.props;
    const {
      visible
    } = this.state;
    const componentName = isMessage ? 'message' : 'notification';
    return React.createElement(Transition, {
      visible: visible,
      name: componentName,
      duration: 200,
      unmountOnHide: true,
      onStart: () => {
        this.offsetHeight = this.notification.offsetHeight;
      },
      onBeforeHide: () => willUnMount(this.offsetHeight, parseInt(this.notification.style.top, 10))
    }, React.createElement("div", {
      ref: el => {
        this.notification = el;
      },
      className: classnames(prefixCls, className),
      onClick: this.onClick,
      style: _objectSpread({}, style, {
        top
      })
    }, React.createElement("div", {
      className: classnames(`za-${componentName}__content`, {
        'has-icon': theme
      })
    }, !isMessage && React.createElement("div", {
      className: `za-${componentName}__close`,
      onClick: this.onClose
    }, React.createElement(Icon, {
      type: "wrong"
    })), !isMessage && theme && React.createElement(Icon, {
      type: this.type,
      className: `za-${componentName}__icon`,
      theme: theme
    }), title && React.createElement("div", {
      className: `za-${componentName}__title`
    }, title), React.createElement("div", {
      className: `za-${componentName}__custom-content`,
      onMouseEnter: this.onMouseEnter,
      onMouseLeave: this.onMouseLeave
    }, isMessage && React.createElement(Icon, {
      type: this.type,
      className: `za-${componentName}__icon`,
      theme: theme
    }), message, !isMessage && React.createElement("span", {
      className: `za-${componentName}__action-area`
    }, btn)))));
  }

}
Notification.defaultProps = {
  prefixCls: 'za-notification',
  message: '',
  top: 20,
  stayTime: 4500,
  onClick: () => {},
  onClose: () => {}
};