diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 4614f586..67a1212b 100644 --- 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, }} > @@ -84,6 +85,7 @@ export const decorators = [ dialogs: context.args.animatedDialogs, }, uiScale: context.args.globalUiScale, + ...context.args.options, }} > diff --git a/package.json b/package.json index cf8be348..f1a079d7 100644 --- 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 index c67db665..91320b5a 100644 --- 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 = 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 = useRef(null); @@ -261,6 +268,7 @@ const InternalPopover: React.FC = 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 index 2bd9ec3f..3e8817bd 100644 --- a/src/containers/ReqoreProvider.tsx +++ b/src/containers/ReqoreProvider.tsx @@ -195,7 +195,12 @@ const ReqoreProvider: React.FC = ({ 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 index cdbb369f..1b7d6ee1 100644 --- 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 index 041096be..592b8ca4 100644 --- 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,