@momo-kits/foundation 0.89.3 → 0.89.4-rc.1

package/Application/Components.tsx

@@ -35,7 +35,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   tintColor,
   onPress,
   useBorder = true,
-  accessibilityLabel,
   badgeType,
   badgeValue,
 }) => {
@@ -67,7 +66,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   return (
     <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
-        accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -81,7 +79,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
-const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
+const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
@@ -92,7 +90,6 @@ const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${accessibilityLabel}${props.children}`}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -106,7 +103,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   useBorder,
-  accessibilityLabel = '',
 }) => {
   const context = useContext(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
@@ -171,7 +167,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
-        accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
       />
     </View>
@@ -368,7 +363,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityLabel={'UtilityTool'}
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -399,15 +393,11 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'Toolkit/More'}
-            onPress={onMore}>
+          <TouchableOpacity onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={`Toolkit/Close`}
-            onPress={onClose}>
+          <TouchableOpacity onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/ModalScreen.tsx

@@ -74,7 +74,7 @@ const Modal: React.FC<ModalParams> = props => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+          <View style={styles.modalContent}>
             <Component {...params} />
           </View>
           <Pressable
@@ -167,7 +167,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <BottomSheetView accessibilityLabel={'BottomSheet'}>
+        <BottomSheetView>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
@@ -189,22 +189,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ...{
                   headerLeft: (props: any) => {
                     if (props.canGoBack) {
-                      return (
-                        <HeaderLeft
-                          {...props}
-                          useBorder={false}
-                          accessibilityLabel={'BottomSheet/'}
-                        />
-                      );
+                      return <HeaderLeft {...props} useBorder={false} />;
                     }
                   },
                   headerTitle: (props: any) => {
-                    return (
-                      <HeaderTitle
-                        {...props}
-                        accessibilityLabel={'BottomSheet/'}
-                      />
-                    );
+                    return <HeaderTitle {...props} />;
                   },
                   headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
@@ -220,7 +209,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       useBorder={false}
                       onPress={() => bottomSheetRef.current?.dismiss()}
-                      accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>
                 ),

package/Application/Navigator.ts

@@ -109,6 +109,18 @@ class Navigator {
     );
   };
 
+  /**
+   * dismiss a feature data
+   * @param data
+   */
+  setDismissData = (data: any) => {
+    this.dismissData = data;
+  };
+
+  /**
+   * set callback function for toolkit
+   * @param callback
+   */
   setToolkitCallback = (
     callback: (item: {key: string; action: string}) => void,
   ) => {

package/Application/types.ts

@@ -127,7 +127,6 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  accessibilityLabel?: string;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
 };
@@ -159,7 +158,6 @@ export interface NavigationOptions extends StackNavigationOptions {
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {

package/Button/index.tsx

@@ -293,7 +293,6 @@ const Button: FC<ButtonProps> = ({
   return (
     <TouchableOpacity
       {...rest}
-      accessibilityLabel={`Button/${title}`}
       activeOpacity={activeOpacity}
       onPress={onPressButton}
       style={buttonStyle}>

package/CheckBox/index.tsx

@@ -36,7 +36,6 @@ const CheckBox: FC<CheckBoxProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}/${value}`}
       activeOpacity={0.8}
       onPress={() => onChange?.(!value)}
       disabled={disabled}

package/IconButton/index.tsx

@@ -123,7 +123,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   return (
     <TouchableOpacity
       {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
       activeOpacity={activeOpacity}
       onPress={onPressButton}
       style={buttonStyle}>

package/Input/Input.tsx

@@ -37,6 +37,7 @@ const Input = forwardRef(
       leadingIconColor,
       fontWeight = 'Regular',
       onPressIcon,
+      secureTextEntry,
       style,
       ...props
     }: InputProps,
@@ -45,8 +46,8 @@ const Input = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -70,11 +71,29 @@ const Input = forwardRef(
 
     const renderIcon = (color: string | undefined) => {
       if (loading) {
-        return <Loader type={'spinner'} color={color} />;
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
       }
       if (icon) {
         return (
-          <TouchableOpacity onPress={onPressIcon} disabled={!onPressIcon}>
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
             <Icon color={color} source={icon} size={24} />
           </TouchableOpacity>
         );
@@ -83,6 +102,7 @@ const Input = forwardRef(
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
+      const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
@@ -120,8 +140,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
@@ -130,6 +150,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -160,9 +181,7 @@ const Input = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputDropDown.tsx

@@ -30,7 +30,6 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -82,7 +81,6 @@ const InputDropDown = ({
             <TextInput
               {...props}
               onPressIn={onPress}
-              accessibilityLabel={accessibilityLabel}
               editable={false}
               textAlignVertical="top"
               style={[
@@ -106,10 +104,7 @@ const InputDropDown = ({
   };
 
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[style, full && styles.wrapper]}
-      accessibilityLabel={accessibilityLabel}>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputMoney.tsx

@@ -44,7 +44,6 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputMoney/${floatingValue}`;
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -115,7 +114,6 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -154,9 +152,7 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -88,7 +88,6 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -206,7 +205,6 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -226,8 +224,7 @@ const InputOTP = forwardRef(
       <TouchableOpacity
         activeOpacity={1}
         onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}
-        accessibilityLabel={accessibilityLabel}>
+        style={[style, styles.otpWrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>

package/Input/InputSearch.tsx

@@ -37,7 +37,6 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -63,7 +62,6 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -119,9 +117,7 @@ const InputSearch = forwardRef(
       );
     };
     return (
-      <View
-        style={[style, styles.searchInputContainer]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.searchInputContainer]}>
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -46,7 +46,6 @@ const InputTextArea = forwardRef(
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -110,7 +109,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -150,9 +148,7 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/styles.ts

@@ -53,8 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    width: 24,
-    height: 24,
+    marginLeft: Spacing.S
   },
   iconWrapper: {
     width: 24,

package/Layout/Card.tsx

@@ -144,7 +144,6 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
-        accessibilityLabel={`Card`}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

package/Layout/Item.tsx

@@ -37,7 +37,6 @@ const Item: React.FC<ItemProps> = ({
 
   return (
     <View
-      accessibilityLabel={`Item`}
       style={[
         style,
         styles.item,

package/Layout/Screen.tsx

@@ -301,9 +301,7 @@ const Screen = forwardRef(
     };
 
     return (
-      <View
-        style={[Styles.flex, {backgroundColor}]}
-        accessibilityLabel={`ScreenContainer`}>
+      <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
           <>
             <Image

package/Layout/Section.tsx

@@ -151,7 +151,6 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
-        accessibilityLabel={`Section`}
         style={[
           style,
           styles.protectedStyle,

package/Pagination/PaginationScroll.tsx

@@ -31,7 +31,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
-        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [

package/Popup/PopupNotify.tsx

@@ -182,7 +182,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -77,7 +77,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'PopupPromotion'}>
+    <View>
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -39,7 +39,6 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
       disabled={disabled}
       style={[

package/Skeleton/index.tsx

@@ -41,7 +41,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     }
   };
   return (
-    <View style={[styles.container, style]} accessibilityLabel={'Skeleton'}>
+    <View style={[styles.container, style]}>
       <View
         onLayout={e => onLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>

package/Switch/index.tsx

@@ -16,7 +16,6 @@ const Switch: FC<SwitchProps> = props => {
 
   return (
     <TouchableOpacity
-      accessibilityLabel={'Switch'}
       disabled={disabled}
       onPress={() => onChange?.(!value)}
       style={[

package/Tag/index.tsx

@@ -60,9 +60,7 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={`Tag/${label}`}>
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
       {!!icon && (
         <Icon
           style={styles.icon}

package/Text/index.tsx

@@ -97,7 +97,6 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      accessibilityLabel={`Text/${children}`}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.89.3",
+    "version": "0.89.4-rc.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {