diff options
| author | Oliver <oliver@mohlin.dev> | 2025-03-20 15:34:59 +0100 |
|---|---|---|
| committer | Markus Pettersson <markus.pettersson@mullvad.net> | 2025-03-26 15:25:10 +0100 |
| commit | 325c6997d96d246e976ee4676476ef5988453a18 (patch) | |
| tree | 1cb09a28a8f097aeea7697677d02d3493f167724 | |
| parent | 2513223f4043cf60f8b6ae6e654f49a6beacec9a (diff) | |
| download | mullvadvpn-325c6997d96d246e976ee4676476ef5988453a18.tar.xz mullvadvpn-325c6997d96d246e976ee4676476ef5988453a18.zip | |
Add Animate component
4 files changed, 50 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx new file mode 100644 index 0000000000..d0edee746e --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx @@ -0,0 +1,14 @@ +import { AnimatePresentVertical, AnimatePresentVerticalProps } from './components'; + +export type AnimateProps = { + type: 'present-vertical'; +} & AnimatePresentVerticalProps; + +export function Animate({ type, ...props }: AnimateProps) { + switch (type) { + case 'present-vertical': + return <AnimatePresentVertical {...props} />; + default: + return type satisfies never; + } +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx new file mode 100644 index 0000000000..31536c93f9 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import styled from 'styled-components'; + +export interface AnimatePresentVerticalProps extends React.HTMLAttributes<HTMLDivElement> { + present?: boolean; + children?: React.ReactNode; +} + +const StyledDiv = styled.div` + --display-start: none; + --height-start: 0; + --display-end: block; + --height-end: min-content; + + overflow: clip; + transition-property: display, height; + transition-duration: 0.25s; + transition-timing-function: ease; + interpolate-size: allow-keywords; + transition-behavior: allow-discrete; + display: var(--display-start); + height: var(--height-start); + &&[data-present='true'] { + display: var(--display-end); + height: var(--height-end); + @starting-style { + height: var(--height-start); + } + } +`; + +export function AnimatePresentVertical({ present, ...props }: AnimatePresentVerticalProps) { + return <StyledDiv data-present={present} {...props} />; +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts new file mode 100644 index 0000000000..6bea1c015a --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts @@ -0,0 +1 @@ +export * from './AnimatePresentVertical'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts new file mode 100644 index 0000000000..c84772d940 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts @@ -0,0 +1 @@ +export * from './Animate'; |