@momo-kits/foundation 1.0.7 → 1.0.8

package/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import IconSources from './icon.json';
+import IconSources from '../Assets/icon.json';
 import {IconProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';

package/Navigation/Components.tsx

@@ -48,6 +48,10 @@ const HeaderLeft = (props: any) => {
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
   const {theme} = useContext(ApplicationContext);
+  let headerImage = image ?? theme.assets?.headerBackground;
+  if (image === null) {
+    headerImage = undefined;
+  }
   return (
     <View
       style={[
@@ -57,7 +61,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
       <StatusBar
         barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {image && <Image style={styles.headerBackground} source={{uri: image}} />}
+      {headerImage && (
+        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+      )}
     </View>
   );
 };

package/Navigation/types.ts

@@ -104,7 +104,7 @@ export type NavigationOptions = {
 };
 
 export type HeaderBackgroundProps = {
-  image?: string;
+  image?: string | null;
 };
 
 export type TitleCustomProps = {

package/Navigation/utils.tsx

@@ -34,9 +34,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
-    headerBackground: () => (
-      <HeaderBackground image={theme.assets?.headerBackground} />
-    ),
+    headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     ...getTintColor(theme),
   };
@@ -47,9 +45,7 @@ const getDialogOptions = (theme: Theme): StackNavigationOptions => {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: () => (
-      <HeaderBackground image={theme.assets?.headerBackground} />
-    ),
+    headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
   };
@@ -97,7 +93,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
 
   if (params.surface == true) {
     surfaceTheme = {
-      headerBackground: () => <HeaderBackground />,
+      headerBackground: () => <HeaderBackground image={null} />,
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
@@ -105,9 +101,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   } else {
     surfaceTheme = {
-      headerBackground: () => (
-        <HeaderBackground image={theme.assets?.headerBackground} />
-      ),
+      headerBackground: HeaderBackground,
       ...getTintColor(theme),
     };
   }

package/index.ts

@@ -1,11 +1,9 @@
 import {
+  SafeAreaProvider,
   SafeAreaView,
   useSafeAreaInsets,
-  SafeAreaProvider,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import Playground from './Playground';
-export {Playground};
 
 export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 

package/package.json

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

package/Playground/index.tsx

@@ -1,249 +0,0 @@
-import React, {FC, useContext, useEffect, useState} from 'react';
-import {FlatList, TouchableOpacity, View} from 'react-native';
-import {CheckBox, Input, Radio, Text} from '@momo-kits/foundation';
-import {PlaygroundProps, PropValue} from './types';
-import styles from './styles';
-import {Colors, Radius, Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
-import {ScreenSection, SectionItem} from '../Layout';
-import {Icon, IconSources} from '../Icon';
-import {string} from 'prop-types';
-
-const ChooseOptionScreen = (
-  data: string[] = [],
-  optionType: 'color' | 'icon' | 'text' = 'text',
-  onPress: (value: string) => void,
-) => {
-  const {theme} = useContext(ApplicationContext);
-
-  let mapData = data;
-  if (optionType === 'color') {
-    mapData = Object.values(Colors);
-  }
-  if (optionType === 'icon') {
-    mapData = Object.keys(IconSources);
-  }
-  const renderItemView = (item: string) => {
-    switch (optionType) {
-      case 'color': {
-        return (
-          <View
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: Radius.M,
-              backgroundColor: item,
-              marginRight: Spacing.S,
-            }}
-          />
-        );
-      }
-      case 'icon': {
-        return <Icon source={item} style={{marginRight: Spacing.S}} />;
-      }
-    }
-  };
-
-  const renderItem = ({item, index}) => {
-    const iconSource: {[key: string]: {uri: string}} = IconSources;
-    let key = item;
-    let chosenItem = item;
-    if (optionType === 'color') key = Object.keys(Colors)[index];
-    if (optionType === 'icon') chosenItem = iconSource[key].uri;
-    return (
-      <TouchableOpacity
-        key={`${item.toString()} ${index}`}
-        onPress={() => onPress(chosenItem)}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginBottom: Spacing.M,
-          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
-          borderColor: theme.colors.border.default,
-          paddingBottom: Spacing.M,
-        }}>
-        {renderItemView(item)}
-        <Text typography={'description_default'}>{key}</Text>
-      </TouchableOpacity>
-    );
-  };
-  return (
-    <ScreenSection>
-      <SectionItem widthSpan={12}>
-        <FlatList
-          data={mapData}
-          renderItem={renderItem}
-          keyExtractor={(item, index) => `${item.toString()} ${index}`}
-          showsVerticalScrollIndicator={false}
-        />
-      </SectionItem>
-    </ScreenSection>
-  );
-};
-
-const Playground: FC<PlaygroundProps> = ({params}) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {props} = params;
-  const [compProps, setCompProps] = useState<{[key: string]: any}>({});
-  useEffect(() => {
-    initProps();
-    return () => {};
-  }, [props]);
-
-  const initProps = () => {
-    let newProps = {};
-    Object.keys(props).forEach(i => {
-      newProps = {...newProps, [i]: props[i].value};
-    });
-    setCompProps(newProps);
-  };
-
-  const onChangeOptions = (
-    value: string | boolean | undefined,
-    key: string,
-  ) => {
-    const newProps = {...compProps, [key]: value};
-    setCompProps(newProps);
-  };
-
-  const onCheckUndefined = (value: boolean, key: string) => {
-    let newValue = !value ? undefined : props?.[key]?.value;
-    const newProps = {...compProps, [key]: newValue};
-    setCompProps(newProps);
-  };
-
-  const showOptions = (prop: any, key: string) => {
-    navigator?.showBottomSheet({
-      options: {
-        title: 'Choose option',
-      },
-      screen: () =>
-        ChooseOptionScreen(prop.data, prop.optionType, optionValue => {
-          onChangeOptions(optionValue, key);
-          navigator?.pop();
-        }),
-    });
-  };
-
-  const generateView = (key: string, prop: PropValue) => {
-    let PlayGroundView = <View />;
-    switch (prop.type) {
-      case 'enum': {
-        PlayGroundView = (
-          <View style={styles.radioView}>
-            {prop?.options?.map(option => {
-              return (
-                <Radio
-                  label={option}
-                  value={option}
-                  onChange={() => onChangeOptions(option, key)}
-                  groupValue={compProps?.[key]}
-                  style={{marginBottom: Spacing.S}}
-                />
-              );
-            })}
-          </View>
-        );
-        break;
-      }
-      case 'string': {
-        PlayGroundView = (
-          <Input
-            size={'small'}
-            floatingValue={key}
-            value={compProps?.[key]}
-            onChangeText={text => onChangeOptions(text, key)}
-          />
-        );
-        break;
-      }
-      case 'bool': {
-        let label = compProps?.[key] === true ? 'True' : 'False';
-        if (compProps?.[key] === undefined) {
-          label = 'undefined';
-        }
-        PlayGroundView = (
-          <CheckBox
-            label={label}
-            value={compProps?.[key]}
-            onChange={value => onChangeOptions(value, key)}
-          />
-        );
-        break;
-      }
-      case 'options': {
-        PlayGroundView = (
-          <TouchableOpacity
-            style={{
-              width: '100%',
-              height: 48,
-              borderRadius: Radius.M,
-              borderColor: theme.colors.border.default,
-              borderWidth: 1,
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexDirection: 'row',
-              backgroundColor: theme.colors.background.surface,
-            }}
-            onPress={() => showOptions(prop, key)}>
-            <Text typography={'description_default'}>{compProps?.[key]}</Text>
-            <View style={{position: 'absolute', right: Spacing.M}}>
-              <Icon source={'arrow_chevron_down_small'} size={24} />
-            </View>
-          </TouchableOpacity>
-        );
-      }
-    }
-
-    return (
-      <View
-        style={[
-          styles.propView,
-          {backgroundColor: theme.colors.background.surface},
-        ]}>
-        <Text style={styles.propTitle} typography={'header_default'}>
-          {key}
-        </Text>
-        {PlayGroundView}
-        {typeof compProps?.[key] !== 'boolean' && (
-          <CheckBox
-            style={{marginTop: Spacing.M}}
-            label={'Is undefined'}
-            value={!compProps?.[key]}
-            onChange={value => onCheckUndefined(!value, key)}
-          />
-        )}
-      </View>
-    );
-  };
-
-  const Component = params.component ?? <View />;
-  const propsKeys = Object.keys(props);
-
-  return (
-    <View>
-      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
-        Component
-      </Text>
-      <View
-        style={[
-          styles.propView,
-          {
-            backgroundColor: theme.colors.background.surface,
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}>
-        <Component {...compProps} />
-      </View>
-      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
-        Props
-      </Text>
-      {propsKeys.map(prop => {
-        return generateView(prop, props[prop]);
-      })}
-    </View>
-  );
-};
-
-export default Playground;

package/Playground/styles.ts

@@ -1,16 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
-
-export default StyleSheet.create({
-  radioView: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-  },
-  propView: {
-    borderRadius: Radius.M,
-    padding: Spacing.M,
-    marginBottom: Spacing.M,
-  },
-  propTitle: {marginBottom: Spacing.S, textTransform: 'capitalize'},
-});

package/Playground/types.ts

@@ -1,16 +0,0 @@
-import {ReactElement} from 'react';
-
-export type PropValue = {
-  value: any;
-  options?: string[];
-  type: 'string' | 'options' | 'enum' | 'bool';
-  description?: string;
-  data?: {[key: string]: string}[];
-  optionType?: 'icon' | 'color';
-};
-export type PlaygroundProps = {
-  params: {
-    component: ReactElement;
-    props: {[key: string]: PropValue};
-  };
-};