@zog-ui/core/NotificationSpot.js

[](https://www.npmjs.com/package/@zog-ui/core)

import { k as keyframes, s as styled, _ as __rest, B as Box, S as Space } from './index2.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import * as Toast from '@radix-ui/react-toast';
import { forwardRef, useId, useState, useImperativeHandle, useMemo } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import '@radix-ui/colors';
import '@stitches/react';
import '@radix-ui/react-scroll-area';
import '@radix-ui/react-slot';
import 'clsx';
import '@radix-ui/react-avatar';
import 'react-slick';
import 'slick-carousel/slick/slick.css';
import '@radix-ui/react-popover';
import '@radix-ui/react-checkbox';
import 'rc-picker';
import 'rc-picker/lib/generate/dateFns';
import 'rc-picker/lib/locale/en_US';
import '@radix-ui/react-dropdown-menu';
import '@floating-ui/react';
import '@radix-ui/react-dialog';
import '@radix-ui/react-progress';
import '@radix-ui/react-accordion';
import '@radix-ui/react-slider';
import '@radix-ui/react-tooltip';
import '@radix-ui/react-switch';
import '@radix-ui/react-tabs';

const VIEWPORT_PADDING = 20;
const hide = keyframes({
  '0%': {
    opacity: 1
  },
  '100%': {
    opacity: 0
  }
});
const slideInFromRight = keyframes({
  from: {
    transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))`
  },
  to: {
    transform: 'translateX(0)'
  }
});
const slideInFromLeft = keyframes({
  from: {
    transform: `translateX(calc(-1*calc(100% + ${VIEWPORT_PADDING}px)))`
  },
  to: {
    transform: 'translateX(0)'
  }
});
const swipeOutRight = keyframes({
  from: {
    transform: 'translateX(var(--radix-toast-swipe-end-x))'
  },
  to: {
    transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))`
  }
});
const swipeOutLeft = keyframes({
  from: {
    transform: 'translateX(var(--radix-toast-swipe-end-x))'
  },
  to: {
    transform: `translateX(calc(-1 * calc(100% + ${VIEWPORT_PADDING}px)))`
  }
});
const StyledNotificationRoot = styled(Toast.Root, {
  padding: '18px 20px',
  background: 'white',
  boxShadow: '0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)',
  borderRadius: '4px',
  fontFamily: '$untitled',
  color: '$blackA12',
  display: 'flex',
  alignItems: 'flex-start',
  gap: '16px',
  '&[data-state="closed"]': {
    animation: `${hide} 200ms ease-in`
  },
  '&[data-swipe="move"]': {
    transform: 'translateX(var(--radix-toast-swipe-move-x))'
  },
  '&[data-swipe="cancel"]': {
    transform: 'translateX(0)',
    transition: 'transform 200ms ease-out'
  },
  variants: {
    placement: {
      'top-right': {
        '&[data-state="open"]': {
          animation: `${slideInFromRight} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
        },
        '&[data-swipe="end"]': {
          animation: `${swipeOutRight} 100ms ease-out`
        }
      },
      'bottom-right': {
        '&[data-state="open"]': {
          animation: `${slideInFromRight} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
        },
        '&[data-swipe="end"]': {
          animation: `${swipeOutRight} 100ms ease-out`
        }
      },
      'top-left': {
        '&[data-state="open"]': {
          animation: `${slideInFromLeft} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
        },
        '&[data-swipe="end"]': {
          animation: `${swipeOutLeft} 100ms ease-out`
        }
      },
      'bottom-left': {
        '&[data-state="open"]': {
          animation: `${slideInFromLeft} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
        },
        '&[data-swipe="end"]': {
          animation: `${swipeOutLeft} 100ms ease-out`
        }
      }
    }
  },
  defaultVariants: {
    placement: 'bottom-right'
  }
});
const StyledIcon = styled('span', {
  fontSize: '24px',
  width: '24px',
  height: '24px'
});
const StyledTitle = styled(Toast.Title, {
  fontSize: '16px'
});
const StyledClose = styled(Toast.Close, {
  marginLeft: '4px',
  fontSize: '14px',
  lineHeight: '14px',
  border: 0,
  outline: 0,
  display: 'inline-block',
  background: 'transparent',
  color: '$blackA10',
  padding: 0,
  cursor: 'pointer',
  transition: 'color .1s linear',
  '&:hover': {
    color: '$blackA12'
  }
});
const StyledDescription = styled(Toast.Description, {
  marginTop: 8,
  fontSize: 14,
  lineHeight: '22px',
  color: '$blackA11'
});
const StyledAction = styled(Toast.Action, {
  backgroundColor: '$primary9',
  color: 'white',
  borderRadius: 2,
  fontSize: 14,
  border: 0,
  outline: 0,
  paddingInline: 8,
  lineHeight: '22px',
  cursor: 'pointer'
});
const NotificationCard = _a => {
  var _b;
  var {
      title,
      description,
      icon,
      action,
      actionComponent,
      duration
    } = _a,
    props = __rest(_a, ["title", "description", "icon", "action", "actionComponent", "duration"]);
  return jsxs(StyledNotificationRoot, Object.assign({}, props, {
    duration: duration
  }, {
    children: [icon ? jsx(StyledIcon, Object.assign({
      className: "icon"
    }, {
      children: icon
    })) : null, jsxs(Box, Object.assign({
      css: {
        flex: 1
      },
      className: "content"
    }, {
      children: [jsxs(Space, Object.assign({
        justify: "space-between",
        align: "start",
        className: "head"
      }, {
        children: [jsx(Box, Object.assign({
          css: {
            flex: 1
          }
        }, {
          children: title ? jsx(StyledTitle, Object.assign({
            className: "title"
          }, {
            children: title
          })) : null
        })), jsx(StyledClose, Object.assign({
          className: "button-close"
        }, {
          children: jsx(CloseOutlined, {})
        }))]
      })), description ? jsx(StyledDescription, Object.assign({
        className: "description"
      }, {
        children: description
      })) : null, action || actionComponent ? jsxs(Space, Object.assign({
        css: {
          marginTop: 16
        },
        justify: "flex-end",
        className: "action-wrapper"
      }, {
        children: [' ', action ? jsx(StyledAction, Object.assign({
          altText: (_b = action.alt) !== null && _b !== void 0 ? _b : action.label,
          onClick: action.onClick,
          className: "action"
        }, {
          children: action.label
        })) : null, actionComponent]
      })) : null]
    }))]
  }));
};

const NotificationViewport = styled(Toast.Viewport, {
  position: 'fixed',
  display: 'flex',
  flexDirection: 'column',
  padding: 25,
  gap: 10,
  width: 390,
  maxWidth: '100vw',
  margin: 0,
  listStyle: 'none',
  zIndex: 2147483647,
  outline: 'none',
  variants: {
    placement: {
      'top-right': {
        top: 0,
        right: 0,
        flexDirection: 'column-reverse'
      },
      'bottom-right': {
        bottom: 0,
        right: 0
      },
      'top-left': {
        top: 0,
        left: 0,
        flexDirection: 'column-reverse'
      },
      'bottom-left': {
        bottom: 0,
        left: 0
      }
    }
  },
  defaultVariants: {
    placement: 'bottom-right'
  }
});

const NotificationSpot = /*#__PURE__*/forwardRef(({
  placement: _placement = 'bottom-right'
}, forwardedRef) => {
  const uniqId = useId();
  const [notificationList, setNotificationList] = useState([]);
  useImperativeHandle(forwardedRef, () => ({
    addNotif(notif) {
      setNotificationList(prev => [...prev, notif]);
    }
  }));
  const swipeDirection = useMemo(() => {
    if (_placement === 'top-left' || _placement === 'bottom-left') {
      return 'left';
    }
    return 'right';
  }, [_placement]);
  return jsxs(Toast.Provider, Object.assign({
    label: `${_placement}-notification`,
    swipeDirection: swipeDirection
  }, {
    children: [notificationList.map((notif, i) => jsx(NotificationCard, Object.assign({
      placement: _placement
    }, notif), `notification-${uniqId}-${i}`)), jsx(NotificationViewport, {
      placement: _placement
    })]
  }));
});

export { NotificationSpot as default };