Skip to content

Commit

Permalink
fix(component): Fixed RatingControl bugs.
Browse files Browse the repository at this point in the history 
Fixed RatingControl caculation method is not correct

Close #2
  • Loading branch information
@myxvisual
myxvisual committed Jun 20, 2017
1 parent 3df1f62 commit cf36477
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 18 deletions.
19 changes: 15 additions & 4 deletions src/RatingControl/index.doc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": ""
Expand Down Expand Up @@ -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"
},
Expand All @@ -140,6 +146,11 @@
}
],
"members": [
{
"name": "rootElm",
"documentation": "",
"type": "HTMLDivElement"
},
{
"name": "state",
"initializerText": " {\n currRating: this.props.defaultRating\n }",
Expand All @@ -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"
},
Expand All @@ -193,4 +204,4 @@
],
"documentation": "",
"type": "typeof \"D:/react-uwp/src/RatingControl/index\""
}
}
35 changes: 21 additions & 14 deletions src/RatingControl/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> {}
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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)
}}
Expand Down Expand Up @@ -138,7 +147,7 @@ export class RatingControl extends React.Component<RatingControlProps, RatingCon
onChangeRating,
label,
isReadOnly,
padding,
iconPadding,
...attributes
} = this.props;
const { theme } = this.context;
Expand All @@ -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",
Expand Down Expand Up @@ -191,9 +200,7 @@ function getStyles(RatingControl: RatingControl): {
...style
}),
ratingsGroup: prepareStyles({
display: "flex",
flexDirection: "row",
alignItems: "center",
display: "inline-block",
transition: "all .25s"
})
};
Expand Down

0 comments on commit cf36477

Please sign in to comment.