🪲 Star margin

Author: Bunlong

src/Icon.tsx

@@ -26,25 +26,26 @@ class Icon extends React.PureComponent<Props> {
       emptyIcon,
       icon,
       direction,
-    }  = this.props
+    } = this.props;
     const showbgIcon = percent < 100;
     const bgIconContainerStyle = showbgIcon
       ? {}
-      : {
-          visibility: 'hidden'
-        } as CSSProperties;
+      : ({
+          visibility: 'hidden',
+        } as CSSProperties);
     const iconContainerStyle = {
       display: 'inline-block',
       position: 'absolute',
       overflow: 'hidden',
       top: 0,
       [direction === 'rtl' ? 'right' : 'left']: 0,
-      width: `${percent}%`
+      width: `${percent}%`,
     } as CSSProperties;
     const style = {
       cursor: !readOnly ? 'pointer' : 'inherit',
       display: 'inline-block',
       position: 'relative',
+      marginLeft: 5,
     } as CSSProperties;
 
     function handleMouseClick(event: any) {
@@ -66,22 +67,18 @@ class Icon extends React.PureComponent<Props> {
       }
     }
 
-    return(
+    return (
       <span
-        style={style}
+        style={index === 0 ? Object.assign({}, style, { marginLeft: 0 }) : style}
         onClick={handleMouseClick}
         onMouseMove={handleMouseMove}
         onTouchMove={handleMouseMove}
         onTouchEnd={handleTouchEnd}
       >
-        <span style={bgIconContainerStyle}>
-          {renderIcon(emptyIcon)}
-        </span>
-        <span style={iconContainerStyle}>
-          {renderIcon(icon)}
-        </span>
+        <span style={bgIconContainerStyle}>{renderIcon(emptyIcon)}</span>
+        <span style={iconContainerStyle}>{renderIcon(icon)}</span>
       </span>
-    )
+    );
   }
 }
 

src/Star.tsx

@@ -38,19 +38,27 @@ interface Props {
   onChange: (index?: number, event?: any) => void;
 }
 
-interface State { value: number; }
+interface State {
+  value: number;
+}
 
 class Star extends React.PureComponent<Props, State> {
   static defaultProps: Partial<Props> = {
     min: DEFAULT_MIN,
     max: DEFAULT_MAX,
     step: DEFAULT_STEP,
     readOnly: DEFAULT_READONLY,
-    quiet: DEFAULT_QUIET,
     fraction: DEFAULT_FRACTION,
-    emptyIcon: <ThinStar style={{ fill: '#000000', stroke: '#000000', opacity: '26%' }} />,
+    emptyIcon: (
+      <ThinStar
+        style={{ fill: '#000000', stroke: '#000000', opacity: '26%' }}
+      />
+    ),
     icon: <ThinStar style={{ fill: '#ffb400', stroke: '#ffb400' }} />,
-    placeholderIcon: <ThinStar style={{ fill: '#ffb400', stroke: '#ffb400' }} />,
+    placeholderIcon: (
+      <ThinStar style={{ fill: '#ffb400', stroke: '#ffb400' }} />
+    ),
+    quiet: DEFAULT_QUIET,
     direction: 'ltr',
     onHover: NO_OPERATION,
     onClick: NO_OPERATION,
@@ -133,7 +141,11 @@ class Star extends React.PureComponent<Props, State> {
         className={className}
         tabIndex={tabIndex || 0}
         // aria-label={this.props['aria-label']}
-        totalIcons={calculateTotalIcons(min || DEFAULT_MIN, max || DEFAULT_MAX, step || DEFAULT_STEP)}
+        totalIcons={calculateTotalIcons(
+          min || DEFAULT_MIN,
+          max || DEFAULT_MAX,
+          step || DEFAULT_STEP,
+        )}
         value={this.tranlateValueToDisplayValue(this.state.value)}
         placeholderValue={this.tranlateValueToDisplayValue(
           this.props.placeholderRating || 0,