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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,3 @@
1
- import { Progress, ProgressProps } from "./Progress";
1
+ import { Progress, ProgressProps } from "@trionesdev/antd-mobile-base-react";
2
2
  export type { ProgressProps };
3
3
  export default Progress;
@@ -1,2 +1,2 @@
1
- import { Progress } from "./Progress";
1
+ import { Progress } from "@trionesdev/antd-mobile-base-react";
2
2
  export default Progress;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trionesdev/antd-taro-react",
3
- "version": "0.0.2-beta.6",
3
+ "version": "0.0.2-beta.7",
4
4
  "description": "antd taro react",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -56,7 +56,7 @@
56
56
  },
57
57
  "dependencies": {
58
58
  "@tarojs/components": "^4.1.8",
59
- "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.6",
59
+ "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.7",
60
60
  "crypto-js": "^4.2.0",
61
61
  "rc-field-form": "^2.7.0",
62
62
  "rc-util": "^5.44.3",
@@ -65,7 +65,7 @@
65
65
  },
66
66
  "optionalDependencies": {
67
67
  "@trionesdev/antd-mobile-base-react": "workspace:*",
68
- "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.6"
68
+ "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.7"
69
69
  },
70
- "gitHead": "67e8a0eb804b24ce8aeeb8c2c7aac8046da5be5d"
70
+ "gitHead": "dda211e5c6e5ddc80ba9045b0cdec0b4b5297e4e"
71
71
  }
@@ -1,39 +0,0 @@
1
- import { FC } from "react";
2
- import { Size } from "./types";
3
- import "./style.scss";
4
- import { PercentPositionAlign, ProgressStatus } from "./types";
5
- import "./style.scss";
6
- export type ProgressProps = {
7
- /**
8
- * @description 内容的模板函数
9
- * @default percent => `${percent}%`
10
- */
11
- format?: (percent: number) => string;
12
- type?: 'line' | 'circle';
13
- /**
14
- * @description 百分比
15
- * @default 0
16
- */
17
- percent?: number;
18
- size?: Size;
19
- /**
20
- * @description 是否显示进度数值或状态图标
21
- * @default true
22
- */
23
- showInfo?: boolean;
24
- /**
25
- * @description 未完成的分段的颜色
26
- */
27
- railColor?: string;
28
- /**
29
- * @description 进度条的色彩
30
- */
31
- strokeColor?: string;
32
- strokeWidth?: number;
33
- status?: ProgressStatus;
34
- /**
35
- * @description 进度数值位置
36
- */
37
- percentPositionAlign?: PercentPositionAlign;
38
- };
39
- export declare const Progress: FC<ProgressProps>;
@@ -1,56 +0,0 @@
1
- import React from "react";
2
- import { ProgressCircle } from "./ProgressCircle";
3
- import "./style.scss";
4
- import { ProgressLine } from "./ProgressLine";
5
- import { exceptionColor, successColor } from "./types";
6
- import "./style.scss";
7
- export var Progress = function Progress(_ref) {
8
- var format = _ref.format,
9
- _ref$type = _ref.type,
10
- type = _ref$type === void 0 ? 'line' : _ref$type,
11
- _ref$percent = _ref.percent,
12
- percent = _ref$percent === void 0 ? 0 : _ref$percent,
13
- _ref$size = _ref.size,
14
- size = _ref$size === void 0 ? 'middle' : _ref$size,
15
- _ref$showInfo = _ref.showInfo,
16
- showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
17
- _ref$railColor = _ref.railColor,
18
- railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
19
- _ref$strokeColor = _ref.strokeColor,
20
- strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
21
- _ref$strokeWidth = _ref.strokeWidth,
22
- strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
23
- status = _ref.status,
24
- percentPositionAlign = _ref.percentPositionAlign;
25
- var handleComputedStrokeColor = function handleComputedStrokeColor() {
26
- if (status === 'exception') {
27
- return exceptionColor;
28
- }
29
- if (percent >= 100) {
30
- return successColor;
31
- }
32
- return strokeColor;
33
- };
34
- if (type === 'line') {
35
- return /*#__PURE__*/React.createElement(ProgressLine, {
36
- format: format,
37
- percent: percent,
38
- size: size,
39
- railColor: railColor,
40
- strokeColor: handleComputedStrokeColor(),
41
- status: status,
42
- showInfo: showInfo,
43
- percentPositionAlign: percentPositionAlign
44
- });
45
- }
46
- return /*#__PURE__*/React.createElement(ProgressCircle, {
47
- format: format,
48
- percent: percent,
49
- size: size,
50
- railColor: railColor,
51
- strokeColor: handleComputedStrokeColor(),
52
- strokeWidth: strokeWidth,
53
- showInfo: showInfo,
54
- status: status
55
- });
56
- };
@@ -1,16 +0,0 @@
1
- import { FC } from "react";
2
- import { Size } from "./types";
3
- import { ProgressStatus } from "./types";
4
- type ProcessCircleProps = {
5
- format?: (percent: number) => string;
6
- percent?: number;
7
- strokeWidth?: number;
8
- size?: Size;
9
- showInfo?: boolean;
10
- railColor?: string;
11
- strokeColor?: string;
12
- strokeLineCap?: 'butt' | 'round' | 'square';
13
- status?: ProgressStatus;
14
- };
15
- export declare const ProgressCircle: FC<ProcessCircleProps>;
16
- export {};
@@ -1,142 +0,0 @@
1
- var _this = this;
2
- import React, { memo, useEffect, useMemo, useRef } from "react";
3
- import { Canvas } from "@tarojs/components";
4
- import Taro, { createCanvasContext } from "@tarojs/taro";
5
- import classNames from "classnames";
6
- import { CheckOutline, CloseOutline } from "@trionesdev/antd-mobile-icons-react";
7
- import { exceptionColor, successColor } from "./types";
8
- export var ProgressCircle = /*#__PURE__*/memo(function (_ref) {
9
- var format = _ref.format,
10
- _ref$percent = _ref.percent,
11
- percent = _ref$percent === void 0 ? 0 : _ref$percent,
12
- _ref$strokeWidth = _ref.strokeWidth,
13
- strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
14
- _ref$size = _ref.size,
15
- size = _ref$size === void 0 ? 'middle' : _ref$size,
16
- _ref$showInfo = _ref.showInfo,
17
- showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
18
- _ref$railColor = _ref.railColor,
19
- railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
20
- _ref$strokeColor = _ref.strokeColor,
21
- strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
22
- _ref$strokeLineCap = _ref.strokeLineCap,
23
- strokeLineCap = _ref$strokeLineCap === void 0 ? 'round' : _ref$strokeLineCap,
24
- status = _ref.status;
25
- var clsPrefix = 'triones-antm-progress-circle';
26
- var canvasRef = useRef(("canvas_" + Math.random()).replace('.', ''));
27
- var computedDiameter = useMemo(function () {
28
- switch (size) {
29
- case 'small':
30
- return 50;
31
- case 'middle':
32
- return 100;
33
- case 'large':
34
- return 150;
35
- default:
36
- return size || 50;
37
- }
38
- }, [size]);
39
- var style = {
40
- width: computedDiameter,
41
- height: computedDiameter
42
- };
43
- var computedIconSize = function computedIconSize() {
44
- var iconSize = (computedDiameter - strokeWidth) / 2 / 3;
45
- if (iconSize < 24) {
46
- return 24;
47
- }
48
- return iconSize;
49
- };
50
- var computePercentSize = function computePercentSize() {
51
- var percentSize = (computedDiameter - strokeWidth) / 2 / 3;
52
- if (percentSize < 10) {
53
- return 10;
54
- }
55
- return percentSize || 10;
56
- };
57
- var handleIndicator = function handleIndicator() {
58
- var iconSize = computedIconSize();
59
- var percentSize = computePercentSize();
60
- var indicatorColor = '#333';
61
- if (status === 'exception') {
62
- indicatorColor = exceptionColor;
63
- }
64
- if (percent >= 100) {
65
- indicatorColor = successColor;
66
- }
67
- if (format) {
68
- return /*#__PURE__*/React.createElement("div", {
69
- style: {
70
- color: indicatorColor,
71
- fontSize: percentSize
72
- }
73
- }, format(percent));
74
- }
75
- if (status === 'exception') {
76
- return /*#__PURE__*/React.createElement(CloseOutline, {
77
- style: {
78
- color: indicatorColor,
79
- fontSize: iconSize
80
- }
81
- });
82
- }
83
- if (percent >= 100) {
84
- return /*#__PURE__*/React.createElement(CheckOutline, {
85
- style: {
86
- color: indicatorColor,
87
- fontSize: iconSize
88
- }
89
- });
90
- }
91
- return /*#__PURE__*/React.createElement("div", {
92
- style: {
93
- color: indicatorColor,
94
- fontSize: percentSize
95
- }
96
- }, percent, "%");
97
- };
98
- var handleDraw = function handleDraw() {
99
- var centerX = computedDiameter / 2;
100
- var centerY = computedDiameter / 2;
101
- var radius = (Math.min(computedDiameter, computedDiameter) - strokeWidth) / 2;
102
- var sweepAngle = (percent ? percent / 100 : 0) * 2 * Math.PI;
103
- var startAngle = -Math.PI / 2; // 从顶部开始
104
-
105
- // 创建画布上下文,不能使用Taro.createCanvasContext(),否则h5下会报错
106
- var ctx = createCanvasContext(canvasRef.current, _this);
107
- ctx.clearRect(0, 0, computedDiameter, computedDiameter);
108
-
109
- //region 画背景圈
110
- ctx.beginPath();
111
- ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
112
- ctx.strokeStyle = railColor;
113
- ctx.lineWidth = strokeWidth;
114
- ctx.stroke();
115
- //endregion
116
-
117
- //region 画进度圈
118
- ctx.beginPath();
119
- ctx.arc(centerX, centerY, radius, startAngle, startAngle + sweepAngle);
120
- ctx.strokeStyle = strokeColor;
121
- ctx.lineWidth = strokeWidth;
122
- ctx.lineCap = strokeLineCap;
123
- ctx.stroke();
124
- //endregion
125
-
126
- ctx.draw();
127
- };
128
- useEffect(function () {
129
- Taro.nextTick(function () {
130
- handleDraw();
131
- });
132
- }, [percent]);
133
- return /*#__PURE__*/React.createElement("div", {
134
- className: classNames("".concat(clsPrefix)),
135
- style: style
136
- }, /*#__PURE__*/React.createElement(Canvas, {
137
- style: style,
138
- canvasId: canvasRef.current
139
- }), showInfo && computedDiameter > 20 && /*#__PURE__*/React.createElement("div", {
140
- className: "".concat(clsPrefix, "-indicator")
141
- }, handleIndicator()));
142
- });
@@ -1,15 +0,0 @@
1
- import { Size } from "./types";
2
- import { FC } from "react";
3
- import { PercentPositionAlign, ProgressStatus } from "./types";
4
- type ProgressLineProps = {
5
- format?: (percent: number) => string;
6
- percent?: number;
7
- size?: Size;
8
- showInfo?: boolean;
9
- railColor?: string;
10
- strokeColor?: string;
11
- status?: ProgressStatus;
12
- percentPositionAlign?: PercentPositionAlign;
13
- };
14
- export declare const ProgressLine: FC<ProgressLineProps>;
15
- export {};
@@ -1,87 +0,0 @@
1
- import React from "react";
2
- import classNames from "classnames";
3
- import { exceptionColor, successColor } from "./types";
4
- import { CloseCircleFill, CheckCircleFill } from "@trionesdev/antd-mobile-icons-react";
5
- export var ProgressLine = function ProgressLine(_ref) {
6
- var format = _ref.format,
7
- _ref$percent = _ref.percent,
8
- percent = _ref$percent === void 0 ? 0 : _ref$percent,
9
- _ref$size = _ref.size,
10
- size = _ref$size === void 0 ? 'middle' : _ref$size,
11
- _ref$showInfo = _ref.showInfo,
12
- showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
13
- _ref$railColor = _ref.railColor,
14
- railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
15
- _ref$strokeColor = _ref.strokeColor,
16
- strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
17
- status = _ref.status,
18
- _ref$percentPositionA = _ref.percentPositionAlign,
19
- percentPositionAlign = _ref$percentPositionA === void 0 ? 'end' : _ref$percentPositionA;
20
- var clsPrefix = 'triones-antm-progress-line';
21
- var handleComputeLineHeight = function handleComputeLineHeight() {
22
- switch (size) {
23
- case 'small':
24
- return 6;
25
- case 'middle':
26
- return 8;
27
- case 'large':
28
- return 12;
29
- default:
30
- return size || 8;
31
- }
32
- };
33
- var handleComputeInfoHeight = function handleComputeInfoHeight() {
34
- var lineHeight = handleComputeLineHeight();
35
- if (lineHeight <= 8) {
36
- return 12;
37
- } else if (lineHeight <= 12) {
38
- return 14;
39
- } else {
40
- return 16;
41
- }
42
- };
43
- var handleIndicator = function handleIndicator() {
44
- if (format) {
45
- return /*#__PURE__*/React.createElement("div", null, format(percent));
46
- }
47
- if (status === 'exception') {
48
- return /*#__PURE__*/React.createElement(CloseCircleFill, {
49
- style: {
50
- color: exceptionColor,
51
- fontSize: handleComputeInfoHeight()
52
- }
53
- });
54
- }
55
- if (percent >= 100) {
56
- return /*#__PURE__*/React.createElement(CheckCircleFill, {
57
- style: {
58
- color: successColor,
59
- fontSize: handleComputeInfoHeight()
60
- }
61
- });
62
- }
63
- return /*#__PURE__*/React.createElement("div", {
64
- style: {
65
- fontSize: handleComputeInfoHeight()
66
- }
67
- }, percent, "%");
68
- };
69
- var info = /*#__PURE__*/React.createElement("div", {
70
- className: classNames("".concat(clsPrefix, "-indicator"))
71
- }, handleIndicator());
72
- return /*#__PURE__*/React.createElement("div", {
73
- className: classNames(clsPrefix)
74
- }, showInfo && percentPositionAlign === 'start' && info, /*#__PURE__*/React.createElement("div", {
75
- className: classNames("".concat(clsPrefix, "-rail")),
76
- style: {
77
- backgroundColor: railColor
78
- }
79
- }, /*#__PURE__*/React.createElement("div", {
80
- className: classNames("".concat(clsPrefix, "-track")),
81
- style: {
82
- width: "".concat(percent, "%"),
83
- backgroundColor: strokeColor,
84
- height: handleComputeLineHeight()
85
- }
86
- })), showInfo && percentPositionAlign === 'end' && info);
87
- };
@@ -1,33 +0,0 @@
1
- $progressLineCls: 'triones-antm-progress-line';
2
- $progressCircleCls: 'triones-antm-progress-circle';
3
-
4
- .#{$progressLineCls}{
5
- width: 100%;
6
- display: flex;
7
- align-items: center;
8
- gap: 4Px;
9
- &-rail{
10
- flex: 1 auto;
11
- border-radius: 90Px;
12
- }
13
- &-track{
14
- border-radius: 90Px;
15
- }
16
- &-indicator{}
17
- }
18
-
19
- .#{$progressCircleCls} {
20
- position: relative;
21
- &-indicator {
22
- position: absolute;
23
- inset-block-start: 50%;
24
- inset-inline-start: 0;
25
- width: 100%;
26
- margin: 0;
27
- padding: 0;
28
- line-height: 1;
29
- white-space: normal;
30
- text-align: center;
31
- transform: translatey(-50%);
32
- }
33
- }
@@ -1,6 +0,0 @@
1
- import { SizeType } from "@trionesdev/antd-mobile-base-react";
2
- export type Size = SizeType | number;
3
- export type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
4
- export type PercentPositionAlign = 'start' | 'end';
5
- export declare const successColor = "#53C31B";
6
- export declare const exceptionColor = "#FF4D4F";
@@ -1,2 +0,0 @@
1
- export var successColor = "#53C31B";
2
- export var exceptionColor = "#FF4D4F";