fix: Flop 組件在格式化后可能出现不重新渲染的bug

orca-team · Aug 5, 2023 · 9c0e9b9 · 9c0e9b9 · vercel · Aug 5, 2023
1 parent f6d4466
commit 9c0e9b9
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 19 deletions.
diff --git a/packages/antd-plus/CHANGELOG.md b/packages/antd-plus/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @orca-fe/painter
 
+## 0.2.1
+
+### Patch Changes
+
+- update dependencies
+
 ## 0.2.0
 
 ### Minor Changes

diff --git a/packages/antd-plus/package.json b/packages/antd-plus/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/antd-plus",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Transformer Container",
   "keywords": [
     "react",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.8.6",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.2.0",
+    "@orca-fe/pocket": "^3.2.1",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

diff --git a/packages/painter/CHANGELOG.md b/packages/painter/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @orca-fe/painter
 
+## 1.4.35
+
+### Patch Changes
+
+- update dependencies
+
 ## 1.4.34
 
 ### Patch Changes

diff --git a/packages/painter/package.json b/packages/painter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/painter",
-  "version": "1.4.34",
+  "version": "1.4.35",
   "description": "Konva Painter",
   "keywords": [
     "react",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.8.6",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.2.0",
+    "@orca-fe/pocket": "^3.2.1",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

diff --git a/packages/pdf-viewer/CHANGELOG.md b/packages/pdf-viewer/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @orca-fe/pdf-viewer
 
+## 1.16.14
+
+### Patch Changes
+
+- update dependencies
+- Updated dependencies
+  - @orca-fe/painter@1.4.35
+
 ## 1.16.13
 
 ### Patch Changes

diff --git a/packages/pdf-viewer/package.json b/packages/pdf-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pdf-viewer",
-  "version": "1.16.13",
+  "version": "1.16.14",
   "description": "PDF Viewer",
   "keywords": [
     "react",
@@ -40,9 +40,9 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.8.6",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/painter": "^1.4.34",
+    "@orca-fe/painter": "^1.4.35",
     "@orca-fe/pdfjs-dist-browserify": "^3.8.24",
-    "@orca-fe/pocket": "^3.2.0",
+    "@orca-fe/pocket": "^3.2.1",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

diff --git a/packages/pocket/CHANGELOG.md b/packages/pocket/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @orca-fe/pocket
 
+## 3.2.1
+
+### Patch Changes
+
+- fix: Flop 組件在格式化后可能出现不重新渲染的 bug
+
 ## 3.2.0
 
 ### Minor Changes

diff --git a/packages/pocket/package.json b/packages/pocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pocket",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "UI components by orca-team",
   "keywords": [
     "react",

diff --git a/packages/pocket/src/flop/Flop.tsx b/packages/pocket/src/flop/Flop.tsx
@@ -114,15 +114,32 @@ const Flop = React.forwardRef<HTMLSpanElement, FlopProps>((props, ref) => {
           decimalPlaces: decimals ?? decimalLength(valueUnit.value),
         });
         _this.countup.start();
+        window.countup = _this.countup;
       }
     }
   }, []);
 
+  useUpdateEffect(() => {
+    if (_this.countup?.options) {
+      _this.countup.options.duration = duration;
+      _this.countup.reset();
+    }
+  }, [duration]);
+
+  useUpdateEffect(() => {
+    if (_this.countup?.options) {
+      _this.countup.options.separator = separator;
+    }
+  }, [separator]);
+
   useUpdateEffect(() => {
     if (_this.countup) {
+      if (_this.countup.options) {
+        _this.countup.options.decimalPlaces = decimals ?? decimalLength(valueUnit.value);
+      }
       _this.countup.update(valueUnit.value);
     }
-  }, [valueUnit.value]);
+  }, [valueUnit]);
 
   return (
     <span ref={ref} className={`${styles.root} ${className}`} {...otherProps}>

diff --git a/packages/pocket/src/flop/demo/Demo1.tsx b/packages/pocket/src/flop/demo/Demo1.tsx
@@ -11,19 +11,24 @@ import { Flop } from '@orca-fe/pocket';
 import { useInterval } from '@orca-fe/hooks';
 
 const Demo = () => {
-  const [value, setValue] = useState(12345);
+  const [value, setValue] = useState(123);
   useInterval(() => {
     let num = Math.random() * 10000;
-    if (Math.random() > 0.5) {
-      num *= 10000;
+    if (Math.random() > 0.7) {
+      num *= 1000;
+    }
+    if (Math.random() > 0.7) {
+      num *= 1000;
     }
     if (Math.random() > 0.5) {
-      num *= Math.trunc(Math.random() * 10000);
+      num *= Math.random() * 10000;
     }
-    setValue(num);
+    setValue(Math.trunc(num));
   }, 3000);
   return (
     <div>
+      <Flop value={value} />
+      <br />
       <Flop value={value} convertUnit={false} />
       <br />
       <Flop value={value} convertUnit={false} decimals={2} />

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml