feat(Swiper):增加loading api

ChenlingasMx · ChenlingasMx · commit dfea5a56107d · 2021-12-24T16:30:23.000+08:00
diff --git a/example/examples/src/routes/TreeSelect/index.tsx b/example/examples/src/routes/TreeSelect/index.tsx
@@ -13,92 +13,49 @@ export default class TreeSelectDemo extends React.Component<TreeSelectViewProps>
     const title = route.params.title;
     const option = [
       {
-        label: '北京',
+        label: '2月23日(今天)',
         value: '01',
         children: [
           {
-            label: '东城区',
+            label: '9:00-10:00',
             value: '01-1',
+            children: [{label: '00:00', value: '01-1-1'}],
           },
           {
-            label: '西城区',
+            label: '10:00-11:00',
             value: '01-2',
           },
           {
-            label: '崇文区',
+            label: '11:00-12:00',
             value: '01-3',
           },
-          {
-            label: '宣武区',
-            value: '01-4',
-          },
         ],
       },
       {
-        label: '浙江',
+        label: '2月24日(明天)',
         value: '02',
         children: [
           {
-            label: '杭州',
+            label: '9:00-10:00',
             value: '02-1',
-            children: [
-              {
-                label: '西湖区',
-                value: '02-1-1',
-              },
-              {
-                label: '上城区',
-                value: '02-1-2',
-              },
-              {
-                label: '江干区',
-                value: '02-1-3',
-              },
-              {
-                label: '下城区',
-                value: '02-1-4',
-              },
-            ],
           },
           {
-            label: '宁波',
+            label: '10:00-11:00',
             value: '02-2',
-            children: [
-              {
-                label: 'xx区',
-                value: '02-2-1',
-              },
-              {
-                label: 'yy区',
-                value: '02-2-2',
-              },
-            ],
           },
           {
-            label: '温州',
+            label: '11:00-12:00',
             value: '02-3',
           },
-          {
-            label: '嘉兴',
-            value: '02-4',
-          },
-          {
-            label: '湖州',
-            value: '02-5',
-          },
-          {
-            label: '绍兴',
-            value: '02-6',
-          },
         ],
       },
     ];
     return (
       <React.Fragment>
         <DragDrawer drawerHeight={500}>
           <TreeSelect
-            defaultValue={['01', '01-1']}
-            activeColor="#fd8a00"
+            defaultValue={['01', '01-1', '01-1-1']}
+            activeColor="red"
             options={option}
             onChange={(value: any, nodes: any) => {
               console.log(value, nodes);
diff --git a/packages/core/src/Swiper/README.md b/packages/core/src/Swiper/README.md
@@ -37,4 +37,5 @@ export default SwiperDemo
 | time         | 执行时间       | Number    | 3000（3s） |
 | borderRadius | 圆角边框       | Number    |  0 |
 | autoplay     | 是否开启定时器  | Boolean   | true|
-| dotStyle     | 圆点类型 ( dot : 圆点， block : 方块 )       | String    | dot |
+| dotStyle     | 圆点类型 ( dot : 圆点， block : 方块 )       | String    | dot |
+| loading      | 加载状态  | Boolean   | false |
diff --git a/packages/core/src/Swiper/index.tsx b/packages/core/src/Swiper/index.tsx
@@ -9,6 +9,7 @@ import {
   NativeSyntheticEvent,
   NativeScrollEvent,
 } from 'react-native';
+import Loader from '../Loader';
 import { colors } from '../utils';
 export interface dataSourceType {
   url: string;
@@ -30,17 +31,19 @@ export interface SwiperProps {
   autoplay?: boolean;
   // 指示点样式 dot: 圆点  block: 方块
   dotStyle?: dotType;
+  loading?: boolean;
 }
 const Swiper = (porps: SwiperProps) => {
   const gitwidth = Dimensions.get('window').width;
   const {
     dataSource = [],
     width = gitwidth,
     height = 130,
-    time = 3000,
+    time = 6000,
     autoplay = true,
     borderRadius = 0,
     dotStyle = 'dot',
+    loading = false,
   } = porps;
   let [curIndex, setCurIndex] = useState(0);
   let timer = useRef<NodeJS.Timeout | undefined>();
@@ -63,7 +66,7 @@ const Swiper = (porps: SwiperProps) => {
 
   // 开启播放
   useEffect(() => {
-    if (autoplay) autoPlay();
+    if (autoplay && !loading) autoPlay();
   }, [autoPlay]);
 
   // 页面离开停止播放
@@ -97,53 +100,55 @@ const Swiper = (porps: SwiperProps) => {
     scrollToRef.current.scrollTo({ x: width * index, y: 0, animated: true });
   };
   return (
-    <View style={StyleSheet.flatten([styles.banner, { width, height }])}>
-      <ScrollView
-        ref={scrollToRef}
-        horizontal={true}
-        showsHorizontalScrollIndicator={false}
-        pagingEnabled={true}
-        onScrollBeginDrag={onScrollBeginDrag}
-        onScrollEndDrag={onScrollEndDrag}
-        onMomentumScrollEnd={onMomentumScrollEnd}
-      >
-        {dataSource.map((item: dataSourceType, index: number) => {
-          return (
-            <View key={index} style={{ width, height }}>
-              <View style={{ padding: 12 }}>
-                <TouchableOpacity
-                  activeOpacity={1}
-                  onPress={() => {
-                    item.onClick && item.onClick();
-                  }}
-                >
-                  <Image
-                    key={index}
-                    style={StyleSheet.flatten([{ borderRadius, width: '100%', height: '100%' }])}
-                    resizeMode="cover"
-                    source={typeof item.url === 'number' ? item.url : { uri: item.url }}
-                  />
-                </TouchableOpacity>
+    <Loader loading={loading} rounded={5} maskColor="transparent">
+      <View style={StyleSheet.flatten([styles.banner, { width, height }])}>
+        <ScrollView
+          ref={scrollToRef}
+          horizontal={true}
+          showsHorizontalScrollIndicator={false}
+          pagingEnabled={true}
+          onScrollBeginDrag={onScrollBeginDrag}
+          onScrollEndDrag={onScrollEndDrag}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+        >
+          {dataSource.map((item: dataSourceType, index: number) => {
+            return (
+              <View key={index} style={{ width, height }}>
+                <View style={{ padding: 12 }}>
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={() => {
+                      item.onClick && item.onClick();
+                    }}
+                  >
+                    <Image
+                      key={index}
+                      style={StyleSheet.flatten([{ borderRadius, width: '100%', height: '100%' }])}
+                      resizeMode="cover"
+                      source={typeof item.url === 'number' ? item.url : { uri: item.url }}
+                    />
+                  </TouchableOpacity>
+                </View>
               </View>
-            </View>
-          );
-        })}
-      </ScrollView>
-      <View style={styles.dotBox}>
-        {dataSource.map((_: dataSourceType, index: number) => {
-          return (
-            <TouchableOpacity
-              onPress={onClickDot.bind(this, index)}
-              key={index}
-              style={StyleSheet.flatten([
-                dotStyle === 'block' ? styles.block : styles.dot,
-                index === curIndex ? styles.dotSetColor : styles.dotColor,
-              ])}
-            />
-          );
-        })}
+            );
+          })}
+        </ScrollView>
+        <View style={styles.dotBox}>
+          {dataSource.map((_: dataSourceType, index: number) => {
+            return (
+              <TouchableOpacity
+                onPress={onClickDot.bind(this, index)}
+                key={index}
+                style={StyleSheet.flatten([
+                  dotStyle === 'block' ? styles.block : styles.dot,
+                  index === curIndex ? styles.dotSetColor : styles.dotColor,
+                ])}
+              />
+            );
+          })}
+        </View>
       </View>
-    </View>
+    </Loader>
   );
 };
 const styles = StyleSheet.create({
diff --git a/packages/core/src/TreeSelect/tree-select.tsx b/packages/core/src/TreeSelect/tree-select.tsx
@@ -71,7 +71,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
   };
 
   // item样式
-  const activeStyles = (index: number, isActive: boolean) => {
+  const activeStyles = (index: number, isActive: boolean, isLast: boolean) => {
     let styles;
     // 选中第一排
     if (isActive && index === 0) {
@@ -90,12 +90,14 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
       styles = {
         ...style.active_nth_item,
         borderColor: props.activeColor,
+        marginRight: isLast ? 10 : 0,
       };
     }
     // 未选中后排
     if (!isActive && index !== 0) {
       styles = {
         ...style.not_active_nth_item,
+        marginRight: isLast ? 10 : 0,
       };
     }
     return styles;
@@ -105,6 +107,8 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
     return columnOptions.map((item) => {
       const isActive = item[valueName] === value[index];
       const active_font_color = index === 0 ? '#333' : props.activeColor;
+      // 是否是最后一列
+      const isLast = deep - 1 === index;
       return (
         <TouchableOpacity
           key={item[valueName]}
@@ -113,7 +117,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
               onItemSelect(item);
             }
           }}
-          style={[style.item, { ...activeStyles(index, isActive) }]}
+          style={[style.item, { ...activeStyles(index, isActive, isLast) }]}
         >
           <Text style={isActive ? { color: active_font_color, fontWeight: 'bold' } : { color: '#666' }}>
             {item[labelName]}
