taro-ui 3.3.3 → 3.4.0

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 (312) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +85 -0
  3. package/dist/common/utils.d.ts +2 -1
  4. package/dist/common/utils.js +3 -0
  5. package/dist/common/utils.js.map +1 -1
  6. package/dist/components/accordion/index.d.ts +16 -13
  7. package/dist/components/accordion/index.js +77 -97
  8. package/dist/components/accordion/index.js.map +1 -1
  9. package/dist/components/action-sheet/body/index.d.ts +2 -4
  10. package/dist/components/action-sheet/body/index.js +8 -6
  11. package/dist/components/action-sheet/body/index.js.map +1 -1
  12. package/dist/components/action-sheet/body/item/index.d.ts +7 -7
  13. package/dist/components/action-sheet/body/item/index.js +14 -14
  14. package/dist/components/action-sheet/body/item/index.js.map +1 -1
  15. package/dist/components/action-sheet/footer/index.d.ts +7 -7
  16. package/dist/components/action-sheet/footer/index.js +14 -17
  17. package/dist/components/action-sheet/footer/index.js.map +1 -1
  18. package/dist/components/action-sheet/header/index.d.ts +2 -4
  19. package/dist/components/action-sheet/header/index.js +8 -9
  20. package/dist/components/action-sheet/header/index.js.map +1 -1
  21. package/dist/components/action-sheet/index.d.ts +12 -13
  22. package/dist/components/action-sheet/index.js +53 -57
  23. package/dist/components/action-sheet/index.js.map +1 -1
  24. package/dist/components/activity-indicator/index.d.ts +12 -6
  25. package/dist/components/activity-indicator/index.js +19 -22
  26. package/dist/components/activity-indicator/index.js.map +1 -1
  27. package/dist/components/avatar/index.d.ts +14 -8
  28. package/dist/components/avatar/index.js +36 -43
  29. package/dist/components/avatar/index.js.map +1 -1
  30. package/dist/components/badge/index.d.ts +11 -8
  31. package/dist/components/badge/index.js +18 -34
  32. package/dist/components/badge/index.js.map +1 -1
  33. package/dist/components/button/index.d.ts +29 -14
  34. package/dist/components/button/index.js +97 -112
  35. package/dist/components/button/index.js.map +1 -1
  36. package/dist/components/calendar/body/index.d.ts +3 -26
  37. package/dist/components/calendar/body/index.js +215 -235
  38. package/dist/components/calendar/body/index.js.map +1 -1
  39. package/dist/components/calendar/controller/index.d.ts +3 -5
  40. package/dist/components/calendar/controller/index.js +47 -43
  41. package/dist/components/calendar/controller/index.js.map +1 -1
  42. package/dist/components/calendar/index.d.ts +3 -20
  43. package/dist/components/calendar/index.js +219 -201
  44. package/dist/components/calendar/index.js.map +1 -1
  45. package/dist/components/calendar/ui/date-list/index.d.ts +2 -6
  46. package/dist/components/calendar/ui/date-list/index.js +36 -41
  47. package/dist/components/calendar/ui/date-list/index.js.map +1 -1
  48. package/dist/components/calendar/ui/day-list/index.d.ts +2 -4
  49. package/dist/components/calendar/ui/day-list/index.js +6 -5
  50. package/dist/components/calendar/ui/day-list/index.js.map +1 -1
  51. package/dist/components/card/index.d.ts +15 -7
  52. package/dist/components/card/index.js +42 -43
  53. package/dist/components/card/index.js.map +1 -1
  54. package/dist/components/checkbox/index.d.ts +11 -7
  55. package/dist/components/checkbox/index.js +30 -35
  56. package/dist/components/checkbox/index.js.map +1 -1
  57. package/dist/components/config-provider/context.d.ts +6 -0
  58. package/dist/components/config-provider/context.js +13 -0
  59. package/dist/components/config-provider/context.js.map +1 -0
  60. package/dist/components/config-provider/index.d.ts +7 -0
  61. package/dist/components/config-provider/index.js +15 -0
  62. package/dist/components/config-provider/index.js.map +1 -0
  63. package/dist/components/countdown/index.d.ts +19 -19
  64. package/dist/components/countdown/index.js +183 -118
  65. package/dist/components/countdown/index.js.map +1 -1
  66. package/dist/components/countdown/item/index.d.ts +8 -7
  67. package/dist/components/countdown/item/index.js +10 -13
  68. package/dist/components/countdown/item/index.js.map +1 -1
  69. package/dist/components/curtain/index.d.ts +11 -8
  70. package/dist/components/curtain/index.js +36 -45
  71. package/dist/components/curtain/index.js.map +1 -1
  72. package/dist/components/divider/index.d.ts +13 -6
  73. package/dist/components/divider/index.js +29 -38
  74. package/dist/components/divider/index.js.map +1 -1
  75. package/dist/components/drawer/index.d.ts +13 -15
  76. package/dist/components/drawer/index.js +100 -93
  77. package/dist/components/drawer/index.js.map +1 -1
  78. package/dist/components/fab/index.d.ts +8 -7
  79. package/dist/components/fab/index.js +16 -16
  80. package/dist/components/fab/index.js.map +1 -1
  81. package/dist/components/flex/index.d.ts +11 -5
  82. package/dist/components/flex/index.js +17 -18
  83. package/dist/components/flex/index.js.map +1 -1
  84. package/dist/components/flex/item/index.d.ts +11 -5
  85. package/dist/components/flex/item/index.js +17 -18
  86. package/dist/components/flex/item/index.js.map +1 -1
  87. package/dist/components/float-layout/index.d.ts +20 -12
  88. package/dist/components/float-layout/index.js +56 -72
  89. package/dist/components/float-layout/index.js.map +1 -1
  90. package/dist/components/form/index.d.ts +11 -8
  91. package/dist/components/form/index.js +28 -28
  92. package/dist/components/form/index.js.map +1 -1
  93. package/dist/components/grid/index.d.ts +22 -7
  94. package/dist/components/grid/index.js +61 -66
  95. package/dist/components/grid/index.js.map +1 -1
  96. package/dist/components/icon/index.d.ts +13 -7
  97. package/dist/components/icon/index.js +24 -34
  98. package/dist/components/icon/index.js.map +1 -1
  99. package/dist/components/image-picker/index.d.ts +19 -9
  100. package/dist/components/image-picker/index.js +83 -102
  101. package/dist/components/image-picker/index.js.map +1 -1
  102. package/dist/components/indexes/index.d.ts +16 -28
  103. package/dist/components/indexes/index.js +198 -209
  104. package/dist/components/indexes/index.js.map +1 -1
  105. package/dist/components/input/index.d.ts +37 -15
  106. package/dist/components/input/index.js +152 -161
  107. package/dist/components/input/index.js.map +1 -1
  108. package/dist/components/input-number/index.d.ts +20 -11
  109. package/dist/components/input-number/index.js +107 -126
  110. package/dist/components/input-number/index.js.map +1 -1
  111. package/dist/components/list/index.d.ts +7 -6
  112. package/dist/components/list/index.js +15 -15
  113. package/dist/components/list/index.js.map +1 -1
  114. package/dist/components/list/item/index.d.ts +27 -9
  115. package/dist/components/list/item/index.js +89 -117
  116. package/dist/components/list/item/index.js.map +1 -1
  117. package/dist/components/load-more/index.d.ts +15 -7
  118. package/dist/components/load-more/index.js +29 -50
  119. package/dist/components/load-more/index.js.map +1 -1
  120. package/dist/components/loading/index.d.ts +8 -7
  121. package/dist/components/loading/index.js +14 -20
  122. package/dist/components/loading/index.js.map +1 -1
  123. package/dist/components/message/index.d.ts +9 -14
  124. package/dist/components/message/index.js +45 -59
  125. package/dist/components/message/index.js.map +1 -1
  126. package/dist/components/modal/action/index.d.ts +7 -6
  127. package/dist/components/modal/action/index.js +15 -15
  128. package/dist/components/modal/action/index.js.map +1 -1
  129. package/dist/components/modal/content/index.d.ts +2 -4
  130. package/dist/components/modal/content/index.js +8 -6
  131. package/dist/components/modal/content/index.js.map +1 -1
  132. package/dist/components/modal/header/index.d.ts +2 -4
  133. package/dist/components/modal/header/index.js +8 -6
  134. package/dist/components/modal/header/index.js.map +1 -1
  135. package/dist/components/modal/index.d.ts +16 -14
  136. package/dist/components/modal/index.js +63 -77
  137. package/dist/components/modal/index.js.map +1 -1
  138. package/dist/components/nav-bar/index.d.ts +20 -10
  139. package/dist/components/nav-bar/index.js +146 -162
  140. package/dist/components/nav-bar/index.js.map +1 -1
  141. package/dist/components/noticebar/index.d.ts +17 -15
  142. package/dist/components/noticebar/index.js +115 -128
  143. package/dist/components/noticebar/index.js.map +1 -1
  144. package/dist/components/pagination/index.d.ts +13 -11
  145. package/dist/components/pagination/index.js +64 -120
  146. package/dist/components/pagination/index.js.map +1 -1
  147. package/dist/components/progress/index.d.ts +11 -5
  148. package/dist/components/progress/index.js +39 -36
  149. package/dist/components/progress/index.js.map +1 -1
  150. package/dist/components/radio/index.d.ts +11 -7
  151. package/dist/components/radio/index.js +29 -33
  152. package/dist/components/radio/index.js.map +1 -1
  153. package/dist/components/range/index.d.ts +19 -21
  154. package/dist/components/range/index.js +146 -153
  155. package/dist/components/range/index.js.map +1 -1
  156. package/dist/components/rate/index.d.ts +13 -7
  157. package/dist/components/rate/index.js +47 -62
  158. package/dist/components/rate/index.js.map +1 -1
  159. package/dist/components/search-bar/index.d.ts +23 -15
  160. package/dist/components/search-bar/index.js +120 -146
  161. package/dist/components/search-bar/index.js.map +1 -1
  162. package/dist/components/segmented-control/index.d.ts +14 -7
  163. package/dist/components/segmented-control/index.js +52 -66
  164. package/dist/components/segmented-control/index.js.map +1 -1
  165. package/dist/components/slider/index.d.ts +21 -12
  166. package/dist/components/slider/index.js +66 -90
  167. package/dist/components/slider/index.js.map +1 -1
  168. package/dist/components/steps/index.d.ts +11 -7
  169. package/dist/components/steps/index.js +43 -48
  170. package/dist/components/steps/index.js.map +1 -1
  171. package/dist/components/swipe-action/index.d.ts +12 -25
  172. package/dist/components/swipe-action/index.js +118 -115
  173. package/dist/components/swipe-action/index.js.map +1 -1
  174. package/dist/components/swipe-action/options/index.d.ts +2 -4
  175. package/dist/components/swipe-action/options/index.js +18 -17
  176. package/dist/components/swipe-action/options/index.js.map +1 -1
  177. package/dist/components/switch/index.d.ts +14 -7
  178. package/dist/components/switch/index.js +36 -41
  179. package/dist/components/switch/index.js.map +1 -1
  180. package/dist/components/tab-bar/index.d.ts +17 -7
  181. package/dist/components/tab-bar/index.js +108 -135
  182. package/dist/components/tab-bar/index.js.map +1 -1
  183. package/dist/components/tabs/index.d.ts +17 -23
  184. package/dist/components/tabs/index.js +185 -174
  185. package/dist/components/tabs/index.js.map +1 -1
  186. package/dist/components/tabs-pane/index.d.ts +11 -6
  187. package/dist/components/tabs-pane/index.js +26 -28
  188. package/dist/components/tabs-pane/index.js.map +1 -1
  189. package/dist/components/tag/index.d.ts +14 -7
  190. package/dist/components/tag/index.js +31 -40
  191. package/dist/components/tag/index.js.map +1 -1
  192. package/dist/components/textarea/index.d.ts +29 -11
  193. package/dist/components/textarea/index.js +72 -92
  194. package/dist/components/textarea/index.js.map +1 -1
  195. package/dist/components/timeline/index.d.ts +9 -6
  196. package/dist/components/timeline/index.js +50 -56
  197. package/dist/components/timeline/index.js.map +1 -1
  198. package/dist/components/toast/img.json +3 -6
  199. package/dist/components/toast/index.d.ts +16 -15
  200. package/dist/components/toast/index.js +85 -94
  201. package/dist/components/toast/index.js.map +1 -1
  202. package/dist/hooks/useComponentLocale.d.ts +2 -0
  203. package/dist/hooks/useComponentLocale.js +12 -0
  204. package/dist/hooks/useComponentLocale.js.map +1 -0
  205. package/dist/index.d.ts +3 -0
  206. package/dist/index.esm.js +4006 -4404
  207. package/dist/index.esm.js.map +1 -1
  208. package/dist/index.js +4032 -4434
  209. package/dist/index.js.map +1 -1
  210. package/dist/locale/en_US.d.ts +3 -0
  211. package/dist/locale/en_US.js +34 -0
  212. package/dist/locale/en_US.js.map +1 -0
  213. package/dist/locale/index.d.ts +4 -0
  214. package/dist/locale/index.js +10 -0
  215. package/dist/locale/index.js.map +1 -0
  216. package/dist/locale/types.d.ts +34 -0
  217. package/dist/locale/types.js +1 -0
  218. package/dist/locale/types.js.map +1 -0
  219. package/dist/locale/zh_CN.d.ts +3 -0
  220. package/dist/locale/zh_CN.js +34 -0
  221. package/dist/locale/zh_CN.js.map +1 -0
  222. package/dist/style/components/avatar.scss +1 -1
  223. package/dist/style/components/badge.scss +7 -2
  224. package/dist/style/components/calendar.scss +1 -1
  225. package/dist/style/components/countdown.scss +2 -1
  226. package/dist/style/components/flex.scss +1 -1
  227. package/dist/style/components/grid.scss +2 -2
  228. package/dist/style/components/icon.scss +302 -101
  229. package/dist/style/components/input.scss +2 -2
  230. package/dist/style/components/progress.scss +1 -1
  231. package/dist/style/components/search-bar.scss +1 -1
  232. package/dist/style/components/steps.scss +2 -2
  233. package/dist/style/components/tabs.scss +1 -1
  234. package/dist/style/components/tag.scss +1 -1
  235. package/dist/style/components/timeline.scss +1 -1
  236. package/dist/style/components/toast.scss +7 -3
  237. package/dist/style/index.css +176 -176
  238. package/dist/style/index.css.map +1 -1
  239. package/dist/style/mixins/libs/hairline.scss +4 -19
  240. package/dist/style/mixins/libs/shade.scss +3 -6
  241. package/dist/style/mixins/libs/tint.scss +4 -7
  242. package/dist/style/themes/purple.scss +15 -15
  243. package/dist/style/themes/red.scss +16 -13
  244. package/dist/style/variables/default.scss +69 -73
  245. package/package.json +5 -3
  246. package/rn/components/accordion/index.tsx +2 -9
  247. package/rn/components/action-sheet/body/index.tsx +1 -3
  248. package/rn/components/action-sheet/body/item/index.tsx +1 -3
  249. package/rn/components/action-sheet/footer/index.tsx +1 -3
  250. package/rn/components/action-sheet/header/index.tsx +1 -3
  251. package/rn/components/activity-indicator/index.tsx +1 -3
  252. package/rn/components/avatar/index.tsx +5 -5
  253. package/rn/components/calendar/controller/index.tsx +2 -7
  254. package/rn/components/card/index.tsx +4 -4
  255. package/rn/components/countdown/index.scss +5 -4
  256. package/rn/components/countdown/item/index.tsx +1 -3
  257. package/rn/components/curtain/index.tsx +5 -5
  258. package/rn/components/flex/index.scss +2 -2
  259. package/rn/components/flex/item/index.scss +2 -2
  260. package/rn/components/grid/index.tsx +15 -15
  261. package/rn/components/icon/index.tsx +4 -4
  262. package/rn/components/image-picker/index.tsx +7 -7
  263. package/rn/components/pagination/index.tsx +7 -7
  264. package/rn/components/progress/index.tsx +5 -5
  265. package/rn/components/radio/index.tsx +7 -7
  266. package/rn/components/rate/index.tsx +4 -4
  267. package/rn/components/segmented-control/index.tsx +8 -8
  268. package/rn/components/slider/index.tsx +9 -9
  269. package/rn/components/steps/index.tsx +8 -8
  270. package/rn/components/swipe-action/options/index.tsx +1 -3
  271. package/rn/components/switch/index.tsx +2 -9
  272. package/rn/components/toast/img.json +3 -6
  273. package/rn/components/toast/index.tsx +8 -8
  274. package/rn/style/components/accordion.scss +1 -1
  275. package/rn/style/components/action-sheet.scss +1 -1
  276. package/rn/style/components/avatar.scss +1 -1
  277. package/rn/style/components/badge.scss +8 -3
  278. package/rn/style/components/button.scss +1 -1
  279. package/rn/style/components/calendar.scss +1 -1
  280. package/rn/style/components/checkbox.scss +1 -1
  281. package/rn/style/components/curtain.scss +1 -1
  282. package/rn/style/components/fab.scss +1 -4
  283. package/rn/style/components/flex.scss +1 -1
  284. package/rn/style/components/grid.scss +2 -6
  285. package/rn/style/components/icon.scss +302 -101
  286. package/rn/style/components/index.scss +41 -41
  287. package/rn/style/components/input.scss +1 -1
  288. package/rn/style/components/list.scss +2 -4
  289. package/rn/style/components/loading.scss +4 -4
  290. package/rn/style/components/message.scss +1 -1
  291. package/rn/style/components/modal.scss +0 -2
  292. package/rn/style/components/nav-bar.scss +3 -3
  293. package/rn/style/components/noticebar.scss +0 -4
  294. package/rn/style/components/progress.scss +1 -1
  295. package/rn/style/components/radio.scss +2 -2
  296. package/rn/style/components/range.scss +1 -1
  297. package/rn/style/components/search-bar.scss +1 -1
  298. package/rn/style/components/segmented-control.scss +4 -1
  299. package/rn/style/components/slider.scss +0 -1
  300. package/rn/style/components/steps.scss +3 -3
  301. package/rn/style/components/switch.scss +0 -1
  302. package/rn/style/components/tabs.scss +2 -2
  303. package/rn/style/components/tag.scss +1 -1
  304. package/rn/style/components/timeline.scss +0 -2
  305. package/rn/style/components/toast.scss +5 -2
  306. package/rn/style/index.scss +1 -1
  307. package/rn/style/mixins/libs/hairline.scss +4 -22
  308. package/rn/style/mixins/libs/shade.scss +1 -4
  309. package/rn/style/mixins/libs/tint.scss +2 -5
  310. package/rn/style/themes/purple.scss +15 -15
  311. package/rn/style/themes/red.scss +16 -13
  312. package/rn/style/variables/default.scss +69 -73
@@ -1,64 +1,57 @@
1
1
  import classNames from "classnames";
2
2
  import PropTypes from "prop-types";
3
- import React from "react";
3
+ import React, { useCallback, useEffect, useRef, useState } from "react";
4
4
  import { Text, View } from "@tarojs/components";
5
5
  import Taro from "@tarojs/taro";
6
- class AtNoticebar extends React.Component {
7
- constructor(props) {
8
- super(props);
9
- const animElemId = `J_${Math.ceil(Math.random() * 1e6).toString(36)}`;
10
- this.state = {
11
- show: true,
12
- animElemId,
13
- animationData: {
14
- actions: [{}]
15
- },
16
- dura: 0,
17
- isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
18
- isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY,
19
- isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
20
- };
21
- }
22
- onClose(event) {
23
- this.setState({
24
- show: false
25
- });
26
- this.props.onClose && this.props.onClose(event);
27
- }
28
- onGotoMore(event) {
29
- this.props.onGotoMore && this.props.onGotoMore(event);
30
- }
31
- UNSAFE_componentWillReceiveProps() {
32
- if (!this.timeout) {
33
- this.interval && clearInterval(this.interval);
34
- this.initAnimation();
35
- }
36
- }
37
- componentDidMount() {
38
- if (!this.props.marquee) return;
39
- this.initAnimation();
40
- }
41
- initAnimation() {
42
- const { isWEAPP, isALIPAY } = this.state;
43
- this.timeout = setTimeout(() => {
44
- this.timeout = null;
45
- if (this.state.isWEB) {
46
- const { speed = 100 } = this.props;
47
- const elem = document.querySelector(`.${this.state.animElemId}`);
6
+ import { useComponentLocale } from "../../hooks/useComponentLocale";
7
+ function AtNoticebar({
8
+ close = false,
9
+ single = false,
10
+ marquee = false,
11
+ speed = 100,
12
+ moreText,
13
+ showMore = false,
14
+ icon = "",
15
+ customStyle = {},
16
+ className,
17
+ children,
18
+ onClose,
19
+ onGotoMore
20
+ }) {
21
+ const locale = useComponentLocale("NoticeBar");
22
+ const resolvedMoreText = moreText != null ? moreText : locale.moreText;
23
+ const [show, setShow] = useState(true);
24
+ const [animElemId] = useState(
25
+ () => `J_${Math.ceil(Math.random() * 1e6).toString(36)}`
26
+ );
27
+ const [animationData, setAnimationData] = useState({
28
+ actions: [{}]
29
+ });
30
+ const [dura, setDura] = useState(0);
31
+ const isWEAPP = Taro.getEnv() === Taro.ENV_TYPE.WEAPP;
32
+ const isALIPAY = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY;
33
+ const isWEB = Taro.getEnv() === Taro.ENV_TYPE.WEB;
34
+ const timeoutRef = useRef(null);
35
+ const intervalRef = useRef(null);
36
+ const animElemIdRef = useRef(animElemId);
37
+ const initAnimation = useCallback(() => {
38
+ timeoutRef.current = setTimeout(() => {
39
+ timeoutRef.current = null;
40
+ if (isWEB) {
41
+ const elem = document.querySelector(`.${animElemIdRef.current}`);
48
42
  if (!elem) return;
49
43
  const width = elem.getBoundingClientRect().width;
50
- const dura = width / +speed;
51
- this.setState({ dura });
44
+ const animDura = width / +speed;
45
+ setDura(animDura);
52
46
  } else if (isWEAPP || isALIPAY) {
53
47
  const query = Taro.createSelectorQuery();
54
- query.select(`.${this.state.animElemId}`).boundingClientRect().exec((res) => {
48
+ query.select(`.${animElemIdRef.current}`).boundingClientRect().exec((res) => {
55
49
  const queryRes = res[0];
56
50
  if (!queryRes) return;
57
51
  const { width } = queryRes;
58
- const { speed = 100 } = this.props;
59
- const dura = width / +speed;
52
+ const animDura = width / +speed;
60
53
  const animation = Taro.createAnimation({
61
- duration: dura * 1e3,
54
+ duration: animDura * 1e3,
62
55
  timingFunction: "linear"
63
56
  });
64
57
  const resetAnimation = Taro.createAnimation({
@@ -71,103 +64,96 @@ class AtNoticebar extends React.Component {
71
64
  });
72
65
  const animBody = () => {
73
66
  resetOpacityAnimation.opacity(0).step();
74
- this.setState({ animationData: resetOpacityAnimation.export() });
67
+ setAnimationData(resetOpacityAnimation.export());
75
68
  setTimeout(() => {
76
69
  resetAnimation.translateX(0).step();
77
- this.setState({ animationData: resetAnimation.export() });
70
+ setAnimationData(resetAnimation.export());
78
71
  }, 300);
79
72
  setTimeout(() => {
80
73
  resetOpacityAnimation.opacity(1).step();
81
- this.setState({ animationData: resetOpacityAnimation.export() });
74
+ setAnimationData(resetOpacityAnimation.export());
82
75
  }, 600);
83
76
  setTimeout(() => {
84
77
  animation.translateX(-width).step();
85
- this.setState({ animationData: animation.export() });
78
+ setAnimationData(animation.export());
86
79
  }, 900);
87
80
  };
88
81
  animBody();
89
- this.interval = setInterval(animBody, dura * 1e3 + 1e3);
82
+ intervalRef.current = setInterval(animBody, animDura * 1e3 + 1e3);
90
83
  });
91
84
  }
92
85
  }, 1e3);
93
- }
94
- render() {
95
- const {
96
- single,
97
- icon,
98
- marquee,
99
- customStyle,
100
- className,
101
- moreText = "\u67E5\u770B\u8BE6\u60C5"
102
- } = this.props;
103
- let { showMore, close } = this.props;
104
- const { dura, show, animElemId, animationData, isWEAPP, isALIPAY } = this.state;
105
- const rootClassName = ["at-noticebar"];
106
- if (!single) showMore = false;
107
- const style = {};
108
- const innerClassName = ["at-noticebar__content-inner"];
109
- if (marquee) {
110
- close = false;
111
- innerClassName.push(animElemId);
112
- style["animation-delay"] = "3s";
113
- if (dura > 0) {
114
- style["animation-duration"] = `${dura}s`;
115
- style["animation-delay"] = "1s";
116
- }
86
+ }, [isWEB, isWEAPP, isALIPAY, speed]);
87
+ useEffect(() => {
88
+ if (!marquee) return;
89
+ initAnimation();
90
+ }, [marquee, initAnimation]);
91
+ useEffect(() => {
92
+ if (!timeoutRef.current) {
93
+ intervalRef.current && clearInterval(intervalRef.current);
94
+ initAnimation();
95
+ }
96
+ }, [
97
+ children,
98
+ single,
99
+ marquee,
100
+ speed,
101
+ icon,
102
+ close,
103
+ showMore,
104
+ resolvedMoreText,
105
+ className,
106
+ customStyle,
107
+ initAnimation
108
+ ]);
109
+ const handleClose = (event) => {
110
+ setShow(false);
111
+ onClose && onClose(event);
112
+ };
113
+ const handleGotoMore = (event) => {
114
+ onGotoMore && onGotoMore(event);
115
+ };
116
+ let resolvedShowMore = showMore;
117
+ if (!single) resolvedShowMore = false;
118
+ const style = {};
119
+ const innerClassName = ["at-noticebar__content-inner"];
120
+ let resolvedClose = close;
121
+ if (marquee) {
122
+ resolvedClose = false;
123
+ innerClassName.push(animElemId);
124
+ style["animation-delay"] = "3s";
125
+ if (dura > 0) {
126
+ style["animation-duration"] = `${dura}s`;
127
+ style["animation-delay"] = "1s";
117
128
  }
118
- const classObject = {
119
- "at-noticebar--marquee": marquee,
120
- "at-noticebar--weapp": marquee && (isWEAPP || isALIPAY),
121
- "at-noticebar--single": !marquee && single
122
- };
123
- const iconClass = ["at-icon"];
124
- if (icon) iconClass.push(`at-icon-${icon}`);
125
- return show && /* @__PURE__ */ React.createElement(
129
+ }
130
+ const classObject = {
131
+ "at-noticebar--marquee": marquee,
132
+ "at-noticebar--weapp": marquee && (isWEAPP || isALIPAY),
133
+ "at-noticebar--single": !marquee && single
134
+ };
135
+ const iconClass = ["at-icon"];
136
+ if (icon) iconClass.push(`at-icon-${icon}`);
137
+ return show && /* @__PURE__ */ React.createElement(
138
+ View,
139
+ {
140
+ className: classNames("at-noticebar", classObject, className),
141
+ style: customStyle
142
+ },
143
+ resolvedClose && /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__close", onClick: handleClose }, /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-close" })),
144
+ /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content" }, icon && /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content-icon" }, /* @__PURE__ */ React.createElement(Text, { className: classNames(iconClass, iconClass) })), /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content-text" }, /* @__PURE__ */ React.createElement(
126
145
  View,
127
146
  {
128
- className: classNames(rootClassName, classObject, className),
129
- style: customStyle
147
+ id: animElemId,
148
+ animation: animationData,
149
+ className: classNames(innerClassName),
150
+ style
130
151
  },
131
- close && /* @__PURE__ */ React.createElement(
132
- View,
133
- {
134
- className: "at-noticebar__close",
135
- onClick: this.onClose.bind(this)
136
- },
137
- /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-close" })
138
- ),
139
- /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content" }, icon && /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content-icon" }, /* @__PURE__ */ React.createElement(Text, { className: classNames(iconClass, iconClass) })), /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__content-text" }, /* @__PURE__ */ React.createElement(
140
- View,
141
- {
142
- id: animElemId,
143
- animation: animationData,
144
- className: classNames(innerClassName),
145
- style
146
- },
147
- this.props.children
148
- ))),
149
- showMore && /* @__PURE__ */ React.createElement(
150
- View,
151
- {
152
- className: "at-noticebar__more",
153
- onClick: this.onGotoMore.bind(this)
154
- },
155
- /* @__PURE__ */ React.createElement(Text, { className: "text" }, moreText),
156
- /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__more-icon" }, /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-right" }))
157
- )
158
- );
159
- }
152
+ children
153
+ ))),
154
+ resolvedShowMore && /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__more", onClick: handleGotoMore }, /* @__PURE__ */ React.createElement(Text, { className: "text" }, resolvedMoreText), /* @__PURE__ */ React.createElement(View, { className: "at-noticebar__more-icon" }, /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-right" })))
155
+ );
160
156
  }
161
- AtNoticebar.defaultProps = {
162
- close: false,
163
- single: false,
164
- marquee: false,
165
- speed: 100,
166
- moreText: "\u67E5\u770B\u8BE6\u60C5",
167
- showMore: false,
168
- icon: "",
169
- customStyle: {}
170
- };
171
157
  AtNoticebar.propTypes = {
172
158
  close: PropTypes.bool,
173
159
  single: PropTypes.bool,
@@ -180,7 +166,8 @@ AtNoticebar.propTypes = {
180
166
  onClose: PropTypes.func,
181
167
  onGotoMore: PropTypes.func
182
168
  };
169
+ var noticebar_default = AtNoticebar;
183
170
  export {
184
- AtNoticebar as default
171
+ noticebar_default as default
185
172
  };
186
173
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/noticebar/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes, { InferProps } from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { CommonEvent } from '@tarojs/components/types/common'\nimport Taro from '@tarojs/taro'\nimport { AtNoticeBarProps, AtNoticeBarState } from '../../../types/noticebar'\n\nexport default class AtNoticebar extends React.Component<\n AtNoticeBarProps,\n AtNoticeBarState\n> {\n public static defaultProps: AtNoticeBarProps\n public static propTypes: InferProps<AtNoticeBarProps>\n\n private timeout: ReturnType<typeof setTimeout> | null\n private interval: ReturnType<typeof setInterval> | null\n\n public constructor(props: AtNoticeBarProps) {\n super(props)\n const animElemId = `J_${Math.ceil(Math.random() * 10e5).toString(36)}`\n this.state = {\n show: true,\n animElemId,\n animationData: {\n actions: [{}]\n },\n dura: 0,\n isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,\n isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY,\n isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB\n }\n }\n\n private onClose(event: CommonEvent): void {\n this.setState({\n show: false\n })\n this.props.onClose && this.props.onClose(event)\n }\n\n private onGotoMore(event: CommonEvent): void {\n this.props.onGotoMore && this.props.onGotoMore(event)\n }\n\n public UNSAFE_componentWillReceiveProps(): void {\n if (!this.timeout) {\n this.interval && clearInterval(this.interval)\n this.initAnimation()\n }\n }\n\n public componentDidMount(): void {\n if (!this.props.marquee) return\n this.initAnimation()\n }\n\n private initAnimation(): void {\n const { isWEAPP, isALIPAY } = this.state\n this.timeout = setTimeout(() => {\n this.timeout = null\n if (this.state.isWEB) {\n const { speed = 100 } = this.props\n const elem = document.querySelector(`.${this.state.animElemId}`)\n if (!elem) return\n const width = elem.getBoundingClientRect().width\n const dura = width / +speed\n this.setState({ dura })\n } else if (isWEAPP || isALIPAY) {\n const query = Taro.createSelectorQuery()\n query\n .select(`.${this.state.animElemId}`)\n .boundingClientRect()\n .exec(res => {\n const queryRes = res[0]\n if (!queryRes) return\n const { width } = queryRes\n const { speed = 100 } = this.props\n const dura = width / +speed\n const animation = Taro.createAnimation({\n duration: dura * 1000,\n timingFunction: 'linear'\n })\n const resetAnimation = Taro.createAnimation({\n duration: 0,\n timingFunction: 'linear'\n })\n const resetOpacityAnimation = Taro.createAnimation({\n duration: 0,\n timingFunction: 'linear'\n })\n const animBody = (): void => {\n resetOpacityAnimation.opacity(0).step()\n this.setState({ animationData: resetOpacityAnimation.export() })\n\n setTimeout(() => {\n resetAnimation.translateX(0).step()\n this.setState({ animationData: resetAnimation.export() })\n }, 300)\n\n setTimeout(() => {\n resetOpacityAnimation.opacity(1).step()\n this.setState({ animationData: resetOpacityAnimation.export() })\n }, 600)\n\n setTimeout(() => {\n animation.translateX(-width).step()\n this.setState({ animationData: animation.export() })\n }, 900)\n }\n animBody()\n this.interval = setInterval(animBody, dura * 1000 + 1000)\n })\n }\n }, 1000)\n }\n\n public render(): JSX.Element | boolean {\n const {\n single,\n icon,\n marquee,\n customStyle,\n className,\n moreText = '查看详情'\n } = this.props\n let { showMore, close } = this.props\n const { dura, show, animElemId, animationData, isWEAPP, isALIPAY } =\n this.state\n const rootClassName = ['at-noticebar']\n\n if (!single) showMore = false\n\n const style = {}\n const innerClassName = ['at-noticebar__content-inner']\n if (marquee) {\n close = false\n innerClassName.push(animElemId)\n style['animation-delay'] = '3s'\n\n if (dura > 0) {\n style['animation-duration'] = `${dura}s`\n style['animation-delay'] = '1s'\n }\n }\n\n const classObject = {\n 'at-noticebar--marquee': marquee,\n 'at-noticebar--weapp': marquee && (isWEAPP || isALIPAY),\n 'at-noticebar--single': !marquee && single\n }\n\n const iconClass = ['at-icon']\n if (icon) iconClass.push(`at-icon-${icon}`)\n\n return (\n show && (\n <View\n className={classNames(rootClassName, classObject, className)}\n style={customStyle}\n >\n {close && (\n <View\n className='at-noticebar__close'\n onClick={this.onClose.bind(this)}\n >\n <Text className='at-icon at-icon-close'></Text>\n </View>\n )}\n <View className='at-noticebar__content'>\n {icon && (\n <View className='at-noticebar__content-icon'>\n {/* start hack 百度小程序 */}\n <Text className={classNames(iconClass, iconClass)}></Text>\n </View>\n )}\n <View className='at-noticebar__content-text'>\n <View\n id={animElemId}\n animation={animationData}\n className={classNames(innerClassName)}\n style={style}\n >\n {this.props.children}\n </View>\n </View>\n </View>\n {showMore && (\n <View\n className='at-noticebar__more'\n onClick={this.onGotoMore.bind(this)}\n >\n <Text className='text'>{moreText}</Text>\n <View className='at-noticebar__more-icon'>\n <Text className='at-icon at-icon-chevron-right'></Text>\n </View>\n </View>\n )}\n </View>\n )\n )\n }\n}\n\nAtNoticebar.defaultProps = {\n close: false,\n single: false,\n marquee: false,\n speed: 100,\n moreText: '查看详情',\n showMore: false,\n icon: '',\n customStyle: {}\n}\n\nAtNoticebar.propTypes = {\n close: PropTypes.bool,\n single: PropTypes.bool,\n marquee: PropTypes.bool,\n speed: PropTypes.number,\n moreText: PropTypes.string,\n showMore: PropTypes.bool,\n icon: PropTypes.string,\n customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onClose: PropTypes.func,\n onGotoMore: PropTypes.func\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/noticebar/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { CommonEvent } from '@tarojs/components/types/common'\nimport Taro from '@tarojs/taro'\nimport { useComponentLocale } from '../../hooks/useComponentLocale'\nimport { AtNoticeBarProps } from '../../../types/noticebar'\n\nfunction AtNoticebar({\n close = false,\n single = false,\n marquee = false,\n speed = 100,\n moreText,\n showMore = false,\n icon = '',\n customStyle = {},\n className,\n children,\n onClose,\n onGotoMore\n}: AtNoticeBarProps): JSX.Element | boolean {\n const locale = useComponentLocale('NoticeBar')\n const resolvedMoreText = moreText ?? locale.moreText\n const [show, setShow] = useState(true)\n const [animElemId] = useState(\n () => `J_${Math.ceil(Math.random() * 10e5).toString(36)}`\n )\n const [animationData, setAnimationData] = useState<{\n actions: Record<string, unknown>[]\n }>({\n actions: [{}]\n })\n const [dura, setDura] = useState(0)\n const isWEAPP = Taro.getEnv() === Taro.ENV_TYPE.WEAPP\n const isALIPAY = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY\n const isWEB = Taro.getEnv() === Taro.ENV_TYPE.WEB\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)\n const animElemIdRef = useRef(animElemId)\n\n const initAnimation = useCallback((): void => {\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null\n if (isWEB) {\n const elem = document.querySelector(`.${animElemIdRef.current}`)\n if (!elem) return\n const width = elem.getBoundingClientRect().width\n const animDura = width / +speed\n setDura(animDura)\n } else if (isWEAPP || isALIPAY) {\n const query = Taro.createSelectorQuery()\n query\n .select(`.${animElemIdRef.current}`)\n .boundingClientRect()\n .exec(res => {\n const queryRes = res[0]\n if (!queryRes) return\n const { width } = queryRes\n const animDura = width / +speed\n const animation = Taro.createAnimation({\n duration: animDura * 1000,\n timingFunction: 'linear'\n })\n const resetAnimation = Taro.createAnimation({\n duration: 0,\n timingFunction: 'linear'\n })\n const resetOpacityAnimation = Taro.createAnimation({\n duration: 0,\n timingFunction: 'linear'\n })\n const animBody = (): void => {\n resetOpacityAnimation.opacity(0).step()\n setAnimationData(resetOpacityAnimation.export())\n\n setTimeout(() => {\n resetAnimation.translateX(0).step()\n setAnimationData(resetAnimation.export())\n }, 300)\n\n setTimeout(() => {\n resetOpacityAnimation.opacity(1).step()\n setAnimationData(resetOpacityAnimation.export())\n }, 600)\n\n setTimeout(() => {\n animation.translateX(-width).step()\n setAnimationData(animation.export())\n }, 900)\n }\n animBody()\n intervalRef.current = setInterval(animBody, animDura * 1000 + 1000)\n })\n }\n }, 1000)\n }, [isWEB, isWEAPP, isALIPAY, speed])\n\n useEffect(() => {\n if (!marquee) return\n initAnimation()\n }, [marquee, initAnimation])\n\n useEffect(() => {\n if (!timeoutRef.current) {\n intervalRef.current && clearInterval(intervalRef.current)\n initAnimation()\n }\n }, [\n children,\n single,\n marquee,\n speed,\n icon,\n close,\n showMore,\n resolvedMoreText,\n className,\n customStyle,\n initAnimation\n ])\n\n const handleClose = (event: CommonEvent): void => {\n setShow(false)\n onClose && onClose(event)\n }\n\n const handleGotoMore = (event: CommonEvent): void => {\n onGotoMore && onGotoMore(event)\n }\n\n let resolvedShowMore = showMore\n if (!single) resolvedShowMore = false\n\n const style: Record<string, string> = {}\n const innerClassName = ['at-noticebar__content-inner']\n let resolvedClose = close\n if (marquee) {\n resolvedClose = false\n innerClassName.push(animElemId)\n style['animation-delay'] = '3s'\n\n if (dura > 0) {\n style['animation-duration'] = `${dura}s`\n style['animation-delay'] = '1s'\n }\n }\n\n const classObject = {\n 'at-noticebar--marquee': marquee,\n 'at-noticebar--weapp': marquee && (isWEAPP || isALIPAY),\n 'at-noticebar--single': !marquee && single\n }\n\n const iconClass = ['at-icon']\n if (icon) iconClass.push(`at-icon-${icon}`)\n\n return (\n show && (\n <View\n className={classNames('at-noticebar', classObject, className)}\n style={customStyle}\n >\n {resolvedClose && (\n <View className='at-noticebar__close' onClick={handleClose}>\n <Text className='at-icon at-icon-close'></Text>\n </View>\n )}\n <View className='at-noticebar__content'>\n {icon && (\n <View className='at-noticebar__content-icon'>\n <Text className={classNames(iconClass, iconClass)}></Text>\n </View>\n )}\n <View className='at-noticebar__content-text'>\n <View\n id={animElemId}\n animation={animationData}\n className={classNames(innerClassName)}\n style={style}\n >\n {children}\n </View>\n </View>\n </View>\n {resolvedShowMore && (\n <View className='at-noticebar__more' onClick={handleGotoMore}>\n <Text className='text'>{resolvedMoreText}</Text>\n <View className='at-noticebar__more-icon'>\n <Text className='at-icon at-icon-chevron-right'></Text>\n </View>\n </View>\n )}\n </View>\n )\n )\n}\n\nAtNoticebar.propTypes = {\n close: PropTypes.bool,\n single: PropTypes.bool,\n marquee: PropTypes.bool,\n speed: PropTypes.number,\n moreText: PropTypes.string,\n showMore: PropTypes.bool,\n icon: PropTypes.string,\n customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onClose: PropTypes.func,\n onGotoMore: PropTypes.func\n}\n\nexport default AtNoticebar\n"],"mappings":"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","names":[]}
@@ -1,12 +1,14 @@
1
- import { InferProps } from 'prop-types';
2
- import React from 'react';
3
- import { AtPaginationProps, AtPaginationState } from '../../../types/pagination';
4
- export default class AtPagination extends React.Component<AtPaginationProps, AtPaginationState> {
5
- static defaultProps: AtPaginationProps;
6
- static propTypes: InferProps<AtPaginationProps>;
7
- constructor(props: AtPaginationProps);
8
- private onPrev;
9
- private onNext;
10
- UNSAFE_componentWillReceiveProps(props: AtPaginationProps): void;
11
- render(): JSX.Element;
1
+ import PropTypes from 'prop-types';
2
+ import { AtPaginationProps } from '../../../types/pagination';
3
+ declare function AtPagination({ current, total, pageSize, icon, customStyle, className, onPageChange }: AtPaginationProps): JSX.Element;
4
+ declare namespace AtPagination {
5
+ var propTypes: {
6
+ current: PropTypes.Requireable<number>;
7
+ total: PropTypes.Requireable<number>;
8
+ pageSize: PropTypes.Requireable<number>;
9
+ icon: PropTypes.Requireable<boolean>;
10
+ customStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
11
+ onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
12
+ };
12
13
  }
14
+ export default AtPagination;
@@ -1,7 +1,8 @@
1
1
  import classNames from "classnames";
2
2
  import PropTypes from "prop-types";
3
- import React from "react";
3
+ import React, { useEffect, useState } from "react";
4
4
  import { Text, View } from "@tarojs/components";
5
+ import { useComponentLocale } from "../../hooks/useComponentLocale";
5
6
  import AtButton from "../button/index";
6
7
  const MIN_MAXPAGE = 1;
7
8
  const getMaxPage = (maxPage = 0) => {
@@ -12,126 +13,68 @@ const createPickerRange = (max) => {
12
13
  const range = new Array(max).fill(0).map((_val, index) => index + 1);
13
14
  return range;
14
15
  };
15
- class AtPagination extends React.Component {
16
- constructor(props) {
17
- super(props);
18
- const { current, pageSize = 20, total } = this.props;
19
- const maxPage = getMaxPage(Math.ceil(total / pageSize));
20
- this.state = {
21
- currentPage: current || 1,
22
- maxPage,
23
- pickerRange: createPickerRange(maxPage)
24
- };
25
- }
26
- onPrev() {
27
- let { currentPage } = this.state;
28
- const originCur = currentPage;
29
- currentPage -= 1;
30
- currentPage = Math.max(1, currentPage);
31
- if (originCur === currentPage) return;
32
- this.props.onPageChange && this.props.onPageChange({ type: "prev", current: currentPage });
33
- this.setState({ currentPage });
34
- }
35
- onNext() {
36
- let { currentPage } = this.state;
37
- const originCur = currentPage;
38
- const { maxPage } = this.state;
39
- currentPage += 1;
40
- currentPage = Math.min(maxPage, currentPage);
41
- if (originCur === currentPage) return;
42
- this.props.onPageChange && this.props.onPageChange({ type: "next", current: currentPage });
43
- this.setState({ currentPage });
44
- }
45
- UNSAFE_componentWillReceiveProps(props) {
46
- const { total, pageSize = 20, current } = props;
47
- const maxPage = getMaxPage(Math.ceil(total / pageSize));
48
- if (maxPage !== this.state.maxPage) {
49
- this.setState({
50
- maxPage,
51
- pickerRange: createPickerRange(maxPage)
52
- });
16
+ function AtPagination({
17
+ current = 1,
18
+ total = 0,
19
+ pageSize = 20,
20
+ icon = false,
21
+ customStyle = {},
22
+ className,
23
+ onPageChange
24
+ }) {
25
+ const locale = useComponentLocale("Pagination");
26
+ const initialMaxPage = getMaxPage(Math.ceil(total / pageSize));
27
+ const [currentPage, setCurrentPage] = useState(current || 1);
28
+ const [maxPage, setMaxPage] = useState(initialMaxPage);
29
+ const [, setPickerRange] = useState(() => createPickerRange(initialMaxPage));
30
+ useEffect(() => {
31
+ const newMaxPage = getMaxPage(Math.ceil(total / pageSize));
32
+ setMaxPage((prev) => {
33
+ if (newMaxPage !== prev) {
34
+ setPickerRange(createPickerRange(newMaxPage));
35
+ return newMaxPage;
36
+ }
37
+ return prev;
38
+ });
39
+ if (typeof current === "number") {
40
+ setCurrentPage((prev) => current !== prev ? current : prev);
53
41
  }
54
- if (typeof current === "number" && current !== this.state.currentPage) {
55
- this.setState({ currentPage: current });
56
- }
57
- }
58
- // onPickerChange (evt) {
59
- // const { value } = evt.detail
60
- // const current = +value + 1
61
- // if (current === this.state.currentPage) return
62
- // this.props.onPageChange && this.props.onPageChange({ type: 'pick', current })
63
- // this.setState({
64
- // currentPage: current,
65
- // })
66
- // }
67
- render() {
68
- const {
69
- icon,
70
- // pickerSelect,
71
- customStyle
72
- } = this.props;
73
- const {
74
- currentPage,
75
- maxPage
76
- // pickerRange,
77
- } = this.state;
78
- const rootClassName = ["at-pagination"];
79
- const prevDisabled = maxPage === MIN_MAXPAGE || currentPage === 1;
80
- const nextDisabled = maxPage === MIN_MAXPAGE || currentPage === maxPage;
81
- const classObject = {
82
- "at-pagination--icon": icon
83
- };
84
- return /* @__PURE__ */ React.createElement(
85
- View,
86
- {
87
- className: classNames(rootClassName, classObject, this.props.className),
88
- style: customStyle
89
- },
90
- /* @__PURE__ */ React.createElement(View, { className: "at-pagination__btn-prev" }, icon && /* @__PURE__ */ React.createElement(
91
- AtButton,
92
- {
93
- onClick: this.onPrev.bind(this),
94
- size: "small",
95
- disabled: prevDisabled
96
- },
97
- /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-left" })
98
- ), !icon && /* @__PURE__ */ React.createElement(
99
- AtButton,
100
- {
101
- onClick: this.onPrev.bind(this),
102
- size: "small",
103
- disabled: prevDisabled
104
- },
105
- "\u4E0A\u4E00\u9875"
106
- )),
107
- /* @__PURE__ */ React.createElement(View, { className: "at-pagination__number" }, /* @__PURE__ */ React.createElement(Text, { className: "at-pagination__number-current" }, currentPage), "/", maxPage),
108
- /* @__PURE__ */ React.createElement(View, { className: "at-pagination__btn-next" }, icon && /* @__PURE__ */ React.createElement(
109
- AtButton,
110
- {
111
- onClick: this.onNext.bind(this),
112
- size: "small",
113
- disabled: nextDisabled
114
- },
115
- /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-right" })
116
- ), !icon && /* @__PURE__ */ React.createElement(
117
- AtButton,
118
- {
119
- onClick: this.onNext.bind(this),
120
- size: "small",
121
- disabled: nextDisabled
122
- },
123
- "\u4E0B\u4E00\u9875"
124
- ))
125
- );
126
- }
42
+ }, [total, pageSize, current]);
43
+ const onPrev = () => {
44
+ let nextPage = currentPage;
45
+ const originCur = nextPage;
46
+ nextPage -= 1;
47
+ nextPage = Math.max(1, nextPage);
48
+ if (originCur === nextPage) return;
49
+ onPageChange && onPageChange({ type: "prev", current: nextPage });
50
+ setCurrentPage(nextPage);
51
+ };
52
+ const onNext = () => {
53
+ let nextPage = currentPage;
54
+ const originCur = nextPage;
55
+ nextPage += 1;
56
+ nextPage = Math.min(maxPage, nextPage);
57
+ if (originCur === nextPage) return;
58
+ onPageChange && onPageChange({ type: "next", current: nextPage });
59
+ setCurrentPage(nextPage);
60
+ };
61
+ const rootClassName = ["at-pagination"];
62
+ const prevDisabled = maxPage === MIN_MAXPAGE || currentPage === 1;
63
+ const nextDisabled = maxPage === MIN_MAXPAGE || currentPage === maxPage;
64
+ const classObject = {
65
+ "at-pagination--icon": icon
66
+ };
67
+ return /* @__PURE__ */ React.createElement(
68
+ View,
69
+ {
70
+ className: classNames(rootClassName, classObject, className),
71
+ style: customStyle
72
+ },
73
+ /* @__PURE__ */ React.createElement(View, { className: "at-pagination__btn-prev" }, icon && /* @__PURE__ */ React.createElement(AtButton, { onClick: onPrev, size: "small", disabled: prevDisabled }, /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-left" })), !icon && /* @__PURE__ */ React.createElement(AtButton, { onClick: onPrev, size: "small", disabled: prevDisabled }, locale.prev)),
74
+ /* @__PURE__ */ React.createElement(View, { className: "at-pagination__number" }, /* @__PURE__ */ React.createElement(Text, { className: "at-pagination__number-current" }, currentPage), "/", maxPage),
75
+ /* @__PURE__ */ React.createElement(View, { className: "at-pagination__btn-next" }, icon && /* @__PURE__ */ React.createElement(AtButton, { onClick: onNext, size: "small", disabled: nextDisabled }, /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-chevron-right" })), !icon && /* @__PURE__ */ React.createElement(AtButton, { onClick: onNext, size: "small", disabled: nextDisabled }, locale.next))
76
+ );
127
77
  }
128
- AtPagination.defaultProps = {
129
- current: 1,
130
- total: 0,
131
- pageSize: 20,
132
- icon: false,
133
- customStyle: {}
134
- };
135
78
  AtPagination.propTypes = {
136
79
  current: PropTypes.number,
137
80
  total: PropTypes.number,
@@ -140,7 +83,8 @@ AtPagination.propTypes = {
140
83
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
141
84
  onPageChange: PropTypes.func
142
85
  };
86
+ var pagination_default = AtPagination;
143
87
  export {
144
- AtPagination as default
88
+ pagination_default as default
145
89
  };
146
90
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes, { InferProps } from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { AtPaginationProps, AtPaginationState } from '../../../types/pagination'\nimport AtButton from '../button/index'\n\nconst MIN_MAXPAGE = 1\nconst getMaxPage = (maxPage = 0): number => {\n if (maxPage <= 0) return MIN_MAXPAGE\n return maxPage\n}\n\nconst createPickerRange = (max: number): number[] => {\n const range = new Array(max).fill(0).map((_val, index) => index + 1)\n return range\n}\n\nexport default class AtPagination extends React.Component<\n AtPaginationProps,\n AtPaginationState\n> {\n public static defaultProps: AtPaginationProps\n public static propTypes: InferProps<AtPaginationProps>\n\n public constructor(props: AtPaginationProps) {\n super(props)\n const { current, pageSize = 20, total } = this.props\n const maxPage = getMaxPage(Math.ceil(total / pageSize))\n this.state = {\n currentPage: current || 1,\n maxPage,\n pickerRange: createPickerRange(maxPage)\n }\n }\n\n private onPrev(): void {\n let { currentPage } = this.state\n const originCur = currentPage\n currentPage -= 1\n currentPage = Math.max(1, currentPage)\n if (originCur === currentPage) return\n this.props.onPageChange &&\n this.props.onPageChange({ type: 'prev', current: currentPage })\n this.setState({ currentPage })\n }\n\n private onNext(): void {\n let { currentPage } = this.state\n const originCur = currentPage\n const { maxPage } = this.state\n currentPage += 1\n currentPage = Math.min(maxPage, currentPage)\n if (originCur === currentPage) return\n this.props.onPageChange &&\n this.props.onPageChange({ type: 'next', current: currentPage })\n this.setState({ currentPage })\n }\n\n public UNSAFE_componentWillReceiveProps(props: AtPaginationProps): void {\n const { total, pageSize = 20, current } = props\n const maxPage = getMaxPage(Math.ceil(total / pageSize))\n if (maxPage !== this.state.maxPage) {\n this.setState({\n maxPage,\n pickerRange: createPickerRange(maxPage)\n })\n }\n if (typeof current === 'number' && current !== this.state.currentPage) {\n this.setState({ currentPage: current })\n }\n }\n\n // onPickerChange (evt) {\n // const { value } = evt.detail\n // const current = +value + 1\n // if (current === this.state.currentPage) return\n // this.props.onPageChange && this.props.onPageChange({ type: 'pick', current })\n // this.setState({\n // currentPage: current,\n // })\n // }\n\n public render(): JSX.Element {\n const {\n icon,\n // pickerSelect,\n customStyle\n } = this.props\n const {\n currentPage,\n maxPage\n // pickerRange,\n } = this.state\n\n const rootClassName = ['at-pagination']\n\n const prevDisabled = maxPage === MIN_MAXPAGE || currentPage === 1\n const nextDisabled = maxPage === MIN_MAXPAGE || currentPage === maxPage\n\n const classObject = {\n 'at-pagination--icon': icon\n }\n\n return (\n <View\n className={classNames(rootClassName, classObject, this.props.className)}\n style={customStyle}\n >\n <View className='at-pagination__btn-prev'>\n {icon && (\n <AtButton\n onClick={this.onPrev.bind(this)}\n size='small'\n disabled={prevDisabled}\n >\n <Text className='at-icon at-icon-chevron-left'></Text>\n </AtButton>\n )}\n {!icon && (\n <AtButton\n onClick={this.onPrev.bind(this)}\n size='small'\n disabled={prevDisabled}\n >\n 上一页\n </AtButton>\n )}\n </View>\n <View className='at-pagination__number'>\n <Text className='at-pagination__number-current'>{currentPage}</Text>/\n {maxPage}\n </View>\n <View className='at-pagination__btn-next'>\n {icon && (\n <AtButton\n onClick={this.onNext.bind(this)}\n size='small'\n disabled={nextDisabled}\n >\n <Text className='at-icon at-icon-chevron-right'></Text>\n </AtButton>\n )}\n {!icon && (\n <AtButton\n onClick={this.onNext.bind(this)}\n size='small'\n disabled={nextDisabled}\n >\n 下一页\n </AtButton>\n )}\n </View>\n {/* {pickerSelect && <View className='at-pagination__number'>\n {<Picker mode='selector' range={pickerRange} value={currentPage - 1} onChange={this.onPickerChange.bind(this)}>\n <Text className='at-pagination__number-current'>{currentPage}</Text>/{ maxPage }\n </Picker>}\n </View>} */}\n {/* {!pickerSelect && <View className='at-pagination__number'>\n <Text className='at-pagination__number-current'>{currentPage}</Text>/{ maxPage }\n </View>} */}\n </View>\n )\n }\n}\n\nAtPagination.defaultProps = {\n current: 1,\n total: 0,\n pageSize: 20,\n icon: false,\n customStyle: {}\n}\n\nAtPagination.propTypes = {\n current: PropTypes.number,\n total: PropTypes.number,\n pageSize: PropTypes.number,\n icon: PropTypes.bool,\n customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onPageChange: PropTypes.func\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport React, { useEffect, useState } from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { useComponentLocale } from '../../hooks/useComponentLocale'\nimport { AtPaginationProps } from '../../../types/pagination'\nimport AtButton from '../button/index'\n\nconst MIN_MAXPAGE = 1\nconst getMaxPage = (maxPage = 0): number => {\n if (maxPage <= 0) return MIN_MAXPAGE\n return maxPage\n}\n\nconst createPickerRange = (max: number): number[] => {\n const range = new Array(max).fill(0).map((_val, index) => index + 1)\n return range\n}\n\nfunction AtPagination({\n current = 1,\n total = 0,\n pageSize = 20,\n icon = false,\n customStyle = {},\n className,\n onPageChange\n}: AtPaginationProps): JSX.Element {\n const locale = useComponentLocale('Pagination')\n const initialMaxPage = getMaxPage(Math.ceil(total / pageSize))\n const [currentPage, setCurrentPage] = useState(current || 1)\n const [maxPage, setMaxPage] = useState(initialMaxPage)\n const [, setPickerRange] = useState(() => createPickerRange(initialMaxPage))\n\n useEffect(() => {\n const newMaxPage = getMaxPage(Math.ceil(total / pageSize))\n setMaxPage(prev => {\n if (newMaxPage !== prev) {\n setPickerRange(createPickerRange(newMaxPage))\n return newMaxPage\n }\n return prev\n })\n if (typeof current === 'number') {\n setCurrentPage(prev => (current !== prev ? current : prev))\n }\n }, [total, pageSize, current])\n\n const onPrev = (): void => {\n let nextPage = currentPage\n const originCur = nextPage\n nextPage -= 1\n nextPage = Math.max(1, nextPage)\n if (originCur === nextPage) return\n onPageChange && onPageChange({ type: 'prev', current: nextPage })\n setCurrentPage(nextPage)\n }\n\n const onNext = (): void => {\n let nextPage = currentPage\n const originCur = nextPage\n nextPage += 1\n nextPage = Math.min(maxPage, nextPage)\n if (originCur === nextPage) return\n onPageChange && onPageChange({ type: 'next', current: nextPage })\n setCurrentPage(nextPage)\n }\n\n const rootClassName = ['at-pagination']\n\n const prevDisabled = maxPage === MIN_MAXPAGE || currentPage === 1\n const nextDisabled = maxPage === MIN_MAXPAGE || currentPage === maxPage\n\n const classObject = {\n 'at-pagination--icon': icon\n }\n\n return (\n <View\n className={classNames(rootClassName, classObject, className)}\n style={customStyle}\n >\n <View className='at-pagination__btn-prev'>\n {icon && (\n <AtButton onClick={onPrev} size='small' disabled={prevDisabled}>\n <Text className='at-icon at-icon-chevron-left'></Text>\n </AtButton>\n )}\n {!icon && (\n <AtButton onClick={onPrev} size='small' disabled={prevDisabled}>\n {locale.prev}\n </AtButton>\n )}\n </View>\n <View className='at-pagination__number'>\n <Text className='at-pagination__number-current'>{currentPage}</Text>/\n {maxPage}\n </View>\n <View className='at-pagination__btn-next'>\n {icon && (\n <AtButton onClick={onNext} size='small' disabled={nextDisabled}>\n <Text className='at-icon at-icon-chevron-right'></Text>\n </AtButton>\n )}\n {!icon && (\n <AtButton onClick={onNext} size='small' disabled={nextDisabled}>\n {locale.next}\n </AtButton>\n )}\n </View>\n </View>\n )\n}\n\nAtPagination.propTypes = {\n current: PropTypes.number,\n total: PropTypes.number,\n pageSize: PropTypes.number,\n icon: PropTypes.bool,\n customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onPageChange: PropTypes.func\n}\n\nexport default AtPagination\n"],"mappings":"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","names":[]}