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

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.
Files changed (219) hide show
  1. package/dist/ActionSheet/ActionSheet.d.ts +25 -0
  2. package/dist/ActionSheet/ActionSheet.js +77 -0
  3. package/dist/ActionSheet/index.d.ts +1 -1
  4. package/dist/ActionSheet/index.js +1 -1
  5. package/dist/ActionSheet/style.scss +52 -0
  6. package/dist/Button/button.d.ts +2 -1
  7. package/dist/Button/button.js +1 -1
  8. package/dist/Button/style.scss +41 -39
  9. package/dist/Calendar/calendar-grid.d.ts +10 -9
  10. package/dist/Calendar/calendar-grid.js +41 -64
  11. package/dist/Calendar/calendar-header.d.ts +3 -2
  12. package/dist/Calendar/calendar-header.js +6 -6
  13. package/dist/Calendar/calendar-range.d.ts +4 -3
  14. package/dist/Calendar/calendar-range.js +12 -11
  15. package/dist/Calendar/calendar.d.ts +5 -4
  16. package/dist/Calendar/calendar.js +23 -14
  17. package/dist/Calendar/style.scss +4 -4
  18. package/dist/Calendar/touchable-calendar-grid.d.ts +6 -5
  19. package/dist/Calendar/touchable-calendar-grid.js +58 -50
  20. package/dist/CalendarDatetimePicker/CalendarDatetimePicker.d.ts +3 -2
  21. package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +14 -28
  22. package/dist/CalendarDatetimePicker/DateTimeSwitch.d.ts +3 -2
  23. package/dist/CalendarDatetimePicker/DateTimeSwitch.js +4 -3
  24. package/dist/CalendarDatetimePicker/demo/base.js +1 -1
  25. package/dist/CalendarDatetimePicker/style.scss +9 -9
  26. package/dist/CalendarDatetimePicker/types.d.ts +1 -1
  27. package/dist/CalendarDatetimePicker/types.js +1 -1
  28. package/dist/CalendarDatetimePickerCell/CalendarDatetimePickerCell.d.ts +11 -0
  29. package/dist/CalendarDatetimePickerCell/CalendarDatetimePickerCell.js +61 -0
  30. package/dist/{Mask → CalendarDatetimePickerCell}/demo/base.js +9 -15
  31. package/dist/CalendarDatetimePickerCell/index.d.ts +3 -0
  32. package/dist/CalendarDatetimePickerCell/index.js +2 -0
  33. package/dist/CalendarDatetimePickerCell/style.scss +10 -0
  34. package/dist/CalendarDatetimePickerCell/types.d.ts +1 -0
  35. package/dist/CalendarDatetimePickerCell/types.js +1 -0
  36. package/dist/CalendarPicker/calendar-picker.js +2 -2
  37. package/dist/CalendarPicker/calendar-range-picker.d.ts +4 -4
  38. package/dist/CalendarPicker/calendar-range-picker.js +11 -9
  39. package/dist/CalendarPicker/demo/base.js +6 -6
  40. package/dist/CalendarPicker/index.d.ts +2 -2
  41. package/dist/CalendarPicker/index.js +3 -3
  42. package/dist/CalendarPicker/style.scss +5 -5
  43. package/dist/CalendarPicker/types.d.ts +8 -7
  44. package/dist/CalendarPickerCell/CalendarPickerCell.d.ts +11 -0
  45. package/dist/CalendarPickerCell/CalendarPickerCell.js +54 -0
  46. package/dist/CalendarPickerCell/CalendarRangePickerCell.d.ts +11 -0
  47. package/dist/CalendarPickerCell/CalendarRangePickerCell.js +56 -0
  48. package/dist/CalendarPickerCell/demo/base.d.ts +3 -0
  49. package/dist/CalendarPickerCell/demo/base.js +31 -0
  50. package/dist/CalendarPickerCell/index.d.ts +8 -0
  51. package/dist/CalendarPickerCell/index.js +5 -0
  52. package/dist/CascaderPicker/cascader-picker.d.ts +27 -0
  53. package/dist/CascaderPicker/cascader-picker.js +90 -0
  54. package/dist/CascaderPicker/demo/base.js +1 -4
  55. package/dist/CascaderPicker/index.d.ts +1 -1
  56. package/dist/CascaderPicker/index.js +1 -1
  57. package/dist/CascaderPicker/style.scss +45 -0
  58. package/dist/CascaderPickerCell/CascaderPickerCell.d.ts +21 -0
  59. package/dist/CascaderPickerCell/CascaderPickerCell.js +70 -0
  60. package/dist/CascaderPickerCell/demo/base.js +71 -0
  61. package/dist/CascaderPickerCell/index.d.ts +3 -0
  62. package/dist/CascaderPickerCell/index.js +2 -0
  63. package/dist/CascaderPickerCell/style.scss +24 -0
  64. package/dist/Cell/demo/base.js +41 -2
  65. package/dist/Checkbox/demo/base.js +9 -4
  66. package/dist/Checkbox/demo/disabled.js +2 -1
  67. package/dist/DemoBlock/index.d.ts +6 -0
  68. package/dist/DemoBlock/index.js +9 -2
  69. package/dist/FetchPicker/FetchPicker.d.ts +113 -0
  70. package/dist/FetchPicker/FetchPicker.js +319 -0
  71. package/dist/FetchPicker/index.d.ts +4 -0
  72. package/dist/FetchPicker/index.js +3 -0
  73. package/dist/FetchPicker/styles.scss +118 -0
  74. package/dist/FloatButton/FloatButton.d.ts +21 -0
  75. package/dist/FloatButton/FloatButton.js +66 -0
  76. package/dist/FloatButton/FloatButtonGroup.d.ts +21 -0
  77. package/dist/FloatButton/FloatButtonGroup.js +120 -0
  78. package/dist/FloatButton/context.d.ts +13 -0
  79. package/dist/FloatButton/context.js +2 -0
  80. package/dist/FloatButton/demo/base.d.ts +3 -0
  81. package/dist/FloatButton/demo/base.js +10 -0
  82. package/dist/FloatButton/demo/group.d.ts +3 -0
  83. package/dist/FloatButton/demo/group.js +20 -0
  84. package/dist/FloatButton/demo/square.d.ts +3 -0
  85. package/dist/FloatButton/demo/square.js +12 -0
  86. package/dist/FloatButton/index.d.ts +10 -0
  87. package/dist/FloatButton/index.js +5 -0
  88. package/dist/FloatButton/style.scss +123 -0
  89. package/dist/Form/FormItem/form-item-content.d.ts +17 -0
  90. package/dist/Form/FormItem/form-item-content.js +39 -0
  91. package/dist/Form/FormItem/form-item-label.d.ts +13 -0
  92. package/dist/Form/FormItem/form-item-label.js +29 -0
  93. package/dist/Form/FormItem/form-item.d.ts +51 -0
  94. package/dist/Form/FormItem/form-item.js +74 -0
  95. package/dist/Form/FormItem/index.d.ts +5 -0
  96. package/dist/Form/FormItem/index.js +3 -0
  97. package/dist/Form/demo/input.js +7 -3
  98. package/dist/Form/demo/vertical.d.ts +3 -0
  99. package/dist/Form/demo/vertical.js +45 -0
  100. package/dist/Form/index.d.ts +9 -2
  101. package/dist/Form/index.js +5 -1
  102. package/dist/Form/style.scss +106 -0
  103. package/dist/FormCell/index.d.ts +3 -0
  104. package/dist/FormCell/index.js +2 -0
  105. package/dist/ImagesPreview/ImagesPreview.js +2 -2
  106. package/dist/ImagesWall/CameraModal.js +2 -2
  107. package/dist/ImagesWall/style.scss +4 -4
  108. package/dist/Input/base-input.d.ts +13 -0
  109. package/dist/Input/base-input.js +41 -0
  110. package/dist/Input/demo/base.js +113 -11
  111. package/dist/Input/index.d.ts +14 -2
  112. package/dist/Input/index.js +11 -1
  113. package/dist/Input/index.scss +240 -0
  114. package/dist/Input/input-affix-wrapper.d.ts +13 -0
  115. package/dist/Input/input-affix-wrapper.js +37 -0
  116. package/dist/Input/input-opt.d.ts +16 -0
  117. package/dist/Input/input-opt.js +87 -0
  118. package/dist/Input/input-password.d.ts +7 -0
  119. package/dist/Input/input-password.js +48 -0
  120. package/dist/Input/input.d.ts +20 -0
  121. package/dist/Input/input.js +66 -0
  122. package/dist/Input/textarea.d.ts +15 -0
  123. package/dist/Input/textarea.js +51 -0
  124. package/dist/Input/types.d.ts +3 -0
  125. package/dist/Input/types.js +2 -0
  126. package/dist/Loading/DotLoading.d.ts +1 -0
  127. package/dist/Loading/DotLoading.js +1 -0
  128. package/dist/Loading/SpinLoading.d.ts +1 -0
  129. package/dist/Loading/SpinLoading.js +1 -0
  130. package/dist/Loading/demo/base.d.ts +3 -0
  131. package/dist/{SpinLoading → Loading}/demo/base.js +8 -2
  132. package/dist/Loading/demo/dot-loading.d.ts +3 -0
  133. package/dist/Loading/demo/dot-loading.js +25 -0
  134. package/dist/Loading/index.d.ts +5 -0
  135. package/dist/Loading/index.js +3 -0
  136. package/dist/Overlay/Overlay.d.ts +16 -0
  137. package/dist/Overlay/Overlay.js +117 -0
  138. package/dist/Overlay/demo/base.d.ts +3 -0
  139. package/dist/Overlay/demo/base.js +27 -0
  140. package/dist/Overlay/index.d.ts +4 -0
  141. package/dist/Overlay/index.js +3 -0
  142. package/dist/Overlay/style.scss +20 -0
  143. package/dist/Picker/index.d.ts +1 -1
  144. package/dist/Picker/index.js +1 -1
  145. package/dist/Picker/picker.d.ts +20 -0
  146. package/dist/Picker/picker.js +94 -0
  147. package/dist/Picker/style.scss +44 -0
  148. package/dist/PickerView/index.d.ts +2 -1
  149. package/dist/PickerView/index.js +1 -1
  150. package/dist/PickerView/picker-view-column-item.d.ts +7 -0
  151. package/dist/PickerView/picker-view-column-item.js +11 -0
  152. package/dist/PickerView/picker-view-column.d.ts +10 -0
  153. package/dist/PickerView/picker-view-column.js +117 -0
  154. package/dist/PickerView/picker-view.d.ts +12 -0
  155. package/dist/PickerView/picker-view.js +60 -0
  156. package/dist/PickerView/style.scss +72 -0
  157. package/dist/PickerView/types.d.ts +4 -0
  158. package/dist/PickerView/types.js +1 -0
  159. package/dist/Popup/demo/base.js +107 -25
  160. package/dist/Popup/index.d.ts +2 -1
  161. package/dist/Popup/index.js +2 -1
  162. package/dist/Popup/popup.d.ts +31 -0
  163. package/dist/Popup/popup.js +87 -0
  164. package/dist/Popup/style.scss +129 -0
  165. package/dist/Progress/index.d.ts +1 -1
  166. package/dist/Progress/index.js +1 -1
  167. package/dist/Radio/demo/base.js +2 -2
  168. package/dist/ScrollView/index.d.ts +2 -1
  169. package/dist/ScrollView/index.js +1 -1
  170. package/dist/ScrollView/scroll-view.d.ts +4 -0
  171. package/dist/ScrollView/scroll-view.js +55 -0
  172. package/dist/ScrollView/style.scss +19 -0
  173. package/dist/ScrollView/types.d.ts +26 -0
  174. package/dist/ScrollView/types.js +1 -0
  175. package/dist/Segmented/demo/base.d.ts +3 -0
  176. package/dist/Segmented/demo/base.js +33 -0
  177. package/dist/Segmented/index.d.ts +3 -0
  178. package/dist/Segmented/index.js +2 -0
  179. package/dist/SideBar/index.d.ts +1 -1
  180. package/dist/SideBar/style.scss +6 -6
  181. package/dist/Skeleton/demo/base.d.ts +3 -0
  182. package/dist/Skeleton/demo/base.js +8 -0
  183. package/dist/Skeleton/index.d.ts +3 -0
  184. package/dist/Skeleton/index.js +2 -0
  185. package/dist/Stepper/demo/base.d.ts +3 -0
  186. package/dist/Stepper/demo/base.js +23 -0
  187. package/dist/Stepper/index.d.ts +3 -0
  188. package/dist/Stepper/index.js +2 -0
  189. package/dist/Swiper/style.scss +1 -1
  190. package/dist/Toast/toast-modal.js +4 -4
  191. package/dist/VerificationCodeInput/demo/base.js +2 -2
  192. package/dist/VerificationCodeInput/index.d.ts +2 -2
  193. package/dist/VerificationCodeInput/index.js +1 -1
  194. package/dist/VerificationCodeInput/style.scss +20 -0
  195. package/dist/VerificationCodeInput/verification-code-input.d.ts +24 -0
  196. package/dist/VerificationCodeInput/verification-code-input.js +99 -0
  197. package/dist/index.d.ts +33 -19
  198. package/dist/index.js +9 -2
  199. package/dist/types.d.ts +0 -8
  200. package/dist/types.js +0 -1
  201. package/dist/utils/dayjs.d.ts +4 -0
  202. package/dist/utils/dayjs.js +42 -0
  203. package/dist/utils/use-isomorphic-update-layout-effect.d.ts +1 -1
  204. package/package.json +11 -16
  205. package/dist/Mask/index.d.ts +0 -3
  206. package/dist/Mask/index.js +0 -2
  207. package/dist/Progress/Progress.d.ts +0 -37
  208. package/dist/Progress/Progress.js +0 -52
  209. package/dist/Progress/ProgressCircle.d.ts +0 -17
  210. package/dist/Progress/ProgressCircle.js +0 -148
  211. package/dist/Progress/ProgressLine.d.ts +0 -15
  212. package/dist/Progress/ProgressLine.js +0 -87
  213. package/dist/Progress/style.scss +0 -33
  214. package/dist/Progress/types.d.ts +0 -4
  215. package/dist/Progress/types.js +0 -2
  216. package/dist/SpinLoading/index.d.ts +0 -3
  217. package/dist/SpinLoading/index.js +0 -2
  218. /package/dist/{Mask → CalendarDatetimePickerCell}/demo/base.d.ts +0 -0
  219. /package/dist/{SpinLoading → CascaderPickerCell}/demo/base.d.ts +0 -0
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const useIsomorphicUpdateLayoutEffect: typeof import("react").useLayoutEffect | typeof import("react").useEffect;
2
+ export declare const useIsomorphicUpdateLayoutEffect: typeof import("react").useEffect | typeof import("react").useLayoutEffect;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trionesdev/antd-mobile-react",
3
- "version": "0.0.2-beta.2",
3
+ "version": "0.0.2-beta.21",
4
4
  "description": "antd mobile react ",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
18
18
  "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
19
19
  "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
20
20
  "prepublishOnly": "father doctor && npm run build",
21
- "publish": "npm publish --registry=https://registry.npmjs.org/",
21
+ "publish": "npm publish --tag latest --registry=https://registry.npmjs.org/",
22
22
  "publishOnly": "npm publish --ignore-scripts --registry=https://registry.npmjs.org/"
23
23
  },
24
24
  "authors": [
@@ -64,7 +64,7 @@
64
64
  "@commitlint/cli": "^19.6.1",
65
65
  "@commitlint/config-conventional": "^19.6.0",
66
66
  "@trionesdev/antd-mobile-base-react": "workspace:*",
67
- "@trionesdev/antd-mobile-icons-react": "workspace:*",
67
+ "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.21",
68
68
  "@types/crypto-js": "^4.2.2",
69
69
  "@types/lodash-es": "^4.17.12",
70
70
  "@types/react": "^18.0.0",
@@ -73,13 +73,13 @@
73
73
  "@umijs/lint": "^4.0.0",
74
74
  "classnames": "^2.5.1",
75
75
  "cross-env": "^7.0.3",
76
- "dumi": "2.4.12",
76
+ "dumi": "2.4.23",
77
77
  "dumi-theme-mobile": "^2.3.5",
78
78
  "eslint": "^8.23.0",
79
- "father": "^4.5.1",
79
+ "father": "^4.6.19",
80
80
  "husky": "^8.0.1",
81
81
  "lint-staged": "^13.0.3",
82
- "lodash-es": "^4.17.21",
82
+ "lodash-es": "^4.17.23",
83
83
  "prettier": "^3.4.2",
84
84
  "prettier-plugin-organize-imports": "^4.1.0",
85
85
  "prettier-plugin-packagejson": "^2.5.6",
@@ -89,16 +89,11 @@
89
89
  "stylelint": "^16.12.0"
90
90
  },
91
91
  "dependencies": {
92
- "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.2",
93
- "ahooks": "^3.8.4",
92
+ "@trionesdev/antd-mobile-base-react": "0.0.2-beta.21",
93
+ "ahooks": "^3.9.7",
94
94
  "crypto-js": "^4.2.0",
95
- "rc-field-form": "^2.7.0",
96
- "rc-util": "^5.44.3",
97
- "runes2": "^1.1.4"
98
- },
99
- "optionalDependencies": {
100
- "@trionesdev/antd-mobile-base-react": "workspace:*",
101
- "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.2"
95
+ "dayjs": "^1.11.20",
96
+ "rc-field-form": "^2.7.1"
102
97
  },
103
- "gitHead": "750643002ea1b4b0092d84ec95e8d135b9b83750"
98
+ "gitHead": "f7df86844499f4352c8a55b3b8df312326dff891"
104
99
  }
@@ -1,3 +0,0 @@
1
- import { Mask, MaskProps } from "@trionesdev/antd-mobile-base-react";
2
- export type { MaskProps };
3
- export default Mask;
@@ -1,2 +0,0 @@
1
- import { Mask } from "@trionesdev/antd-mobile-base-react";
2
- export default Mask;
@@ -1,37 +0,0 @@
1
- import { FC } from "react";
2
- import "./style.scss";
3
- import { PercentPositionAlign, ProgressStatus } from "./types";
4
- import { Size } from "@trionesdev/antd-mobile-base-react";
5
- export type ProgressProps = {
6
- /**
7
- * @description 内容的模板函数
8
- * @default percent => `${percent}%`
9
- */
10
- format?: (percent: number) => string;
11
- type?: 'line' | 'circle';
12
- /**
13
- * @description 百分比
14
- * @default 0
15
- */
16
- percent?: number;
17
- size?: Size;
18
- /**
19
- * @description 是否显示进度数值或状态图标
20
- * @default true
21
- */
22
- showInfo?: boolean;
23
- /**
24
- * @description 未完成的分段的颜色
25
- */
26
- railColor?: string;
27
- /**
28
- * @description 进度条的色彩
29
- */
30
- strokeColor?: string;
31
- status?: ProgressStatus;
32
- /**
33
- * @description 进度数值位置
34
- */
35
- percentPositionAlign?: PercentPositionAlign;
36
- };
37
- export declare const Progress: FC<ProgressProps>;
@@ -1,52 +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
- export var Progress = function Progress(_ref) {
7
- var format = _ref.format,
8
- _ref$type = _ref.type,
9
- type = _ref$type === void 0 ? 'line' : _ref$type,
10
- _ref$percent = _ref.percent,
11
- percent = _ref$percent === void 0 ? 0 : _ref$percent,
12
- _ref$size = _ref.size,
13
- size = _ref$size === void 0 ? 'middle' : _ref$size,
14
- _ref$showInfo = _ref.showInfo,
15
- showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
16
- _ref$railColor = _ref.railColor,
17
- railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
18
- _ref$strokeColor = _ref.strokeColor,
19
- strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
20
- status = _ref.status,
21
- percentPositionAlign = _ref.percentPositionAlign;
22
- var handleComputedStrokeColor = function handleComputedStrokeColor() {
23
- if (status === 'exception') {
24
- return exceptionColor;
25
- }
26
- if (percent >= 100) {
27
- return successColor;
28
- }
29
- return strokeColor;
30
- };
31
- if (type === 'line') {
32
- return /*#__PURE__*/React.createElement(ProgressLine, {
33
- format: format,
34
- percent: percent,
35
- size: size,
36
- railColor: railColor,
37
- strokeColor: handleComputedStrokeColor(),
38
- status: status,
39
- showInfo: showInfo,
40
- percentPositionAlign: percentPositionAlign
41
- });
42
- }
43
- return /*#__PURE__*/React.createElement(ProgressCircle, {
44
- format: format,
45
- percent: percent,
46
- size: size,
47
- railColor: railColor,
48
- strokeColor: handleComputedStrokeColor(),
49
- showInfo: showInfo,
50
- status: status
51
- });
52
- };
@@ -1,17 +0,0 @@
1
- import { FC } from "react";
2
- import { Size } from "@trionesdev/antd-mobile-base-react";
3
- import './style.scss';
4
- import { ProgressStatus } from "./types";
5
- type ProcessCircleProps = {
6
- format?: (percent: number) => string;
7
- percent?: number;
8
- strokeWidth?: number;
9
- size?: Size;
10
- showInfo?: boolean;
11
- railColor?: string;
12
- strokeColor?: string;
13
- strokeLineCap?: 'butt' | 'round' | 'square';
14
- status?: ProgressStatus;
15
- };
16
- export declare const ProgressCircle: FC<ProcessCircleProps>;
17
- export {};
@@ -1,148 +0,0 @@
1
- import React, { memo, useEffect, useMemo, useRef } from "react";
2
- import classNames from "classnames";
3
- import "./style.scss";
4
- import { CheckOutline, CloseOutline } from "@trionesdev/antd-mobile-icons-react";
5
- import { exceptionColor, successColor } from "./types";
6
- export var ProgressCircle = /*#__PURE__*/memo(function (_ref) {
7
- var format = _ref.format,
8
- _ref$percent = _ref.percent,
9
- percent = _ref$percent === void 0 ? 0 : _ref$percent,
10
- _ref$strokeWidth = _ref.strokeWidth,
11
- strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
12
- _ref$size = _ref.size,
13
- size = _ref$size === void 0 ? 'middle' : _ref$size,
14
- _ref$showInfo = _ref.showInfo,
15
- showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
16
- _ref$railColor = _ref.railColor,
17
- railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
18
- _ref$strokeColor = _ref.strokeColor,
19
- strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
20
- _ref$strokeLineCap = _ref.strokeLineCap,
21
- strokeLineCap = _ref$strokeLineCap === void 0 ? 'round' : _ref$strokeLineCap,
22
- status = _ref.status;
23
- var clsPrefix = 'triones-antm-progress-circle';
24
- var canvasRef = useRef();
25
- var computedWidth = useMemo(function () {
26
- switch (size) {
27
- case 'small':
28
- return 50;
29
- case 'middle':
30
- return 100;
31
- case 'large':
32
- return 150;
33
- default:
34
- return size || 50;
35
- }
36
- }, [size]);
37
- var computedHeight = useMemo(function () {
38
- switch (size) {
39
- case 'small':
40
- return 50;
41
- case 'middle':
42
- return 100;
43
- case 'large':
44
- return 150;
45
- default:
46
- return 50;
47
- }
48
- }, [size]);
49
- var style = {
50
- width: computedWidth,
51
- height: computedHeight
52
- };
53
- var computedSize = function computedSize() {
54
- var iconSize = (computedWidth - strokeWidth) / 2 / 3;
55
- if (iconSize < 24) {
56
- return 24;
57
- }
58
- return iconSize;
59
- };
60
- var handleIndicator = function handleIndicator() {
61
- var iconSize = computedSize();
62
- var indicatorColor = '#333';
63
- if (status === 'exception') {
64
- indicatorColor = exceptionColor;
65
- }
66
- if (percent >= 100) {
67
- indicatorColor = successColor;
68
- }
69
- if (format) {
70
- return /*#__PURE__*/React.createElement("div", {
71
- style: {
72
- color: indicatorColor,
73
- fontSize: iconSize
74
- }
75
- }, format(percent));
76
- }
77
- if (status === 'exception') {
78
- return /*#__PURE__*/React.createElement(CloseOutline, {
79
- style: {
80
- color: indicatorColor,
81
- fontSize: iconSize
82
- }
83
- });
84
- }
85
- if (percent >= 100) {
86
- return /*#__PURE__*/React.createElement(CheckOutline, {
87
- style: {
88
- color: indicatorColor,
89
- fontSize: iconSize
90
- }
91
- });
92
- }
93
- return /*#__PURE__*/React.createElement("div", {
94
- style: {
95
- color: indicatorColor,
96
- fontSize: iconSize
97
- }
98
- }, percent, "%");
99
- };
100
- var handleDraw = function handleDraw() {
101
- var width = computedWidth;
102
- var height = computedHeight;
103
- var centerX = width / 2;
104
- var centerY = height / 2;
105
- var radius = (Math.min(width, height) - strokeWidth) / 2;
106
- console.log(centerX, centerY, radius);
107
- var sweepAngle = (percent ? percent / 100 : 0) * 2 * Math.PI;
108
- var startAngle = -Math.PI / 2; // 从顶部开始
109
-
110
- var ctx = canvasRef.current.getContext('2d');
111
- ctx.width = width;
112
- ctx.height = height;
113
- ctx.clearRect(0, 0, computedWidth, computedHeight);
114
-
115
- //region 画背景圈
116
- ctx.beginPath();
117
- ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
118
- ctx.strokeStyle = railColor;
119
- ctx.lineWidth = strokeWidth;
120
- ctx.stroke();
121
- //endregion
122
-
123
- //region 画进度圈
124
- ctx.beginPath();
125
- ctx.arc(centerX, centerY, radius, startAngle, startAngle + sweepAngle);
126
- ctx.strokeStyle = strokeColor;
127
- ctx.lineWidth = strokeWidth;
128
- ctx.lineCap = strokeLineCap;
129
- ctx.stroke();
130
- //endregion
131
- };
132
- useEffect(function () {
133
- console.log(canvasRef.current);
134
- if (canvasRef.current) {
135
- handleDraw();
136
- }
137
- }, [percent, canvasRef.current]);
138
- return /*#__PURE__*/React.createElement("div", {
139
- className: classNames("".concat(clsPrefix)),
140
- style: style
141
- }, /*#__PURE__*/React.createElement("canvas", {
142
- ref: canvasRef,
143
- width: computedWidth,
144
- height: computedHeight
145
- }), showInfo && computedWidth > 20 && /*#__PURE__*/React.createElement("div", {
146
- className: "".concat(clsPrefix, "-indicator")
147
- }, handleIndicator()));
148
- });
@@ -1,15 +0,0 @@
1
- import { Size } from "@trionesdev/antd-mobile-base-react";
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,4 +0,0 @@
1
- export type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
2
- export type PercentPositionAlign = 'start' | 'end';
3
- export declare const successColor = "#53C31B";
4
- export declare const exceptionColor = "#FF4D4F";
@@ -1,2 +0,0 @@
1
- export var successColor = "#53C31B";
2
- export var exceptionColor = "#FF4D4F";
@@ -1,3 +0,0 @@
1
- import { SpinLoading, SpinLoadingProps } from "@trionesdev/antd-mobile-base-react";
2
- export type { SpinLoadingProps };
3
- export default SpinLoading;
@@ -1,2 +0,0 @@
1
- import { SpinLoading } from "@trionesdev/antd-mobile-base-react";
2
- export default SpinLoading;