@trionesdev/antd-mobile-react 0.0.2-beta.6 → 0.0.2-beta.7

package/dist/Progress/index.d.ts

@@ -1,3 +1,3 @@
-import { Progress, ProgressProps } from "./Progress";
+import { Progress, ProgressProps } from "@trionesdev/antd-mobile-base-react";
 export type { ProgressProps };
 export default Progress;

package/dist/Progress/index.js

@@ -1,2 +1,2 @@
-import { Progress } from "./Progress";
+import { Progress } from "@trionesdev/antd-mobile-base-react";
 export default Progress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trionesdev/antd-mobile-react",
-  "version": "0.0.2-beta.6",
+  "version": "0.0.2-beta.7",
   "description": "antd mobile react ",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -89,7 +89,7 @@
     "stylelint": "^16.12.0"
   },
   "dependencies": {
-    "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.6",
+    "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.7",
     "ahooks": "^3.8.4",
     "crypto-js": "^4.2.0",
     "rc-field-form": "^2.7.0",
@@ -98,7 +98,7 @@
   },
   "optionalDependencies": {
     "@trionesdev/antd-mobile-base-react": "workspace:*",
-    "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.6"
+    "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.7"
   },
-  "gitHead": "67e8a0eb804b24ce8aeeb8c2c7aac8046da5be5d"
+  "gitHead": "dda211e5c6e5ddc80ba9045b0cdec0b4b5297e4e"
 }

package/dist/Progress/Progress.d.ts

@@ -1,37 +0,0 @@
-import { FC } from "react";
-import "./style.scss";
-import { PercentPositionAlign, ProgressStatus } from "./types";
-import { SizeType } from "@trionesdev/antd-mobile-base-react";
-export type ProgressProps = {
-    /**
-     * @description 内容的模板函数
-     * @default percent => `${percent}%`
-     */
-    format?: (percent: number) => string;
-    type?: 'line' | 'circle';
-    /**
-     * @description 百分比
-     * @default 0
-     */
-    percent?: number;
-    size?: SizeType | number;
-    /**
-     * @description 是否显示进度数值或状态图标
-     * @default true
-     */
-    showInfo?: boolean;
-    /**
-     * @description 未完成的分段的颜色
-     */
-    railColor?: string;
-    /**
-     * @description 进度条的色彩
-     */
-    strokeColor?: string;
-    status?: ProgressStatus;
-    /**
-     * @description 进度数值位置
-     */
-    percentPositionAlign?: PercentPositionAlign;
-};
-export declare const Progress: FC<ProgressProps>;

package/dist/Progress/Progress.js

@@ -1,52 +0,0 @@
-import React from "react";
-import { ProgressCircle } from "./ProgressCircle";
-import "./style.scss";
-import { ProgressLine } from "./ProgressLine";
-import { exceptionColor, successColor } from "./types";
-export var Progress = function Progress(_ref) {
-  var format = _ref.format,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'line' : _ref$type,
-    _ref$percent = _ref.percent,
-    percent = _ref$percent === void 0 ? 0 : _ref$percent,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'middle' : _ref$size,
-    _ref$showInfo = _ref.showInfo,
-    showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
-    _ref$railColor = _ref.railColor,
-    railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
-    _ref$strokeColor = _ref.strokeColor,
-    strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
-    status = _ref.status,
-    percentPositionAlign = _ref.percentPositionAlign;
-  var handleComputedStrokeColor = function handleComputedStrokeColor() {
-    if (status === 'exception') {
-      return exceptionColor;
-    }
-    if (percent >= 100) {
-      return successColor;
-    }
-    return strokeColor;
-  };
-  if (type === 'line') {
-    return /*#__PURE__*/React.createElement(ProgressLine, {
-      format: format,
-      percent: percent,
-      size: size,
-      railColor: railColor,
-      strokeColor: handleComputedStrokeColor(),
-      status: status,
-      showInfo: showInfo,
-      percentPositionAlign: percentPositionAlign
-    });
-  }
-  return /*#__PURE__*/React.createElement(ProgressCircle, {
-    format: format,
-    percent: percent,
-    size: size,
-    railColor: railColor,
-    strokeColor: handleComputedStrokeColor(),
-    showInfo: showInfo,
-    status: status
-  });
-};

package/dist/Progress/ProgressCircle.d.ts

@@ -1,17 +0,0 @@
-import { FC } from "react";
-import { SizeType } from "@trionesdev/antd-mobile-base-react";
-import './style.scss';
-import { ProgressStatus } from "./types";
-type ProcessCircleProps = {
-    format?: (percent: number) => string;
-    percent?: number;
-    strokeWidth?: number;
-    size?: SizeType | number;
-    showInfo?: boolean;
-    railColor?: string;
-    strokeColor?: string;
-    strokeLineCap?: 'butt' | 'round' | 'square';
-    status?: ProgressStatus;
-};
-export declare const ProgressCircle: FC<ProcessCircleProps>;
-export {};

package/dist/Progress/ProgressCircle.js

@@ -1,148 +0,0 @@
-import React, { memo, useEffect, useMemo, useRef } from "react";
-import classNames from "classnames";
-import "./style.scss";
-import { CheckOutline, CloseOutline } from "@trionesdev/antd-mobile-icons-react";
-import { exceptionColor, successColor } from "./types";
-export var ProgressCircle = /*#__PURE__*/memo(function (_ref) {
-  var format = _ref.format,
-    _ref$percent = _ref.percent,
-    percent = _ref$percent === void 0 ? 0 : _ref$percent,
-    _ref$strokeWidth = _ref.strokeWidth,
-    strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'middle' : _ref$size,
-    _ref$showInfo = _ref.showInfo,
-    showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
-    _ref$railColor = _ref.railColor,
-    railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
-    _ref$strokeColor = _ref.strokeColor,
-    strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
-    _ref$strokeLineCap = _ref.strokeLineCap,
-    strokeLineCap = _ref$strokeLineCap === void 0 ? 'round' : _ref$strokeLineCap,
-    status = _ref.status;
-  var clsPrefix = 'triones-antm-progress-circle';
-  var canvasRef = useRef();
-  var computedWidth = useMemo(function () {
-    switch (size) {
-      case 'small':
-        return 50;
-      case 'middle':
-        return 100;
-      case 'large':
-        return 150;
-      default:
-        return size || 50;
-    }
-  }, [size]);
-  var computedHeight = useMemo(function () {
-    switch (size) {
-      case 'small':
-        return 50;
-      case 'middle':
-        return 100;
-      case 'large':
-        return 150;
-      default:
-        return 50;
-    }
-  }, [size]);
-  var style = {
-    width: computedWidth,
-    height: computedHeight
-  };
-  var computedSize = function computedSize() {
-    var iconSize = (computedWidth - strokeWidth) / 2 / 3;
-    if (iconSize < 24) {
-      return 24;
-    }
-    return iconSize;
-  };
-  var handleIndicator = function handleIndicator() {
-    var iconSize = computedSize();
-    var indicatorColor = '#333';
-    if (status === 'exception') {
-      indicatorColor = exceptionColor;
-    }
-    if (percent >= 100) {
-      indicatorColor = successColor;
-    }
-    if (format) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          color: indicatorColor,
-          fontSize: iconSize
-        }
-      }, format(percent));
-    }
-    if (status === 'exception') {
-      return /*#__PURE__*/React.createElement(CloseOutline, {
-        style: {
-          color: indicatorColor,
-          fontSize: iconSize
-        }
-      });
-    }
-    if (percent >= 100) {
-      return /*#__PURE__*/React.createElement(CheckOutline, {
-        style: {
-          color: indicatorColor,
-          fontSize: iconSize
-        }
-      });
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: indicatorColor,
-        fontSize: iconSize
-      }
-    }, percent, "%");
-  };
-  var handleDraw = function handleDraw() {
-    var width = computedWidth;
-    var height = computedHeight;
-    var centerX = width / 2;
-    var centerY = height / 2;
-    var radius = (Math.min(width, height) - strokeWidth) / 2;
-    console.log(centerX, centerY, radius);
-    var sweepAngle = (percent ? percent / 100 : 0) * 2 * Math.PI;
-    var startAngle = -Math.PI / 2; // 从顶部开始
-
-    var ctx = canvasRef.current.getContext('2d');
-    ctx.width = width;
-    ctx.height = height;
-    ctx.clearRect(0, 0, computedWidth, computedHeight);
-
-    //region 画背景圈
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-    ctx.strokeStyle = railColor;
-    ctx.lineWidth = strokeWidth;
-    ctx.stroke();
-    //endregion
-
-    //region 画进度圈
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, startAngle, startAngle + sweepAngle);
-    ctx.strokeStyle = strokeColor;
-    ctx.lineWidth = strokeWidth;
-    ctx.lineCap = strokeLineCap;
-    ctx.stroke();
-    //endregion
-  };
-  useEffect(function () {
-    console.log(canvasRef.current);
-    if (canvasRef.current) {
-      handleDraw();
-    }
-  }, [percent, canvasRef.current]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(clsPrefix)),
-    style: style
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
-    width: computedWidth,
-    height: computedHeight
-  }), showInfo && computedWidth > 20 && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(clsPrefix, "-indicator")
-  }, handleIndicator()));
-});

package/dist/Progress/ProgressLine.d.ts

@@ -1,15 +0,0 @@
-import { SizeType } from "@trionesdev/antd-mobile-base-react";
-import { FC } from "react";
-import { PercentPositionAlign, ProgressStatus } from "./types";
-type ProgressLineProps = {
-    format?: (percent: number) => string;
-    percent?: number;
-    size?: SizeType | number;
-    showInfo?: boolean;
-    railColor?: string;
-    strokeColor?: string;
-    status?: ProgressStatus;
-    percentPositionAlign?: PercentPositionAlign;
-};
-export declare const ProgressLine: FC<ProgressLineProps>;
-export {};

package/dist/Progress/ProgressLine.js

@@ -1,87 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { exceptionColor, successColor } from "./types";
-import { CloseCircleFill, CheckCircleFill } from "@trionesdev/antd-mobile-icons-react";
-export var ProgressLine = function ProgressLine(_ref) {
-  var format = _ref.format,
-    _ref$percent = _ref.percent,
-    percent = _ref$percent === void 0 ? 0 : _ref$percent,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'middle' : _ref$size,
-    _ref$showInfo = _ref.showInfo,
-    showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
-    _ref$railColor = _ref.railColor,
-    railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
-    _ref$strokeColor = _ref.strokeColor,
-    strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
-    status = _ref.status,
-    _ref$percentPositionA = _ref.percentPositionAlign,
-    percentPositionAlign = _ref$percentPositionA === void 0 ? 'end' : _ref$percentPositionA;
-  var clsPrefix = 'triones-antm-progress-line';
-  var handleComputeLineHeight = function handleComputeLineHeight() {
-    switch (size) {
-      case 'small':
-        return 6;
-      case 'middle':
-        return 8;
-      case 'large':
-        return 12;
-      default:
-        return size || 8;
-    }
-  };
-  var handleComputeInfoHeight = function handleComputeInfoHeight() {
-    var lineHeight = handleComputeLineHeight();
-    if (lineHeight <= 8) {
-      return 12;
-    } else if (lineHeight <= 12) {
-      return 14;
-    } else {
-      return 16;
-    }
-  };
-  var handleIndicator = function handleIndicator() {
-    if (format) {
-      return /*#__PURE__*/React.createElement("div", null, format(percent));
-    }
-    if (status === 'exception') {
-      return /*#__PURE__*/React.createElement(CloseCircleFill, {
-        style: {
-          color: exceptionColor,
-          fontSize: handleComputeInfoHeight()
-        }
-      });
-    }
-    if (percent >= 100) {
-      return /*#__PURE__*/React.createElement(CheckCircleFill, {
-        style: {
-          color: successColor,
-          fontSize: handleComputeInfoHeight()
-        }
-      });
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: handleComputeInfoHeight()
-      }
-    }, percent, "%");
-  };
-  var info = /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(clsPrefix, "-indicator"))
-  }, handleIndicator());
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(clsPrefix)
-  }, showInfo && percentPositionAlign === 'start' && info, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(clsPrefix, "-rail")),
-    style: {
-      backgroundColor: railColor
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(clsPrefix, "-track")),
-    style: {
-      width: "".concat(percent, "%"),
-      backgroundColor: strokeColor,
-      height: handleComputeLineHeight()
-    }
-  })), showInfo && percentPositionAlign === 'end' && info);
-};

package/dist/Progress/style.scss

@@ -1,33 +0,0 @@
-$progressLineCls: 'triones-antm-progress-line';
-$progressCircleCls: 'triones-antm-progress-circle';
-
-.#{$progressLineCls}{
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4Px;
-  &-rail{
-    flex: 1 auto;
-    border-radius: 90Px;
-  }
-  &-track{
-    border-radius: 90Px;
-  }
-  &-indicator{}
-}
-
-.#{$progressCircleCls} {
-  position: relative;
-  &-indicator {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 0;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    line-height: 1;
-    white-space: normal;
-    text-align: center;
-    transform: translatey(-50%);
-  }
-}

package/dist/Progress/types.d.ts

@@ -1,4 +0,0 @@
-export type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
-export type PercentPositionAlign = 'start' | 'end';
-export declare const successColor = "#53C31B";
-export declare const exceptionColor = "#FF4D4F";

package/dist/Progress/types.js

@@ -1,2 +0,0 @@
-export var successColor = "#53C31B";
-export var exceptionColor = "#FF4D4F";