From eda4de93ae66e30241e11f78cce741c2bffd3367 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 9 Oct 2020 19:51:28 +0800
Subject: [PATCH] chore(Progress): use tsx

---
 src/progress/{index.js => index.tsx} | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)
 rename src/progress/{index.js => index.tsx} (83%)

diff --git a/src/progress/index.js b/src/progress/index.tsx
similarity index 83%
rename from src/progress/index.js
rename to src/progress/index.tsx
index 50f5bc976..b7951bce2 100644
--- a/src/progress/index.js
+++ b/src/progress/index.tsx
@@ -15,7 +15,7 @@ export default createComponent({
     percentage: {
       type: [Number, String],
       required: true,
-      validator: (value) => value >= 0 && value <= 100,
+      validator: (value: number | string) => value >= 0 && value <= 100,
     },
     showPivot: {
       type: Boolean,
@@ -24,8 +24,8 @@ export default createComponent({
   },
 
   setup(props) {
-    const root = ref();
-    const pivotRef = ref();
+    const root = ref<HTMLElement>();
+    const pivotRef = ref<HTMLElement>();
 
     const state = reactive({
       rootWidth: 0,
@@ -38,7 +38,7 @@ export default createComponent({
 
     const setWidth = () => {
       nextTick(() => {
-        state.rootWidth = root.value.offsetWidth;
+        state.rootWidth = root.value ? root.value.offsetWidth : 0;
         state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
       });
     };
@@ -46,11 +46,11 @@ export default createComponent({
     const renderPivot = () => {
       const { rootWidth, pivotWidth } = state;
       const { textColor, pivotText, pivotColor, percentage } = props;
-      const text = pivotText ?? percentage + '%';
+      const text = pivotText ?? `${percentage}%`;
       const show = props.showPivot && text;
 
       if (show) {
-        const left = ((rootWidth - pivotWidth) * percentage) / 100;
+        const left = ((rootWidth - pivotWidth) * +percentage) / 100;
         const style = {
           color: textColor,
           left: `${left}px`,
@@ -77,7 +77,7 @@ export default createComponent({
       };
       const portionStyle = {
         background: background.value,
-        width: (state.rootWidth * percentage) / 100 + 'px',
+        width: (state.rootWidth * +percentage) / 100 + 'px',
       };
 
       return (