@trionesdev/antd-mobile-react 0.0.2-beta.2 → 0.0.2-beta.20

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 { Size } from "@trionesdev/antd-mobile-base-react";
-import { FC } from "react";
-import { PercentPositionAlign, ProgressStatus } from "./types";
-type ProgressLineProps = {
-    format?: (percent: number) => string;
-    percent?: number;
-    size?: Size;
-    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";

package/dist/SpinLoading/index.d.ts

@@ -1,3 +0,0 @@
-import { SpinLoading, SpinLoadingProps } from "@trionesdev/antd-mobile-base-react";
-export type { SpinLoadingProps };
-export default SpinLoading;

package/dist/SpinLoading/index.js

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