@momo-kits/foundation 0.92.26-beta.19 → 0.92.26-beta.20

package/Application/Components.tsx

@@ -9,6 +9,7 @@ import {
   Animated,
   BackHandler,
   DeviceEventEmitter,
+  Dimensions,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
@@ -31,8 +32,11 @@ import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 import {HeaderType} from '../Layout/types';
 import Navigation from './Navigation';
-import {InputSearchProps} from '../Input';
-import AnimatedInputSearch from '../Layout/AnimatedInputSearch';
+import {InputSearch, InputSearchProps} from '../Input';
+
+const SCREEN_PADDING = 12;
+const BACK_WIDTH = 28;
+const {width: screenWidth} = Dimensions.get('window');
 
 /**
  * default navigation button used header nav
@@ -520,18 +524,64 @@ const HeaderExtendHeader: React.FC<{
   navigation,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
-  const heightAnimated = useRef(new Animated.Value(0));
+  const [rightSpace, setRightSpace] = useState(0);
+  const animated = useRef(new Animated.Value(0));
 
   useEffect(() => {
     const listener = animatedValue.addListener(({value}) => {
-      heightAnimated.current.setValue(value);
+      animated.current.setValue(value);
     });
     return () => {
       animatedValue?.removeListener(listener);
     };
   }, []);
 
+  const height = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [heightHeader + 52, heightHeader],
+    extrapolate: 'clamp',
+  });
+
+  const translateX = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
+    extrapolate: 'clamp',
+  });
+
+  navigation!.onHeaderRightChange = (width: number) => {
+    setRightSpace(width);
+  };
+
+  const renderInputView = (hasColorBG: boolean = false) => {
+    return (
+      <Animated.View
+        style={{
+          justifyContent: 'flex-end',
+          height,
+        }}>
+        <Animated.View
+          style={{
+            transform: [{translateX}],
+            marginVertical: Spacing.S,
+            width: animated.current.interpolate({
+              inputRange: [0, 100],
+              outputRange: [
+                screenWidth - SCREEN_PADDING * 2,
+                screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - rightSpace,
+              ],
+              extrapolate: 'clamp',
+            }),
+          }}>
+          <InputSearch
+            {...inputSearchProps}
+            hasColorBG={hasColorBG}
+            showButtonText={false}
+          />
+        </Animated.View>
+      </Animated.View>
+    );
+  };
+
   if (inputSearchProps) {
     if (headerType === 'surface') {
       return (
@@ -543,30 +593,11 @@ const HeaderExtendHeader: React.FC<{
                 backgroundColor: theme.colors.background.surface,
                 borderBottomWidth: 1,
                 borderColor: theme.colors.border.default,
-                height: heightAnimated.current.interpolate({
-                  inputRange: [0, 100],
-                  outputRange: [heightHeader + 52, heightHeader],
-                  extrapolate: 'clamp',
-                }),
+                height,
               },
             ]}
           />
-          <Animated.View
-            style={{
-              justifyContent: 'flex-end',
-              height: heightAnimated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [heightHeader + 52, heightHeader],
-                extrapolate: 'clamp',
-              }),
-            }}>
-            <AnimatedInputSearch
-              animatedValue={animatedValue}
-              navigation={navigation}
-              {...inputSearchProps}
-              hasColorBG={true}
-            />
-          </Animated.View>
+          {renderInputView(true)}
         </>
       );
     }
@@ -578,11 +609,7 @@ const HeaderExtendHeader: React.FC<{
             style={[
               styles.headerBox,
               {
-                height: heightAnimated.current.interpolate({
-                  inputRange: [0, 100],
-                  outputRange: [heightHeader + 52, heightHeader],
-                  extrapolate: 'clamp',
-                }),
+                height,
               },
             ]}>
             <Image
@@ -592,22 +619,7 @@ const HeaderExtendHeader: React.FC<{
               style={styles.headerBackground}
             />
           </Animated.View>
-
-          <Animated.View
-            style={{
-              justifyContent: 'flex-end',
-              height: heightAnimated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [heightHeader + 52, heightHeader],
-                extrapolate: 'clamp',
-              }),
-            }}>
-            <AnimatedInputSearch
-              animatedValue={animatedValue}
-              navigation={navigation}
-              {...inputSearchProps}
-            />
-          </Animated.View>
+          {renderInputView()}
         </>
       );
     }
@@ -622,22 +634,7 @@ const HeaderExtendHeader: React.FC<{
             style={styles.headerBackground}
           />
         </View>
-
-        <Animated.View
-          style={{
-            justifyContent: 'flex-end',
-            height: heightAnimated.current.interpolate({
-              inputRange: [0, 100],
-              outputRange: [heightHeader + 52, heightHeader],
-              extrapolate: 'clamp',
-            }),
-          }}>
-          <AnimatedInputSearch
-            animatedValue={animatedValue}
-            navigation={navigation}
-            {...inputSearchProps}
-          />
-        </Animated.View>
+        {renderInputView()}
       </>
     );
   }

package/Application/StackScreen.tsx

@@ -122,9 +122,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
+    let defaultOptions = {
+      headerRight: {
+        type: 'toolkit',
+      },
+    };
     if (options) {
-      navigation.setOptions(options);
+      defaultOptions = {
+        ...defaultOptions,
+        ...options,
+      };
     }
+    navigation.setOptions(defaultOptions);
   }, [options]);
 
   /**
@@ -151,14 +160,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     };
   }, []);
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: {
-        type: 'toolkit',
-      },
-    });
-  }, []);
-
   /**
    * tracking for screen load
    */

package/Layout/types.ts

@@ -1,7 +1,3 @@
-import {Animated} from 'react-native';
-import {InputSearchProps, InputSearchRef} from '../Input';
-import {LegacyRef} from 'react';
-
 export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
 
 export type GridContextProps = {
@@ -25,18 +21,3 @@ export type GridContextProps = {
    */
   getSizeSpan: (span: number) => number;
 };
-
-export type AnimatedInputSearchProps = {
-  animatedValue: Animated.Value;
-  headerRightWidth: number;
-  heightHeader: number;
-  headerType: HeaderType;
-  inputSearchProps?: InputSearchProps;
-  inputRef?: LegacyRef<InputSearchRef>;
-};
-
-export type ExtendHeaderProps = {
-  headerBackground: string;
-  animatedValue: Animated.Value;
-  heightHeader: number;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.26-beta.19",
+    "version": "0.92.26-beta.20",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Layout/AnimatedInputSearch.tsx

@@ -1,62 +0,0 @@
-import React, {FC, useEffect, useRef, useState} from 'react';
-import {InputSearch, InputSearchProps} from '../Input';
-import {Animated, Dimensions} from 'react-native';
-import {Spacing} from '../Consts';
-import {scaleSize} from '../Text';
-import Navigation from '../Application/Navigation';
-
-export interface AnimatedInputSearchProps extends InputSearchProps {
-  animatedValue: Animated.Value;
-  navigation?: Navigation;
-}
-
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = 28;
-
-const AnimatedInputSearch: FC<AnimatedInputSearchProps> = ({
-  animatedValue,
-  navigation,
-  ...props
-}) => {
-  const {width: screenWidth} = Dimensions.get('window');
-  const widthAnimated = useRef(new Animated.Value(0));
-  const [rightSpace, setRightSpace] = useState(0);
-
-  useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
-      widthAnimated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, []);
-
-  navigation!.onHeaderRightChange = (width: number) => {
-    setRightSpace(width);
-  };
-  const translateX = widthAnimated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
-    extrapolate: 'clamp',
-  });
-
-  return (
-    <Animated.View
-      style={{
-        transform: [{translateX}],
-        marginVertical: Spacing.S,
-        width: widthAnimated.current.interpolate({
-          inputRange: [0, 100],
-          outputRange: [
-            screenWidth - SCREEN_PADDING * 2,
-            screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - rightSpace,
-          ],
-          extrapolate: 'clamp',
-        }),
-      }}>
-      <InputSearch {...props} showButtonText={false} />
-    </Animated.View>
-  );
-};
-
-export default AnimatedInputSearch;