@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

package/src/foundations/FoundationList/types.ts

@@ -1,7 +0,0 @@
-import { FlashListProps, FlashListRef } from '@shopify/flash-list';
-
-interface FoundationListProps extends FlashListProps<any> {}
-
-interface FoundationListRef extends FlashListRef<any> {}
-
-export type { FoundationListRef, FoundationListProps };

package/src/foundations/Icon/index.tsx

@@ -1,57 +0,0 @@
-import React, { useContext } from 'react';
-import IconSources from '../Assets/icon.json';
-import IconBankSources from '../Assets/icon_bank.json';
-import { IconProps } from './types';
-import { ApplicationContext, MiniAppContext } from '../Context';
-import { Image } from '../Image';
-import { StyleSheet } from 'react-native';
-import { Colors } from '../Consts';
-
-const Icon: React.FC<IconProps> = ({
-  source = 'ic_back',
-  size = 24,
-  color,
-  style = {},
-  ...props
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  /**
-   * get icon source maps or remote http
-   */
-  const getIconSource = (): any => {
-    if (source && !source.includes('http')) {
-      let icon: { [key: string]: { uri: string } } = IconSources;
-      return icon[source] ?? icon.ic_warning;
-    }
-    return { uri: source };
-  };
-
-  const tintColorProps = color !== null && {
-    tintColor: color ?? theme.colors.text.default,
-  };
-
-  return (
-    <Image
-      {...props}
-      loading={false}
-      source={getIconSource()}
-      style={[
-        style,
-        { width: size, height: size },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-      resizeMode="contain"
-      {...tintColorProps}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
-export { Icon, IconSources, IconBankSources };

package/src/foundations/Icon/types.ts

@@ -1,32 +0,0 @@
-import { ImageStyle } from 'react-native-fast-image';
-import { StyleProp } from 'react-native';
-
-export type IconProps = {
-  /**
-   * Represents the identifier or the path for the icon image source.
-   * It is a required property.
-   */
-  source: string;
-
-  /**
-   * Optional. Represents the size of the icon.
-   * It can be used to set the width and height of the icon.
-   */
-  size?: number;
-
-  /**
-   *  Optional. Represents the color of the icon.
-   */
-  color?: string | null;
-
-  /**
-   *  Optional. Used to apply custom styling to the Icon component.
-   * Accepts an object of style properties.
-   */
-  style?: StyleProp<ImageStyle>;
-
-  /**
-   * Optional. Represents the accessibility label for the icon.
-   */
-  accessibilityLabel?: string;
-};

package/src/foundations/IconButton/index.tsx

@@ -1,144 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  TouchableOpacityProps,
-} from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-import { Colors } from '../Consts';
-import { Icon } from '../Icon';
-import styles from './styles';
-
-export interface IconButtonProps extends TouchableOpacityProps {
-  /**
-   * Represents the name or key of the icon to be displayed on the IconButton.
-   * It is a required property.
-   */
-  icon: string;
-
-  /**
-   * Optional. Defines the visual style of the IconButton.
-   */
-  type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';
-
-  /**
-   * Optional. Defines the size of the IconButton.
-   */
-  size?: 'large' | 'small';
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-}
-
-const IconButton: React.FC<IconButtonProps> = ({
-  type = 'primary',
-  icon,
-  size,
-  params,
-  ...rest
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  /**
-   * get size icon button
-   */
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.small;
-    }
-    return styles.large;
-  };
-
-  /**
-   * get style for icon button by type
-   */
-  const getTypeStyle = () => {
-    switch (type) {
-      case 'disabled':
-        return {
-          backgroundColor: theme.colors.background.disable,
-        };
-      case 'primary':
-        return { backgroundColor: theme.colors.primary };
-      case 'secondary':
-        return {
-          backgroundColor: theme.colors.background.surface,
-          borderWidth: 1,
-          borderColor: theme.colors.border.default,
-        };
-      case 'outline':
-        return {
-          backgroundColor: theme.colors.background.surface,
-          borderWidth: 1,
-          borderColor: theme.colors.primary,
-        };
-      case 'tonal':
-        return {
-          backgroundColor: theme.colors.background.tonal,
-        };
-      case 'danger':
-        return {
-          backgroundColor: theme.colors.error.primary,
-        };
-      default:
-        return { backgroundColor: theme.colors.primary };
-    }
-  };
-
-  /**
-   * get color for icon
-   */
-  const getIconColor = () => {
-    switch (type) {
-      case 'disabled':
-        return theme.colors.text.disable;
-      case 'primary':
-        return Colors.black_01;
-      case 'danger':
-        return Colors.black_01;
-      case 'tonal':
-        return theme.colors.primary;
-      case 'secondary':
-        return theme.colors.text.default;
-      case 'outline':
-        return theme.colors.primary;
-      default:
-        return Colors.black_01;
-    }
-  };
-
-  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
-  const iconSize = size === 'small' ? 16 : 24;
-
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'IconButton',
-        params,
-        state: type === 'disabled' ? 'disabled' : 'enabled',
-        action: 'click',
-      }}
-    >
-      <TouchableOpacity
-        {...rest}
-        disabled={type === 'disabled'}
-        activeOpacity={activeOpacity}
-        style={[buttonStyle, showBaseLineDebug && styles.debugBaseLine]}
-      >
-        <Icon size={iconSize} source={icon} color={getIconColor()} />
-      </TouchableOpacity>
-    </ComponentContext.Provider>
-  );
-};
-
-export { IconButton };

package/src/foundations/IconButton/styles.ts

@@ -1,20 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Radius, Colors } from '../Consts';
-
-export default StyleSheet.create({
-  large: {
-    width: 48,
-    height: 48,
-    borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  small: {
-    width: 40,
-    height: 40,
-    borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Image/index.tsx

@@ -1,115 +0,0 @@
-import React, { useContext, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
-import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-  SkeletonContext,
-} from '../Context';
-import { Skeleton } from '../Skeleton';
-import { Icon } from '../Icon';
-import { Styles } from '../Consts';
-import { ImageProps } from './types';
-
-type Status = 'success' | 'loading' | 'error';
-
-export const getImageName = (source: any): string => {
-  const parts = source?.uri?.split?.('/');
-  if (parts?.length > 0) {
-    return parts?.[parts.length - 1];
-  }
-  return '';
-};
-
-const Image: React.FC<ImageProps> = ({
-  style,
-  source,
-  loading = true,
-  children,
-  ...rest
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const component: any = useContext(ComponentContext);
-  const context = useContext<any>(MiniAppContext);
-  const skeleton = useContext(SkeletonContext);
-  const error = useRef(false);
-  const [status, setStatus] = useState<Status>('success');
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  let accessibilityLabel: any = `img|${getImageName(source)}`;
-  if (component?.componentId) {
-    accessibilityLabel = `${component?.componentId}|img|${getImageName(
-      source,
-    )}`;
-  }
-  /**
-   * render content loading | fail | rendered
-   */
-  const renderContent = () => {
-    if (status === 'loading' || status === 'error') {
-      let content = <Skeleton />;
-      if (status === 'error') {
-        content = (
-          <Icon source="media_fail" color={theme.colors.text.disable} />
-        );
-      }
-      return (
-        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
-          {content}
-        </View>
-      );
-    }
-
-    if (skeleton.loading) {
-      return (
-        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
-          <Skeleton />
-        </View>
-      );
-    }
-
-    return children;
-  };
-
-  return (
-    <FastImage
-      {...rest}
-      {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
-      source={source}
-      style={[
-        styles.container,
-        style,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-      onProgress={() => {
-        error.current = false;
-        if (status !== 'loading' && loading) {
-          setStatus('loading');
-        }
-      }}
-      onLoadStart={() => {
-        error.current = false;
-      }}
-      onLoad={() => {
-        error.current = false;
-      }}
-      onLoadEnd={() => {
-        let current: Status = 'success';
-        if (error.current) {
-          current = 'error';
-        }
-        setStatus(prevState => (prevState !== current ? current : prevState));
-      }}
-      onError={() => {
-        error.current = true;
-      }}
-    >
-      {renderContent()}
-    </FastImage>
-  );
-};
-
-export { Image };

package/src/foundations/Image/styles.ts

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors } from '../Consts';
-
-export default StyleSheet.create({
-  container: {},
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Image/types.ts

@@ -1,7 +0,0 @@
-import { FastImageProps } from 'react-native-fast-image';
-
-export interface ImageProps extends FastImageProps {
-  loading?: boolean;
-  accessibilityLabel?: any;
-  params?: any;
-}

package/src/foundations/Input/Input.tsx

@@ -1,280 +0,0 @@
-import React, {
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput,
-  TextInputFocusEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { useComponentId } from '../Application';
-import { Icon } from '../Icon';
-import { exportFontFamily, useScaleSize } from '../Text';
-import { Spacing } from '../Consts';
-import {
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
-import { InputProps } from './index';
-import styles from './styles';
-import SystemTextInput from './SystemTextInput';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-
-/**
- * Input default component
- */
-const Input = forwardRef(
-  (
-    {
-      value,
-      onChangeText,
-      floatingValue,
-      floatingIcon,
-      size = 'small',
-      placeholder,
-      onBlur,
-      onFocus,
-      errorMessage,
-      trailing,
-      trailingColor,
-      onPressTrailing,
-      disabled = false,
-      floatingIconColor,
-      required = false,
-      errorSpacing,
-      loading = false,
-      leadingIcon,
-      leadingIconColor,
-      fontWeight,
-      secureTextEntry,
-      keyboardType,
-      style,
-      params,
-      hintText,
-      editable = true,
-      onPressFloatingIcon,
-      onPressLeadingIcon,
-      showClearIcon = true,
-      defaultValue,
-      ...props
-    }: InputProps,
-    ref,
-  ) => {
-    const { theme } = useContext(ApplicationContext);
-    const context = useContext<any>(MiniAppContext);
-    const scaledFontSize = useScaleSize(14);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
-    const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
-    const inputRef = useRef<TextInput | null>(null);
-    const componentName = 'Input';
-
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-    const { componentId } = useComponentId(
-      `${componentName}/${placeholder}`,
-      props.accessibilityLabel,
-    );
-
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      inputRef.current?.setNativeProps({ text: '' });
-      _onChangeText('');
-    };
-
-    const _onChangeText = (text: string) => {
-      onChangeText?.(text);
-    };
-
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(true);
-      onFocus?.(e);
-    };
-
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(false);
-      onBlur?.(e);
-    };
-
-    const _setText = (text: string) => {
-      inputRef?.current?.setNativeProps({ text });
-      _onChangeText(text);
-    };
-
-    useImperativeHandle(ref, () => {
-      return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: _setText,
-      };
-    });
-
-    /**
-     * Render input view
-     */
-    const renderInputView = () => {
-      const disabledColor = theme.colors.text.disable;
-      const secure = secureTextEntry;
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor;
-
-      if (disabled) {
-        textColor = disabledColor;
-        placeholderColor = disabledColor;
-        iconTintColor = disabledColor;
-      }
-
-      return (
-        <View
-          style={[
-            styles.inputWrapper,
-            { backgroundColor: theme.colors.background.surface },
-            getSizeStyle(size, undefined, scaleHeight),
-            getBorderColor(theme, focused, errorMessage, disabled),
-          ]}
-        >
-          <FloatingView
-            floatingValue={floatingValue}
-            floatingIconColor={floatingIconColor}
-            disabled={disabled}
-            required={required}
-            floatingIcon={floatingIcon}
-            onPress={onPressFloatingIcon}
-            componentId={componentId}
-          />
-          <View style={styles.inputView}>
-            {!!leadingIcon && (
-              <View style={styles.leadingIconContainer}>
-                <TouchableOpacity
-                  onPress={onPressLeadingIcon}
-                  accessibilityLabel={`${componentId}|leading-icon-touch`}
-                >
-                  <Icon
-                    color={leadingIconColor}
-                    source={leadingIcon}
-                    size={size === 'small' ? 24 : 32}
-                    accessibilityLabel={`${componentId}|leading-icon`}
-                  />
-                </TouchableOpacity>
-              </View>
-            )}
-            <SystemTextInput
-              {...props}
-              accessibilityLabel={`${componentId}`}
-              editable={editable && !disabled}
-              secureTextEntry={secure}
-              textAlignVertical="center"
-              ref={inputRef}
-              accessibilityState={{
-                disabled,
-                ...props.accessibilityState,
-              }}
-              style={[
-                {
-                  flex: 1,
-                  paddingLeft: Spacing.M,
-                  fontSize: scaledFontSize,
-                  height: '100%',
-                },
-                {
-                  color: textColor,
-                  fontFamily: exportFontFamily(fontWeight ?? 'regular'),
-                },
-                secure && haveValue && { fontSize: size === 'small' ? 18 : 22 },
-              ]}
-              defaultValue={defaultValue}
-              allowFontScaling={false}
-              textBreakStrategy="highQuality"
-              value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-              keyboardType={keyboardType}
-            />
-          </View>
-          <View style={styles.iconView}>
-            {showClearIcon && focused && haveValue && (
-              <TouchableOpacity
-                accessibilityLabel={`${componentId}|clear-icon-touch`}
-                accessible={false}
-                style={styles.iconWrapper}
-                onPress={onClearText}
-              >
-                <Icon
-                  source="24_navigation_close_circle_full"
-                  size={16}
-                  color={theme.colors.text.hint}
-                  accessibilityLabel={`${componentId}|clear-icon`}
-                />
-              </TouchableOpacity>
-            )}
-            <RenderTrailing
-              color={iconTintColor}
-              icon={trailing}
-              onPressIcon={onPressTrailing}
-              loading={loading}
-              componentId={componentId}
-            />
-          </View>
-        </View>
-      );
-    };
-
-    let inputState = 'active';
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
-    return (
-      <ComponentContext.Provider
-        value={{
-          componentName,
-          componentId,
-          params,
-          state: inputState,
-        }}
-      >
-        <View
-          style={[
-            style,
-            styles.wrapper,
-            showBaseLineDebug && styles.debugBaseLine,
-          ]}
-        >
-          {renderInputView()}
-          <ErrorView
-            errorMessage={errorMessage}
-            errorSpacing={errorSpacing}
-            hintText={hintText}
-            componentId={componentId}
-          />
-        </View>
-      </ComponentContext.Provider>
-    );
-  },
-);
-
-export default Input;