progress 2.0

components/progress/src/index.tsx

@@ -21,7 +21,7 @@ export default class extends WeElement<MyAppProps> {
       timer = setInterval(() => {
         percent += 10
         console.log(percent)
-        if (percent > 200) {
+        if (percent > 110) {
           percent = 0
           clearInterval(timer)
           timer = null
@@ -32,16 +32,32 @@ export default class extends WeElement<MyAppProps> {
     }
     return (
       <div class="app">
-        <div>hello,here we will show you how to use "progress"!</div>
-        <o-progress percent={percent} status="success"></o-progress>
-        <o-progress percent="40" status="error"></o-progress>
-        <o-progress percent = "100" status="success"></o-progress>
-        <o-progress percent="50"></o-progress>
+        <h1>Hello,here we will show you how to use "o-progress"!</h1><hr></hr>
+        <div>We can set up a timer to achieve dynamic effects.</div>
+        <o-progress percent={percent} status="success"></o-progress><hr></hr>
+        <div>We can change the percentage by changing the "percent",the default percent is "30". </div>
+        <o-progress></o-progress>
+        <o-progress percent="40"></o-progress>
+        <div>We can change the width by changing the "width",the default width is "300". </div>
+        <o-progress percent="40"></o-progress>
+        <o-progress percent="40" width={600}></o-progress>
+        <div>We can change the height by changing the "strokeWidth",the default width is "8". </div>
+        <o-progress percent="50" strokeWidth={8}></o-progress>
+        <o-progress percent="50" strokeWidth={4}></o-progress>
+        <o-progress percent="50" strokeWidth={16}></o-progress>
+        <div>As you can see, instead of providing a fixed size, we choose to provide a custom width and height,
+           and leave the decision to the user to achieve the desired effect.</div><hr></hr>
+        <div>We can change the progress color by changing the "strokeColor". </div>
         <o-progress percent="60" strokeColor="lightseagreen"></o-progress>
-        <o-progress percent="70" strokeColor="lightseagreen" trailColor="black"></o-progress>
-        <o-progress percent="50" strokeWidth = "20"></o-progress>
-        <o-progress percent="50" strokeWidth = "70"></o-progress>
-        <o-progress percent="50" textColor = "#af0f8c"></o-progress>
+        <div>We can change the progress trail color by changing the "trailColor". </div>
+        <o-progress percent="60" trailColor="black"></o-progress>
+        <div>We can change the progress text color by changing the "textColor". </div>
+        <o-progress percent="60" textColor = "red"></o-progress><hr></hr>
+        <div>We provide two status to achieve the default effect of success / failure, and icons can be introduced using icons in "@omiu-icon" . </div>
+        <o-progress percent="70" status="error"></o-progress>
+        <o-progress percent="80" status="error" strokeWidth={4}></o-progress>
+        <o-progress percent="90" status="error" strokeWidth={16}></o-progress>
+        <o-progress percent = "100" status="success"></o-progress>
       </div>
     )
   }

components/progress/src/o-progress.css

@@ -22,7 +22,7 @@
 }
 .o-progress-text {
     display: inline-block;
-    width: 1em;
+    width: 2em;
     margin-left: 8px;
     color: #000000d9;
     font-size: 1em;

components/progress/src/o-progress.tsx

@@ -13,8 +13,8 @@ interface Props {
   trailColor?: string;
   textColor?:String,
   style?: string;
-  size?: 'small';
   strokeWidth:number;
+  width:number;
 }
 
 const status2color = {
@@ -38,8 +38,8 @@ export default class extends WeElement<Props> {
     strokeColor: "#07c160",
     trailColor: "#f5f5f5",
     textColor:"black",
-    size: 'small',
-    strokeWidth:50
+    strokeWidth:8,
+    width:300,
   }
 
   percentage:any
@@ -47,28 +47,39 @@ export default class extends WeElement<Props> {
   static propTypes = {
     type: String,
     percent: Number,
-    status: String, // normal success error 
+    status: String,  
     strokeColor: String,
     trailColor: String,
     textColor:String,
-    size: String,
-    strokeWidth:Number
+    strokeWidth:Number,
+    width:Number,
   }
-  // install(){
-  //   this.percentage = state({
-  //     value: this.props.percent
-  //   }, this)
-  // }
 
   render(props) {
+    const {
+      type, 
+      percent,
+      status,
+      strokeColor,
+      trailColor,
+      textColor,
+      strokeWidth,
+      width,
+    }  = props
     return (
       <div >
-        <div className="o-progress__outer" style={{width:`${props.strokeWidth}%`}}>
-          <div className="o-progress__bar"style={{backgroundColor:props.trailColor}}>
-            <div className="o-progress__inner-bar" style={{width:`${props.percent}%`,backgroundColor:props.status?status2color[props.status]:props.strokeColor}}></div>
+        <div className="o-progress__outer" style={{width:width}}>
+          <div className="o-progress__bar"style={{backgroundColor:trailColor}}>
+            <div className="o-progress__inner-bar" style={{
+              width:`${percent}%`,
+              backgroundColor:status?status2color[status]:strokeColor,
+              height:strokeWidth
+              }}></div>
           </div>
         </div>
-        <span className="o-progress-text" style={{color:props.status?status2color[props.status]:props.textColor}}>{props.status?status2icon[props.status]:`${props.percent}%`}</span>
+        <span className="o-progress-text" style={{fontSize:strokeWidth*1.75,color:textColor}}>
+          {status?<span style={{color:status?status2color[status]:strokeColor}}>{status2icon[status]}</span>
+          :`${percent}%`}</span>
       </div>
     )
   }