fix: Fixed Swipe styles

myxvisual · Jun 28, 2017 · 21a880d · 21a880d
1 parent 8b1e1e0
commit 21a880d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/docs/src/routes/Components/IndexOfComponentsByFunction/index.tsx b/docs/src/routes/Components/IndexOfComponentsByFunction/index.tsx
@@ -98,7 +98,7 @@ The UI framework for Windows provides an extensive library of controls that supp
         <Menu />
         <ListView />
         <Image />
-        <FlipView />
+        {/*<FlipView />*/}
         <NavigationView />
         <SplitView />
       </div>

diff --git a/src/Swipe/index.tsx b/src/Swipe/index.tsx
@@ -52,14 +52,15 @@ export default class Swipe extends React.Component<SwipeProps, SwipeState> {
 
   isSingleChildren = React.Children.count(this.props.children) === 1;
 
-  state: SwipeState = {
+  state: SwipeState = (({ direction, initialFocusIndex, stopSwipe, children }: SwipeProps) => ({
+    isHorizontal: direction === "horizontal",
     isSingleChildren: this.isSingleChildren,
-    focusIndex: this.isSingleChildren ? this.props.initialFocusIndex : this.props.initialFocusIndex + 1,
-    currStopSwipe: this.props.stopSwipe,
-    childrenLength: 0,
+    focusIndex: this.isSingleChildren ? initialFocusIndex : initialFocusIndex + 1,
+    currStopSwipe: stopSwipe,
+    childrenLength: React.Children.count(children),
     haveAnimate: false,
     swiping: false
-  };
+  }))(this.props);
 
   private timeoutId: any;
 
@@ -137,7 +138,7 @@ export default class Swipe extends React.Component<SwipeProps, SwipeState> {
 
   swipeForward = () => {
     const { focusIndex, swiping, isSingleChildren } = this.state;
-    if (swiping || !this.props.autoSwipe) return;
+    if (swiping) return;
     if (!isSingleChildren) this.props.onChangeSwipe(focusIndex);
     this.state.swiping = true;
     const isLast = focusIndex === this.getItemsLength() - 2;
@@ -398,25 +399,25 @@ function getStyles(swipe: Swipe): {
 
   return {
     root: prepareStyles({
+      position: "relative",
       display: "flex",
       flexDirection: isHorizontal ? "row" : "column",
       alignItems: "center",
       justifyContent: "center",
-      position: "relative",
       width: "100%",
-      height: "auto",
+      height: "100%",
       overflow: "hidden",
       flex: "0 0 auto",
       ...style
     }),
     content: prepareStyles({
+      position: "relative",
       flex: "0 0 auto",
       display: "flex",
       flexDirection: isHorizontal ? "row" : "column",
       flexWrap: "nowrap",
       alignItems: "center",
       justifyContent: "center",
-      position: "relative",
       height: isHorizontal ? "100%" : `${childrenLength * 100}%`,
       width: isHorizontal ? `${childrenLength * 100}%` : "100%",
       transform: `translate${isHorizontal ? "X" : "Y"}(${-focusIndex * 100 / childrenLength}%)`,