@momo-kits/foundation 0.81.43-tracking.9 → 0.81.48

package/IconButton/index.tsx

@@ -10,10 +10,6 @@ import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Represents the name or key of the icon to be displayed on the IconButton.
@@ -30,10 +26,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -41,12 +33,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -132,23 +121,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'IconButton',
-        params,
-        state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        <Icon size={iconSize} source={icon} color={getIconColor()} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
   );
 };
 

package/Input/Input.tsx

@@ -14,10 +14,6 @@ import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Input = forwardRef(
   (
     {
@@ -41,9 +37,8 @@ const Input = forwardRef(
       leadingIconColor,
       fontWeight = 'Regular',
       onPressIcon,
+      secureTextEntry,
       style,
-      params,
-      componentId,
       ...props
     }: InputProps,
     ref,
@@ -51,9 +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 screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -77,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>
         );
@@ -90,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;
@@ -127,8 +140,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
@@ -137,6 +150,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -167,22 +181,10 @@ const Input = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'Input',
-          params,
-          state: disabled ? 'disabled' : 'enabled',
-          componentId,
-          action: 'focus',
-        }}>
-        <View
-          style={[style, styles.wrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <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

@@ -19,10 +19,6 @@ import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputMoney = forwardRef(
   (
     {
@@ -40,9 +36,7 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      params,
       defaultValue = '',
-      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -50,8 +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 screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -122,7 +114,6 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -161,22 +152,10 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputMoney',
-          params,
-          state: 'enable',
-          componentId,
-          action: 'focus',
-        }}>
-        <View
-          style={[style, styles.wrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -22,10 +22,6 @@ import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
   const {theme} = useContext(ApplicationContext);
@@ -82,9 +78,7 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      params,
       style,
-      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -94,8 +88,6 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -213,7 +205,6 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -230,24 +221,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputOTP',
-          params,
-          state: 'enable',
-          componentId,
-          action: 'focus',
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}
-          accessibilityLabel={accessibilityLabel}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </TouchableOpacity>
-      </ScreenContext.Provider>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -13,10 +13,6 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputSearch = forwardRef(
   (
     {
@@ -29,12 +25,10 @@ const InputSearch = forwardRef(
       icon,
       buttonText = 'Hủy',
       showButtonText = true,
-      showBorder = true,
       style,
       defaultValue,
       onPressButtonText,
-      params,
-      componentId,
+        hasColorBG = true,
       ...props
     }: InputSearchProps,
     ref,
@@ -43,8 +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 screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -70,7 +62,6 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -125,48 +116,34 @@ const InputSearch = forwardRef(
         </View>
       );
     };
+
+    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputSearch',
-          params,
-          state: 'enabled',
-          componentId,
-          action: 'focus',
-        }}>
+      <View style={[style, styles.searchInputContainer]}>
         <View
-          style={[style, styles.searchInputContainer]}
-          accessibilityLabel={accessibilityLabel}>
-          <View
-            style={[
-              styles.searchInputWrapper,
-              {
-                backgroundColor: theme.colors.background.surface,
-                borderColor: theme.colors.background.surface,
-              },
-              showBorder && {borderColor: theme.colors.border.default},
-              focused && {borderColor: theme.colors.primary},
-            ]}>
-            <Icon
-              source={'navigation_search'}
-              size={24}
-              color={theme.colors.text.hint}
-            />
-            {renderInputView()}
-            {renderIconView()}
-          </View>
-          {showButtonText && (
-            <TouchableOpacity onPress={onPressButtonText}>
-              <Text
-                typography={'action_default_bold'}
-                style={styles.textButton}>
-                {buttonText}
-              </Text>
-            </TouchableOpacity>
-          )}
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+            }
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
         </View>
-      </ScreenContext.Provider>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
     );
   },
 );

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

@@ -80,9 +80,6 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
-
-  params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -112,12 +109,6 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
-  /**
-   * Optional. If `true`, a border will be displayed around the InputSearch component.
-   * Defaults to `true` if not provided.
-   */
-  showBorder?: boolean;
-
   onPressButtonText?: () => void;
 
   /**
@@ -130,9 +121,7 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  params?: any;
-
-  componentId?: string;
+  hasColorBG?: boolean
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

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,
@@ -101,7 +100,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,

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.81.43-tracking.9",
+    "version": "0.81.48",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/publish.sh

@@ -13,7 +13,7 @@ echo VERSION: $VERSION
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
 cd dist
-npm publish --tag latest --access=public
+npm publish --tag beta --access=public
 
 #clear dist and package json
 cd ..