Merge pull request mxdi9i7#32 from mxdi9i7/peterz/rate

Rate Component

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

@@ -0,0 +1,18 @@
+@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;
+
+  .#{$baseClass}__icon {
+    &:last-of-type {
+      margin-right: 0 !important;
+    }
+  }
+}

src/components/Rate/index.stories.tsx

@@ -0,0 +1,91 @@
+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} />
+  </div>
+);
+
+export const CustomIcon = () => (
+  <div className='container column grey'>
+    <Rate currentRate={4} icon='like' voidIcon='like-o' />
+  </div>
+);
+
+export const CustomColor = () => (
+  <div className='container column grey'>
+    <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

@@ -0,0 +1,105 @@
+import React, { useState } 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 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;
+};
+
+const Rate = ({
+  currentRate = 5,
+  count = 5,
+  size = '20px',
+  icon = 'star',
+  voidIcon = 'star-o',
+  gutter = '4px',
+  color = '#ffd21e',
+  voidColor = '#c8c9cc',
+  disabledColor = '#c8c9cc',
+  allowHalf,
+  disabled,
+  readonly,
+  change
+}: IProps) => {
+  const [activeCount, setActiveCount] = useState(currentRate || count);
+
+  const rateProps = {
+    className: classnames(baseClass, [
+      {
+        allowHalf,
+        disabled,
+        readonly
+      }
+    ])
+  };
+
+  // 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}>
+      {renderIcon(
+        disabled ? disabledColor : color,
+        size,
+        icon,
+        activeCount,
+        handleClick,
+        true,
+        activeCount,
+        gutter
+      )}
+      {renderIcon(
+        disabled ? disabledColor : voidColor,
+        size,
+        voidIcon,
+        count - activeCount,
+        handleClick,
+        false,
+        activeCount,
+        gutter
+      )}
+    </div>
+  );
+};
+
+export default Rate;

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

@@ -0,0 +1,16 @@
+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;
+  change?: Function;
+}