@geezee/react-ui/esm/use-notifications/notification-item.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useState } from 'react';
import useTheme from '../styles/use-theme';
import Bell from '@zeit-ui/react-icons/bell';
import ModalIcon from './modal-icon';
var transitionDuration = 150;
var NotificationItem = React.memo(function (_ref) {
  var className = _ref.className,
      id = _ref.id,
      title = _ref.title,
      content = _ref.content,
      placement = _ref.placement,
      delay = _ref.delay,
      destroy = _ref.destroy,
      onClose = _ref.onClose,
      closeable = _ref.closeable,
      rest = _objectWithoutProperties(_ref, ["className", "id", "title", "content", "placement", "delay", "destroy", "onClose", "closeable"]);

  var theme = useTheme();
  var boxShadow = theme.expressiveness.D2;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      hide = _useState4[0],
      setHide = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      hover = _useState6[0],
      setHover = _useState6[1];

  useEffect(function () {
    var timer = window.setTimeout(function () {
      setVisible(true);
      clearTimeout(timer);
    }, 10);
    return function () {
      return clearTimeout(timer);
    };
  }, []);
  useEffect(function () {
    var timer;

    if (delay && !hover) {
      timer = window.setTimeout(function () {
        setHide(true);
        clearTimeout(timer);
      }, delay);
    }

    return function () {
      delay && clearTimeout(timer);
    };
  }, [delay, hover]);
  useEffect(function () {
    var timer;

    if (hide) {
      timer = window.setTimeout(function () {
        destroy && destroy(id);
        onClose && onClose(id);
        clearTimeout(timer);
      }, transitionDuration);
    }

    return function () {
      return clearTimeout(timer);
    };
  }, [hide]);

  var handleClose = function handleClose() {
    setHide(true);
  };

  var handleMouseEnter = function handleMouseEnter() {
    setHover(true);
  };

  var handleMouseLeave = function handleMouseLeave() {
    setHover(false);
  };

  return /*#__PURE__*/React.createElement("div", {
    key: id,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    className: _JSXStyle.dynamic([["876319196", [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]]]) + " " + "notification ".concat(className, " ").concat(visible ? 'visible' : '', " ").concat(hide ? 'hide' : '', " ").concat(placement, " ").concat(rest.color)
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["876319196", [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]]]) + " " + "icon"
  }, rest.icon || /*#__PURE__*/React.createElement(Bell, null)), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["876319196", [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]]])
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["876319196", [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]]]) + " " + "title"
  }, title), content !== '' && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["876319196", [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]]]) + " " + "content"
  }, content)), closeable && /*#__PURE__*/React.createElement(ModalIcon, {
    size: 16,
    color: theme.palette.cNeutral5,
    onClick: handleClose
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "876319196",
    dynamic: [theme.palette.cNeutral8, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral7, theme.layout.gap, theme.palette.cNeutral7, theme.palette.cNeutral4, theme.layout.gap]
  }, ".notification.__jsx-style-dynamic-selector{width:28rem;background-color:".concat(theme.palette.cNeutral8, ";border:0;border-radius:").concat(theme.expressiveness.R2, ";padding:").concat(theme.layout.gap, ";box-shadow:").concat(boxShadow, ";margin-top:calc(").concat(theme.layout.gap, " * 1.5);-webkit-transform:").concat(placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', ";-ms-transform:").concat(placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', ";transform:").concat(placement === 'right-start' ? 'translate(100%, 0)' : 'translate(-100%, 0)', ";opacity:0;-webkit-transition:-webkit-transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms;-webkit-transition:transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms;transition:transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}.notification.right-start.__jsx-style-dynamic-selector{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin-right:calc(").concat(theme.layout.gap, " * 1.25);}.notification.left-start.__jsx-style-dynamic-selector{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:calc(").concat(theme.layout.gap, " * 1.25);}.notification.__jsx-style-dynamic-selector:first-child{margin-top:0;}.notification.visible.__jsx-style-dynamic-selector{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);opacity:1;z-index:2;}.notification.hide.__jsx-style-dynamic-selector{margin-top:-3.5714rem;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);opacity:0;z-index:1;}.icon.__jsx-style-dynamic-selector{height:1.4286rem;width:1.4286rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;margin-right:calc(").concat(theme.layout.gap, " * 0.75);-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:").concat(theme.palette.cNeutral7, ";}.icon.__jsx-style-dynamic-selector>svg{width:100%;height:100%;}.title.__jsx-style-dynamic-selector{font-style:normal;font-weight:500;font-size:1rem;line-height:1.2857rem;line-height:1.4286rem;margin-right:").concat(theme.layout.gap, ";color:").concat(theme.palette.cNeutral7, ";}.content.__jsx-style-dynamic-selector{line-height:1.2857rem;font-size:1rem;color:").concat(theme.palette.cNeutral4, ";margin-top:calc(").concat(theme.layout.gap, " * 0.75);}")));
});
export default NotificationItem;