Organize composer worklets (#18528)

src/js/worklets/chat/messages.js

@@ -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);
-  });
-}

src/js/worklets/chat/messenger/composer.js

@@ -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);
+  });
+}

src/js/worklets/chat/messenger/messages.js

@@ -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);
+  };
+}

src/js/worklets/chat/messenger/navigation.js

@@ -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;
+    }
+  });
+}

src/js/worklets/chat/messenger/placeholder.js

@@ -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;
+  });
+}

src/mocks/js_dependencies.cljs

@@ -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/messenger/lightbox.js"    #js {}
-    "../src/js/worklets/chat/messages.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))

src/status_im/contexts/chat/messenger/composer/sub_view.cljs

@@ -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]

src/status_im/contexts/chat/messenger/lightbox/utils.cljs

@@ -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]

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -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)

src/status_im/contexts/chat/messenger/messages/navigation/view.cljs

@@ -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?]}]

src/status_im/contexts/chat/messenger/placeholder/view.cljs

@@ -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
   []

src/utils/worklets/chat/messages.cljs

@@ -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?))

src/utils/worklets/chat/messenger/composer.cljs

@@ -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?))

src/utils/worklets/chat/messenger/lightbox.cljs

@@ -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?]

src/utils/worklets/chat/messenger/messages.cljs

@@ -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))

src/utils/worklets/chat/messenger/navigation.cljs

@@ -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)))

src/utils/worklets/chat/messenger/placeholder.cljs

@@ -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?))