feat: allow to set svg size

Heuluck · May 27, 2024 · 9c67c07 · 9c67c07
1 parent 282ad6f
commit 9c67c07
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ![Deploy Status](https://github.com/Heuluck/Wave-Progress-Ball-v2/actions/workflows/node.js.yml/badge.svg)
 
-这是一个基于 React，使用`<svg>`实现的波浪进度球组件。进度球可以自定义颜色、大小、进度等。自定义内容详见[自定义](#参数-props)。
+这是一个基于 React，使用`<svg>`实现的波浪进度球组件。进度球可以自定义颜色、大小、进度、渐变、速度等一系列参数。自定义内容详见[自定义](#参数-props)。
 
 ## 上一版本 Old Version
 
@@ -41,6 +41,7 @@ return <WaveBall value={value} />;
 export function ExampleBall() {
     const [value, setValue] = useState(50);
     const settings = {
+        size: 350,
         circleColor: "#bdc3c7",
         circleLineWidth: 1,
         waveHeight: 30,
@@ -78,6 +79,7 @@ export function ExampleBall() {
 | 参数                | 说明                           | 类型                            | 默认值                                                           | 必填  |
 | ------------------- | ------------------------------ | ------------------------------- | ---------------------------------------------------------------- | ----- |
 | value               | 进度                           | number                          | "-"                                                              | true  |
+| size                | 球的大小                       | number                          | 350                                                              | false |
 | circleColor         | 圆环的颜色                     | string                          | "#bdc3c7"                                                        | false |
 | circleLineWidth     | 圆环线条的宽度                 | number                          | 1                                                                | false |
 | waveHeight          | 波浪的高度                     | number                          | 30                                                               | false |

diff --git a/src/App.css b/src/App.css
@@ -14,4 +14,5 @@
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 8px;
+  user-select: text;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { QuestionCircleOutlined } from "@ant-design/icons";
 
 function App() {
     const [value, setValue] = useState<number>(50);
+    const [size, setSize] = useState<number>(350);
     const [circleColor, setCircleColor] = useState<string>("#bdc3c7");
     const [circleLineWidth, setCircleLineWidth] = useState<number>(1);
     const [waveHeight, setWaveHeight] = useState<number>(30);
@@ -31,6 +32,7 @@ function App() {
     const [reverseWave, setReverseWave] = useState<boolean>(false);
     const [reverseWaveBg, setReverseWaveBg] = useState<boolean>(false);
     const setting = {
+        size,
         circleColor,
         circleLineWidth,
         waveHeight,
@@ -59,6 +61,9 @@ function App() {
                     <Form.Item label="液面高度">
                         <Slider key="height" defaultValue={value} onChange={setValue} min={0} max={100} step={1} />
                     </Form.Item>
+                    <Form.Item label="球的大小">
+                        <Slider key="size" defaultValue={size} onChange={setSize} min={10} max={1000} step={1} />
+                    </Form.Item>
                 </>
             ),
         },

diff --git a/src/components/ball/ball.tsx b/src/components/ball/ball.tsx
@@ -5,6 +5,7 @@ import "./ball.css";
 export default function WaveBall(props: BallProps) {
     const {
         value,
+        size = defaultSetting.size,
         circleColor = defaultSetting.circleColor,
         circleLineWidth = defaultSetting.circleLineWidth,
         waveHeight = defaultSetting.waveHeight,
@@ -25,7 +26,7 @@ export default function WaveBall(props: BallProps) {
     } = props;
     return (
         <>
-            <svg width={350} height={350} xmlns="http://www.w3.org/2000/svg">
+            <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
                 <circle
                     cx="175"
                     cy="175"

diff --git a/src/components/ball/default.ts b/src/components/ball/default.ts
@@ -1,4 +1,7 @@
 export const defaultSetting = {
+    size: 350,
+    width: 350,
+    height: 350,
     circleColor: "#bdc3c7",
     circleLineWidth: 1,
     waveHeight: 30,

diff --git a/src/components/ball/index.d.ts b/src/components/ball/index.d.ts
@@ -4,6 +4,8 @@ interface BallProps extends BallSetting {
 }
 
 interface BallSetting {
+    /** 圆环的半径 */
+    size?: number;
     /** 圆环的颜色 */
     circleColor?: string;
     /** 圆环线条的宽度 */

diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  user-select: none;
 }
 
 h1 {