@momo-kits/foundation 0.92.21-beta.2 → 0.92.21-beta.4

package/Layout/styles.ts

@@ -2,6 +2,12 @@ import {Platform, StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
   screenBanner: {
     width: '100%',
   },

package/Layout/types.ts

@@ -1,8 +1,4 @@
-import {Animated} from 'react-native';
-import {InputSearchProps, InputSearchRef} from '../Input';
-import {LegacyRef} from 'react';
-
-export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
+export type HeaderType = 'default' | 'surface' | 'extended' | '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/Title/index.tsx

@@ -1,16 +1,13 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {
-  Typography,
-  Colors,
-  Icon,
-  Badge,
-  ApplicationContext,
-  scaleSize,
-  Text,
-} from '@momo-kits/foundation';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Colors} from '../Consts';
 import styles from './styles';
 import {TitleProps} from './types';
+import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
   title = 'Title',

package/package.json

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

package/Input/TextTyping.tsx

@@ -1,113 +0,0 @@
-import React, {FC, memo, useEffect, useRef} from 'react';
-import {Platform, StyleSheet, TextInput, TextStyle} from 'react-native';
-import {Colors} from '../Consts';
-import {scaleSize} from '../Text';
-
-export interface TextTypingProps {
-  data: string[];
-  timeDelayEnd?: number;
-  timeDelayNextChar?: number;
-  inputStyle?: TextStyle;
-}
-
-const TextTyping: FC<TextTypingProps> = ({
-  data = [],
-  timeDelayEnd = 2000,
-  timeDelayNextChar = 20,
-  inputStyle = {},
-}) => {
-  const textRef = useRef<TextInput>(null);
-
-  const currentIndex = useRef<number>(0);
-  const currentCharIndex = useRef<number>(0);
-  const currentText = useRef('');
-
-  useEffect(() => {
-    setTimeout(() => {
-      playAnimation();
-    }, 1000);
-  }, []);
-
-  const playAnimation = () => {
-    const handleResetList = () => {
-      currentIndex.current = 0;
-      handleAnimation();
-    };
-
-    const handleAnimation = () => {
-      const listChar = data?.[currentIndex.current]?.split('') || [];
-      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
-    };
-
-    currentIndex.current >= data?.length
-      ? handleResetList()
-      : handleAnimation();
-  };
-
-  const showChar = (char?: string) => {
-    const handleResetString = () => {
-      setTimeout(() => {
-        reset();
-      }, timeDelayEnd);
-    };
-
-    const handleShowChar = () => {
-      setTimeout(() => {
-        textRef.current?.setNativeProps?.({
-          text: currentText.current + char,
-        });
-        currentText.current += char;
-        currentCharIndex.current++;
-        playAnimation();
-      }, timeDelayNextChar);
-    };
-
-    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
-      ? handleResetString()
-      : handleShowChar();
-  };
-
-  const reset = () => {
-    const handleNextString = () => {
-      currentIndex.current++;
-      playAnimation();
-    };
-
-    const handleReset = () => {
-      setTimeout(() => {
-        textRef.current?.setNativeProps?.({
-          text: currentText.current.slice(0, -1),
-        });
-        currentText.current = currentText.current.slice(0, -1);
-        currentCharIndex.current--;
-        reset();
-      }, timeDelayNextChar);
-    };
-
-    currentCharIndex.current <= 0 ? handleNextString() : handleReset();
-  };
-
-  return (
-    <TextInput
-      style={[styles.inputStyle, inputStyle]}
-      ref={textRef}
-      editable={false}
-      autoCorrect={false}
-      pointerEvents={'none'}
-      numberOfLines={1}
-    />
-  );
-};
-
-export default memo(TextTyping);
-
-const styles = StyleSheet.create({
-  inputStyle: {
-    color: Colors.black_12,
-    fontSize: scaleSize(12),
-    height: Platform.select({
-      android: 60,
-      ios: 36,
-    }),
-  },
-});

package/Layout/AnimatedInputSearch.tsx

@@ -1,58 +0,0 @@
-import React, {FC, useEffect, useRef} from 'react';
-import {InputSearch} from '../Input';
-import {Animated, Dimensions} from 'react-native';
-import {AnimatedInputSearchProps} from './types';
-import {Spacing} from '../Consts';
-import {scaleSize} from '../Text';
-
-const {width: screenWidth} = Dimensions.get('window');
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = scaleSize(28);
-
-const AnimatedInputSearch: FC<AnimatedInputSearchProps> = ({
-  animatedValue,
-  headerRightWidth,
-  inputSearchProps,
-  inputRef,
-}) => {
-  const widthAnimated = useRef(new Animated.Value(0));
-
-  useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
-      widthAnimated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, []);
-
-  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 - headerRightWidth,
-          ],
-          extrapolate: 'clamp',
-        }),
-      }}>
-      <InputSearch
-        ref={inputRef}
-        {...inputSearchProps}
-        showButtonText={false}
-      />
-    </Animated.View>
-  );
-};
-
-export default AnimatedInputSearch;