@basic-ui/material 1.0.0-alpha.43 → 1.0.0-alpha.44

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,170 +1,170 @@
-import type { CSSProperties, MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-import { EASING_STANDARD } from '../motion';
-import { useStackItem } from './Stack';
-
-const TRANSITION_TIME = 150;
-const slideFromBottom = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(${x}, calc(${y} + 100%))`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, calc(${y} - 100%))`,
-  }),
-};
-
-const slideFromTop = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(${x}, calc(${y} - 100%))`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, calc(${y} + 100%))`,
-  }),
-};
-
-const slideFromRight = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} + 100%), ${y})`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} + 100%), ${y})`,
-  }),
-};
-
-const slideFromLeft = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} - 100%), ${y})`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} - 100%), ${y})`,
-  }),
-};
-
-type AnimationState = 'entering' | 'entered' | 'exiting';
-const placements = {
-  'top-right': {
-    style: { top: 3, right: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromRight[state]('0px', `${translateY}px`),
-  },
-  'top-center': {
-    style: { top: 3, left: '50%' },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromBottom[state]('-50%', `${translateY}px`),
-  },
-  'top-left': {
-    style: { top: 3, left: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromLeft[state]('0px', `${translateY}px`),
-  },
-  'bottom-right': {
-    style: { bottom: 3, right: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromRight[state]('0px', `${-translateY}px`),
-  },
-  'bottom-center': {
-    style: { bottom: 3, left: '50%' },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromTop[state]('-50%', `${-translateY}px`),
-  },
-  'bottom-left': {
-    style: { bottom: 3, left: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromLeft[state]('0px', `${-translateY}px`),
-  },
-};
-const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
-
-function getTransition(timems: number) {
-  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
-}
-
-const defaultAnimation = {
-  style: {},
-  placementStyle: {},
-  onClose: undefined,
-};
-
-export function useSnackbarAnimation(
-  ref: MutableRefObject<HTMLDivElement | null>,
-  timeout: number
-): {
-  style: CSSProperties;
-  placementStyle: CSSProperties;
-  onClose?: () => void;
-} {
-  const stackItem = useStackItem({
-    ref,
-    closeTimeoutInMilliseconds: TRANSITION_TIME,
-  });
-  if (!stackItem) {
-    return defaultAnimation;
-  }
-
-  const { onClose, state, translateY = 0, placement } = stackItem;
-  const placementStyle = placements[placement].style;
-  const animateFn = placements[placement].animate;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      onClose();
-    }, timeout);
-    return () => {
-      clearTimeout(handler);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeout]);
-
-  switch (state) {
-    case 'entering':
-      return {
-        style: { ...animateFn('entering', translateY), visibility: 'hidden' },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-    case 'entered':
-      return {
-        style: {
-          ...animateFn('entered', translateY),
-          transition: getTransition(TRANSITION_TIME),
-        },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-    case 'exiting':
-      return {
-        style: {
-          ...animateFn('exiting', translateY),
-          transition: getTransition(TRANSITION_TIME),
-        },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-  }
-}
+import type { CSSProperties, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { EASING_STANDARD } from '../motion';
+import { useStackItem } from './Stack';
+
+const TRANSITION_TIME = 150;
+const slideFromBottom = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} + 100%))`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} - 100%))`,
+  }),
+};
+
+const slideFromTop = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} - 100%))`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} + 100%))`,
+  }),
+};
+
+const slideFromRight = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`,
+  }),
+};
+
+const slideFromLeft = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`,
+  }),
+};
+
+type AnimationState = 'entering' | 'entered' | 'exiting';
+const placements = {
+  'top-right': {
+    style: { top: 3, right: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromRight[state]('0px', `${translateY}px`),
+  },
+  'top-center': {
+    style: { top: 3, left: '50%' },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromBottom[state]('-50%', `${translateY}px`),
+  },
+  'top-left': {
+    style: { top: 3, left: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromLeft[state]('0px', `${translateY}px`),
+  },
+  'bottom-right': {
+    style: { bottom: 3, right: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromRight[state]('0px', `${-translateY}px`),
+  },
+  'bottom-center': {
+    style: { bottom: 3, left: '50%' },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromTop[state]('-50%', `${-translateY}px`),
+  },
+  'bottom-left': {
+    style: { bottom: 3, left: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromLeft[state]('0px', `${-translateY}px`),
+  },
+};
+const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
+
+function getTransition(timems: number) {
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
+}
+
+const defaultAnimation = {
+  style: {},
+  placementStyle: {},
+  onClose: undefined,
+};
+
+export function useSnackbarAnimation(
+  ref: MutableRefObject<HTMLDivElement | null>,
+  timeout: number
+): {
+  style: CSSProperties;
+  placementStyle: CSSProperties;
+  onClose?: () => void;
+} {
+  const stackItem = useStackItem({
+    ref,
+    closeTimeoutInMilliseconds: TRANSITION_TIME,
+  });
+  if (!stackItem) {
+    return defaultAnimation;
+  }
+
+  const { onClose, state, translateY = 0, placement } = stackItem;
+  const placementStyle = placements[placement].style;
+  const animateFn = placements[placement].animate;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onClose();
+    }, timeout);
+    return () => {
+      clearTimeout(handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeout]);
+
+  switch (state) {
+    case 'entering':
+      return {
+        style: { ...animateFn('entering', translateY), visibility: 'hidden' },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+    case 'entered':
+      return {
+        style: {
+          ...animateFn('entered', translateY),
+          transition: getTransition(TRANSITION_TIME),
+        },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+    case 'exiting':
+      return {
+        style: {
+          ...animateFn('exiting', translateY),
+          transition: getTransition(TRANSITION_TIME),
+        },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+  }
+}