onMouseFirstEnter(key, 1)}
+ >
Date: Sun, 29 Jan 2023 18:14:16 +0800
Subject: [PATCH 3/4] =?UTF-8?q?perf:=20=E5=AE=8C=E5=96=84rate=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=2090%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Rate/_style.scss | 51 +++++++++++
src/components/Rate/index.tsx | 129 ++++++++++++++++++++-------
src/components/Rate/rate.stories.tsx | 15 +++-
src/styles/_variables.scss | 4 +
todoList.md | 1 +
5 files changed, 167 insertions(+), 33 deletions(-)
diff --git a/src/components/Rate/_style.scss b/src/components/Rate/_style.scss
index eb78e77..7e1122e 100644
--- a/src/components/Rate/_style.scss
+++ b/src/components/Rate/_style.scss
@@ -1,12 +1,18 @@
.dui-rate {
display: flex;
+ svg {
+ color: $rate-color-default;
+ font-size: 25px;
+ }
+
.dui-rate-star:not(:last-child) {
margin-right: 8px;
}
.dui-rate-star {
position: relative;
+ transition: all 0.2s;
.dui-rate-star-first {
position: absolute;
@@ -16,6 +22,51 @@
height: 100%;
overflow: hidden;
opacity: 0;
+ color: $rate-color-default;
+ font-size: 25px;
+ }
+
+ .dui-rate-star-second {
+ color: $rate-color-default;
+ font-size: 25px;
+ }
+ }
+
+ .dui-rate-star:hover {
+ transform: scale(1.1);
+ }
+
+ .dui-rate-star-disabled:hover {
+ transform: none;
+ }
+
+ .dui-rate-star.ant-rate-star-half {
+ .dui-rate-star-first {
+ opacity: 1;
+ color: $rate-color;
+
+ svg {
+ color: $rate-color;
+ }
+ }
+ }
+
+ .dui-rate-star.ant-rate-star-full {
+ .dui-rate-star-first {
+ opacity: 0;
+ color: $rate-color-default;
+
+ svg {
+ color: $rate-color-default;
+ }
+ }
+
+ .dui-rate-star-second {
+ color: $rate-color;
+
+ svg {
+ color: $rate-color;
+ }
}
}
}
diff --git a/src/components/Rate/index.tsx b/src/components/Rate/index.tsx
index ddd5f66..78d69e7 100644
--- a/src/components/Rate/index.tsx
+++ b/src/components/Rate/index.tsx
@@ -1,16 +1,23 @@
-import React, { useState } from "react"; // , { ReactNode }
+import React, { useEffect, useState } from "react";
+import type { ReactNode } from "react";
import classnames from "classnames";
import Icon from "../IconFont";
export type OrientationType = "left" | "right" | "center";
export interface RateProps {
- /** 评分样式类 */
+ /** 自定义样式类名 */
className?: string;
- /** 评分样式对象 */
+ /** 自定义样式对象 */
style?: React.CSSProperties;
- /** 是否允许半选 */
- allowHalf?: boolean;
+ /** 当前数，受控值 */
+ value?: number;
+ /** 默认值 */
+ defaultValue?: number;
+ /** 只读，无法进行交互 */
+ disabled?: boolean;
+ /** 自定义字符 */
+ character?: ReactNode | ((index: number) => ReactNode);
}
/**
@@ -24,63 +31,123 @@ export interface RateProps {
* ~~~
*/
const Rate: React.FC = (props) => {
- const { className, allowHalf } = props;
- console.log("allowHalf: ", allowHalf);
+ const { className, value, defaultValue, character, disabled } = props;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [ids, setIds] = useState([0, 1, 2, 3, 4]);
+ const [rateValue, setRateValue] = useState<[number, number]>([-1, -1]);
+ // const [rateDefaultValue,setRateDefaultValue] = useState<[number,number]>([-1,-1]);
const [pos, setPos] = useState({
curIndexLi: -1,
curIndexStar: -1,
+ isFocus: false,
});
- // const [classNames,setClassNames] = useState>({
- // 'dui-rate-star': true, // 基础类
- // 'dui-rate-star-zero': false, // 0 星
- // 'dui-rate-star-half': false, // 半星
- // 'dui-rate-star-full': false, // 满星
- // 'dui-rate-star-active': false, // 当前激活星
- // })
+ const cls = ["ant-rate-star-half", "ant-rate-star-full"];
+ if (
+ (value && typeof value !== "number") ||
+ (defaultValue && typeof defaultValue !== "number")
+ ) {
+ throw new Error("value or defaultValue must be a number!");
+ }
+
+ const initRate = () => {
+ if (value || defaultValue) {
+ const transValue = String(value || defaultValue).split(".");
+ const curIndexLi = Number(transValue[0]);
+ const curIndexStar = transValue[1]
+ ? Number(transValue[1]) >= 5
+ ? 0
+ : -1
+ : -1;
+ console.log("curIndexLi: ", curIndexLi);
+ console.log("curIndexStar: ", curIndexStar);
+ setRateValue([curIndexLi, curIndexStar]);
+ setPos({
+ curIndexLi,
+ curIndexStar,
+ isFocus: true,
+ });
+ }
+ };
+
+ useEffect(() => {
+ initRate();
+ }, [value]);
const onMouseFirstEnter = (d: number, curStar: number) => {
- console.log("onMouseFirstEnter");
+ if (disabled) return;
const curIndex = ids.findIndex((id) => id == d);
- console.log("curIndex: ", curIndex, curStar);
setPos({
+ ...pos,
curIndexLi: curIndex,
curIndexStar: curStar,
});
};
const renderClassNames = (key: number) => {
- console.log("key: ", key);
let classNames = "dui-rate-star";
+ if (disabled) classNames += " dui-rate-star-disabled";
if (pos.curIndexLi === -1) {
classNames += " dui-rate-star-zero";
+ } else {
+ if (key < pos.curIndexLi) {
+ classNames += " ant-rate-star-full";
+ return classNames;
+ }
+ if (key == pos.curIndexLi) {
+ classNames += " " + cls[pos.curIndexStar];
+ return classNames;
+ }
+ if (key > pos.curIndexLi) {
+ classNames += " dui-rate-star-zero";
+ }
}
+
return classNames;
};
+ const rateClickHandle = (type: string, key: number) => {
+ if (value || disabled) return;
+ onMouseFirstEnter(key, type === "first" ? 0 : 1);
+ setRateValue([key, type === "first" ? 0 : 1]);
+ setPos({
+ ...pos,
+ isFocus: true,
+ });
+ };
+
+ const onMouseLeave = () => {
+ if (disabled) return;
+ if (!pos.isFocus) {
+ onMouseFirstEnter(-1, -1);
+ } else {
+ onMouseFirstEnter(...rateValue);
+ }
+ };
+
+ const renderNode = (key: number) =>
+ typeof character === "function" ? character(key) : character;
+
return (
-
+
{ids.map((key) => {
return (
-
onMouseFirstEnter(key, 0)}
+ onClick={() => rateClickHandle("first", key)}
>
-
+ {renderNode(key)}
onMouseFirstEnter(key, 1)}
+ onClick={() => rateClickHandle("second", key)}
>
-
+ {renderNode(key)}
);
@@ -89,11 +156,9 @@ const Rate: React.FC = (props) => {
);
};
-// Divider.defaultProps = {
-// plain: false,
-// orientation: "center",
-// type: "horizontal",
-// dashed: false,
-// };
+Rate.defaultProps = {
+ character: ,
+ disabled: false,
+};
export default Rate;
diff --git a/src/components/Rate/rate.stories.tsx b/src/components/Rate/rate.stories.tsx
index 45bc6d8..3978ef4 100644
--- a/src/components/Rate/rate.stories.tsx
+++ b/src/components/Rate/rate.stories.tsx
@@ -7,4 +7,17 @@ import Rate from "./index";
const defaultRate = () => ;
-storiesOf("Rate 评分", module).add("默认 Rate", defaultRate);
+const characterRate = () => (
+ <>
+
+
+ 星} />
+
+);
+
+const disableRate = () => ;
+
+storiesOf("Rate 评分", module)
+ .add("Rate", defaultRate)
+ .add("只读 Rate", disableRate)
+ .add("自定义字符 Rate", characterRate);
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index a2ceb94..084c518 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -274,3 +274,7 @@ $alert-padding-x-right: 1rem !default;
$alert-font-color: #000000d9;
$alert-message-font-size: $font-size-base * 1.1 !default;
$alert-description-font-size: $font-size-base * 0.8 !default;
+
+// Rate
+$rate-color: $yellow !default;
+$rate-color-default: $gray-200 !default;
diff --git a/todoList.md b/todoList.md
index 722e641..f9a32d4 100644
--- a/todoList.md
+++ b/todoList.md
@@ -4,5 +4,6 @@
- 图片水印
canvas、mutationObserver
- Flip 动画思路
+- 滑动验证码
From ea5bbafd6d57723240f9deeb0f4cc19956c27915 Mon Sep 17 00:00:00 2001
From: panyushan <1193345664@qq.com>
Date: Mon, 30 Jan 2023 10:28:33 +0800
Subject: [PATCH 4/4] perf: complete rate component
---
src/components/Rate/index.tsx | 6 +++++-
src/components/Rate/rate.stories.tsx | 7 ++++++-
2 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/src/components/Rate/index.tsx b/src/components/Rate/index.tsx
index 78d69e7..e4d2039 100644
--- a/src/components/Rate/index.tsx
+++ b/src/components/Rate/index.tsx
@@ -18,6 +18,8 @@ export interface RateProps {
disabled?: boolean;
/** 自定义字符 */
character?: ReactNode | ((index: number) => ReactNode);
+ /** 选择时的回调 */
+ onChange?: (value: number) => void;
}
/**
@@ -31,7 +33,8 @@ export interface RateProps {
* ~~~
*/
const Rate: React.FC = (props) => {
- const { className, value, defaultValue, character, disabled } = props;
+ const { className, value, defaultValue, character, disabled, onChange } =
+ props;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [ids, setIds] = useState([0, 1, 2, 3, 4]);
const [rateValue, setRateValue] = useState<[number, number]>([-1, -1]);
@@ -113,6 +116,7 @@ const Rate: React.FC = (props) => {
...pos,
isFocus: true,
});
+ onChange && onChange(type === "first" ? key + 0.5 : key + 1);
};
const onMouseLeave = () => {
diff --git a/src/components/Rate/rate.stories.tsx b/src/components/Rate/rate.stories.tsx
index 3978ef4..d04beb7 100644
--- a/src/components/Rate/rate.stories.tsx
+++ b/src/components/Rate/rate.stories.tsx
@@ -5,7 +5,12 @@ import { storiesOf } from "@storybook/react";
import Rate from "./index";
-const defaultRate = () => ;
+const defaultRate = () => {
+ const onChange = (v: any) => {
+ console.log("v: ", v);
+ };
+ return ;
+};
const characterRate = () => (
<>