Feat/harmony progress com (#10442)

* feat: add progress component of harmony * feat: add progress component css empty line * feat: change props question of progress in harmony * feat: change color question of progress * feat(harmony): change color rename of progress * feat(harmony): change progress params * fix: change progress com * fix: delete cls of progress Co-authored-by: huozhongyi <[email protected]>
NervJS · Nov 3, 2021 · 8779d26 · 8779d26
1 parent 7ea95fa
commit 8779d26
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/packages/taro-harmony/src/components/components-harmony/progress/index.css b/packages/taro-harmony/src/components/components-harmony/progress/index.css
@@ -0,0 +1,5 @@
+.progress-horizontal-showInfo {
+  flex-direction: row;
+  align-items: center;
+  height: 100px;
+}
diff --git a/packages/taro-harmony/src/components/components-harmony/progress/index.hml b/packages/taro-harmony/src/components/components-harmony/progress/index.hml
@@ -0,0 +1,28 @@
+<div class="progress">
+  <div
+    if="{{showInfo && type == 'horizontal'}}"
+    class="progress-horizontal-showInfo"
+    style="height: 100px;"
+  >
+    <progress
+      style="color: {{progressColor}};background-color:{{progressBgColor}};stroke-width:{{strokeWidth}}"
+      type="{{type}}"
+      percent="{{percent}}"
+      secondarypercent="{{secondarypercent}}"
+      clockwise="{{clockwise}}"
+    >
+    </progress>
+    <text
+      style="font-size: {{fontSize}};width: 80px; text-align: center;"
+    >{{percent}}%</text>
+  </div>
+  <progress
+    else
+    style="color: {{progressColor}};background-color:{{progressBgColor}};stroke-width:{{strokeWidth}}"
+    type="{{type}}"
+    percent="{{percent}}"
+    secondarypercent="{{secondarypercent}}"
+    clockwise="{{clockwise}}"
+  >
+  </progress>
+</div>
diff --git a/packages/taro-harmony/src/components/components-harmony/progress/index.js b/packages/taro-harmony/src/components/components-harmony/progress/index.js
@@ -0,0 +1,23 @@
+import { covertHex3ToHex6 } from '../utils'
+
+export default {
+  props: [
+    'type',
+    'percent',
+    'secondarypercent',
+    'clockwise',
+    'showInfo',
+    'fontSize',
+    'strokeWidth',
+    'activeColor',
+    'backgroundColor'
+  ],
+  computed: {
+    progressColor () {
+      return covertHex3ToHex6(this.activeColor)
+    },
+    progressBgColor () {
+      return covertHex3ToHex6(this.backgroundColor)
+    }
+  }
+}
diff --git a/packages/taro-harmony/src/components/index.ts b/packages/taro-harmony/src/components/index.ts
@@ -55,7 +55,15 @@ export const components = {
   Switch: {
     showtext: 'false',
     texton: singleQuote('On'),
-    textoff: singleQuote('Off'),
+    textoff: singleQuote('Off')
+  },
+  Progress: {
+    'active-color': singleQuote('#09BB07'),
+    'background-color': singleQuote('#EBEBEB'),
+    type: singleQuote('horizontal'),
+    'font-size': singleQuote('25px'),
+    secondarypercent: '0',
+    clockwise: 'true'
   },
   Input: {
     'placeholder-color': singleQuote('#99000000')