enhance carousel, add dotStyle & dotActiveStyle, remove rn pagination (…

…#1425)
ant-design · Jun 8, 2017 · a245c9a · a245c9a
1 parent 3ad012a
commit a245c9a
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 52 deletions.
diff --git a/components/carousel/PropsType.tsx b/components/carousel/PropsType.tsx
@@ -10,6 +10,8 @@ interface Props {
   beforeChange?: (from: number, to: number) => void;
   afterChange?: (current: number) => void;
   style?: any;
+  dotStyle?: any;
+  dotActiveStyle?: any;
   /** below web only */
   className?: string;
   prefixCls?: string;

diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -37,6 +37,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
           }
         }
         directionalLockEnabled={true}
+        dotActiveStyle={Object {}}
+        dotStyle={Object {}}
         dots={true}
         horizontal={true}
         infinite={true}
@@ -71,6 +73,19 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
               "right": 10,
               "top": 0,
             },
+            "pointActiveStyle": Object {
+              "backgroundColor": "#888",
+            },
+            "pointStyle": Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            "spaceStyle": Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
           }
         }
         vertical={false}
@@ -301,32 +316,21 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
+              "position": "absolute",
+            },
+            Object {
+              "bottom": 10,
+              "left": 0,
+              "right": 0,
             },
-            Array [
-              Object {
-                "alignItems": "center",
-                "position": "absolute",
-              },
-              Object {
-                "bottom": 10,
-                "left": 0,
-                "right": 0,
-              },
-            ],
           ]
         }
       >
         <View
           style={
-            Array [
-              Object {
-                "flexDirection": "row",
-              },
-              Object {
-                "flexDirection": "row",
-              },
-            ]
+            Object {
+              "flexDirection": "row",
+            }
           }
         >
           <View
@@ -342,6 +346,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
+                false,
                 false,
               ]
             }
@@ -359,6 +365,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
+                false,
                 false,
               ]
             }
@@ -376,9 +384,11 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
                 Object {
                   "backgroundColor": "#888",
                 },
+                Object {},
               ]
             }
           />
@@ -395,6 +405,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
+                false,
                 false,
               ]
             }
@@ -412,6 +424,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
+                false,
                 false,
               ]
             }

diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
@@ -17,6 +17,8 @@ Properties | Descrition | Type | Default
 | autoplayInterval |  interval for autoplay iteration |    Number  |  3000         |
 | infinite | whether is infinite loop | Boolean   | false |
 | afterChange  | callback to be called after a slide is changed     | (current: number): void  |
+| dotStyle  | style of dots    | Object  |
+| dotActiveStyle  | style of active dot     | Object  |
 | easing (`web only`) | animation timing function | String   | linear |
 | beforeChange  (`web only`)     | callback to be called before a slide is changed     | (from: number, to: number): void |
 | onScrollBeginDrag (`rn only`) | as same as react-native scrollView `onScrollBeginDrag` | (): void |  |

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -1,5 +1,6 @@
+/* tslint:disable:jsx-no-multiline-js */
+
 import React from 'react';
-import Pagination from '../pagination';
 import {
   View,
   Text,
@@ -10,17 +11,28 @@ import CarouselStyle from './style';
 import CarouselProps from './PropsType';
 
 const defaultPagination = (props) => {
-  const { styles, current, vertical, count } = props;
+  const { styles, current, vertical, count, dotStyle, dotActiveStyle } = props;
   const positionStyle = vertical ? 'paginationY' : 'paginationX';
   const flexDirection = vertical ? 'column' : 'row';
+  const arr: any = [];
+  for (let i = 0; i < count; i++) {
+    arr.push(
+      <View
+        key={`dot-${i}`}
+        style={[
+          styles.pointStyle,
+          styles.spaceStyle,
+          dotStyle,
+          i === current && styles.pointActiveStyle,
+          i === current && dotActiveStyle,
+        ]}
+      />,
+    );
+  }
   return (
-    <Pagination
-      style={[styles.pagination, styles[positionStyle]]}
-      indicatorStyle={{ flexDirection }}
-      current={current}
-      mode="pointer"
-      total={count}
-    />
+    <View style={[styles.pagination, styles[positionStyle]]}>
+      <View style={{ flexDirection }}>{arr}</View>
+    </View>
   );
 };
 
@@ -36,6 +48,8 @@ class Carousel extends React.Component<CarouselProps, any> {
     vertical: false,
     styles: CarouselStyle,
     pagination: defaultPagination,
+    dotStyle: {},
+    dotActiveStyle: {},
   };
 
   private autoplayTimer;
@@ -239,13 +253,15 @@ class Carousel extends React.Component<CarouselProps, any> {
   }
 
   renderDots = (index) => {
-    const { children, vertical, styles, pagination } = this.props;
+    const { children, vertical, styles, pagination, dotStyle, dotActiveStyle } = this.props;
     const count = children ? children.length || 1 : 0;
     return pagination ? pagination({
       styles,
       vertical,
       current: index,
       count,
+      dotStyle,
+      dotActiveStyle,
     }) : null;
   }
 

diff --git a/components/carousel/index.web.tsx b/components/carousel/index.web.tsx
@@ -15,6 +15,8 @@ export default class Carousel extends React.Component<CarouselProps, any> {
     edgeEasing: 'linear',
     cellAlign: 'center',
     selectedIndex: 0,
+    dotStyle: {},
+    dotActiveStyle: {},
   };
 
   constructor(props) {
@@ -35,7 +37,7 @@ export default class Carousel extends React.Component<CarouselProps, any> {
   }
 
   render() {
-    const { className, prefixCls } = this.props;
+    const { className, prefixCls, dotStyle, dotActiveStyle } = this.props;
     let props = assign({}, this.props);
     props = assign(props, {
       wrapAround: props.infinite,
@@ -59,9 +61,10 @@ export default class Carousel extends React.Component<CarouselProps, any> {
                 [`${prefixCls}-wrap-dot`]: true,
                 [`${prefixCls}-wrap-dot-active`]: index === current,
               });
+              const _dotStyle = index === current ? dotActiveStyle : dotStyle;
               return (
                 <div className={dotCls} key={index}>
-                  <span />
+                  <span style={_dotStyle} />
                 </div>
               );
             });

diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
@@ -19,6 +19,8 @@ subtitle: 走马灯
 | autoplay | 是否自动切换 | Boolean   | false |
 | infinite | 是否循环播放 | Boolean   | false |
 | afterChange  | 切换面板后的回调函数     | (current: number): void  | 无
+| dotStyle  | 指示点样式    | Object  | 无
+| dotActiveStyle  | 当前激活的指示点样式     | Object  | 无
 | easing (`web only`) | 动画效果 | String   | linear |
 | beforeChange  (`web only`)     | 切换面板前的回调函数     | (from: number, to: number): void | 无
 | onScrollBeginDrag (`rn only`) | 见 react-native scrollView onScrollBeginDrag | (): void | 无 |

diff --git a/components/carousel/style/index.tsx b/components/carousel/style/index.tsx
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import variables from '../../style/themes/default';
 
 export default StyleSheet.create({
   pagination: {
@@ -15,4 +16,17 @@ export default StyleSheet.create({
     top: 0,
     bottom: 0,
   },
+  pointStyle: {
+    width: 8,
+    height: 8,
+    borderRadius: 8,
+    backgroundColor: variables.color_icon_base,
+  },
+  pointActiveStyle: {
+    backgroundColor: '#888',
+  },
+  spaceStyle: {
+    marginHorizontal: variables.h_spacing_sm / 2,
+    marginVertical: variables.v_spacing_sm / 2,
+  },
 });
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -1107,6 +1107,8 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
           }
         }
         directionalLockEnabled={true}
+        dotActiveStyle={Object {}}
+        dotStyle={Object {}}
         dots={true}
         horizontal={true}
         infinite={false}
@@ -1136,6 +1138,19 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
               "right": 10,
               "top": 0,
             },
+            "pointActiveStyle": Object {
+              "backgroundColor": "#888",
+            },
+            "pointStyle": Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            "spaceStyle": Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
           }
         }
         vertical={false}
@@ -2241,32 +2256,21 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
+              "position": "absolute",
+            },
+            Object {
+              "bottom": 10,
+              "left": 0,
+              "right": 0,
             },
-            Array [
-              Object {
-                "alignItems": "center",
-                "position": "absolute",
-              },
-              Object {
-                "bottom": 10,
-                "left": 0,
-                "right": 0,
-              },
-            ],
           ]
         }
       >
         <View
           style={
-            Array [
-              Object {
-                "flexDirection": "row",
-              },
-              Object {
-                "flexDirection": "row",
-              },
-            ]
+            Object {
+              "flexDirection": "row",
+            }
           }
         >
           <View
@@ -2282,9 +2286,11 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
                 Object {
                   "backgroundColor": "#888",
                 },
+                Object {},
               ]
             }
           />
@@ -2301,6 +2307,8 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
                   "marginHorizontal": 2.5,
                   "marginVertical": 3,
                 },
+                Object {},
+                false,
                 false,
               ]
             }