feat: Added Stars Spacing props to rc-star NEED REVIEW

README.md

@@ -90,6 +90,7 @@ ReactDOM.render(
 | character     | ReactNode \| (props) => ReactNode | ★             | The each character of rate                            |
 | disabled      | boolean                           | false         |                                                       |
 | direction     | string                            | `ltr`         | The direction of rate                                 |
+| starsSpacing  | string                            | 0             | defines the spacing between stars                     |
 
 ## Test Case
 

assets/index.less

@@ -45,6 +45,10 @@
       float: right;
     }
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     &-first,
     &-second {
       transition: all .3s;

docs/examples/characterRender.tsx

@@ -9,6 +9,7 @@ export default () => (
   <div style={{ margin: 100 }}>
     <Rate
       defaultValue={3}
+      starsSpacing="8px"
       characterRender={(node, props) => (
         <Tooltip placement="top" overlay={props.index}>
           {node}

src/Rate.tsx

@@ -13,6 +13,7 @@ export interface RateProps extends Pick<StarProps, "count" | "character" | "char
   defaultValue?: number;
   allowClear?: boolean;
   style?: React.CSSProperties;
+  starsSpacing?: React.CSSProperties;
   prefixCls?: string;
   onChange?: (value: number) => void;
   onHoverChange?: (value: number) => void;
@@ -39,6 +40,7 @@ class Rate extends React.Component<RateProps, RateState> {
     allowHalf: false,
     allowClear: true,
     style: {},
+    starsStyle: {},
     prefixCls: 'rc-rate',
     onChange: noop,
     character: '★',
@@ -249,6 +251,7 @@ class Rate extends React.Component<RateProps, RateState> {
       characterRender,
       tabIndex,
       direction,
+      starsSpacing,
     } = this.props;
     const { value, hoverValue, focused } = this.state;
     const stars = [];
@@ -266,6 +269,7 @@ class Rate extends React.Component<RateProps, RateState> {
           onClick={this.onClick}
           onHover={this.onHover}
           key={index}
+          spacing={starsSpacing}
           character={character}
           characterRender={characterRender}
           focused={focused}

src/Star.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 export interface StarProps {
   value?: number;
   index?: number;
+  spacing?: string;
   prefixCls?: string;
   allowHalf?: boolean;
   disabled?: boolean;
@@ -57,10 +58,10 @@ export default class Star extends React.Component<StarProps> {
 
   render() {
     const { onHover, onClick, onKeyDown } = this;
-    const { disabled, prefixCls, character, characterRender, index, count, value } = this.props;
+    const { disabled, prefixCls, character, characterRender, index, count, spacing, value } = this.props;
     const characterNode = typeof character === 'function' ? character(this.props) : character;
     let start: React.ReactNode = (
-      <li className={this.getClassName()}>
+      <li className={this.getClassName()} style={{marginRight: spacing}}>
         <div
           onClick={disabled ? null : onClick}
           onKeyDown={disabled ? null : onKeyDown}