@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

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/FloatingButton.tsx

@@ -1,168 +0,0 @@
-import {default as React, useContext, useEffect, useRef, useState} from 'react';
-import {
-  Animated,
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Icon} from '../Icon';
-
-export interface FloatingButtonProps {
-  label?: string;
-  onPress?: () => void;
-  position?: 'center' | 'right';
-  icon?: string;
-  iconColor?: string;
-  size?: 'small' | 'large';
-  animatedValue?: Animated.Value;
-  bottom?: number;
-  renderComponent?: () => React.ReactNode;
-}
-
-export const FloatingButton: React.FC<FloatingButtonProps> = ({
-  renderComponent,
-  label = '',
-  onPress = () => {},
-  position = 'right',
-  icon = '',
-  iconColor = '',
-  size = 'small',
-  animatedValue,
-  bottom = 12,
-}: FloatingButtonProps) => {
-  const {theme} = useContext(ApplicationContext);
-  const maxWidth = useRef(0);
-  const minWidth = size === 'small' ? 36 : 48;
-  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
-  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
-  const lastOffset = useRef(0);
-  const lastDirection = useRef<string>();
-  const [showText, setShowText] = React.useState(true);
-
-  useEffect(() => {
-    if (!label) return;
-
-    Animated.timing(opacityAnimated, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true,
-    }).start();
-
-    const listener = animatedValue?.addListener(({value}) => {
-      if (value !== lastOffset.current && value > 0) {
-        const direction = value > lastOffset.current ? 'down' : 'up';
-        lastOffset.current = value;
-        if (lastDirection.current !== direction) {
-          lastDirection.current = direction;
-          if (direction === 'down') {
-            Animated.timing(opacityAnimated, {
-              toValue: 0,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: minWidth,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(false));
-          } else {
-            Animated.timing(opacityAnimated, {
-              toValue: 1,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: maxWidth.current,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(true));
-          }
-        }
-      }
-    });
-
-    return () => {
-      if (listener) {
-        animatedValue?.removeListener(listener);
-      }
-    };
-  }, [label, widthAnimated]);
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const layout = event.nativeEvent.layout;
-    if (widthAnimated) return;
-    maxWidth.current = layout.width;
-    setWidthAnimated(new Animated.Value(layout.width));
-  };
-
-  if (renderComponent) {
-    return (
-      <View
-        onLayout={handleLayout}
-        style={[
-          styles.container,
-          {
-            right: position === 'right' ? 12 : undefined,
-            alignSelf: position === 'center' ? 'center' : 'flex-end',
-            bottom,
-          },
-        ]}>
-        {renderComponent()}
-      </View>
-    );
-  }
-
-  return (
-    <Animated.View
-      onLayout={handleLayout}
-      style={[
-        styles.container,
-        {
-          right: position === 'right' ? 12 : undefined,
-          alignSelf: position === 'center' ? 'center' : 'flex-end',
-          width: widthAnimated,
-          height: size === 'small' ? 36 : 48,
-          backgroundColor: theme.colors.primary,
-          bottom,
-        },
-      ]}>
-      <TouchableOpacity
-        style={{flexDirection: 'row', alignItems: 'center'}}
-        onPress={onPress}>
-        <Icon
-          source={icon}
-          size={size === 'small' ? 12 : 24}
-          color={iconColor}
-        />
-        {showText && !!label && (
-          <Animated.Text
-            style={[styles.label, {opacity: opacityAnimated, color: 'white'}]}
-            numberOfLines={1}>
-            {label}
-          </Animated.Text>
-        )}
-      </TouchableOpacity>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    borderRadius: 100,
-    paddingHorizontal: 12,
-    flexWrap: 'wrap',
-    alignSelf: 'flex-end',
-  },
-  label: {
-    marginLeft: 8,
-    fontSize: 16,
-    lineHeight: 22,
-    fontWeight: '700',
-  },
-});