feat: progress hook offline

compiled/alipay/demo/pages/ProgressCircle/index.axml

@@ -1,8 +1,12 @@
-<container title="默认进度条">
+<container title="默认进度条（有/无动画）">
   <view class="line2">
     <progress
       type="circle"
       percent="{{ percent1 }}" />
+    <progress
+      type="circle"
+      percent="{{ percent1 }}"
+      animation="{{ false }}" />
   </view>
   <view class="buttonwrapper">
     <ant-button

compiled/alipay/src/Progress/index.md

@@ -25,14 +25,15 @@ toc: 'content'
 
 ## API
 
-| 属性       | 说明                                       | 类型   | 默认值 |
-| ---------- | ------------------------------------------ | ------ | ------ |
-| className  | 类名                                       | string | -      |
-| percent    | 百分比                                     | number | 0      |
-| status     | 状态，仅限 line 模式可用，可选 `success` `exception` | string | -      |
-| strokeColor| 进度条颜色                                 | string | -      |
-| strokeWidth| 进度条宽度，单位 px                       | number | 8      |
-| style      | 样式                                       | string | -      |
-| trailColor | 轨道颜色                                   | string | -      |
-| type       | 类型，可选 `line` `circle`                 | string | `line` |
-| width      | 圆形进度条画布宽度，单位 px                | number | 100    |
+| 属性        | 说明                                                 | 类型    | 默认值 |
+| ----------- | ---------------------------------------------------- | ------- | ------ |
+| className   | 类名                                                 | string  | -      |
+| percent     | 百分比                                               | number  | 0      |
+| status      | 状态，仅限 line 模式可用，可选 `success` `exception` | string  | -      |
+| strokeColor | 进度条颜色                                           | string  | -      |
+| strokeWidth | 进度条宽度，单位 px                                  | number  | 8      |
+| style       | 样式                                                 | string  | -      |
+| trailColor  | 轨道颜色                                             | string  | -      |
+| type        | 类型，可选 `line` `circle`                           | string  | `line` |
+| width       | 圆形进度条画布宽度，单位 px                          | number  | 100    |
+| animation   | 是否开启过渡动画                                     | boolean | true   |

compiled/alipay/src/Progress/index.ts

@@ -1,148 +1,151 @@
-import { useMemo, useRef, useState } from 'functional-mini/compat';
-import { useComponent, useEffect } from 'functional-mini/component';
-import '../_util/assert-component2';
-import { mountComponent } from '../_util/component';
+import deepEqual from 'fast-deep-equal';
+import { Component, getValueFromProps } from '../_util/simply';
+import { ProgressBarDefaultProps } from './props';
 import { createCanvasContext } from '../_util/jsapi/create-canvas-context';
 import { getSystemInfo } from '../_util/jsapi/get-system-info';
-import { IProgressBarProps, ProgressBarFunctionalProps } from './props';
-
-function requestAnimationFrame(fn) {
-  setTimeout(fn, 16);
-}
-
-function toNumber(value: string | number, defaultValue: number): number {
-  if (typeof value === 'number') {
-    return value;
-  }
-  if (typeof value === 'string') {
-    const val = parseInt(value, 10);
-    if (isNaN(val)) {
-      return defaultValue;
-    }
-    return val;
-  }
-  return defaultValue;
-}
-
-const Progress = (props: IProgressBarProps) => {
-  const [curProgress, setCurProgress] = useState(0);
-  const canvasRequestRef = useRef<any>(null);
-  const [canvasWidthState, setCanvasWidthState] = useState(100);
-  async function getDrawColor() {
-    const { strokeColor, trailColor } = props;
-    const drawColor = {
-      strokeColor: strokeColor || '#1677ff',
-      trailColor: trailColor || '#F5F5F5',
-    };
-    return drawColor;
-  }
-  function drawProgress(
-    ctx: any,
-    canvasWidth: number,
-    color: string,
-    rad: number
-  ) {
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = toNumber(props.strokeWidth, 8);
-    ctx.setLineCap('round');
-    ctx.arc(
-      canvasWidth / 2,
-      canvasWidth / 2,
-      canvasWidth / 2 - toNumber(props.strokeWidth, 8),
-      -Math.PI / 2,
-      -Math.PI / 2 + (rad / 360) * 2 * Math.PI,
-      false
-    );
-    ctx.stroke();
-  }
-  function drawOrbit(ctx: any, canvasWidth: number, color) {
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = toNumber(props.strokeWidth, 8);
-    ctx.arc(
-      canvasWidth / 2,
-      canvasWidth / 2,
-      canvasWidth / 2 - toNumber(props.strokeWidth, 8),
-      0,
-      Math.PI * 2,
-      false
-    );
-    ctx.stroke();
-  }
-  function clearCanvas(ctx, canvasWidth: number) {
-    ctx.clearRect(0, 0, canvasWidth, canvasWidth);
-  }
-  const instance = useComponent();
+import '../_util/assert-component2';
 
-  const canvasId = useMemo(() => {
-    if (instance.$id) {
-      return `ant-progress-canvas-${instance.$id}`;
-    }
-    return `ant-progress-canvas`;
-  }, []);
+const animationFrameDuration = 16;
 
-  async function getCanvasContext() {
-    let ctx = canvasRequestRef.current;
-    if (ctx) {
-      return await ctx;
-    }
-    canvasRequestRef.current = createCanvasContext([canvasId, instance]);
-    ctx = await canvasRequestRef.current;
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = 'high';
-    return ctx;
-  }
-  async function getCanvasWidth() {
-    const systemInfo = await getSystemInfo();
-    let { pixelRatio } = systemInfo;
-    const { width } = props;
-    return pixelRatio * width;
-  }
+Component(
+  ProgressBarDefaultProps,
+  {
+    requestAnimationFrame(fn, duration = animationFrameDuration) {
+      setTimeout(fn, duration);
+    },
+    async getDrawColor() {
+      const [strokeColor, trailColor] = getValueFromProps(this, [
+        'strokeColor',
+        'trailColor',
+      ]);
+      const drawColor = {
+        strokeColor: strokeColor || '#1677ff',
+        trailColor: trailColor || '#F5F5F5',
+      };
+      return drawColor;
+    },
+    async getCanvasContext() {
+      if (this.ctx) return;
+      const systemInfo = await getSystemInfo();
+      let { pixelRatio } = systemInfo;
+      const width = getValueFromProps(this, 'width');
+      this.ctx = await createCanvasContext([this.canvasId, this]);
+      this.ctx.imageSmoothingEnabled = true;
+      this.ctx.imageSmoothingQuality = 'high';
+      this.setData({
+        canvasWidth: width * pixelRatio,
+      });
+    },
+    clearCanvas() {
+      const ctx = this.ctx;
+      const { canvasWidth } = this.data;
+      ctx.clearRect(0, 0, canvasWidth, canvasWidth);
+    },
+    async updateCanvasProgress(prev) {
+      const drawColor = await this.getDrawColor();
+      await this.getCanvasContext();
+      let curRad = Math.floor((prev / 100) * 360);
+      const targetRad = Math.floor((this.data.curProgress / 100) * 360);
+      const direction = curRad < targetRad ? 1 : -1;
+      const draw = () => {
+        if (curRad == targetRad) return;
+        const [speed, animation] = getValueFromProps(this, [
+          'speed',
+          'animation',
+        ]);
+        curRad = direction * speed + curRad;
+        if (direction == -1) {
+          curRad = Math.max(curRad, targetRad);
+        } else {
+          curRad = Math.min(curRad, targetRad);
+        }
+        this.clearCanvas();
+        this.drawOrbit(drawColor.trailColor);
+        this.drawProgress(drawColor.strokeColor, curRad);
+        this.ctx.draw(true);
+        this.requestAnimationFrame(
+          draw,
+          animation ? animationFrameDuration : 0
+        );
+      };
 
-  async function updateCanvasProgress(prev: number, targetPercent: number) {
-    const drawColor = await getDrawColor();
-    const ctx = await getCanvasContext();
-    let curRad = Math.floor((prev / 100) * 360);
-    const canvasWidth = await getCanvasWidth();
-    setCanvasWidthState(canvasWidth);
-    const targetRad = Math.floor((targetPercent / 100) * 360);
-    const direction = curRad < targetRad ? 1 : -1;
-
-    const draw = () => {
-      if (curRad == targetRad) return;
-      curRad = direction * props.speed + curRad;
-      if (direction == -1) {
-        curRad = Math.max(curRad, targetRad);
-      } else {
-        curRad = Math.min(curRad, targetRad);
+      draw();
+    },
+    drawProgress(color, rad) {
+      const ctx = this.ctx;
+      const { canvasWidth } = this.data;
+      const strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = strokeWidth;
+      ctx.setLineCap('round');
+      ctx.arc(
+        canvasWidth / 2,
+        canvasWidth / 2,
+        canvasWidth / 2 - strokeWidth,
+        -Math.PI / 2,
+        -Math.PI / 2 + (rad / 360) * 2 * Math.PI,
+        false
+      );
+      ctx.stroke();
+    },
+    drawOrbit(color) {
+      const ctx = this.ctx;
+      const { canvasWidth } = this.data;
+      const strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = strokeWidth;
+      ctx.arc(
+        canvasWidth / 2,
+        canvasWidth / 2,
+        canvasWidth / 2 - strokeWidth,
+        0,
+        Math.PI * 2,
+        false
+      );
+      ctx.stroke();
+    },
+    calProgress() {
+      const [p, type] = getValueFromProps(this, ['percent', 'type']);
+      const percent = +p;
+      if (isNaN(percent)) {
+        return this.setData({ curProgress: 0 });
       }
-      clearCanvas(ctx, canvasWidth);
-      drawOrbit(ctx, canvasWidth, drawColor.trailColor);
-      drawProgress(ctx, canvasWidth, drawColor.strokeColor, curRad);
-      ctx.draw(true);
-      requestAnimationFrame(draw);
-    };
-    draw();
-  }
-  useEffect(() => {
-    let percent = +props.percent;
-    if (isNaN(percent)) {
-      percent = 0;
-    }
-    if (percent !== curProgress) {
-      setCurProgress(percent > 100 ? 100 : percent < 0 ? 0 : percent);
-    }
-    if (props.type === 'circle') {
-      updateCanvasProgress(curProgress, percent);
-    }
-  }, [props.type, props.speed, props.percent]);
-
-  return {
-    curProgress,
-    canvasWidth: canvasWidthState,
-    canvasId,
-  };
-};
+      const prevProgress = this.data.curProgress;
+      if (percent === prevProgress) {
+        return;
+      }
+      this.setData({
+        curProgress: percent > 100 ? 100 : percent < 0 ? 0 : percent,
+      });
+      if (type === 'circle') {
+        this.setCanvasId();
+        this.updateCanvasProgress(prevProgress);
+      }
+    },
+    setCanvasId() {
+      this.canvasId = this.$id
+        ? `ant-progress-canvas-${this.$id}`
+        : `ant-progress-canvas`;
+    },
+  },
+  undefined,
+  {
+    curProgress: 0,
+    canvasWidth: 100,
+  },
+  {
+    ctx: null as any,
+    drawColor: null as any,
+    canvas: null,
+    didMount() {
+      this.calProgress();
+    },
+    didUpdate(prevProps) {
+      if (deepEqual(this.props, prevProps)) return;
+      this.calProgress();
+    },
 
-mountComponent(Progress, ProgressBarFunctionalProps);
+  }
+);

compiled/alipay/src/Progress/props.ts

@@ -40,17 +40,14 @@ export interface IProgressBarProps extends IBaseProps {
    * @default 6
    */
   speed: number;
+  /**
+   * @description 是否开启过渡动画
+   * @default true
+   */
+  animation: boolean;
 }
 
 export const ProgressBarDefaultProps: Partial<IProgressBarProps> = {
-  percent: 0,
-  type: 'line',
-  speed: 6,
-  width: 100,
-  strokeWidth: 8,
-};
-
-export const ProgressBarFunctionalProps: Partial<IProgressBarProps> = {
   percent: 0,
   type: 'line',
   width: 100,
@@ -59,4 +56,5 @@ export const ProgressBarFunctionalProps: Partial<IProgressBarProps> = {
   strokeColor: '',
   trailColor: '',
   speed: 6,
+  animation: true,
 };