@geezee/react-ui/esm/use-messages/message-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, useMemo, useState } from 'react';
import useTheme from '../styles/use-theme';
import X from '@zeit-ui/react-icons/x';
import { getStyles } from './styles';
var transitionDuration = 150;
var MessageItem = React.memo(function (_ref) {
  var className = _ref.className,
      id = _ref.id,
      text = _ref.text,
      delay = _ref.delay,
      destroy = _ref.destroy,
      onClose = _ref.onClose,
      closeable = _ref.closeable,
      rest = _objectWithoutProperties(_ref, ["className", "id", "text", "delay", "destroy", "onClose", "closeable"]);

  var theme = useTheme();

  var _useMemo = useMemo(function () {
    return getStyles(theme.palette, rest.color);
  }, [theme.palette, rest.color]),
      color = _useMemo.color,
      bgColor = _useMemo.bgColor,
      icon = _useMemo.icon;

  var boxShadow = theme.expressiveness.D2;

  if (rest.color !== 'default' && !rest.shadow) {
    boxShadow = 'none';
  }

  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([["3823594017", [bgColor, color, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, transitionDuration, transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral3]]]) + " " + "message ".concat(className, " ").concat(visible ? 'visible' : '', " ").concat(hide ? 'hide' : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3823594017", [bgColor, color, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, transitionDuration, transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral3]]]) + " " + "icon"
  }, rest.icon || icon), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3823594017", [bgColor, color, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, transitionDuration, transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral3]]]) + " " + "text"
  }, text), closeable && /*#__PURE__*/React.createElement("div", {
    onClick: handleClose,
    className: _JSXStyle.dynamic([["3823594017", [bgColor, color, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, transitionDuration, transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral3]]]) + " " + "close"
  }, /*#__PURE__*/React.createElement(X, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3823594017",
    dynamic: [bgColor, color, theme.expressiveness.R2, theme.layout.gap, boxShadow, theme.layout.gap, transitionDuration, transitionDuration, transitionDuration, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral3]
  }, ".message.__jsx-style-dynamic-selector{max-width:71.4286rem;background-color:".concat(bgColor, ";color:").concat(color, ";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:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);opacity:0;-webkit-transition:-webkit-transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms, margin-top ").concat(transitionDuration, "ms;-webkit-transition:transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms, margin-top ").concat(transitionDuration, "ms;transition:transform ").concat(transitionDuration, "ms,opacity ").concat(transitionDuration, "ms, margin-top ").concat(transitionDuration, "ms;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.message.__jsx-style-dynamic-selector:first-child{margin-top:0;}.message.visible.__jsx-style-dynamic-selector{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);opacity:1;z-index:2;}.message.hide.__jsx-style-dynamic-selector{margin-top:-3.5714rem;opacity:0;z-index:1;}.icon.__jsx-style-dynamic-selector{height:1.1429rem;width:1.1429rem;margin-right:calc(").concat(theme.layout.gap, " * 0.5);-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.icon.__jsx-style-dynamic-selector>svg{width:100%;height:100%;}.text.__jsx-style-dynamic-selector{font-style:normal;font-weight:500;font-size:1rem;line-height:1.2857rem;}.close.__jsx-style-dynamic-selector{height:1.1429rem;width:1.1429rem;cursor:pointer;margin-left:").concat(theme.layout.gap, ";color:").concat(theme.palette.cNeutral3, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.close.__jsx-style-dynamic-selector>svg{width:100%;height:100%;}")));
});
export default MessageItem;