@momo-kits/foundation 0.75.1-beta.8 → 0.76.1-beta.1

package/Input/InputTextArea.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
 import {
   DEFAULT_HEIGHT,
   ErrorView,
@@ -18,26 +17,26 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
+import {ApplicationContext} from '../Application';
 
-const InputTextArea: FC<InputTextAreaProps> = props => {
+const InputTextArea: FC<InputTextAreaProps> = ({
+  errorMessage,
+  onChangeText,
+  floatingIconColor,
+  floatingIcon,
+  floatingValue,
+  onFocus,
+  onBlur,
+  disabled,
+  value,
+  defaultValue,
+  height,
+  placeholder,
+  maxLength,
+  required,
+  ...props
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {
-    errorMessage,
-    onChangeText,
-    floatingIconColor,
-    floatingIcon,
-    floatingValue,
-    onFocus,
-    onBlur,
-    disabled,
-    value,
-    defaultValue,
-    height,
-    placeholder,
-    maxLength,
-    required,
-  } = props;
-
   const [focused, setFocused] = useState(false);
   const [inputValue, setInputValue] = useState(defaultValue ?? '');
   const inputRef = useRef<any>(null);
@@ -101,6 +100,8 @@ const InputTextArea: FC<InputTextAreaProps> = props => {
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
             <TextInput
+              {...props}
+              accessibilityLabel={`TextInput`}
               ref={inputRef}
               editable={!disabled}
               textAlignVertical="top"

package/Input/common.tsx

@@ -2,7 +2,7 @@ import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 

package/Input/index.tsx

@@ -89,6 +89,8 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
    * Defaults to `true` if not provided.
    */
   showBorder?: boolean;
+
+  onPressButtonText?: () => void;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Layout/Card.tsx

@@ -1,21 +1,32 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
+import Item from './Item';
+
+const Card: React.FC<CardProps> = ({children, style}) => {
+  const {numberOfColumns} = useGridSystem();
 
-const Card: React.FC<CardProps> = ({
-  widthSpan = 12,
-  heightSpan,
-  usePadding,
-  children,
-  style,
-}) => {
-  const grid = useContext(GridContext);
+  const gutterSize = 8;
+  const margin = 12;
+
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
 
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
   /**
-   * render overlay view only dev mode
+   * render overlay only dev mode
    */
   const renderOverlay = () => {
     return (
@@ -34,55 +45,98 @@ const Card: React.FC<CardProps> = ({
     );
   };
 
-  const styles: any = style ?? {};
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
+    return (
+      <View
+        key={`Item${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  /**
+   * render children content for card
+   * @param children
+   */
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
 
-  const numberOfColumns = 12;
-  const gutterSize = 8;
-  let margin = 0;
-  if (usePadding) {
-    margin = 12;
-  }
-  const widthSection = grid.getSizeSpan(widthSpan) - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-  const gridContext: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    margin,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
+        if (totalSpan <= gridContext.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
   };
 
   return (
-    <View
-      accessibilityLabel={`Card`}
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        paddingHorizontal: margin,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
-      <GridContext.Provider value={gridContext}>
-        {children}
-      </GridContext.Provider>
-      {GRIDVIEW && renderOverlay()}
-    </View>
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Card`}
+        style={[
+          style,
+          {
+            width: widthSection,
+            marginHorizontal: gridContext.margin,
+            padding: 12,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
+        {renderView(validateChildren(children, [Item]))}
+        {GRIDVIEW && renderOverlay()}
+      </View>
+    </GridContext.Provider>
   );
 };
 
-Card.defaultProps = {
-  widthSpan: 12,
-  usePadding: false,
-};
-
 Card.displayName = 'Card';
 
 export default Card;

package/Layout/GridSystem.tsx

@@ -1,13 +1,15 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Dimensions, StyleSheet, View} from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
+import {useGridSystem} from './utils';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const numberOfColumns = 12;
+  const {numberOfColumns} = useGridSystem();
+
   const gutterSize = 12;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;

package/Layout/Item.tsx

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+
+import {ItemProps} from './types';
+import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
+
+const Item: React.FC<ItemProps> = ({
+  widthSpan,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  return (
+    <View
+      accessibilityLabel={`Item`}
+      style={[
+        style,
+        {
+          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
+          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+          overflow: 'hidden',
+          margin: undefined,
+          marginTop: undefined,
+          marginBottom: undefined,
+          marginLeft: undefined,
+          marginRight: undefined,
+        },
+      ]}>
+      {children}
+      {GRIDVIEW && renderOverlay()}
+    </View>
+  );
+};
+
+Item.displayName = 'Item';
+
+export default Item;

package/Layout/Screen.tsx

@@ -0,0 +1,188 @@
+import {
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+  Text,
+  View,
+} from 'react-native';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import React, {useContext, useEffect, useRef} from 'react';
+import {ScreenProps} from '../Application/types';
+import {Spacing, Styles} from '../Consts';
+import {Card, Section, validateChildren} from './index';
+import {ApplicationContext} from '../Application';
+import Navigation from '../Application/Navigation';
+import {HeaderTitle} from '../Application/Components';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  enableKeyboardAvoidingView = false,
+  scrollable = false,
+  navigation,
+  marginHeader,
+  useAnimatedHeader = false,
+  useExtendedHeader = false,
+  headerBackground,
+  scrollViewProps,
+  footerComponent: Footer,
+}) => {
+  const animatedValue = useRef<Animated.Value | undefined>(undefined);
+  const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+  const headerTransparent = useAnimatedHeader || useExtendedHeader;
+
+  let handleScroll;
+  let imageAnimatedStyle = {};
+  let opacity;
+  let Component: any = View;
+  animatedValue.current = undefined;
+
+  /**
+   * automatic margin content if use header transparent
+   */
+  if (headerTransparent) {
+    animatedValue.current = new Animated.Value(0);
+    marginHeader = marginHeader ?? useHeaderHeight();
+    if (useExtendedHeader) {
+      headerBackground = theme.assets?.headerBackground;
+    }
+  }
+
+  useEffect(() => {
+    let title = {};
+    if (useExtendedHeader) {
+      title = {headerTitle: HeaderTitle};
+    }
+    navigation?.setOptions({
+      animatedValue: animatedValue.current,
+      headerTransparent,
+      ...title,
+    });
+  }, [useExtendedHeader, useAnimatedHeader]);
+
+  /**
+   * animated for header stack when used bottom tab
+   */
+  useEffect(() => {
+    const current: any = navigation;
+    if (headerTransparent) {
+      return current?.addListener?.('focus', () => {
+        const stackNavigation = new Navigation(current?.getParent(), theme);
+        stackNavigation?.setOptions({
+          animatedValue: animatedValue.current,
+          headerTransparent: true,
+        });
+      });
+    }
+  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+
+  /**
+   * animated when use scroll && animated value
+   */
+  if (scrollable) {
+    Component = Animated.ScrollView;
+    if (useAnimatedHeader) {
+      opacity = animatedValue.current?.interpolate({
+        inputRange: [0, 100],
+        outputRange: [1, 0],
+        extrapolate: 'clamp',
+      });
+      imageAnimatedStyle = {
+        transform: [
+          {
+            scale: animatedValue.current?.interpolate?.({
+              inputRange: [-300, 0, 1],
+              outputRange: [1.75, 1, 1],
+              extrapolate: 'clamp',
+            }),
+          },
+        ],
+      };
+      handleScroll = Animated.event(
+        [
+          {
+            nativeEvent: {
+              contentOffset: {y: animatedValue.current as Animated.Value},
+            },
+          },
+        ],
+        {useNativeDriver: true},
+      );
+    }
+  }
+
+  /**
+   * build content for screen
+   */
+  const renderContent = () => {
+    const results = validateChildren(children, [Section, Card]);
+    if (Array.isArray(results)) {
+      return results.map((item, index) => {
+        const space = item.props?.useMargin === false ? 0 : Spacing.M;
+        return (
+          <View
+            key={`ScreenItem${index}`}
+            style={{
+              marginTop: space,
+              flex: item.props?.expanded ? 1 : undefined,
+            }}>
+            {item}
+          </View>
+        );
+      });
+    }
+    return results;
+  };
+
+  return (
+    <View style={Styles.flex} accessibilityLabel={`ScreenContainer`}>
+      <View
+        style={{
+          position: 'absolute',
+          maxHeight: 215,
+          width: '100%',
+          overflow: 'hidden',
+        }}>
+        {!!headerBackground && (
+          <Animated.Image
+            source={{
+              uri: headerBackground,
+            }}
+            style={{
+              opacity: opacity ?? 1,
+              aspectRatio: 1.75,
+              ...imageAnimatedStyle,
+            }}
+          />
+        )}
+      </View>
+      <KeyboardAvoidingView
+        style={Styles.flex}
+        enabled={enableKeyboardAvoidingView}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}>
+        <Component
+          {...scrollViewProps}
+          onScroll={handleScroll}
+          style={[Styles.flex, {marginTop: marginHeader}]}>
+          {renderContent()}
+        </Component>
+        {Footer && (
+          <View
+            style={{
+              paddingTop: Spacing.S,
+              paddingBottom: insets.bottom + Spacing.S,
+              backgroundColor: theme.colors.background.surface,
+            }}>
+            <Section>{Footer}</Section>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+export default Screen;

package/Layout/Section.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
-import Card from './Card';
+import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
+import Item from './Item';
+
+const Section: React.FC<SectionProps> = ({
+  children,
+  useMargin = true,
+  backgroundColor,
+}) => {
+  const {numberOfColumns} = useGridSystem();
 
-const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
-  const numberOfColumns = 12;
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
@@ -124,12 +129,13 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
       <View
         accessibilityLabel={`Section`}
         style={{
-          width: gridContext.getSizeSpan(12),
+          width: widthSection,
           marginHorizontal: gridContext.margin,
           flexDirection: 'row',
           flexWrap: 'wrap',
+          backgroundColor: backgroundColor,
         }}>
-        {renderView(validateChildren(children, Card))}
+        {renderView(validateChildren(children, [Item]))}
         {GRIDVIEW && renderOverlay()}
       </View>
     </GridContext.Provider>
@@ -138,7 +144,4 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
 
 Section.displayName = 'Section';
 
-Section.defaultProps = {
-  useMargin: true,
-};
 export default Section;

package/Layout/index.ts

@@ -4,6 +4,7 @@ import GridSystem from './GridSystem';
 import {validateChildren} from './utils';
 import {createContext} from 'react';
 import {GridContextProps} from './types';
+import Item from './Item';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -13,4 +14,4 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: span => 0,
 });
 
-export {GridContext, Card, Section, GridSystem, validateChildren};
+export {GridContext, Card, Section, GridSystem, validateChildren, Item};

package/Layout/types.ts

@@ -40,22 +40,22 @@ export interface SectionProps extends ViewProps {
    * Defaults to `false` if not provided.
    */
   useMargin?: boolean;
+
+  backgroundColor?: string;
 }
 
-export interface CardProps extends ViewProps {
+export interface ItemProps extends ViewProps {
   /**
    * Represents the width of the Card component in terms of span numbers (1-12).
    */
-  widthSpan: SpanNumber;
+  widthSpan?: SpanNumber;
 
   /**
    * Optional. Represents the height of the Card component in terms of span numbers (1-12).
    */
   heightSpan?: SpanNumber;
+}
 
-  /**
-   * Optional. If `true`, padding will be applied to the Card component.
-   * Defaults to `false` if not provided.
-   */
-  usePadding?: boolean;
+export interface CardProps extends ViewProps {
+  background?: string;
 }