basic usage

Author: mxdi9i7

src/components/Rate/index.scss

@@ -0,0 +1,12 @@
+@import '../../styles/colors.scss';
+@import '../../styles/spacing.scss';
+@import '../../styles/typography.scss';
+@import '../../styles/opacity.scss';
+@import '../../styles/variables.scss';
+
+$baseClass: 'vant-rate';
+
+.#{$baseClass} {
+	display: flex;
+	cursor: pointer;
+}

src/components/Rate/index.stories.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import Rate from '../Rate';
+import '../../styles/stories.scss';
+
+export default {
+  title: 'Rate',
+  component: Rate
+};
+
+export const BasicUsage = () => (
+  <div className='container column grey'>
+    <Rate currentRate={4} disabled />
+  </div>
+);

src/components/Rate/index.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+
+import classnames from '../../utils/classNames';
+
+import './index.scss';
+import Icon from '../Icons';
+import { IProps } from './types';
+
+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} />);
+  }
+  return icons;
+};
+
+const Rate = ({
+  currentRate = 5,
+  count = 5,
+  size = '20px',
+  icon = 'star',
+  voidIcon = 'star-o',
+  gutter = '4px',
+  color = '#ffd21e',
+  voidColor = '#c8c9cc',
+  disabledColor = '#c8c9cc',
+  allowHalf,
+  disabled,
+  readonly,
+  touchable
+}: 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 rateProps = {
+    className: classnames(baseClass, [
+      {
+        allowHalf,
+        disabled,
+        readonly
+      }
+    ])
+  };
+
+  return (
+    <div {...rateProps}>
+      {rateIcons.map((v, i) => (
+        <div key={i} className={`${baseClass}__icon`}>
+          {v}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Rate;

src/components/Rate/types.ts

@@ -0,0 +1,15 @@
+export interface IProps {
+  currentRate?: number;
+  count?: number;
+  size?: string;
+  icon?: string;
+  gutter?: string;
+  voidIcon?: string;
+  allowHalf?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  color?: string;
+  voidColor?: string;
+  disabledColor?: string;
+  touchable?: boolean;
+}