status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Animate floating screen border radius (#16384)

This commit is contained in:
Parvesh Monu 2023-06-26 15:59:43 +05:30 committed by GitHub
parent 43ef6db7b9
commit 4a4974b541
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/js/worklets/shell/floating_screen.js
View File

@ -88,3 +88,21 @@ export function screenZIndex(screenState) {
}
});
}
export function screenBorderRadius(screenState) {
return useDerivedValue(function () {
'worklet';
switch (screenState.value) {
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
return 0;
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
return 20;
}
});
}

3
src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs
View File

@ -3,12 +3,13 @@
[react-native.reanimated :as reanimated]))
(defn screen
[{:keys [screen-left screen-top screen-width screen-height screen-z-index]}]
[{:keys [screen-left screen-top screen-width screen-height screen-border-radius screen-z-index]}]
(reanimated/apply-animations-to-style
{:left screen-left
:top screen-top
:width screen-width
:height screen-height
:border-radius screen-border-radius
:z-index screen-z-index}
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:overflow :hidden

5
src/status_im2/contexts/shell/jump_to/shared_values.cljs
View File

@ -85,12 +85,15 @@
shell.constants/open-screen-without-animation
shell.constants/close-screen-without-animation))]
{:screen-state screen-state
:screen-left (worklets.shell/floating-screen-left screen-state width switcher-card-left-position)
:screen-left (worklets.shell/floating-screen-left screen-state
width
switcher-card-left-position)
:screen-top (worklets.shell/floating-screen-top screen-state switcher-card-top-position)
:screen-z-index (worklets.shell/floating-screen-z-index screen-state)
:screen-width (worklets.shell/floating-screen-width screen-state
width
shell.constants/switcher-card-size)
:screen-border-radius (worklets.shell/floating-screen-border-radius screen-state)
:screen-height (worklets.shell/floating-screen-height screen-state
height
shell.constants/switcher-card-size)}))

4
src/utils/worklets/shell.cljs
View File

@ -80,6 +80,10 @@
[screen-state screen-height switcher-card-size]
(.screenHeight ^js floating-screen-worklets screen-state screen-height switcher-card-size))
(defn floating-screen-border-radius
[screen-state]
(.screenBorderRadius ^js floating-screen-worklets screen-state))
(defn floating-screen-z-index
[screen-state]
(.screenZIndex ^js floating-screen-worklets screen-state))