fix: add the possibility to get the scroll position of ScreenContaine…

…r, use that to stick Toolbar in RichText
TERITORI · Nov 14, 2023 · 492bb30 · 492bb30
1 parent 57ff5aa
commit 492bb30
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 106 deletions.
diff --git a/packages/components/ScreenContainer/ScreenContainerMobile.tsx b/packages/components/ScreenContainer/ScreenContainerMobile.tsx
@@ -1,5 +1,7 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useRef } from "react";
 import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   SafeAreaView,
   ScrollView,
   StyleSheet,
@@ -51,6 +53,8 @@ export const ScreenContainerMobile: FC<{
   mobileTitle?: string;
   onBackPress?: () => void;
   children: ReactNode;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  alwaysScrollToEnd?: boolean;
 }> = ({
   children,
   networkFilter,
@@ -60,7 +64,10 @@ export const ScreenContainerMobile: FC<{
   forceNetworkFeatures,
   mobileTitle,
   onBackPress,
+  onScroll,
+  alwaysScrollToEnd,
 }) => {
+  const scrollViewRef = useRef<ScrollView>(null);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
   const { width } = useMaxResolution();
   const { isSearchModalMobileOpen, setSearchModalMobileOpen } = useSearchBar();
@@ -85,6 +92,13 @@ export const ScreenContainerMobile: FC<{
         <SelectedNetworkGate filter={networkFilter}>
           {hasScroll ? (
             <ScrollView
+              ref={scrollViewRef}
+              onContentSizeChange={
+                alwaysScrollToEnd
+                  ? () => scrollViewRef.current?.scrollToEnd()
+                  : undefined
+              }
+              onScroll={onScroll}
               contentContainerStyle={[
                 {
                   minHeight: windowHeight - MOBILE_HEADER_HEIGHT,

diff --git a/packages/components/ScreenContainer/index.tsx b/packages/components/ScreenContainer/index.tsx
@@ -1,10 +1,12 @@
-import React, { useMemo, useCallback, ReactNode } from "react";
+import React, { useMemo, useCallback, ReactNode, useRef } from "react";
 import {
   SafeAreaView,
   ScrollView,
   View,
   StyleSheet,
   useWindowDimensions,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
 } from "react-native";
 
 import { Header } from "./Header";
@@ -50,6 +52,8 @@ export const ScreenContainer: React.FC<{
   onBackPress?: () => void;
   maxWidth?: number;
   children?: ReactNode;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  alwaysScrollToEnd?: boolean;
 }> = ({
   children,
   headerChildren,
@@ -66,7 +70,10 @@ export const ScreenContainer: React.FC<{
   forceNetworkId,
   forceNetworkKind,
   forceNetworkFeatures,
+  onScroll,
+  alwaysScrollToEnd,
 }) => {
+  const scrollViewRef = useRef<ScrollView>(null);
   const { height } = useWindowDimensions();
   const hasMargin = !noMargin;
   const hasScroll = !noScroll;
@@ -115,6 +122,7 @@ export const ScreenContainer: React.FC<{
         forceNetworkId={forceNetworkId}
         forceNetworkKind={forceNetworkKind}
         mobileTitle={mobileTitle}
+        onScroll={onScroll}
       />
     );
   /////////////// default returns
@@ -138,6 +146,13 @@ export const ScreenContainer: React.FC<{
               <SelectedNetworkGate filter={networkFilter}>
                 {hasScroll ? (
                   <ScrollView
+                    ref={scrollViewRef}
+                    onContentSizeChange={
+                      alwaysScrollToEnd
+                        ? () => scrollViewRef.current?.scrollToEnd()
+                        : undefined
+                    }
+                    onScroll={onScroll}
                     style={{ width: "100%", flex: 1 }}
                     contentContainerStyle={[
                       {

diff --git a/packages/components/socialFeed/RichText/RichText.tsx b/packages/components/socialFeed/RichText/RichText.tsx
@@ -14,7 +14,10 @@ import {
 import { RichTextProps } from "./RichText.type";
 import { ActionsContainer } from "./Toolbar/ActionsContainer";
 import { ToolbarContainer } from "./Toolbar/ToolbarContainer";
-import { SOCIAL_FEED_BREAKPOINT_M } from "../../../utils/style/layout";
+import {
+  SOCIAL_FEED_BREAKPOINT_M,
+  SOCIAL_FEED_BREAKPOINT_S,
+} from "../../../utils/style/layout";
 import { PrimaryButton } from "../../buttons/PrimaryButton";
 import { SpacerColumn, SpacerRow } from "../../spacer";
 
@@ -26,8 +29,10 @@ export const RichText: React.FC<RichTextProps> = ({
   publishDisabled,
   loading,
   isPostConsultation,
+  toolbarTopPosition,
 }) => {
   const { width: windowWidth } = useWindowDimensions();
+
   const richText = useRef(null);
   return (
     <View>
@@ -40,31 +45,49 @@ export const RichText: React.FC<RichTextProps> = ({
 
       {!isPostConsultation && (
         <>
-          {windowWidth < SOCIAL_FEED_BREAKPOINT_M ? (
-            <SpacerColumn size={1.5} />
-          ) : (
-            <SpacerRow size={3} />
-          )}
-          <ActionsContainer>
-            <ToolbarContainer>
-              <RichToolbar
-                editor={richText}
-                actions={[
-                  actions.setBold,
-                  actions.setItalic,
-                  actions.setUnderline,
-                ]}
+          {/*---- Vertical space Added since Toolbar position is absolute (See above)*/}
+          <SpacerColumn
+            size={
+              windowWidth < SOCIAL_FEED_BREAKPOINT_S
+                ? 20
+                : windowWidth < SOCIAL_FEED_BREAKPOINT_M
+                  ? 16
+                  : 9
+            }
+          />
+          <View
+            style={{
+              width: "100%",
+              position: "absolute",
+              zIndex: 999999,
+              top: toolbarTopPosition,
+            }}
+          >
+            {windowWidth < SOCIAL_FEED_BREAKPOINT_M ? (
+              <SpacerColumn size={1.5} />
+            ) : (
+              <SpacerRow size={3} />
+            )}
+            <ActionsContainer>
+              <ToolbarContainer>
+                <RichToolbar
+                  editor={richText}
+                  actions={[
+                    actions.setBold,
+                    actions.setItalic,
+                    actions.setUnderline,
+                  ]}
+                />
+              </ToolbarContainer>
+              <PrimaryButton
+                disabled={publishDisabled}
+                isLoading={loading}
+                loader
+                text="Publish"
+                size="M"
               />
-            </ToolbarContainer>
-            <PrimaryButton
-              disabled={publishDisabled}
-              isLoading={loading}
-              loader
-              text="Publish"
-              size="M"
-            />
-          </ActionsContainer>
-          <SpacerColumn size={2} />
+            </ActionsContainer>
+          </View>
         </>
       )}
     </View>

diff --git a/packages/components/socialFeed/RichText/RichText.type.ts b/packages/components/socialFeed/RichText/RichText.type.ts
@@ -32,4 +32,5 @@ export interface RichTextProps {
   loading?: boolean;
   authorId: string;
   postId: string;
+  toolbarTopPosition: number;
 }
diff --git a/packages/components/socialFeed/RichText/RichText.web.tsx b/packages/components/socialFeed/RichText/RichText.web.tsx
@@ -80,7 +80,11 @@ import {
 } from "../../../utils/social-feed";
 import { neutral77 } from "../../../utils/style/colors";
 import { fontSemibold14 } from "../../../utils/style/fonts";
-import { layout, SOCIAL_FEED_BREAKPOINT_M } from "../../../utils/style/layout";
+import {
+  layout,
+  SOCIAL_FEED_BREAKPOINT_M,
+  SOCIAL_FEED_BREAKPOINT_S,
+} from "../../../utils/style/layout";
 import { LocalFileData } from "../../../utils/types/files";
 import { BrandText } from "../../BrandText";
 import { AudioView } from "../../FilePreview/AudioView";
@@ -122,7 +126,7 @@ const imagePlugin = createImagePlugin();
 const videoPlugin = createVideoPlugin();
 
 const { Toolbar } = staticToolbarPlugin;
-const { InlineToolbar } = inlineToolbarPlugin;
+// const { InlineToolbar } = inlineToolbarPlugin;
 
 export const RichText: React.FC<RichTextProps> = ({
   onChange = () => {},
@@ -136,6 +140,7 @@ export const RichText: React.FC<RichTextProps> = ({
   publishDisabled,
   authorId,
   postId,
+  toolbarTopPosition,
 }) => {
   const compositeDecorator = {
     decorators: [
@@ -439,9 +444,18 @@ export const RichText: React.FC<RichTextProps> = ({
           </BrandText>
         )}
 
-        <InlineToolbar>
-          {(externalProps) => <Buttons externalProps={externalProps} />}
-        </InlineToolbar>
+        {/*---- Vertical space Added since Toolbar position is absolute (See above)*/}
+        {!isPostConsultation && (
+          <SpacerColumn
+            size={
+              windowWidth < SOCIAL_FEED_BREAKPOINT_S
+                ? 20
+                : windowWidth < SOCIAL_FEED_BREAKPOINT_M
+                  ? 16
+                  : 9
+            }
+          />
+        )}
       </ScrollView>
 
       {/* ==== Audio files */}
@@ -468,8 +482,14 @@ export const RichText: React.FC<RichTextProps> = ({
         ))}
 
       {!isPostConsultation && (
-        <>
-          <SpacerColumn size={3} />
+        <View
+          style={{
+            width: "100%",
+            position: "absolute",
+            zIndex: 999999,
+            top: toolbarTopPosition,
+          }}
+        >
           <ActionsContainer>
             <ToolbarContainer>
               <Toolbar>
@@ -491,8 +511,7 @@ export const RichText: React.FC<RichTextProps> = ({
               onPress={handlePublish}
             />
           </ActionsContainer>
-          <SpacerColumn size={2} />
-        </>
+        </View>
       )}
     </View>
   );

diff --git a/packages/components/socialFeed/RichText/Toolbar/ToolbarContainer.tsx b/packages/components/socialFeed/RichText/Toolbar/ToolbarContainer.tsx
@@ -11,6 +11,7 @@ import { PrimaryBox } from "../../../boxes/PrimaryBox";
 export const ToolbarContainer: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <PrimaryBox
+      noBrokenCorners
       fullWidth
       colors={[
         gradientColorDarkerBlue,