@momo-kits/foundation 1.0.0 → 1.0.3

package/Layout/Screen.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import {ScrollView, View} from 'react-native';
-import styles from './styles';
-import {MMScreenProps} from './types';
-import {MMSection} from './index';
-import {
-  DEFAULT_GUTTER,
-  DEFAULT_SCREEN_PADDING,
-  screenWidth,
-  validateChildren,
-} from './utils';
-
-const MMScreen = (props: MMScreenProps) => {
-  const {children, scrollable} = props;
-
-  const parentWidth = screenWidth - DEFAULT_SCREEN_PADDING * 2;
-
-  const colWidth = (parentWidth - DEFAULT_GUTTER * 11) / 12;
-  const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents="none"
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          flexDirection: 'row',
-          marginHorizontal: 12,
-        }}>
-        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i, ii) => {
-          return (
-            <View
-              pointerEvents="none"
-              style={{
-                width: colWidth,
-                height: '100%',
-                opacity: 0.2,
-                backgroundColor: '#bae7ff',
-                marginRight: ii !== 12 ? DEFAULT_GUTTER : 0,
-              }}
-            />
-          );
-        })}
-      </View>
-    );
-  };
-
-  if (scrollable) {
-    return (
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        style={[styles.screen, {width: screenWidth}]}>
-        {validateChildren(children, MMSection)}
-        {renderOverlay()}
-      </ScrollView>
-    );
-  }
-  return (
-    <View style={[styles.screen, {width: screenWidth}]}>
-      {validateChildren(children, MMSection)}
-      {renderOverlay()}
-    </View>
-  );
-};
-
-export default MMScreen;

package/Layout/Section.tsx

@@ -1,30 +0,0 @@
-import React, {createContext} from 'react';
-import {View} from 'react-native';
-import styles from './styles';
-import {MMSectionProps} from './types';
-import {MMRow} from './index';
-import {DEFAULT_SCREEN_PADDING, screenWidth, validateChildren} from './utils';
-
-export const MMSectionContext = createContext({});
-
-const MMSection: React.FC<MMSectionProps> = props => {
-  const {haveMargin = false, children} = props;
-  return (
-    <MMSectionContext.Provider value={haveMargin}>
-      <View
-        style={[
-          styles.section,
-          {
-            width: haveMargin
-              ? screenWidth - DEFAULT_SCREEN_PADDING * 2
-              : screenWidth,
-            marginHorizontal: haveMargin ? DEFAULT_SCREEN_PADDING : 0,
-          },
-        ]}>
-        {validateChildren(children, MMRow)}
-      </View>
-    </MMSectionContext.Provider>
-  );
-};
-
-export default MMSection;

package/Layout/View.tsx

@@ -1,84 +0,0 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import {MMViewProps} from './types';
-import styles from './styles';
-import {MMSectionContext} from './Section';
-import {screenWidth} from './utils';
-import {Colors, Shadow} from '@momo-kits/core';
-
-const MMView: React.FC<MMViewProps> = props => {
-  const {
-    span = 12,
-    children,
-    isEndLine,
-    alignItems,
-    justifyContent,
-    padding,
-    backgroundColor,
-    borderRadius,
-    direction,
-    shadow = 'none',
-    isRowChild = false,
-  } = props;
-  const NUM_OF_SPAN = 12;
-  const DEFAULT_SCREEN_PADDING = 12;
-  const GUTTER = 12;
-  const haveMargin = useContext(MMSectionContext);
-  const shadowStyle =
-    shadow !== 'none' ? (shadow === 'light' ? Shadow.Light : Shadow.Dark) : {};
-
-  const parentWidth = haveMargin
-    ? screenWidth - DEFAULT_SCREEN_PADDING * 4
-    : screenWidth - DEFAULT_SCREEN_PADDING * 2;
-
-  const paddingStyle = {
-    paddingTop: padding?.[0] || 0,
-    paddingRight: padding?.[1] || 0,
-    paddingBottom: padding?.[2] || 0,
-    paddingLeft: padding?.[3] || 0,
-  };
-  const colWidth =
-    (span * (parentWidth - GUTTER * (NUM_OF_SPAN - 1))) / NUM_OF_SPAN +
-    GUTTER * (span - 1);
-
-  const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: Colors.pink_08,
-          borderWidth: 1,
-        }}
-      />
-    );
-  };
-
-  return (
-    <View
-      style={[
-        styles.col,
-        {
-          width: colWidth,
-          marginRight: isEndLine ? 0 : GUTTER,
-          marginBottom: isRowChild ? GUTTER : 0,
-          alignItems,
-          backgroundColor,
-          borderRadius,
-          justifyContent,
-          flexDirection: direction,
-        },
-        paddingStyle,
-        shadowStyle,
-      ]}>
-      {children}
-      {renderOverlay()}
-    </View>
-  );
-};
-
-export default MMView;

package/Layout/styles.ts

@@ -1,24 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors} from '@momo-kits/core';
-
-const styles = StyleSheet.create({
-  col: {
-    minHeight: 1,
-  },
-  row: {
-    minHeight: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  section: {
-    paddingHorizontal: 12,
-    marginBottom: 12,
-  },
-  screen: {
-    flex: 1,
-    backgroundColor: Colors.black_01,
-    paddingVertical: 12,
-  },
-});
-
-export default styles;

package/Navigation/ScreenContainer.tsx

@@ -1,38 +0,0 @@
-import {KeyboardAvoidingView, Platform} from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
-import React, {useLayoutEffect} from 'react';
-import {SafeAreaView, ScreenContainerProps, Styles} from '../index';
-
-const ScreenContainer: React.FC<ScreenContainerProps> = ({
-  style,
-  children,
-  navigation,
-  options,
-  edges = ['bottom', 'left', 'right'],
-  enableKeyboardAvoidingView = false,
-}) => {
-  const headerHeight = useHeaderHeight();
-
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [navigation, options]);
-
-  return (
-    <SafeAreaView style={[Styles.flex, style]} edges={edges}>
-      <KeyboardAvoidingView
-        style={Styles.flex}
-        keyboardVerticalOffset={headerHeight}
-        enabled={enableKeyboardAvoidingView}
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}>
-        {children}
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-};
-
-export default ScreenContainer;

package/SizedBox/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from './styles';
-
-const Index = props => {
-  const {width, height, children} = props;
-  return <View style={[styles.default, {width, height}]}>{children}</View>;
-};
-
-Index.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  children: PropTypes.element,
-};
-
-Index.defaultProps = {
-  width: 0,
-  height: 0,
-  children: null,
-};
-
-export default Index;

package/SizedBox/styles.js

@@ -1,7 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  default: {
-    overflow: 'hidden',
-  },
-});

package/TextInput/index.js

@@ -1,225 +0,0 @@
-import React, {
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
-import PropTypes from 'prop-types';
-import {
-  ApplicationContext,
-  getFontFamily,
-  Index,
-  SizedBox,
-  Text,
-} from '@components';
-import styles from './styles';
-import {Opacity} from '@configs';
-
-const Index = forwardRef((props, ref) => {
-  const {theme, font} = useContext(ApplicationContext);
-  const {
-    style,
-    size,
-    label,
-    info,
-    onPressInfo,
-    onChangeText,
-    error,
-    trailing,
-    numberOfLines,
-  } = props;
-
-  const inputRef = useRef();
-  const [focus, setFocus] = useState(false);
-
-  useImperativeHandle(ref, () => inputRef.current);
-
-  /**
-   * get border color
-   */
-  const getBorderColor = () => {
-    if (error) {
-      return theme.colors.error;
-    }
-    if (focus) {
-      return theme.colors.primary;
-    }
-    return theme.colors.border;
-  };
-
-  /**
-   * get size style
-   */
-  const getSizeStyle = () => {
-    if (numberOfLines > 1) {
-      return [styles.small, {height: numberOfLines * 24}];
-    }
-    switch (size) {
-      case 'large':
-        return styles.large;
-      case 'small':
-        return styles.small;
-
-      default:
-        return styles.large;
-    }
-  };
-
-  /**
-   * get text style
-   */
-  const getTextStyle = () => {
-    let textStyle;
-    switch (size) {
-      case 'large':
-        textStyle = styles.textLarge;
-        break;
-      case 'small':
-        textStyle = styles.textSmall;
-        break;
-      default:
-        textStyle = styles.textLarge;
-        break;
-    }
-
-    return {
-      ...textStyle,
-      fontFamily: getFontFamily({
-        fontFamily: font,
-        fontWeight: textStyle.fontWeight,
-      }),
-    };
-  };
-
-  /**
-   * on clear text
-   */
-  const onClear = () => {
-    inputRef?.current?.clear?.();
-    onChangeText?.('');
-  };
-
-  /**
-   * on blur
-   */
-  const onBlur = () => {
-    setFocus(false);
-    props.onBlur?.();
-  };
-
-  /**
-   * on forcus
-   */
-  const onFocus = () => {
-    setFocus(true);
-    props.onFocus?.();
-  };
-
-  /**
-   * render info icon button
-   */
-  const renderInfo = () => {
-    if (info) {
-      return (
-        <TouchableOpacity style={styles.rowInfo} onPress={onPressInfo}>
-          <Index
-            name="information-outline"
-            color={theme.colors.secondary}
-            size={16}
-          />
-        </TouchableOpacity>
-      );
-    }
-  };
-
-  /**
-   * render clear action
-   */
-  const renderClear = () => {
-    if (focus) {
-      return (
-        <TouchableOpacity onPress={onClear}>
-          <Index name="close-circle" />
-        </TouchableOpacity>
-      );
-    }
-  };
-
-  /**
-   * render trailing
-   */
-  const renderTrailing = () => {
-    if (trailing) {
-      return <View style={styles.trailingContent}>{trailing}</View>;
-    }
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <View style={[getSizeStyle(), {borderColor: getBorderColor()}]}>
-        <View style={styles.rowContent}>
-          <TextInput
-            {...props}
-            ref={inputRef}
-            multiline={numberOfLines > 1}
-            textAlignVertical={numberOfLines > 1 ? 'top' : 'center'}
-            style={[
-              styles.inputContent,
-              {color: theme.colors.text},
-              numberOfLines > 1 && styles.multilineContent,
-              getTextStyle(),
-            ]}
-            placeholderTextColor={theme.colors.textSecondary + Opacity['40']}
-            onFocus={onFocus}
-            onBlur={onBlur}
-          />
-          {renderClear()}
-          {renderTrailing()}
-          <View
-            style={[styles.infoContent, {backgroundColor: theme.colors.card}]}>
-            <Text typography="subtitle" type="secondary">
-              {label}
-            </Text>
-            {renderInfo()}
-          </View>
-        </View>
-      </View>
-      {error && (
-        <>
-          <SizedBox height={4} />
-          <Text typography="subtitle" color="error">
-            {error}
-          </Text>
-        </>
-      )}
-    </View>
-  );
-});
-
-Index.propTypes = {
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  size: PropTypes.oneOf(['large', 'small']),
-  label: PropTypes.string,
-  error: PropTypes.string,
-  info: PropTypes.bool,
-  autoCorrect: PropTypes.bool,
-  spellCheck: PropTypes.bool,
-  onPressInfo: PropTypes.func,
-  trailing: PropTypes.element,
-};
-
-Index.defaultProps = {
-  style: {},
-  size: 'large',
-  label: 'Label',
-  error: null,
-  info: false,
-  autoCorrect: false,
-  spellCheck: false,
-  onPressInfo: () => {},
-  trailing: null,
-};
-
-export default Index;

package/TextInput/styles.js

@@ -1,55 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  large: {
-    height: 60,
-    width: '100%',
-    borderWidth: 1,
-    borderRadius: 8,
-  },
-  small: {
-    height: 50,
-    width: '100%',
-    borderWidth: 1,
-    borderRadius: 8,
-  },
-  inputContent: {flex: 1, height: '100%'},
-  textLarge: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  textSmall: {fontSize: 16},
-  rowInfo: {
-    paddingLeft: 4,
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  rowContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-  },
-  infoContent: {
-    position: 'absolute',
-    flexDirection: 'row',
-    alignItems: 'center',
-    left: 8,
-    top: -8,
-    height: 16,
-    paddingHorizontal: 8,
-    overflow: 'hidden',
-  },
-  trailingContent: {
-    marginLeft: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  multilineContent: {
-    paddingTop: 12,
-  },
-});