Merge pull request #409 from qoretechnologies/feature/disable-animati…

…ons-popovers Enhance popover animations and update version to 0.48.8
qoretechnologies · Nov 22, 2024 · 953a9be · 953a9be
2 parents d629e5a + 556da94
commit 953a9be
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 12 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,5 @@
-import { ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 import withMockdate from '@netsells/storybook-mockdate';
+import { ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -69,6 +69,7 @@ export const decorators = [
             dialogs: context.args.animatedDialogs,
           },
           uiScale: context.args.globalUiScale,
+          ...context.args.options,
         }}
       >
         <ReqoreLayoutContent style={{ height: '100%' }}>
@@ -84,6 +85,7 @@ export const decorators = [
             dialogs: context.args.animatedDialogs,
           },
           uiScale: context.args.globalUiScale,
+          ...context.args.options,
         }}
       >
         <ReqoreLayoutContent>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.7",
+  "version": "0.48.8",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/InternalPopover/index.tsx b/src/components/InternalPopover/index.tsx
@@ -6,6 +6,7 @@ import { usePopper } from 'react-popper';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { useContext } from 'use-context-selector';
+import { useReqoreProperty } from '../..';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { IPopoverData } from '../../containers/PopoverProvider';
@@ -30,15 +31,15 @@ const getPopoverArrowColor = ({ theme, dim, intent, flat, effect, isOpaque }) =>
           0.04
         )
       : intent
-        ? changeLightness(getNotificationIntent(theme, intent), flat ? 0.1 : 0.2)
-        : theme.popover?.main ||
-          rgba(
-            changeLightness(
-              flat ? theme.main : getNotificationIntent(theme, intent),
-              flat ? 0.1 : 0.2
-            ),
-            isOpaque ? 1 : 0.3
+      ? changeLightness(getNotificationIntent(theme, intent), flat ? 0.1 : 0.2)
+      : theme.popover?.main ||
+        rgba(
+          changeLightness(
+            flat ? theme.main : getNotificationIntent(theme, intent),
+            flat ? 0.1 : 0.2
           ),
+          isOpaque ? 1 : 0.3
+        ),
     dim ? 0.3 : 1
   );
 
@@ -59,7 +60,12 @@ const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
 `;
 
 export const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
-  animation: 0.2s ${fadeIn} ease-out;
+  ${({ animate }) =>
+    animate &&
+    css`
+      animation: 0.2s ${fadeIn} ease-out;
+    `}
+
   max-width: ${({ maxWidth }) => maxWidth};
   max-height: ${({ maxHeight }) => maxHeight};
   z-index: 999999;
@@ -162,6 +168,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
     effect,
   }) => {
     const { removePopover, updatePopover, uiScale: globalUiScale } = useContext(PopoverContext);
+    const animations = useReqoreProperty('animations');
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
     const popperRef: MutableRefObject<any> = useRef(null);
@@ -261,6 +268,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
             transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
             width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
           }}
+          animate={animations?.popovers}
           {...attributes.popper}
         >
           {!noArrow && !transparent ? (

diff --git a/src/containers/ReqoreProvider.tsx b/src/containers/ReqoreProvider.tsx
@@ -195,7 +195,12 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobileOrTablet,
           latestZIndex: latestZIndex.current,
           getAndIncreaseZIndex,
-          animations: options.animations || { buttons: true, dialogs: true },
+          animations: {
+            buttons: true,
+            dialogs: true,
+            popovers: true,
+            ...(options?.animations || {}),
+          },
           tooltips: options.tooltips || { delay: 0 },
           closePopoversOnEscPress:
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,

diff --git a/src/context/ReqoreContext.tsx b/src/context/ReqoreContext.tsx
@@ -26,6 +26,7 @@ export interface IReqoreContext {
   readonly animations?: {
     readonly buttons?: boolean;
     readonly dialogs?: boolean;
+    readonly popovers?: boolean;
   };
   readonly tooltips?: {
     /**

diff --git a/src/stories/Popover/Popover.stories.tsx b/src/stories/Popover/Popover.stories.tsx
@@ -350,6 +350,17 @@ export const Basic: Story = {
   render: Template,
 };
 
+export const NoAnimation: Story = {
+  render: Template,
+  args: {
+    options: {
+      animations: {
+        popovers: false,
+      },
+    },
+  },
+};
+
 export const NotFlat: Story = {
   render: Template,