From cf36477cc0150ba4d2270c79860dd416f88c9f58 Mon Sep 17 00:00:00 2001
From: myxvisual <myxvisual@live.com>
Date: Wed, 21 Jun 2017 01:01:42 +0800
Subject: [PATCH] fix(component): Fixed RatingControl bugs.

Fixed RatingControl caculation method is not correct

Close #2
---
 src/RatingControl/index.doc.json | 19 +++++++++++++----
 src/RatingControl/index.tsx      | 35 +++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/RatingControl/index.doc.json b/src/RatingControl/index.doc.json
index d8d451fb..7d9fe1c4 100644
--- a/src/RatingControl/index.doc.json
+++ b/src/RatingControl/index.doc.json
@@ -83,6 +83,12 @@
           "documentation": "Control Rating is can't be modified.",
           "isRequired": false,
           "type": "boolean"
+        },
+        {
+          "name": "iconPadding",
+          "documentation": "Set each ratings padding size.(px)",
+          "isRequired": false,
+          "type": "number"
         }
       ],
       "documentation": ""
@@ -128,7 +134,7 @@
         },
         {
           "name": "defaultProps",
-          "initializerText": " {\n    defaultRating: 2.5,\n    maxRating: 5,\n    icon: \"FavoriteStarFill\",\n    onChangeRating: emptyFunc\n  }",
+          "initializerText": " {\n    defaultRating: 2.5,\n    maxRating: 5,\n    icon: \"FavoriteStarFill\",\n    onChangeRating: emptyFunc,\n    iconPadding: 10\n  }",
           "documentation": "",
           "type": "RatingControlProps"
         },
@@ -140,6 +146,11 @@
         }
       ],
       "members": [
+        {
+          "name": "rootElm",
+          "documentation": "",
+          "type": "HTMLDivElement"
+        },
         {
           "name": "state",
           "initializerText": " {\n    currRating: this.props.defaultRating\n  }",
@@ -164,13 +175,13 @@
         },
         {
           "name": "handleRationClick",
-          "initializerText": " (e: React.MouseEvent<HTMLSpanElement>, index: number) => {\n    const boundingClientRect = e.currentTarget.getBoundingClientRect();\n    const left = e.clientX - boundingClientRect.left;\n    const currRating = index + left / boundingClientRect.width;\n    this.setState({ currRating });\n    this.props.onChangeRating(currRating);\n  }",
+          "initializerText": " (e: React.MouseEvent<HTMLSpanElement>, index: number) => {\n    const { iconPadding, maxRating } = this.props;\n    const lastIndex = maxRating - 1;\n    const clientRect = e.currentTarget.getBoundingClientRect();\n    const left = e.clientX - clientRect.left;\n    let offset = left / (index === lastIndex ? clientRect.width : clientRect.width - iconPadding);\n    if (offset > 1) offset = 1;\n    const currRating = index + offset;\n    this.setState({ currRating });\n    this.props.onChangeRating(currRating);\n  }",
           "documentation": "",
           "type": "(e: MouseEvent<HTMLSpanElement>, index: number) => void"
         },
         {
           "name": "renderRatings",
-          "initializerText": " (notRated = true) => {\n    const { maxRating, iconNode, icon, iconStyle, iconRatedStyle, isReadOnly } = this.props;\n    const { currRating } = this.state;\n    const { theme } = this.context;\n    const ratio = currRating / maxRating;\n\n    const normalRatings = (\n      <div\n        style={{\n          ...this.styles.ratingsGroup,\n          ...(notRated ? void 0 : {\n            clipPath: `polygon(0% 0%, ${ratio * 100}% 0%, ${ratio * 100}% 100%, 0% 100%)`,\n            color: theme.accent,\n            position: \"absolute\",\n            top: 0,\n            left: 0\n          })\n        }}\n      >\n        {Array(maxRating).fill(0).map((zero, index) => (\n          iconNode || (\n            <Icon\n            key={`${index}`}\n            style={{\n              fontSize: 24,\n              padding: 10,\n              ...iconStyle,\n              ...(notRated ? void 0 : iconRatedStyle)\n            }}\n            onClick={isReadOnly ? void 0 : e => {\n              this.handleRationClick(e, index);\n            }}\n          >\n            {icon}\n          </Icon>\n          )\n        ))}\n      </div>\n    );\n    return normalRatings;\n  }",
+          "initializerText": " (notRated = true) => {\n    const { maxRating, iconNode, icon, iconStyle, iconRatedStyle, isReadOnly, iconPadding } = this.props;\n    const { currRating } = this.state;\n    const { theme } = this.context;\n    const ratio = currRating / maxRating;\n    const fontSize = iconStyle ? (+Number(iconStyle.fontSize) || 24) : 24;\n    const width = fontSize * maxRating + iconPadding * (maxRating - 1);\n    const offset = Math.floor(currRating) * (fontSize + iconPadding) + (currRating % 1) * fontSize;\n    const lastIndex = maxRating - 1;\n\n    const normalRatings = (\n      <div\n        style={{\n          ...this.styles.ratingsGroup,\n          ...(notRated ? void 0 : {\n            clipPath: `polygon(0% 0%, ${offset}px 0%, ${offset}px 100%, 0% 100%)`,\n            color: theme.accent,\n            position: \"absolute\",\n            top: 0,\n            left: 0\n          } as React.CSSProperties)\n        }}\n      >\n        {Array(maxRating).fill(0).map((zero, index) => (\n          iconNode || (\n            <Icon\n            key={`${index}`}\n            style={{\n              fontSize: 24,\n              paddingRight: index === lastIndex ? 0 : iconPadding,\n              ...iconStyle,\n              ...(notRated ? void 0 : iconRatedStyle)\n            }}\n            onClick={isReadOnly ? void 0 : e => {\n              this.handleRationClick(e, index);\n            }}\n          >\n            {icon}\n          </Icon>\n          )\n        ))}\n      </div>\n    );\n    return normalRatings;\n  }",
           "documentation": "",
           "type": "(notRated?: boolean) => Element"
         },
@@ -193,4 +204,4 @@
   ],
   "documentation": "",
   "type": "typeof \"D:/react-uwp/src/RatingControl/index\""
-}
+}
\ No newline at end of file
diff --git a/src/RatingControl/index.tsx b/src/RatingControl/index.tsx
index f5726140..cbeb8cd2 100644
--- a/src/RatingControl/index.tsx
+++ b/src/RatingControl/index.tsx
@@ -41,9 +41,9 @@ export interface DataProps {
    */
   isReadOnly?: boolean;
   /**
-   * Set each ratings padding size.
+   * Set each ratings padding size.(px)
    */
-  padding?: number;
+  iconPadding?: number;
 }
 
 export interface RatingControlProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
@@ -59,8 +59,9 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
     maxRating: 5,
     icon: "FavoriteStarFill",
     onChangeRating: emptyFunc,
-    padding: 10
+    iconPadding: 10
   };
+  rootElm: HTMLDivElement;
 
   state: RatingControlState = {
     currRating: this.props.defaultRating
@@ -78,25 +79,33 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
   }
 
   handleRationClick = (e: React.MouseEvent<HTMLSpanElement>, index: number) => {
-    const boundingClientRect = e.currentTarget.getBoundingClientRect();
-    const left = e.clientX - boundingClientRect.left;
-    const currRating = index + left / boundingClientRect.width;
+    const { iconPadding, maxRating } = this.props;
+    const lastIndex = maxRating - 1;
+    const clientRect = e.currentTarget.getBoundingClientRect();
+    const left = e.clientX - clientRect.left;
+    let offset = left / (index === lastIndex ? clientRect.width : clientRect.width - iconPadding);
+    if (offset > 1) offset = 1;
+    const currRating = index + offset;
     this.setState({ currRating });
     this.props.onChangeRating(currRating);
   }
 
   renderRatings = (notRated = true) => {
-    const { maxRating, iconNode, icon, iconStyle, iconRatedStyle, isReadOnly, padding } = this.props;
+    const { maxRating, iconNode, icon, iconStyle, iconRatedStyle, isReadOnly, iconPadding } = this.props;
     const { currRating } = this.state;
     const { theme } = this.context;
     const ratio = currRating / maxRating;
+    const fontSize = iconStyle ? (+Number(iconStyle.fontSize) || 24) : 24;
+    const width = fontSize * maxRating + iconPadding * (maxRating - 1);
+    const offset = Math.floor(currRating) * (fontSize + iconPadding) + (currRating % 1) * fontSize;
+    const lastIndex = maxRating - 1;
 
     const normalRatings = (
       <div
         style={{
           ...this.styles.ratingsGroup,
           ...(notRated ? void 0 : {
-            clipPath: `polygon(0% 0%, ${ratio * 100}% 0%, ${ratio * 100}% 100%, 0% 100%)`,
+            clipPath: `polygon(0% 0%, ${offset}px 0%, ${offset}px 100%, 0% 100%)`,
             color: theme.accent,
             position: "absolute",
             top: 0,
@@ -110,7 +119,7 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
             key={`${index}`}
             style={{
               fontSize: 24,
-              padding: (index === 0 || index === maxRating) ? 0 : "0 10px",
+              paddingRight: index === lastIndex ? 0 : iconPadding,
               ...iconStyle,
               ...(notRated ? void 0 : iconRatedStyle)
             }}
@@ -138,7 +147,7 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
       onChangeRating,
       label,
       isReadOnly,
-      padding,
+      iconPadding,
       ...attributes
     } = this.props;
     const { theme } = this.context;
@@ -156,7 +165,7 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
     );
 
     return label ? (
-      <div style={{ display: "inline-block" }}>
+      <div style={{ display: "inline-block" }} ref={rootElm => this.rootElm = rootElm}>
         <div
           style={theme.prepareStyles({
             display: "flex",
@@ -191,9 +200,7 @@ function getStyles(RatingControl: RatingControl): {
       ...style
     }),
     ratingsGroup: prepareStyles({
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
+      display: "inline-block",
       transition: "all .25s"
     })
   };