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 home stack border radius (#16284)

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

50
src/js/worklets/shell/home_stack.js
View File

@ -1,8 +1,8 @@
import { useDerivedValue, withTiming, withSequence } from 'react-native-reanimated';
import { useDerivedValue, withTiming, withSequence, withDelay } from 'react-native-reanimated';
import * as constants from './constants';
// Derived values for each stack (communities, chat, wallet, browser)
export function stackOpacity (stackId, selectedStackId) {
export function stackOpacity(stackId, selectedStackId) {
return useDerivedValue(
function () {
'worklet'
@ -11,7 +11,7 @@ export function stackOpacity (stackId, selectedStackId) {
);
}
export function stackZIndex (stackId, selectedStackId) {
export function stackZIndex(stackId, selectedStackId) {
return useDerivedValue(
function () {
'worklet'
@ -21,51 +21,43 @@ export function stackZIndex (stackId, selectedStackId) {
}
// Derived values for home stack (container)
export function homeStackOpacity (homeStackState) {
export function homeStackOpacity(homeStackState) {
return useDerivedValue(
function () {
'worklet'
switch (homeStackState.value) {
case constants.OPEN_WITH_ANIMATION:
return withTiming(1, constants.LINEAR_EASING);
break;
case constants.CLOSE_WITH_ANIMATION:
return withTiming(0, constants.LINEAR_EASING);
break;
case constants.OPEN_WITHOUT_ANIMATION:
return 1;
break;
case constants.CLOSE_WITHOUT_ANIMATION:
return 0;
break;
}
}
);
}
export function homeStackTop (homeStackState, top) {
export function homeStackTop(homeStackState, top) {
return useDerivedValue(
function () {
'worklet'
switch (homeStackState.value) {
case constants.OPEN_WITH_ANIMATION:
return withTiming(0, constants.LINEAR_EASING);
break;
case constants.CLOSE_WITH_ANIMATION:
return withTiming(top, constants.LINEAR_EASING);
break;
case constants.OPEN_WITHOUT_ANIMATION:
return 0;
break;
case constants.CLOSE_WITHOUT_ANIMATION:
return top;
break;
}
}
);
}
export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackState, left) {
export function homeStackLeft(selectedStackId, animateHomeStackLeft, homeStackState, left) {
return useDerivedValue(
function () {
'worklet'
@ -74,16 +66,12 @@ export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackS
switch (homeStackState.value) {
case constants.OPEN_WITH_ANIMATION:
return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, constants.LINEAR_EASING))
break;
case constants.CLOSE_WITH_ANIMATION:
return withTiming(leftValue, constants.LINEAR_EASING);
break;
case constants.OPEN_WITHOUT_ANIMATION:
return 0;
break;
case constants.CLOSE_WITHOUT_ANIMATION:
return leftValue;
break;
}
} else {
return 0;
@ -92,7 +80,7 @@ export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackS
);
}
export function homeStackPointer (homeStackState) {
export function homeStackPointer(homeStackState) {
return useDerivedValue(
function () {
'worklet'
@ -103,23 +91,37 @@ export function homeStackPointer (homeStackState) {
);
}
export function homeStackScale (homeStackState, minimizeScale) {
export function homeStackScale(homeStackState, minimizeScale) {
return useDerivedValue(
function () {
'worklet'
switch (homeStackState.value) {
case constants.OPEN_WITH_ANIMATION:
return withTiming(1, constants.LINEAR_EASING);
break;
case constants.CLOSE_WITH_ANIMATION:
return withTiming(minimizeScale, constants.LINEAR_EASING);
break;
case constants.OPEN_WITHOUT_ANIMATION:
return 1;
break;
case constants.CLOSE_WITHOUT_ANIMATION:
return minimizeScale;
break;
}
}
);
}
export function homeStackBorderRadius(homeStackState) {
return useDerivedValue(
function () {
'worklet'
switch (homeStackState.value) {
case constants.OPEN_WITH_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, {duration: 0}));
case constants.CLOSE_WITH_ANIMATION:
case constants.CLOSE_WITHOUT_ANIMATION:
return 20;
case constants.OPEN_WITHOUT_ANIMATION:
return 0;
}
}
);

1
src/status_im2/contexts/shell/components/home_stack/style.cljs
View File

@ -10,6 +10,7 @@
:left (:home-stack-left shared-values)
:opacity (:home-stack-opacity shared-values)
:pointer-events (:home-stack-pointer shared-values)
:border-radius (:home-stack-border-radius shared-values)
:transform [{:scale (:home-stack-scale shared-values)}]}
{:border-bottom-left-radius 20
:border-bottom-right-radius 20

29
src/status_im2/contexts/shell/shared_values.cljs
View File

@ -62,20 +62,21 @@
[{:keys [selected-stack-id home-stack-state]} dimensions]
(let [home-stack-position (calculate-home-stack-position dimensions)
animate-home-stack-left (reanimated/use-shared-value (not (utils/home-stack-open?)))]
{:animate-home-stack-left animate-home-stack-left
:home-stack-left (worklets.shell/home-stack-left
selected-stack-id
animate-home-stack-left
home-stack-state
(clj->js (:left home-stack-position)))
:home-stack-top (worklets.shell/home-stack-top
home-stack-state
(:top home-stack-position))
:home-stack-opacity (worklets.shell/home-stack-opacity home-stack-state)
:home-stack-pointer (worklets.shell/home-stack-pointer home-stack-state)
:home-stack-scale (worklets.shell/home-stack-scale
home-stack-state
(:scale home-stack-position))}))
{:animate-home-stack-left animate-home-stack-left
:home-stack-left (worklets.shell/home-stack-left
selected-stack-id
animate-home-stack-left
home-stack-state
(clj->js (:left home-stack-position)))
:home-stack-top (worklets.shell/home-stack-top
home-stack-state
(:top home-stack-position))
:home-stack-opacity (worklets.shell/home-stack-opacity home-stack-state)
:home-stack-pointer (worklets.shell/home-stack-pointer home-stack-state)
:home-stack-border-radius (worklets.shell/home-stack-border-radius home-stack-state)
:home-stack-scale (worklets.shell/home-stack-scale
home-stack-state
(:scale home-stack-position))}))
(defn floating-screen-derived-values
[screen-id {:keys [width height]} switcher-card-left-position switcher-card-top-position]

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

@ -6,19 +6,19 @@
;; Derived values for Bottom tabs
(defn bottom-tabs-height
[home-stack-state-sv container-height extended-container-height]
[home-stack-state container-height extended-container-height]
(.bottomTabsHeight ^js bottom-tabs-worklets
home-stack-state-sv
home-stack-state
container-height
extended-container-height))
(defn bottom-tab-icon-color
[id selected-stack-id-sv home-stack-state-sv pass-through-sv selected-tab-color default-color
[id selected-stack-id home-stack-state pass-through-sv selected-tab-color default-color
pass-through-color]
(.bottomTabIconColor ^js bottom-tabs-worklets
id
selected-stack-id-sv
home-stack-state-sv
selected-stack-id
home-stack-state
pass-through-sv
selected-tab-color
default-color
@ -35,29 +35,33 @@
;; Derived values for Home stack (container)
(defn home-stack-opacity
[home-stack-state-sv]
(.homeStackOpacity ^js home-stack-worklets home-stack-state-sv))
[home-stack-state]
(.homeStackOpacity ^js home-stack-worklets home-stack-state))
(defn home-stack-pointer
[home-stack-state-sv]
(.homeStackPointer ^js home-stack-worklets home-stack-state-sv))
[home-stack-state]
(.homeStackPointer ^js home-stack-worklets home-stack-state))
(defn home-stack-scale
[home-stack-state-sv scale]
(.homeStackScale ^js home-stack-worklets home-stack-state-sv scale))
[home-stack-state scale]
(.homeStackScale ^js home-stack-worklets home-stack-state scale))
(defn home-stack-left
[selected-stack-id-sv animate-home-stack-left home-stack-state-sv left-home-stack-position]
[selected-stack-id animate-home-stack-left home-stack-state left-home-stack-position]
(.homeStackLeft
^js home-stack-worklets
selected-stack-id-sv
selected-stack-id
animate-home-stack-left
home-stack-state-sv
home-stack-state
left-home-stack-position))
(defn home-stack-top
[home-stack-state-sv top-home-stack-position]
(.homeStackTop ^js home-stack-worklets home-stack-state-sv top-home-stack-position))
[home-stack-state top-home-stack-position]
(.homeStackTop ^js home-stack-worklets home-stack-state top-home-stack-position))
(defn home-stack-border-radius
[home-stack-state]
(.homeStackBorderRadius ^js home-stack-worklets home-stack-state))
;; Derived values for floating screen
(defn floating-screen-left