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

Organize composer worklets (#18528)

This commit is contained in:
Parvesh Monu 2024-01-16 19:01:07 +05:30 committed by GitHub
parent a2bf23cc12
commit 248996ce6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 242 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/js/worklets/chat/messages.js
View File

@ -1,92 +0,0 @@
import { useDerivedValue, withTiming, interpolate, useAnimatedScrollHandler, runOnJS } from 'react-native-reanimated';
export function navigationHeaderOpacity(distanceFromListTop, isAllLoaded, isCalculationsComplete, startPosition) {
return useDerivedValue(function () {
'worklet';
const isCalculationsCompleteValue = isCalculationsComplete.value;
if (distanceFromListTop.value < startPosition && isAllLoaded.value) {
return isCalculationsCompleteValue ? withTiming(0) : 0;
} else {
return isCalculationsCompleteValue ? withTiming(1) : 1;
}
});
}
export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBarHeight, startPosition) {
return useDerivedValue(function () {
'worklet';
return distanceFromListTop.value < startPosition && isAllLoaded.value ? withTiming(topBarHeight) : withTiming(0);
});
}
export function interpolateNavigationViewOpacity(props) {
return useDerivedValue(function () {
'worklet';
const {
'all-loaded?': isAllLoaded,
'end-position': endPosition,
'start-position': startPosition,
'distance-from-list-top': distanceFromListTop,
} = props;
if (isAllLoaded.value) {
return interpolate(distanceFromListTop.value, [startPosition, endPosition], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
} else {
return 1;
}
});
}
export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callback) {
return function (event) {
'worklet';
const currentY = event.contentOffset.y;
const layoutHeight = event.layoutMeasurement.height;
const contentSizeY = event.contentSize.height - layoutHeight;
const newDistance = contentSizeY - currentY;
distanceFromListTop.value = newDistance;
chatListScrollY.value = currentY;
runOnJS(callback)(layoutHeight, newDistance);
};
}
export function placeholderOpacity(isCalculationsComplete) {
return useDerivedValue(function () {
'worklet';
return isCalculationsComplete.value ? 0 : 1;
});
}
export function placeholderZIndex(isCalculationsComplete) {
return useDerivedValue(function () {
'worklet';
return isCalculationsComplete.value ? 0 : 2;
});
}
export function scrollDownButtonOpacity(chatListScrollY, isComposerFocused, windowHeight) {
return useDerivedValue(function () {
'worklet';
if (isComposerFocused.value) {
return 0;
} else {
return chatListScrollY.value > windowHeight * 0.75 ? 1 : 0;
}
});
}
export function jumpToButtonOpacity(scrollDownButtonOpacity, isComposerFocused) {
return useDerivedValue(function () {
'worklet';
return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 0 : 1);
});
}
export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused) {
return useDerivedValue(function () {
'worklet';
return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 35 : 0);
});
}

26
src/js/worklets/chat/messenger/composer.js Normal file
View File

@ -0,0 +1,26 @@
import { useDerivedValue, withTiming } from 'react-native-reanimated';
export function scrollDownButtonOpacity(chatListScrollY, isComposerFocused, windowHeight) {
return useDerivedValue(function () {
'worklet';
if (isComposerFocused.value) {
return 0;
} else {
return chatListScrollY.value > windowHeight * 0.75 ? 1 : 0;
}
});
}
export function jumpToButtonOpacity(scrollDownButtonOpacity, isComposerFocused) {
return useDerivedValue(function () {
'worklet';
return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 0 : 1);
});
}
export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused) {
return useDerivedValue(function () {
'worklet';
return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 35 : 0);
});
}

0
src/js/worklets/chat/lightbox.js → src/js/worklets/chat/messenger/lightbox.js
View File

14
src/js/worklets/chat/messenger/messages.js Normal file
View File

@ -0,0 +1,14 @@
import { withTiming, runOnJS } from 'react-native-reanimated';
export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callback) {
return function (event) {
'worklet';
const currentY = event.contentOffset.y;
const layoutHeight = event.layoutMeasurement.height;
const contentSizeY = event.contentSize.height - layoutHeight;
const newDistance = contentSizeY - currentY;
distanceFromListTop.value = newDistance;
chatListScrollY.value = currentY;
runOnJS(callback)(layoutHeight, newDistance);
};
}

40
src/js/worklets/chat/messenger/navigation.js Normal file
View File

@ -0,0 +1,40 @@
import { useDerivedValue, withTiming, interpolate } from 'react-native-reanimated';
export function navigationHeaderOpacity(distanceFromListTop, isAllLoaded, isCalculationsComplete, startPosition) {
return useDerivedValue(function () {
'worklet';
const isCalculationsCompleteValue = isCalculationsComplete.value;
if (distanceFromListTop.value < startPosition && isAllLoaded.value) {
return isCalculationsCompleteValue ? withTiming(0) : 0;
} else {
return isCalculationsCompleteValue ? withTiming(1) : 1;
}
});
}
export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBarHeight, startPosition) {
return useDerivedValue(function () {
'worklet';
return distanceFromListTop.value < startPosition && isAllLoaded.value ? withTiming(topBarHeight) : withTiming(0);
});
}
export function interpolateNavigationViewOpacity(props) {
return useDerivedValue(function () {
'worklet';
const {
'all-loaded?': isAllLoaded,
'end-position': endPosition,
'start-position': startPosition,
'distance-from-list-top': distanceFromListTop,
} = props;
if (isAllLoaded.value) {
return interpolate(distanceFromListTop.value, [startPosition, endPosition], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
} else {
return 1;
}
});
}

15
src/js/worklets/chat/messenger/placeholder.js Normal file
View File

@ -0,0 +1,15 @@
import { useDerivedValue } from 'react-native-reanimated';
export function placeholderOpacity(isCalculationsComplete) {
return useDerivedValue(function () {
'worklet';
return isCalculationsComplete.value ? 0 : 1;
});
}
export function placeholderZIndex(isCalculationsComplete) {
return useDerivedValue(function () {
'worklet';
return isCalculationsComplete.value ? 0 : 2;
});
}

19
src/mocks/js_dependencies.cljs
View File

@ -422,7 +422,8 @@
"react-native-transparent-video" react-native-transparent-video
"react-native-orientation-locker" react-native-orientation-locker
"react-native-gifted-charts" react-native-gifted-charts
"../resources/data/emojis/en.json" (js/JSON.parse (slurp
"../resources/data/emojis/en.json" (js/JSON.parse
(slurp
"./resources/data/emojis/en.json"))
"../src/js/worklets/core.js" worklet-factory
"../src/js/worklets/shell/bottom_tabs.js" #js {}
@ -432,8 +433,11 @@
"../src/js/worklets/record_audio.js" #js {}
"../src/js/worklets/scroll_view.js" #js {}
"../src/js/worklets/onboarding_carousel.js" #js {}
"../src/js/worklets/chat/lightbox.js" #js {}
"../src/js/worklets/chat/messages.js" #js {}
"../src/js/worklets/chat/messenger/lightbox.js" #js {}
"../src/js/worklets/chat/messenger/messages.js" #js {}
"../src/js/worklets/chat/messenger/navigation.js" #js {}
"../src/js/worklets/chat/messenger/composer.js" #js {}
"../src/js/worklets/chat/messenger/placeholder.js" #js {}
"../src/js/worklets/parallax.js" #js {}
"../src/js/worklets/identifiers_highlighting.js" #js {}
"./fleets.js" default-fleets
@ -441,17 +445,20 @@
"../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))
"../translations/en.json" (js/JSON.parse (slurp "./translations/en.json"))
"../translations/es.json" (js/JSON.parse (slurp "./translations/es.json"))
"../translations/es_419.json" (js/JSON.parse (slurp "./translations/es_419.json"))
"../translations/es_419.json" (js/JSON.parse (slurp
"./translations/es_419.json"))
"../translations/fil.json" (js/JSON.parse (slurp "./translations/fil.json"))
"../translations/fr.json" (js/JSON.parse (slurp "./translations/fr.json"))
"../translations/id.json" (js/JSON.parse (slurp "./translations/id.json"))
"../translations/it.json" (js/JSON.parse (slurp "./translations/it.json"))
"../translations/ko.json" (js/JSON.parse (slurp "./translations/ko.json"))
"../translations/pt_BR.json" (js/JSON.parse (slurp "./translations/pt_BR.json"))
"../translations/pt_BR.json" (js/JSON.parse (slurp
"./translations/pt_BR.json"))
"../translations/ru.json" (js/JSON.parse (slurp "./translations/ru.json"))
"../translations/tr.json" (js/JSON.parse (slurp "./translations/tr.json"))
"../translations/zh.json" (js/JSON.parse (slurp "./translations/zh.json"))
"../translations/zh_hant.json" (js/JSON.parse (slurp
"./translations/zh_hant.json"))
"../translations/zh_TW.json" (js/JSON.parse (slurp "./translations/zh_TW.json"))
"../translations/zh_TW.json" (js/JSON.parse (slurp
"./translations/zh_TW.json"))
nil))

2
src/status_im/contexts/chat/messenger/composer/sub_view.cljs
View File

@ -7,7 +7,7 @@
[status-im.contexts.chat.messenger.composer.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.worklets.chat.messages :as worklets]))
[utils.worklets.chat.messenger.composer :as worklets]))
(defn bar
[theme]

2
src/status_im/contexts/chat/messenger/lightbox/utils.cljs
View File

@ -13,7 +13,7 @@
[status-im.contexts.chat.messenger.lightbox.constants :as constants]
[status-im.contexts.chat.messenger.lightbox.top-view :as top-view]
[utils.re-frame :as rf]
[utils.worklets.chat.lightbox :as worklet]))
[utils.worklets.chat.messenger.lightbox :as worklet]))
(defn clear-timers
[timers]

2
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -21,7 +21,7 @@
[status-im.contexts.shell.jump-to.constants :as jump-to.constants]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.worklets.chat.messages :as worklets]))
[utils.worklets.chat.messenger.messages :as worklets]))
(defonce ^:const loading-indicator-extra-spacing 250)
(defonce ^:const loading-indicator-page-loading-height 100)

2
src/status_im/contexts/chat/messenger/messages/navigation/view.cljs
View File

@ -15,7 +15,7 @@
[status-im.contexts.chat.messenger.messages.pin.banner.view :as pin.banner]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.worklets.chat.messages :as worklets]))
[utils.worklets.chat.messenger.navigation :as worklets]))
(defn f-header-content-container
[{:keys [chat distance-from-list-top all-loaded? calculations-complete?]}]

2
src/status_im/contexts/chat/messenger/placeholder/view.cljs
View File

@ -5,7 +5,7 @@
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[status-im.contexts.chat.messenger.placeholder.style :as style]
[utils.worklets.chat.messages :as worklets]))
[utils.worklets.chat.messenger.placeholder :as worklets]))
(defn- loading-skeleton
[]

51
src/utils/worklets/chat/messages.cljs
View File

@ -1,51 +0,0 @@
(ns utils.worklets.chat.messages)
(def ^:private messages-worklets (js/require "../src/js/worklets/chat/messages.js"))
;;;; Navigtion
(defn navigation-header-opacity
[distance-from-list-top all-loaded? calculations-complete? start-position]
(.navigationHeaderOpacity ^js messages-worklets
distance-from-list-top
all-loaded?
calculations-complete?
start-position))
(defn navigation-header-position
[distance-from-list-top all-loaded? top-bar-height start-position]
(.navigationHeaderPosition ^js messages-worklets
distance-from-list-top
all-loaded?
top-bar-height
start-position))
(defn interpolate-navigation-view-opacity
[props]
(.interpolateNavigationViewOpacity ^js messages-worklets (clj->js props)))
;;;; Messages List
(defn messages-list-on-scroll
[distance-from-list-top chat-list-scroll-y callback]
(.messagesListOnScroll ^js messages-worklets distance-from-list-top chat-list-scroll-y callback))
;;;; Placeholder
(defn placeholder-opacity
[calculations-complete?]
(.placeholderOpacity ^js messages-worklets calculations-complete?))
(defn placeholder-z-index
[calculations-complete?]
(.placeholderZIndex ^js messages-worklets calculations-complete?))
;;;; Common
(defn scroll-down-button-opacity
[chat-list-scroll-y composer-focused? window-height]
(.scrollDownButtonOpacity ^js messages-worklets chat-list-scroll-y composer-focused? window-height))
(defn jump-to-button-opacity
[scroll-down-button-opacity-sv composer-focused?]
(.jumpToButtonOpacity ^js messages-worklets scroll-down-button-opacity-sv composer-focused?))
(defn jump-to-button-position
[scroll-down-button-opacity-sv composer-focused?]
(.jumpToButtonPosition ^js messages-worklets scroll-down-button-opacity-sv composer-focused?))

15
src/utils/worklets/chat/messenger/composer.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns utils.worklets.chat.messenger.composer)
(def ^:private worklets (js/require "../src/js/worklets/chat/messenger/composer.js"))
(defn scroll-down-button-opacity
[chat-list-scroll-y composer-focused? window-height]
(.scrollDownButtonOpacity ^js worklets chat-list-scroll-y composer-focused? window-height))
(defn jump-to-button-opacity
[scroll-down-button-opacity-sv composer-focused?]
(.jumpToButtonOpacity ^js worklets scroll-down-button-opacity-sv composer-focused?))
(defn jump-to-button-position
[scroll-down-button-opacity-sv composer-focused?]
(.jumpToButtonPosition ^js worklets scroll-down-button-opacity-sv composer-focused?))

4
src/utils/worklets/chat/lightbox.cljs → src/utils/worklets/chat/messenger/lightbox.cljs
View File

@ -1,6 +1,6 @@
(ns utils.worklets.chat.lightbox)
(ns utils.worklets.chat.messenger.lightbox)
(def ^:private layout-worklets (js/require "../src/js/worklets/chat/lightbox.js"))
(def ^:private layout-worklets (js/require "../src/js/worklets/chat/messenger/lightbox.js"))
(defn info-layout
[input top?]

7
src/utils/worklets/chat/messenger/messages.cljs Normal file
View File

@ -0,0 +1,7 @@
(ns utils.worklets.chat.messenger.messages)
(def ^:private worklets (js/require "../src/js/worklets/chat/messenger/messages.js"))
(defn messages-list-on-scroll
[distance-from-list-top chat-list-scroll-y callback]
(.messagesListOnScroll ^js worklets distance-from-list-top chat-list-scroll-y callback))

23
src/utils/worklets/chat/messenger/navigation.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns utils.worklets.chat.messenger.navigation)
(def ^:private worklets (js/require "../src/js/worklets/chat/messenger/navigation.js"))
(defn navigation-header-opacity
[distance-from-list-top all-loaded? calculations-complete? start-position]
(.navigationHeaderOpacity ^js worklets
distance-from-list-top
all-loaded?
calculations-complete?
start-position))
(defn navigation-header-position
[distance-from-list-top all-loaded? top-bar-height start-position]
(.navigationHeaderPosition ^js worklets
distance-from-list-top
all-loaded?
top-bar-height
start-position))
(defn interpolate-navigation-view-opacity
[props]
(.interpolateNavigationViewOpacity ^js worklets (clj->js props)))

11
src/utils/worklets/chat/messenger/placeholder.cljs Normal file
View File

@ -0,0 +1,11 @@
(ns utils.worklets.chat.messenger.placeholder)
(def ^:private worklets (js/require "../src/js/worklets/chat/messenger/placeholder.js"))
(defn placeholder-opacity
[calculations-complete?]
(.placeholderOpacity ^js worklets calculations-complete?))
(defn placeholder-z-index
[calculations-complete?]
(.placeholderZIndex ^js worklets calculations-complete?))