@lyra/components/lib/snackbar/DefaultSnackbar.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _defaultStyle = require('part:@lyra/components/snackbar/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _portal = require('part:@lyra/components/utilities/portal');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class DefaultSnackbar extends _react2.default.PureComponent {

  constructor(props, context) {
    super(props, context);

    this.hide = () => {
      this.setState({ visible: false });
    };

    this.show = () => {
      this.setState({ visible: true });
    };

    this.handleAction = () => {
      this.props.onAction(this.props.action);
    };

    this.handleMouseOver = () => {
      this.cancelHide();
    };

    this.handleMouseLeave = () => {
      this.scheduleHide();
    };

    this.state = {
      visible: true
    };
  }

  componentDidMount() {
    this.scheduleHide();
  }

  cancelHide() {
    clearTimeout(this._timerId);
  }

  scheduleHide() {
    const timeout = this.props.timeout;

    this.cancelHide();
    if (timeout > 0) {
      this._timerId = setTimeout(this.hide, timeout * 1000);
    }
  }

  componentWillUnmount() {
    this.cancelHide();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.timeout !== this.props.timeout) {
      this.scheduleHide();
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.timeout !== this.props.timeout) {
      this.show();
    }
  }

  render() {
    var _props = this.props;
    const kind = _props.kind,
          action = _props.action,
          children = _props.children;


    const style = `${_defaultStyle2.default[kind] || _defaultStyle2.default.root} ${this.state.visible ? _defaultStyle2.default.visible : _defaultStyle2.default.hidden}`;

    return _react2.default.createElement(
      _portal.Portal,
      null,
      _react2.default.createElement(
        'div',
        { className: style },
        _react2.default.createElement(
          'div',
          {
            className: _defaultStyle2.default.inner,
            onMouseOver: this.handleMouseOver,
            onMouseLeave: this.handleMouseLeave
          },
          action && _react2.default.createElement(
            'div',
            { className: _defaultStyle2.default.action },
            _react2.default.createElement(
              _default2.default,
              { inverted: true, color: 'white', onClick: this.handleAction },
              action.title
            )
          ),
          _react2.default.createElement(
            'div',
            { className: _defaultStyle2.default.content },
            children
          )
        )
      )
    );
  }
}
exports.default = DefaultSnackbar;
DefaultSnackbar.propTypes = {
  kind: _propTypes2.default.oneOf(['danger', 'info', 'warning', 'error', 'success']),
  children: _propTypes2.default.node.isRequired,
  timeout: _propTypes2.default.number,
  onAction: _propTypes2.default.func,
  action: _propTypes2.default.shape({
    title: _propTypes2.default.string
  })
};
DefaultSnackbar.defaultProps = {
  kind: 'info',
  timeout: 0
};