feat: add bgColor prop preview

Heuluck · Jun 1, 2024 · 1cf7dea · 1cf7dea
1 parent 4748f89
commit 1cf7dea
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
-    "react-wave-progress-ball-svg": "^1.1.3"
+    "react-wave-progress-ball-svg": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import WaveBall from "react-wave-progress-ball-svg";
-import { Button, Card, Collapse, ColorPicker, Flex, Form, Segmented, Slider, Switch, Tabs, Tooltip } from "antd";
+import { Button, Card, Collapse, ColorPicker, Flex, Form, Segmented, Slider, Space, Switch, Tabs, Tooltip } from "antd";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { useState } from "react";
 import type { TabsProps } from "antd";
@@ -11,6 +11,7 @@ function App() {
     const { t, i18n } = useTranslation();
     const [value, setValue] = useState<number>(50);
     const [adaptive, setAdaptive] = useState<boolean>(false);
+    const [bgColor, setBgColor] = useState<string>("transparent");
     const [size, setSize] = useState<number>(350);
     const [circleColor, setCircleColor] = useState<string>("#bdc3c7");
     const [circleLineWidth, setCircleLineWidth] = useState<number>(1);
@@ -37,6 +38,7 @@ function App() {
     const [reverseWaveBg, setReverseWaveBg] = useState<boolean>(false);
     const setting = {
         size,
+        bgColor,
         adaptive,
         circleColor,
         circleLineWidth,
@@ -97,6 +99,23 @@ function App() {
                             step={1}
                         />
                     </Form.Item>
+                    <Form.Item label={t("CircleSettings.color")}>
+                        <Space>
+                        <Switch
+                            value={bgColor !== "transparent"}
+                            onChange={(value)=>setBgColor(value ? "#E8E8E8":"transparent")}
+                            unCheckedChildren={t("CircleSettings.transparent")}
+                            checkedChildren={t("CircleSettings.filled")}
+                        />
+                        {bgColor !== "transparent" && (
+                            <ColorPicker
+                                key="circleBgColor"
+                                value={bgColor}
+                                onChange={(color) => setBgColor(color.toRgbString())}
+                                showText
+                            />
+                        )}</Space>
+                    </Form.Item>
                     <Form.Item label={t("CircleSettings.color")}>
                         <ColorPicker
                             key="circleColor"
@@ -346,7 +365,16 @@ function App() {
         <>
             <WaveBall value={value} {...setting} />
             <div className="langSelector">
-                <Segmented defaultValue={i18n.language} onChange={(e)=>{i18n.changeLanguage(e)}} options={[{label:"简体中文",value:"zh-CN"}, {label:"English",value:"en"}]} />
+                <Segmented
+                    defaultValue={i18n.language}
+                    onChange={(e) => {
+                        i18n.changeLanguage(e);
+                    }}
+                    options={[
+                        { label: "简体中文", value: "zh-CN" },
+                        { label: "English", value: "en" },
+                    ]}
+                />
             </div>
             <Tabs defaultActiveKey="1" items={items} />
         </>
@@ -364,7 +392,8 @@ function ExampleCode(props: BallSetting) {
                 padding: "8px",
                 borderRadius: "8px",
             }}>
-            {`import WaveBall from "react-wave-progress-ball-svg";
+            {`import { useState } from "react";
+import WaveBall from "react-wave-progress-ball-svg";
 import "react-wave-progress-ball-svg/dist/style.css";
 
 export function ExampleBall(){
@@ -384,6 +413,8 @@ export function ExampleBall(){
 interface BallSetting {
     /** 自适应大小 */
     adaptive: boolean;
+    /** 背景 */
+    bgColor: string;
     /** 圆环的半径 */
     size: number;
     /** 圆环的颜色 */

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -10,6 +10,8 @@
     "CircleSettings": {
         "title": "Outline settings",
         "lineWidth": "Outline width",
+        "transparent": "Transparent",
+        "filled": "Filled",
         "color": "Outline color"
     },
     "WaveSettings": {
@@ -34,9 +36,9 @@
         "show": "Display",
         "hide": "Hide"
     },
-    "Output":{
+    "Output": {
         "title": "Output",
-		"copy": "Copy",
-		"example": "Example"
+        "copy": "Copy",
+        "example": "Example"
     }
 }
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
@@ -10,6 +10,8 @@
     "CircleSettings": {
         "title": "外框设置",
         "lineWidth": "外框宽度",
+        "transparent": "透明",
+        "filled": "填充",
         "color": "外框颜色"
     },
     "WaveSettings": {

diff --git a/yarn.lock b/yarn.lock
@@ -688,9 +688,9 @@
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/node@^20.12.12":
-  version "20.12.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.12.tgz#7cbecdf902085cec634fdb362172dfe12b8f2050"
-  integrity sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==
+  version "20.13.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.13.0.tgz#011a76bc1e71ae9a026dddcfd7039084f752c4b6"
+  integrity sha512-FM6AOb3khNkNIXPnHFDYaHerSv8uN22C91z098AnGccVu+Pcdhi+pNUFDi0iLmPIsVE0JBD0KVS7mzUYt4nRzQ==
   dependencies:
     undici-types "~5.26.4"
 
@@ -2064,10 +2064,10 @@ react-refresh@^0.14.2:
   resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-react-wave-progress-ball-svg@^1.0.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/react-wave-progress-ball-svg/-/react-wave-progress-ball-svg-1.1.3.tgz#1fff034c19b681c1b0f3ed000df5311112a5ae53"
-  integrity sha512-ZY8AIm7445DIdJ6qOgHhjuLfuFCZcqz7Uc8R5RDowEOuMGQRbplbVTioSiBt8A7B5SxCkhZ0zMeYIfF7ooJyNw==
+react-wave-progress-ball-svg@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-wave-progress-ball-svg/-/react-wave-progress-ball-svg-1.2.0.tgz#e9d9b28d1cb1da238a9d6951f4c51a964bae50cd"
+  integrity sha512-TJxY/jnwq78wF3q0ylTjM7//1Z/EBNn6+rTDyJt++FU4c9Ae9/xjo7RzlZPMSCIDOUn3JjGGLPkvxPteN9QtxA==
   dependencies:
     "@types/node" "^20.12.12"
     react "^18.2.0"