@momo-kits/foundation 0.102.1-beta.1 → 0.102.1-beta.3

package/Application/types.ts

@@ -1,4 +1,7 @@
-import {StackNavigationOptions} from '@react-navigation/stack';
+import {
+  StackHeaderTitleProps,
+  StackNavigationOptions,
+} from '@react-navigation/stack';
 import {EventArg} from '@react-navigation/core';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
@@ -237,8 +240,21 @@ export type FloatingButtonProps = {
   onPress: () => void;
 };
 
-export type AnimatedHeader = {
+export type AnimatedDefaultType = {
   type: 'default' | 'surface';
-  component?: (props?: any) => React.ReactElement;
-  headerTitle?: (props?: any) => React.ReactElement;
+  component?: (props?: {animatedValue: Animated.Value}) => React.ReactElement;
+  headerTitle?: (
+    props?: StackHeaderTitleProps & {animatedValue: Animated.Value}
+  ) => React.ReactElement;
 };
+
+export type AnimatedNormalType = {
+  type: 'default';
+} & AnimatedDefaultType;
+
+export type AnimatedSurfaceType = {
+  type: 'surface';
+  alwaysShowTitle?: boolean;
+} & AnimatedDefaultType;
+
+export type AnimatedHeader = AnimatedNormalType | AnimatedSurfaceType;

package/Badge/Badge.tsx

@@ -7,12 +7,7 @@ import styles from './styles';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
 
-const Badge: FC<BadgeProps> = ({
-  label = 'Label',
-  style,
-  backgroundColor,
-  accessibilityLabel,
-}) => {
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
   const {theme} = useContext(ApplicationContext);
 
   const isValidatedColor = () => {
@@ -51,10 +46,7 @@ const Badge: FC<BadgeProps> = ({
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text
-        color={Colors.black_01}
-        typography={'action_xxs_bold'}
-        accessibilityLabel={accessibilityLabel}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/types.ts

@@ -18,8 +18,6 @@ export type BadgeProps = {
    * Optional. Custom background badge.
    */
   backgroundColor?: string;
-
-  accessibilityLabel?: string;
 };
 
 /**

package/Input/Input.tsx

@@ -60,8 +60,6 @@ const Input = forwardRef(
       accessibilityLabel,
       editable = true,
       onPressFloatingIcon,
-      trailingAccessibilityLabel,
-      closeAccessibilityLabel,
       ...props
     }: InputProps,
     ref
@@ -112,7 +110,6 @@ const Input = forwardRef(
       if (secureTextEntry) {
         return (
           <TouchableOpacity
-            accessibilityLabel={trailingAccessibilityLabel}
             onPress={() => setSecureTextInput(!secureTextInput)}
             style={styles.icon}>
             <Icon
@@ -129,7 +126,6 @@ const Input = forwardRef(
         const renderIconTouchable = (icon: ReactNode) => {
           return (
             <TouchableOpacity
-              accessibilityLabel={trailingAccessibilityLabel}
               onPress={onPressTrailing ?? onPressIcon}
               style={styles.icon}>
               {icon}
@@ -235,7 +231,6 @@ const Input = forwardRef(
           <View style={styles.iconView}>
             {focused && haveValue && (
               <TouchableOpacity
-                accessibilityLabel={closeAccessibilityLabel}
                 style={styles.iconWrapper}
                 onPress={onClearText}>
                 <Icon

package/Input/index.tsx

@@ -118,9 +118,6 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 
   onPressFloatingIcon?: (e: GestureResponderEvent) => void;
-
-  trailingAccessibilityLabel?: string;
-  closeAccessibilityLabel?: string;
 }
 
 export interface InputTextAreaProps extends Omit<InputProps, 'size'> {

package/Layout/Screen.tsx

@@ -270,6 +270,9 @@ const Screen = forwardRef(
         if (animatedHeader.type === 'surface') {
           options = {
             ...options,
+            headerTintColor: animatedHeader.alwaysShowTitle
+              ? theme.colors.text.default
+              : undefined,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
@@ -278,6 +281,16 @@ const Screen = forwardRef(
                 animatedValue={animatedValue.current}
               />
             ),
+            headerTitle: (props: any) => (
+              <HeaderTitle
+                {...props}
+                animatedValue={
+                  animatedHeader.alwaysShowTitle
+                    ? undefined
+                    : animatedValue.current
+                }
+              />
+            ),
           };
         }
         if (animatedHeader.headerTitle) {
@@ -314,7 +327,10 @@ const Screen = forwardRef(
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
               scrollViewProps?.onScroll?.(e);
-              if (animatedHeader?.type === 'surface') {
+              if (
+                animatedHeader?.type === 'surface' &&
+                !animatedHeader?.alwaysShowTitle
+              ) {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
@@ -354,6 +370,12 @@ const Screen = forwardRef(
      * render top navigation banner
      */
     const renderAnimatedHeader = () => {
+      if (
+        animatedHeader?.type === 'surface' &&
+        animatedHeader?.alwaysShowTitle
+      ) {
+        return <View style={{height: heightHeader}} />;
+      }
       if (typeof animatedHeader?.component === 'function') {
         return (
           <View style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>

package/Tag/index.tsx

@@ -31,7 +31,6 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
-  accessibilityLabel,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -70,10 +69,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text
-        color={labelColor}
-        typography={'label_s_medium'}
-        accessibilityLabel={accessibilityLabel}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,6 +33,4 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
-
-  accessibilityLabel?: string;
 };

package/package.json

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