@momo-kits/foundation 1.0.14 → 1.0.15

package/Input/InputSearch.tsx

@@ -22,7 +22,6 @@ const InputSearch: FC<InputSearchProps> = ({
   icon,
   buttonText = 'Hủy',
   showButtonText = true,
-  showIcon = true,
   showBorder = true,
   style,
   ...props
@@ -104,7 +103,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
           </TouchableOpacity>
         )}
-        {showIcon && icon && (
+        {icon || (
           <View style={{flexDirection: 'row'}}>
             <View
               style={[
@@ -116,7 +115,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
             <Icon
               color={iconTintColor}
-              source={icon}
+              source={icon as string}
               style={styles.iconSearchInput}
             />
           </View>

package/Input/common.tsx

@@ -1,7 +1,6 @@
 import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
-import {Image} from '../Image';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Navigation';
 import {Icon} from '../Icon';
@@ -99,10 +98,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
             </Text>
           )}
         </Text>
-        {floatingIcon && (
+        {floatingIcon || (
           <Icon
             color={floatingIconTintColor}
-            source={floatingIcon}
+            source={floatingIcon as string}
             size={16}
             style={styles.floatingIcon}
           />

package/Input/index.tsx

@@ -33,7 +33,6 @@ export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
 export interface InputSearchProps extends InputPropsOmitForSearch {
   buttonText?: string;
   showButtonText?: boolean;
-  showIcon?: boolean;
   showBorder?: boolean;
 }
 

package/Layout/ScreenContainer.tsx

@@ -30,7 +30,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
       transform: [
         {
           scale: scrollY.interpolate?.({
-            inputRange: [-300, -110, 100],
+            inputRange: [-300, 0, 1],
             outputRange: [1.75, 1, 1],
             extrapolate: 'clamp',
           }),
@@ -76,7 +76,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           height: 300,
           width: '100%',
         }}>
-        {headerBackground && (
+        {headerBackground || (
           <Animated.Image
             source={{
               uri: headerBackground,

package/Navigation/Components.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Spacing, Styles} from '../Consts';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {Text} from '../Text';
@@ -26,7 +26,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: '100%',
   },
-  avatar: {width: 36, height: 36, borderRadius: 18},
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
   dotAvatar: {
     position: 'absolute',
     width: 12,
@@ -138,7 +139,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {headerImage && (
+      {headerImage || (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
       )}
     </Animated.View>
@@ -149,15 +150,17 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
   image,
+  imageShape = 'circle',
   content,
   tintColor,
   dotColor,
 }) => {
+  const avatarStyle = imageShape == 'circle' ? styles.square : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
-        <Image source={{uri: image}} style={styles.avatar} />
-        {dotColor && (
+        <Image source={{uri: image}} style={avatarStyle} />
+        {dotColor || (
           <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
         )}
       </View>

package/Navigation/types.ts

@@ -124,6 +124,7 @@ export type TitleCustomProps = {
   title?: string;
   subTitle?: string;
   image?: string;
+  imageShape?: 'circle' | 'square';
   dotColor?: string;
   tintColor?: string;
   content?: React.ReactNode;

package/Popup/PopupNotify.tsx

@@ -36,11 +36,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     const renderRow = () => {
       return (
         <View style={Styles.row}>
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={Styles.flex}>
                 <Button
-                  title={secondary.title}
+                  title={secondary?.title as string}
                   type="text"
                   size="medium"
                   onPress={() => {
@@ -73,11 +73,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               onAction(primary.onPress);
             }}
           />
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={styles.buttonSpace} />
               <Button
-                title={secondary.title}
+                title={secondary?.title as string}
                 type="text"
                 size="medium"
                 onPress={() => {
@@ -147,7 +147,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             {description}
           </Text>
         </View>
-        {information && (
+        {information || (
           <View style={styles.information}>
             <Text
               typography={'description_xs'}

package/Skeleton/index.tsx

@@ -2,9 +2,8 @@ import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
-import {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import styles from './styles';
-import {Colors} from '@momo-kits/foundation';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);

package/package.json

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