➕ Shape of star

Author: Bunlong

README.md

@@ -65,6 +65,12 @@ export default App;
     <td>0</td>
     <td>The default value. Use when the component is not controlled.</td>
   </tr>
+  <tr>
+    <td>shape</td>
+    <td>'thin' | 'fat'</td>
+    <td>'thin'</td>
+    <td>The shape of the star.</td>
+  </tr>
   <tr>
     <td>fraction</td>
     <td>number</td>

examples/javascript/src/App.js

@@ -27,6 +27,7 @@ class App extends React.Component {
         <Star
           fraction={2}
           onChange={(rate) => console.log(rate)}
+          shape={'fat'}
           // emptyIcon={<SVGIcon href="#icon-star-empty" className="icon" />}
           // fullIcon={<SVGIcon1 href="#icon-star-full" className="icon" />}
         />

package.json

@@ -16,7 +16,8 @@
     "reactjs",
     "react-star",
     "star",
-    "rating"
+    "rating",
+    "react-rating"
   ],
   "homepage": "https://github.com/Bunlong/react-star",
   "main": "dist/react-star.js",

src/Star.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import StarIcon from './StarIcon';
 import { calculateTotalIcons } from './utils';
-import { ThinStar } from './stars';
+import { ThinStar, FatStar } from './stars';
 import {
   DEFAULT_MIN,
   DEFAULT_MAX,
@@ -12,6 +12,7 @@ import {
   NO_OPERATION,
   DEFAULT_OTHER,
 } from './models';
+import { emptyIconStyle, iconStyle } from './styles';
 
 interface Props {
   id?: number;
@@ -36,6 +37,7 @@ interface Props {
   onHover: (index?: number, event?: any) => void;
   onClick: (index?: number, event?: any) => void;
   onChange: (index?: number, event?: any) => void;
+  shape: 'thin' | 'fat';
 }
 
 interface State {
@@ -50,15 +52,6 @@ class Star extends React.PureComponent<Props, State> {
     step: DEFAULT_STEP,
     readOnly: DEFAULT_READONLY,
     fraction: DEFAULT_FRACTION,
-    icon: <ThinStar style={{ fill: '#ffb400', stroke: '#ffb400' }} />,
-    emptyIcon: (
-      <ThinStar
-        style={{ fill: '#000000', stroke: '#000000', opacity: '26%' }}
-      />
-    ),
-    placeholderIcon: (
-      <ThinStar style={{ fill: '#ffb400', stroke: '#ffb400' }} />
-    ),
     quiet: DEFAULT_QUIET,
     onHover: NO_OPERATION,
     onClick: NO_OPERATION,
@@ -129,12 +122,45 @@ class Star extends React.PureComponent<Props, State> {
       : translatedValue;
   }
 
+  renderEmptyIcon() {
+    const { shape, emptyIcon } = this.props;
+    if (!emptyIcon) {
+      return shape === 'fat' ? (
+        <FatStar style={emptyIconStyle} />
+      ) : (
+        <ThinStar style={emptyIconStyle} />
+      );
+    }
+    return emptyIcon;
+  }
+
+  renderIcon() {
+    const { shape, icon } = this.props;
+    if (!icon) {
+      return shape === 'fat' ? (
+        <FatStar style={iconStyle} />
+      ) : (
+        <ThinStar style={iconStyle} />
+      );
+    }
+    return icon;
+  }
+
+  renderPlaceholderIcon() {
+    const { shape, placeholderIcon } = this.props;
+    if (!placeholderIcon) {
+      return shape === 'fat' ? (
+        <FatStar style={iconStyle} />
+      ) : (
+        <ThinStar style={iconStyle} />
+      );
+    }
+    return placeholderIcon;
+  }
+
   render() {
     const {
       step,
-      emptyIcon,
-      icon,
-      placeholderIcon,
       readOnly,
       quiet,
       fraction,
@@ -165,9 +191,9 @@ class Star extends React.PureComponent<Props, State> {
         readOnly={readOnly || DEFAULT_READONLY}
         quiet={quiet || DEFAULT_QUIET}
         fraction={fraction || DEFAULT_FRACTION}
-        emptyIcon={emptyIcon || ''}
-        icon={icon || ''}
-        placeholderIcon={placeholderIcon || ''}
+        emptyIcon={this.renderEmptyIcon()}
+        icon={this.renderIcon()}
+        placeholderIcon={this.renderPlaceholderIcon}
         onClick={this.handleClick}
         onHover={this.handleHover}
       />

src/styles.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+
+export const color = {
+  black: '#000000',
+  selectiveYellow: '#ffb400',
+};
+
+export const emptyIconStyle = {
+  fill: color.black,
+  stroke: color.black,
+  opacity: '26%',
+} as CSSProperties;
+
+export const iconStyle = {
+  fill: color.selectiveYellow,
+  stroke: color.selectiveYellow,
+} as CSSProperties;