wrapping up rate component for pr

Author: mxdi9i7

package.json

@@ -88,6 +88,7 @@
     ]
   },
   "dependencies": {
-    "node-sass": "^4.14.1"
+    "node-sass": "^4.14.1",
+    "shortid": "^2.2.15"
   }
 }

src/components/Rate/index.scss

@@ -7,6 +7,12 @@
 $baseClass: 'vant-rate';
 
 .#{$baseClass} {
-	display: flex;
-	cursor: pointer;
+  display: flex;
+  cursor: pointer;
+
+  .#{$baseClass}__icon {
+    &:last-of-type {
+      margin-right: 0 !important;
+    }
+  }
 }

src/components/Rate/index.stories.tsx

@@ -24,3 +24,68 @@ export const CustomColor = () => (
     <Rate currentRate={4} icon='like' voidIcon='like-o' color='#1989fa' />
   </div>
 );
+
+export const CustomCount = () => (
+  <div className='container column grey'>
+    <Rate
+      count={10}
+      currentRate={4}
+      icon='like'
+      voidIcon='like-o'
+      color='#1989fa'
+    />
+  </div>
+);
+
+export const Disabled = () => (
+  <div className='container column grey'>
+    <Rate
+      disabled
+      currentRate={4}
+      icon='like'
+      voidIcon='like-o'
+      color='#1989fa'
+    />
+  </div>
+);
+
+export const ReadOnly = () => (
+  <div className='container column grey'>
+    <Rate
+      readonly
+      currentRate={4}
+      icon='like'
+      voidIcon='like-o'
+      color='#1989fa'
+    />
+  </div>
+);
+
+export const CustomGutter = () => (
+  <div className='container column grey'>
+    <Rate
+      gutter='8px'
+      currentRate={4}
+      icon='like'
+      voidIcon='like-o'
+      color='#1989fa'
+    />
+  </div>
+);
+
+export const ListenOnChange = () => {
+  const [currentRate, setRate] = useState(4);
+
+  return (
+    <div className='container column grey'>
+      <h1>{currentRate}</h1>
+      <Rate
+        change={(rate) => setRate(rate)}
+        currentRate={currentRate}
+        icon='like'
+        voidIcon='like-o'
+        color='#1989fa'
+      />
+    </div>
+  );
+};

src/components/Rate/index.tsx

@@ -1,16 +1,39 @@
 import React, { useState, useEffect } from 'react';
+import shortid from 'shortid';
 
 import classnames from '../../utils/classNames';
 
 import './index.scss';
 import Icon from '../Icons';
 import { IProps } from './types';
+import RateIcon from './subcomponents/rate-icon';
 
 const baseClass = 'vant-rate';
 
-const renderIcons = (icons, iconCount, iconName, iconColor, iconSize) => {
-  for (let i = 0; i < iconCount; i++) {
-    icons.push(<Icon color={iconColor} size={iconSize} name={iconName} />);
+const renderIcon = (
+  color,
+  size,
+  icon,
+  numberOfIcons,
+  handleClick,
+  isActive,
+  activeCount,
+  gutter
+) => {
+  const icons = new Array(numberOfIcons);
+  for (let i = 0; i < numberOfIcons; i++) {
+    icons.push(
+      <RateIcon
+        index={i}
+        gutter={gutter}
+        handleClick={(index) =>
+          handleClick(isActive ? index : index + activeCount)
+        }
+        key={shortid.generate()}
+        icon={<Icon color={color} size={size} name={icon} />}
+        className={`${baseClass}__icon`}
+      />
+    );
   }
   return icons;
 };
@@ -28,32 +51,9 @@ const Rate = ({
   allowHalf,
   disabled,
   readonly,
-  touchable
+  change
 }: IProps) => {
-  const [rateIcons, setRateIcons] = useState([]);
-
-  useEffect(() => {
-    let currentIcons = [...rateIcons];
-    if (disabled) {
-      currentIcons = renderIcons(
-        currentIcons,
-        count,
-        icon,
-        disabledColor,
-        size
-      );
-    } else {
-      currentIcons = renderIcons(currentIcons, currentRate, icon, color, size);
-      currentIcons = renderIcons(
-        currentIcons,
-        count - currentRate,
-        voidIcon,
-        voidColor,
-        size
-      );
-    }
-    setRateIcons(currentIcons);
-  }, []);
+  const [activeCount, setActiveCount] = useState(currentRate || count);
 
   const rateProps = {
     className: classnames(baseClass, [
@@ -65,13 +65,39 @@ const Rate = ({
     ])
   };
 
+  // TODO: Add half star feature
+  // TODO: Add touchable feature
+
+  const handleClick = (index) => {
+    if (!disabled && !readonly) {
+      const nextRate = index + 1;
+      setActiveCount(nextRate);
+      if (!!change) change(nextRate);
+    }
+  };
+
   return (
     <div {...rateProps}>
-      {rateIcons.map((v, i) => (
-        <div key={i} className={`${baseClass}__icon`}>
-          {v}
-        </div>
-      ))}
+      {renderIcon(
+        disabled ? disabledColor : color,
+        size,
+        icon,
+        activeCount,
+        handleClick,
+        true,
+        activeCount,
+        gutter
+      )}
+      {renderIcon(
+        disabled ? disabledColor : voidColor,
+        size,
+        voidIcon,
+        count - activeCount,
+        handleClick,
+        false,
+        activeCount,
+        gutter
+      )}
     </div>
   );
 };

src/components/Rate/subcomponents/rate-icon.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+
+interface Props {
+  icon: ReactElement;
+  className: string;
+  handleClick: Function;
+  index: number;
+  gutter: string;
+}
+
+const RateIcon = ({ handleClick, index, gutter, icon, className }: Props) => {
+  return (
+    <span
+      style={{ marginRight: gutter }}
+      onClick={() => handleClick(index)}
+      className={className}
+    >
+      {icon}
+    </span>
+  );
+};
+
+export default RateIcon;

src/components/Rate/types.ts

@@ -12,4 +12,5 @@ export interface IProps {
   voidColor?: string;
   disabledColor?: string;
   touchable?: boolean;
+  change?: Function;
 }