-
Notifications
You must be signed in to change notification settings - Fork 326
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Animated resizing for dialogs (#11466)
- Cherry-picked out of #10827 - Add `framer-motion` to dialog to animate between dialog sizes. - Currently visible when switching between types in the Datalink modal. - Will also be visible when switching between types in the Schedule modal. # Important Notes None
- Loading branch information
1 parent
3d38b71
commit af0b95b
Showing
3 changed files
with
110 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| /** @file Type-safe `motion` from `framer-motion`. */ | ||
| import { | ||
| motion as originalMotion, | ||
| type ForwardRefComponent, | ||
| type HTMLMotionProps, | ||
| type MotionProps, | ||
| type SVGMotionProps, | ||
| } from 'framer-motion' | ||
|
|
||
| import type { | ||
| ComponentType, | ||
| DetailedHTMLFactory, | ||
| ForwardRefExoticComponent, | ||
| PropsWithChildren, | ||
| PropsWithoutRef, | ||
| ReactHTML, | ||
| RefAttributes, | ||
| SVGProps, | ||
| } from 'react' | ||
|
|
||
| /** The options parameter for {@link motion}. */ | ||
| interface CustomMotionComponentConfig { | ||
| readonly forwardMotionProps?: boolean | ||
| } | ||
|
|
||
| /** Get the inner type of a {@link DetailedHTMLFactory}. */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never | ||
| /** Get the inner type of a {@link SVGProps}. */ | ||
| type UnwrapSVGFactoryElement<F> = F extends SVGProps<infer P> ? P : never | ||
|
|
||
| export * from 'framer-motion' | ||
|
|
||
| /** | ||
| * HTML & SVG components, optimised for use with gestures and animation. | ||
| * These can be used as drop-in replacements for any HTML & SVG component - | ||
| * all CSS & SVG properties are supported. | ||
| */ | ||
| // This is a function, even though it does not contain function syntax. | ||
| // eslint-disable-next-line no-restricted-syntax | ||
| export const motion = originalMotion as unknown as (<Props extends object>( | ||
| Component: ComponentType<PropsWithChildren<Props>> | string, | ||
| customMotionComponentConfig?: CustomMotionComponentConfig, | ||
| ) => ForwardRefExoticComponent< | ||
| PropsWithoutRef< | ||
| Omit<MotionProps & Props, 'children' | 'style'> & | ||
| (Props extends { readonly children?: infer Children } ? | ||
| // `Props` has a key `Children` but it may be optional. | ||
| // Use a homomorphic mapped type (a mapped type with `keyof T` in the key set) | ||
| // to preserve modifiers (optional and readonly). | ||
| { | ||
| [K in keyof Props as K extends 'children' ? K : never]: Children | MotionProps['children'] | ||
| } | ||
| : // `Props` has no key `Children`. | ||
| { children?: MotionProps['children'] }) & | ||
| (Props extends { readonly style?: infer Style } ? | ||
| // `Props` has a key `Style` but it may be optional. | ||
| // Use a homomorphic mapped type (a mapped type with `keyof T` in the key set) | ||
| // to preserve modifiers (optional and readonly). | ||
| { [K in keyof Props as K extends 'style' ? K : never]: MotionProps['style'] | Style } | ||
| : // `Props` has no key `Style`. | ||
| { style?: MotionProps['style'] }) | ||
| > & | ||
| RefAttributes<HTMLElement | SVGElement> | ||
| >) & { | ||
| [K in keyof HTMLElementTagNameMap]: ForwardRefComponent< | ||
| UnwrapFactoryElement<ReactHTML[K]>, | ||
| HTMLMotionProps<K> | ||
| > | ||
| } & { | ||
| [K in keyof SVGElementTagNameMap]: ForwardRefComponent< | ||
| UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, | ||
| SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>> | ||
| > | ||
| } |