@momo-kits/foundation 0.80.9 → 0.81.2

package/Input/InputSearch.tsx

@@ -37,7 +37,7 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    let iconTintColor = iconColor;
+    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -60,19 +60,16 @@ const InputSearch = forwardRef(
     };
 
     const renderInputView = () => {
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-
       return (
         <TextInput
           {...props}
-          accessibilityLabel={`TextInput`}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="top"
           ref={inputRef}
           style={[
             styles.searchInput,
             {
-              color: textColor,
+              color: theme.colors.text.default,
             },
           ]}
           value={value}
@@ -81,7 +78,7 @@ const InputSearch = forwardRef(
           onBlur={_onBlur}
           placeholder={placeholder}
           selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
+          placeholderTextColor={theme.colors.text.hint}
         />
       );
     };
@@ -112,7 +109,7 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconTintColor}
+                color={iconColor}
                 source={icon}
                 style={styles.iconSearchInput}
               />
@@ -124,7 +121,7 @@ const InputSearch = forwardRef(
     return (
       <View
         style={[style, styles.searchInputContainer]}
-        accessibilityLabel={`InputSearch/${placeholder}`}>
+        accessibilityLabel={accessibilityLabel}>
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -37,6 +37,7 @@ const InputTextArea = forwardRef(
       maxLength,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,6 +46,7 @@ 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();
@@ -106,7 +108,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={`TextInput`}
+                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -147,8 +149,8 @@ const InputTextArea = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/common.tsx

@@ -1,6 +1,6 @@
 import {View, ViewStyle} from 'react-native';
 import styles from './styles';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
@@ -16,7 +16,7 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (

package/Input/index.tsx

@@ -4,7 +4,7 @@ import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputDropDown from './InputDropDown';
-import {TextInputProps} from 'react-native';
+import {TextInputProps, ViewStyle} from 'react-native';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -238,6 +238,8 @@ export interface InputDropDownProps {
    * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
+
+  style: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Layout/Card.tsx

@@ -7,16 +7,27 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
 export interface CardProps extends ViewProps {
   /**
    * Optional. Background image for the card.
    */
   backgroundImage?: string;
+
+  /**
+   * Optional. Use shadow for the card.
+   */
+  useShadow?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -127,6 +138,7 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     return element;
   };
 
+  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -137,15 +149,17 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
+            backgroundColor: theme.colors.background.surface,
           },
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={styles.imageBackground}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>

package/Layout/ItemList.tsx

@@ -0,0 +1,63 @@
+import React, {FC, ReactElement, useContext} from 'react';
+import {FlatList, FlatListProps, View} from 'react-native';
+import Item from './Item';
+import {GridContext} from './index';
+
+const ItemList: FC<FlatListProps<any>> = ({
+  renderItem,
+  numColumns = 1,
+  style,
+  ...props
+}) => {
+  const {gutterSize} = useContext(GridContext);
+
+  const _renderItem = (info: any) => {
+    const {item, index, separators} = info;
+
+    const children = renderItem?.({
+      item,
+      index,
+      separators,
+    }) as ReactElement;
+
+    if (children?.type !== Item) {
+      console.warn('Wrong children type for this component, expected are Item');
+    }
+
+    const spacingStyle =
+      numColumns > 1
+        ? {
+            marginRight: gutterSize,
+          }
+        : {};
+
+    return <View style={spacingStyle}>{children}</View>;
+  };
+
+  return (
+    <FlatList
+      {...props}
+      numColumns={numColumns}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[
+        style,
+        {
+          marginTop: undefined,
+          marginBottom: undefined,
+          marginLeft: undefined,
+          marginRight: undefined,
+          paddingTop: undefined,
+          paddingBottom: undefined,
+          paddingLeft: undefined,
+          paddingRight: undefined,
+          padding: undefined,
+          margin: undefined,
+        },
+      ]}
+    />
+  );
+};
+
+export default ItemList;