@momo-kits/foundation 0.80.8-beta.13 → 0.80.8-beta.14

package/Application/Components.tsx

@@ -23,6 +23,7 @@ import {
 import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
+import Carousel from '@momo-kits/carousel';
 
 const Touchable =
   Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;

package/Image/index.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
@@ -14,6 +14,8 @@ export interface ImageProps extends FastImagePropsWithoutStyle {
   accessibilityLabel?: string;
 }
 
+type Status = 'success' | 'loading' | 'error';
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -21,19 +23,20 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [loading, setLoading] = useState(rest.loading);
-  const [fail, setFail] = useState(false);
+  const error = useRef(false);
+  const [status, setStatus] = useState<Status>(
+    rest.loading ? 'loading' : 'success',
+  );
 
   /**
    * render content loading | fail | rendered
-   * @returns {JSX.Element}
    */
   const renderContent = () => {
-    if (loading || fail) {
+    if (status == 'loading' || status == 'error') {
       let content = (
         <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
       );
-      if (fail) {
+      if (status == 'error') {
         content = (
           <View style={Styles.flexCenter}>
             <Icon source="media_fail" color={theme.colors.text.disable} />
@@ -63,12 +66,19 @@ const Image: React.FC<ImageProps> = ({
         {...rest}
         source={source}
         style={styles.image}
-        onLoad={() => {
-          setFail(false);
-          setLoading(rest.loading);
+        onLoadStart={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          if (error.current) {
+            setStatus('error');
+          } else {
+            setStatus('success');
+          }
+        }}
+        onError={() => {
+          error.current = true;
         }}
-        onLoadEnd={() => setLoading(false)}
-        onError={() => setFail(true)}
       />
       {renderContent()}
     </View>

package/package.json

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