@gmfe/react 2.14.20 → 2.14.26-beta.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 (377) hide show
  1. package/LICENSE.md +4 -0
  2. package/package.json +3 -3
  3. package/src/common/hooks/index.js +3 -3
  4. package/src/common/hooks/use_mutation_observer.js +25 -25
  5. package/src/common/util.js +52 -52
  6. package/src/component/affix/affix.stories.js +13 -13
  7. package/src/component/affix/index.js +21 -21
  8. package/src/component/box/box.js +31 -31
  9. package/src/component/box/box.stories.js +94 -94
  10. package/src/component/box/box_form.js +77 -77
  11. package/src/component/box/box_panel.js +91 -91
  12. package/src/component/box/box_table.js +51 -51
  13. package/src/component/box/index.js +6 -6
  14. package/src/component/box/style.less +39 -39
  15. package/src/component/button/button.stories.js +91 -91
  16. package/src/component/button/index.js +92 -92
  17. package/src/component/button/style.less +114 -114
  18. package/src/component/calendar/calendar.js +52 -52
  19. package/src/component/calendar/calendar.stories.js +57 -57
  20. package/src/component/calendar/content.js +89 -89
  21. package/src/component/calendar/day.js +109 -109
  22. package/src/component/calendar/head.js +243 -243
  23. package/src/component/calendar/index.js +4 -4
  24. package/src/component/calendar/range_calendar.js +150 -150
  25. package/src/component/calendar/style.less +140 -140
  26. package/src/component/calendar/week.js +27 -27
  27. package/src/component/carousel/carousel.js +178 -178
  28. package/src/component/carousel/stories.js +50 -50
  29. package/src/component/carousel/style.less +48 -48
  30. package/src/component/cascader/cascader.js +441 -443
  31. package/src/component/cascader/cascader.select.js +195 -195
  32. package/src/component/cascader/stories.js +240 -240
  33. package/src/component/cascader/style.less +122 -122
  34. package/src/component/checkbox/checkbox.js +86 -86
  35. package/src/component/checkbox/checkbox_group.js +66 -66
  36. package/src/component/checkbox/index.js +4 -4
  37. package/src/component/checkbox/stories.js +103 -103
  38. package/src/component/checkbox/style.less +88 -88
  39. package/src/component/collapse/collapse.stories.js +18 -18
  40. package/src/component/collapse/index.js +36 -36
  41. package/src/component/color_picker/index.js +190 -190
  42. package/src/component/color_picker/stories.js +17 -17
  43. package/src/component/color_picker/style.less +41 -41
  44. package/src/component/date_picker/date_picker.stories.js +102 -102
  45. package/src/component/date_picker/index.js +217 -217
  46. package/src/component/date_picker/overlay.js +119 -119
  47. package/src/component/date_picker/style.less +22 -22
  48. package/src/component/date_picker/time_select.js +62 -62
  49. package/src/component/date_range_picker/date_range_picker.stories.js +196 -196
  50. package/src/component/date_range_picker/index.js +206 -206
  51. package/src/component/date_range_picker/left.js +127 -127
  52. package/src/component/date_range_picker/overlay.js +202 -202
  53. package/src/component/date_range_picker/style.less +46 -46
  54. package/src/component/date_range_picker/time_range_select.js +150 -150
  55. package/src/component/date_range_picker/two.js +129 -129
  56. package/src/component/date_range_picker/util.js +42 -42
  57. package/src/component/dialog/index.js +240 -240
  58. package/src/component/dialog/stories.js +125 -125
  59. package/src/component/divider/index.js +28 -28
  60. package/src/component/divider/stories.js +5 -5
  61. package/src/component/divider/style.less +15 -15
  62. package/src/component/drawer/index.js +107 -107
  63. package/src/component/drawer/style.less +43 -43
  64. package/src/component/drop_down/drop_down.js +84 -84
  65. package/src/component/drop_down/drop_down_item.js +43 -43
  66. package/src/component/drop_down/drop_down_items.js +22 -22
  67. package/src/component/drop_down/index.js +5 -5
  68. package/src/component/drop_down/stories.js +38 -38
  69. package/src/component/drop_down/style.less +21 -21
  70. package/src/component/drop_select/index.js +208 -208
  71. package/src/component/drop_select/style.less +69 -69
  72. package/src/component/dropper/index.js +62 -62
  73. package/src/component/dropper/style.less +18 -18
  74. package/src/component/editable_text/editable_text.stories.js +47 -47
  75. package/src/component/editable_text/index.js +106 -106
  76. package/src/component/editable_text/style.less +29 -29
  77. package/src/component/filter_select/filter.select.js +416 -416
  78. package/src/component/filter_select/multiple.filter.select.js +425 -425
  79. package/src/component/filter_select/style.less +117 -117
  80. package/src/component/flex/index.js +132 -132
  81. package/src/component/flex/stories.js +13 -13
  82. package/src/component/flex/style.less +101 -101
  83. package/src/component/flip_number/index.js +196 -196
  84. package/src/component/flip_number/stories.js +25 -25
  85. package/src/component/flip_number/utils.js +50 -50
  86. package/src/component/form/form.js +153 -153
  87. package/src/component/form/form.stories.js +553 -553
  88. package/src/component/form/form_block.js +59 -59
  89. package/src/component/form/form_button.js +29 -29
  90. package/src/component/form/form_group.js +173 -173
  91. package/src/component/form/form_item.js +174 -163
  92. package/src/component/form/form_panel.js +71 -71
  93. package/src/component/form/index.js +8 -8
  94. package/src/component/form/style.less +130 -130
  95. package/src/component/form/util.js +13 -13
  96. package/src/component/function_set/function_set.stories.js +91 -91
  97. package/src/component/function_set/index.js +98 -98
  98. package/src/component/function_set/overlay.js +56 -56
  99. package/src/component/grid/col.js +72 -72
  100. package/src/component/grid/grid.stories.js +123 -123
  101. package/src/component/grid/index.js +4 -4
  102. package/src/component/grid/mixin.less +48 -48
  103. package/src/component/grid/row.js +44 -44
  104. package/src/component/grid/style.less +26 -26
  105. package/src/component/grid/util.js +11 -11
  106. package/src/component/icon_down_up/index.js +28 -28
  107. package/src/component/icon_down_up/stories.js +18 -18
  108. package/src/component/icon_down_up/style.less +8 -8
  109. package/src/component/image_preview/index.js +20 -20
  110. package/src/component/image_preview/preview_modal.js +193 -193
  111. package/src/component/image_preview/style.less +119 -119
  112. package/src/component/img_uploader/index.js +149 -149
  113. package/src/component/img_uploader/index.stories.js +51 -51
  114. package/src/component/img_uploader/style.less +22 -22
  115. package/src/component/input/index.js +19 -19
  116. package/src/component/input_number/index.js +73 -73
  117. package/src/component/input_number/number.js +158 -158
  118. package/src/component/input_number/stories.js +21 -21
  119. package/src/component/input_number/style.less +10 -10
  120. package/src/component/layout_root/index.js +165 -165
  121. package/src/component/lazy_img/index.js +68 -68
  122. package/src/component/level_list/index.js +120 -120
  123. package/src/component/level_list/level_item.js +64 -64
  124. package/src/component/level_list/level_list.stories.js +139 -139
  125. package/src/component/level_list/style.less +47 -47
  126. package/src/component/level_list/util.js +22 -22
  127. package/src/component/level_select/index.js +240 -240
  128. package/src/component/level_select/level_select.stories.js +67 -67
  129. package/src/component/list/base.js +155 -155
  130. package/src/component/list/index.js +93 -93
  131. package/src/component/list/list.stories.js +99 -99
  132. package/src/component/list/style.less +58 -58
  133. package/src/component/loading/index.js +45 -45
  134. package/src/component/loading/loading_chunk.js +59 -59
  135. package/src/component/loading/loading_full_screen.js +62 -62
  136. package/src/component/loading/stories.js +46 -46
  137. package/src/component/loading/style.less +92 -92
  138. package/src/component/mask/index.js +34 -34
  139. package/src/component/mask/style.less +10 -10
  140. package/src/component/modal/clean_modal.js +36 -36
  141. package/src/component/modal/index.js +293 -293
  142. package/src/component/modal/right_side_modal.js +37 -37
  143. package/src/component/modal/stories.js +96 -96
  144. package/src/component/modal/style.less +145 -145
  145. package/src/component/more_select/base.js +517 -517
  146. package/src/component/more_select/index.js +91 -91
  147. package/src/component/more_select/stories.js +261 -261
  148. package/src/component/more_select/style.less +130 -130
  149. package/src/component/nav/index.js +269 -269
  150. package/src/component/nav/nav.stories.js +133 -133
  151. package/src/component/nav/style.less +156 -156
  152. package/src/component/nprogress/index.js +34 -34
  153. package/src/component/nprogress/stories.js +22 -22
  154. package/src/component/nprogress/style.less +39 -39
  155. package/src/component/pagination/base.js +67 -67
  156. package/src/component/pagination/left.js +65 -65
  157. package/src/component/pagination/page.js +120 -120
  158. package/src/component/pagination/page_peek.js +96 -96
  159. package/src/component/pagination/pagination.js +54 -54
  160. package/src/component/pagination/pagination.stories.js +104 -104
  161. package/src/component/pagination/pagination_text.js +71 -71
  162. package/src/component/pagination/pagination_v2.js +30 -30
  163. package/src/component/pagination/right.js +67 -67
  164. package/src/component/pagination/style.less +52 -52
  165. package/src/component/pagination/util.js +5 -5
  166. package/src/component/picture_preview/index.js +21 -21
  167. package/src/component/popover/index.js +373 -373
  168. package/src/component/popover/stories.js +101 -101
  169. package/src/component/popup/index.js +4 -4
  170. package/src/component/popup/popup.js +172 -172
  171. package/src/component/popup/popup_content_confirm.js +67 -67
  172. package/src/component/popup/style.less +105 -105
  173. package/src/component/price/index.js +147 -147
  174. package/src/component/price/stories.js +34 -34
  175. package/src/component/progress/index.js +101 -101
  176. package/src/component/progress/stories.js +60 -60
  177. package/src/component/progress/style.less +88 -88
  178. package/src/component/progress_circle/index.js +116 -116
  179. package/src/component/progress_circle/stories.js +54 -54
  180. package/src/component/progress_circle/style.less +17 -17
  181. package/src/component/radio/index.js +4 -4
  182. package/src/component/radio/radio.js +76 -76
  183. package/src/component/radio/radio_group.js +51 -51
  184. package/src/component/radio/stories.js +80 -80
  185. package/src/component/radio/style.less +63 -63
  186. package/src/component/recommend_input/index.js +118 -118
  187. package/src/component/recommend_input/recommend_input.stories.js +56 -56
  188. package/src/component/recommend_input/style.less +25 -25
  189. package/src/component/select/index.js +4 -4
  190. package/src/component/select/option.js +22 -22
  191. package/src/component/select/select.js +186 -186
  192. package/src/component/select/select.stories.js +79 -79
  193. package/src/component/select/style.less +4 -4
  194. package/src/component/selection/index.js +132 -132
  195. package/src/component/selection/selection.stories.js +41 -41
  196. package/src/component/selection/style.less +67 -67
  197. package/src/component/sheet/index.js +7 -7
  198. package/src/component/sheet/sheet.js +348 -348
  199. package/src/component/sheet/sheet_action.js +16 -16
  200. package/src/component/sheet/sheet_batch_action.js +16 -16
  201. package/src/component/sheet/sheet_column.js +21 -21
  202. package/src/component/sheet/sheet_select.js +31 -31
  203. package/src/component/sheet/stories.js +210 -210
  204. package/src/component/sheet/style.less +95 -95
  205. package/src/component/steps/index.js +66 -66
  206. package/src/component/steps/steps.stories.js +15 -15
  207. package/src/component/steps/style.less +39 -39
  208. package/src/component/storage/index.js +54 -54
  209. package/src/component/storage/stories.js +38 -38
  210. package/src/component/switch/index.js +118 -118
  211. package/src/component/switch/stories.js +7 -7
  212. package/src/component/switch/style.less +70 -70
  213. package/src/component/table_select/index.js +152 -152
  214. package/src/component/table_select/style.less +12 -12
  215. package/src/component/table_select/table_select.stories.js +91 -91
  216. package/src/component/table_select/util.js +21 -21
  217. package/src/component/tabs/style.less +33 -33
  218. package/src/component/tabs/tabs.js +97 -97
  219. package/src/component/tabs/tabs.stories.js +48 -48
  220. package/src/component/time_span/style.less +45 -45
  221. package/src/component/time_span/time_span.js +183 -183
  222. package/src/component/time_span/time_span.stories.js +66 -66
  223. package/src/component/time_span/time_span_picker.js +112 -112
  224. package/src/component/time_span/time_span_picker.stories.js +71 -71
  225. package/src/component/tip/index.js +168 -168
  226. package/src/component/tip/stories.js +54 -54
  227. package/src/component/tip/style.less +41 -41
  228. package/src/component/tool_tip/index.js +58 -58
  229. package/src/component/tool_tip/stories.js +36 -36
  230. package/src/component/transfer/box.js +186 -186
  231. package/src/component/transfer/index.js +4 -4
  232. package/src/component/transfer/stories.js +108 -108
  233. package/src/component/transfer/style.less +34 -34
  234. package/src/component/transfer/transfer.js +181 -181
  235. package/src/component/transfer/transfer_group.js +178 -178
  236. package/src/component/transfer_v2/index.js +171 -171
  237. package/src/component/transfer_v2/transfer_v2.stories.js +226 -226
  238. package/src/component/tree/bottom.js +41 -41
  239. package/src/component/tree/index.js +205 -205
  240. package/src/component/tree/item.js +154 -154
  241. package/src/component/tree/list.js +151 -151
  242. package/src/component/tree/style.less +147 -147
  243. package/src/component/tree/tree.stories.js +241 -241
  244. package/src/component/tree/util.js +24 -24
  245. package/src/component/tree_v2/bottom.js +40 -40
  246. package/src/component/tree_v2/index.js +260 -260
  247. package/src/component/tree_v2/list.js +230 -230
  248. package/src/component/tree_v2/style.less +38 -38
  249. package/src/component/tree_v2/tree.stories.js +419 -419
  250. package/src/component/tree_v2/util.js +185 -185
  251. package/src/component/uploader/index.js +108 -108
  252. package/src/component/uploader/style.less +24 -24
  253. package/src/component/uploader/uploader.stories.js +51 -51
  254. package/src/css/arrow.less +56 -56
  255. package/src/css/bg.less +52 -52
  256. package/src/css/border.less +40 -40
  257. package/src/css/cover.less +236 -236
  258. package/src/css/cursor.less +19 -19
  259. package/src/css/display.less +16 -16
  260. package/src/css/distance.less +324 -324
  261. package/src/css/error.less +10 -10
  262. package/src/css/other.less +16 -16
  263. package/src/css/overflow.less +23 -23
  264. package/src/css/position.less +11 -11
  265. package/src/css/rotate.less +28 -28
  266. package/src/css/shadow.less +11 -11
  267. package/src/css/stories.js +104 -104
  268. package/src/css/svg.less +51 -51
  269. package/src/css/text.less +120 -120
  270. package/src/css/variables.less +62 -62
  271. package/src/event_type.js +16 -16
  272. package/src/fonts/glyphicons-halflings-regular.svg +542 -542
  273. package/src/index.js +237 -237
  274. package/src/index.less +108 -108
  275. package/src/less/.csscomb.json +304 -304
  276. package/src/less/.csslintrc +19 -19
  277. package/src/less/alerts.less +72 -72
  278. package/src/less/badges.less +65 -65
  279. package/src/less/bootstrap.less +51 -51
  280. package/src/less/breadcrumbs.less +25 -25
  281. package/src/less/button-groups.less +253 -253
  282. package/src/less/buttons.less +186 -186
  283. package/src/less/carousel.less +269 -269
  284. package/src/less/close.less +33 -33
  285. package/src/less/code.less +68 -68
  286. package/src/less/component-animations.less +39 -39
  287. package/src/less/custom.less +37 -37
  288. package/src/less/dropdowns.less +215 -215
  289. package/src/less/forms.less +612 -612
  290. package/src/less/glyphicons.less +1614 -1614
  291. package/src/less/grid.less +76 -76
  292. package/src/less/input-groups.less +175 -175
  293. package/src/less/jumbotron.less +53 -53
  294. package/src/less/labels.less +64 -64
  295. package/src/less/list-group.less +126 -126
  296. package/src/less/media.less +66 -66
  297. package/src/less/mixins/alerts.less +14 -14
  298. package/src/less/mixins/background-variant.less +9 -9
  299. package/src/less/mixins/border-radius.less +21 -21
  300. package/src/less/mixins/buttons.less +65 -65
  301. package/src/less/mixins/center-block.less +7 -7
  302. package/src/less/mixins/clearfix.less +22 -22
  303. package/src/less/mixins/forms.less +84 -84
  304. package/src/less/mixins/gradients.less +59 -59
  305. package/src/less/mixins/grid-framework.less +96 -96
  306. package/src/less/mixins/grid.less +134 -134
  307. package/src/less/mixins/hide-text.less +21 -21
  308. package/src/less/mixins/image.less +25 -25
  309. package/src/less/mixins/labels.less +12 -12
  310. package/src/less/mixins/list-group.less +30 -30
  311. package/src/less/mixins/nav-divider.less +10 -10
  312. package/src/less/mixins/nav-vertical-align.less +9 -9
  313. package/src/less/mixins/opacity.less +8 -8
  314. package/src/less/mixins/pagination.less +24 -24
  315. package/src/less/mixins/panels.less +24 -24
  316. package/src/less/mixins/progress-bar.less +10 -10
  317. package/src/less/mixins/reset-filter.less +8 -8
  318. package/src/less/mixins/reset-text.less +18 -18
  319. package/src/less/mixins/resize.less +6 -6
  320. package/src/less/mixins/responsive-visibility.less +21 -21
  321. package/src/less/mixins/size.less +10 -10
  322. package/src/less/mixins/tab-focus.less +9 -9
  323. package/src/less/mixins/table-row.less +28 -28
  324. package/src/less/mixins/text-emphasis.less +9 -9
  325. package/src/less/mixins/text-overflow.less +8 -8
  326. package/src/less/mixins/vendor-prefixes.less +254 -254
  327. package/src/less/mixins.less +36 -36
  328. package/src/less/modals.less +163 -163
  329. package/src/less/navbar.less +651 -651
  330. package/src/less/navs.less +236 -236
  331. package/src/less/normalize.less +424 -424
  332. package/src/less/pager.less +54 -54
  333. package/src/less/pagination.less +90 -90
  334. package/src/less/panels.less +274 -274
  335. package/src/less/popovers.less +140 -140
  336. package/src/less/print.less +103 -103
  337. package/src/less/progress-bars.less +92 -92
  338. package/src/less/responsive-embed.less +35 -35
  339. package/src/less/responsive-utilities.less +209 -209
  340. package/src/less/scaffolding.less +154 -154
  341. package/src/less/tables.less +228 -228
  342. package/src/less/theme.less +344 -344
  343. package/src/less/thumbnails.less +35 -35
  344. package/src/less/tooltip.less +115 -115
  345. package/src/less/type.less +352 -352
  346. package/src/less/utilities.less +57 -57
  347. package/src/less/variables.less +833 -833
  348. package/src/less/wells.less +29 -29
  349. package/src/sotries.js +4 -4
  350. package/src/validator/index.js +10 -10
  351. package/src/validator/rules.js +66 -66
  352. package/src/validator/type.js +10 -10
  353. package/src/validator/validator.js +86 -86
  354. package/src/var.less +4 -4
  355. package/svg/calendar-month.svg +8 -8
  356. package/svg/calendar-year.svg +13 -13
  357. package/svg/calendar.svg +17 -17
  358. package/svg/check-detail.svg +18 -18
  359. package/svg/close-circle.svg +13 -13
  360. package/svg/closeup.svg +20 -20
  361. package/svg/delete.svg +10 -10
  362. package/svg/down-small.svg +1 -1
  363. package/svg/down.svg +1 -1
  364. package/svg/edit-box.svg +17 -17
  365. package/svg/edit-pen.svg +17 -17
  366. package/svg/empty.svg +27 -27
  367. package/svg/expand.svg +21 -21
  368. package/svg/left-small.svg +1 -1
  369. package/svg/more.svg +10 -10
  370. package/svg/next.svg +40 -40
  371. package/svg/pen.svg +12 -12
  372. package/svg/remove.svg +1 -1
  373. package/svg/right-small.svg +1 -1
  374. package/svg/search.svg +8 -8
  375. package/svg/setting.svg +17 -17
  376. package/svg/up-small.svg +1 -1
  377. package/svg/up.svg +1 -1
@@ -1,39 +1,39 @@
1
- .gm-nprogress {
2
- transition: all 200ms ease;
3
- height: 2px;
4
- background: @brand-primary;
5
- width: 100%;
6
- position: fixed;
7
- top: 0;
8
- left: 0;
9
- right: 0;
10
- z-index: 9999;
11
- }
12
-
13
- .gm-nprogress-loading {
14
- animation: gm-nprogress-loading 1s linear;
15
- animation-fill-mode: forwards;
16
- }
17
-
18
- .gm-nprogress-completed {
19
- transform: translateX(0);
20
- visibility: hidden;
21
- }
22
-
23
- @keyframes gm-nprogress-loading {
24
- 0% {
25
- transform: translateX(-100%);
26
- }
27
-
28
- 20% {
29
- transform: translateX(-50%);
30
- }
31
-
32
- 50% {
33
- transform: translateX(-20%);
34
- }
35
-
36
- 100% {
37
- transform: translateX(-10%);
38
- }
39
- }
1
+ .gm-nprogress {
2
+ transition: all 200ms ease;
3
+ height: 2px;
4
+ background: @brand-primary;
5
+ width: 100%;
6
+ position: fixed;
7
+ top: 0;
8
+ left: 0;
9
+ right: 0;
10
+ z-index: 9999;
11
+ }
12
+
13
+ .gm-nprogress-loading {
14
+ animation: gm-nprogress-loading 1s linear;
15
+ animation-fill-mode: forwards;
16
+ }
17
+
18
+ .gm-nprogress-completed {
19
+ transform: translateX(0);
20
+ visibility: hidden;
21
+ }
22
+
23
+ @keyframes gm-nprogress-loading {
24
+ 0% {
25
+ transform: translateX(-100%);
26
+ }
27
+
28
+ 20% {
29
+ transform: translateX(-50%);
30
+ }
31
+
32
+ 50% {
33
+ transform: translateX(-20%);
34
+ }
35
+
36
+ 100% {
37
+ transform: translateX(-10%);
38
+ }
39
+ }
@@ -1,67 +1,67 @@
1
- import React from 'react'
2
- import PropTypes from 'prop-types'
3
- import Flex from '../flex'
4
- import classNames from 'classnames'
5
- import Left from './left'
6
- import Page from './page'
7
- import Right from './right'
8
- import PagePeek from './page_peek'
9
-
10
- const PaginationBase = props => {
11
- const {
12
- data,
13
- onChange,
14
- showCount,
15
- _peekInfo,
16
- className,
17
- limitData,
18
- ...rest
19
- } = props
20
-
21
- return (
22
- <Flex
23
- {...rest}
24
- alignCenter
25
- className={classNames('gm-pagination', className)}
26
- >
27
- <Left
28
- data={data}
29
- limitData={limitData}
30
- onChange={onChange}
31
- showCount={showCount}
32
- />
33
- {_peekInfo ? (
34
- <PagePeek data={data} _peekInfo={_peekInfo} onChange={onChange} />
35
- ) : (
36
- <Page data={data} onChange={onChange} />
37
- )}
38
- {showCount && <Right data={data} onChange={onChange} />}
39
- </Flex>
40
- )
41
- }
42
-
43
- PaginationBase.propTypes = {
44
- /** 非传统意义上的 分页信息。 仅此组件需要的数据而已。count 仅当前有多少条数据,非传统意义上的一共多少条数据,注意是当前。 */
45
- data: PropTypes.shape({
46
- count: PropTypes.number.isRequired,
47
- offset: PropTypes.number.isRequired,
48
- limit: PropTypes.number.isRequired
49
- }),
50
- /** 提供 {offset, limit} */
51
- onChange: PropTypes.func.isRequired,
52
- /** 此 count 非 data.count。此只是用来控制不显示总数 */
53
- showCount: PropTypes.bool,
54
- className: PropTypes.string,
55
- style: PropTypes.object,
56
- /** 私有 */
57
- _peekInfo: PropTypes.shape({
58
- more: PropTypes.bool,
59
- peek: PropTypes.number
60
- }),
61
- /**
62
- *自定义分页,默认
63
- */
64
- limitData: PropTypes.array
65
- }
66
-
67
- export default PaginationBase
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import Flex from '../flex'
4
+ import classNames from 'classnames'
5
+ import Left from './left'
6
+ import Page from './page'
7
+ import Right from './right'
8
+ import PagePeek from './page_peek'
9
+
10
+ const PaginationBase = props => {
11
+ const {
12
+ data,
13
+ onChange,
14
+ showCount,
15
+ _peekInfo,
16
+ className,
17
+ limitData,
18
+ ...rest
19
+ } = props
20
+
21
+ return (
22
+ <Flex
23
+ {...rest}
24
+ alignCenter
25
+ className={classNames('gm-pagination', className)}
26
+ >
27
+ <Left
28
+ data={data}
29
+ limitData={limitData}
30
+ onChange={onChange}
31
+ showCount={showCount}
32
+ />
33
+ {_peekInfo ? (
34
+ <PagePeek data={data} _peekInfo={_peekInfo} onChange={onChange} />
35
+ ) : (
36
+ <Page data={data} onChange={onChange} />
37
+ )}
38
+ {showCount && <Right data={data} onChange={onChange} />}
39
+ </Flex>
40
+ )
41
+ }
42
+
43
+ PaginationBase.propTypes = {
44
+ /** 非传统意义上的 分页信息。 仅此组件需要的数据而已。count 仅当前有多少条数据,非传统意义上的一共多少条数据,注意是当前。 */
45
+ data: PropTypes.shape({
46
+ count: PropTypes.number.isRequired,
47
+ offset: PropTypes.number.isRequired,
48
+ limit: PropTypes.number.isRequired
49
+ }),
50
+ /** 提供 {offset, limit} */
51
+ onChange: PropTypes.func.isRequired,
52
+ /** 此 count 非 data.count。此只是用来控制不显示总数 */
53
+ showCount: PropTypes.bool,
54
+ className: PropTypes.string,
55
+ style: PropTypes.object,
56
+ /** 私有 */
57
+ _peekInfo: PropTypes.shape({
58
+ more: PropTypes.bool,
59
+ peek: PropTypes.number
60
+ }),
61
+ /**
62
+ *自定义分页,默认
63
+ */
64
+ limitData: PropTypes.array
65
+ }
66
+
67
+ export default PaginationBase
@@ -1,65 +1,65 @@
1
- import React from 'react'
2
- import PropTypes from 'prop-types'
3
- import { Select } from '../select'
4
- import Flex from '../flex'
5
-
6
- const defaultLimitData = [
7
- { value: 10, text: 10 },
8
- { value: 20, text: 20 },
9
- { value: 50, text: 50 }
10
- ]
11
-
12
- const Limit = ({ value, onChange, limitData }) => {
13
- return (
14
- <Select
15
- data={limitData}
16
- value={value}
17
- onChange={onChange}
18
- style={{ width: '70px' }}
19
- />
20
- )
21
- }
22
-
23
- Limit.propTypes = {
24
- value: PropTypes.any.isRequired,
25
- onChange: PropTypes.func.isRequired,
26
- limitData: PropTypes.array
27
- }
28
- Limit.defaultProps = {
29
- limitData: defaultLimitData
30
- }
31
-
32
- const Left = ({ data, onChange, showCount, limitData }) => {
33
- const handleChangeLimit = limit => {
34
- // 回到第一页
35
- onChange({
36
- offset: 0,
37
- limit
38
- })
39
- }
40
-
41
- return (
42
- <Flex alignCenter>
43
- {showCount && <span>共{data.count}条记录,&nbsp;</span>}
44
- <span>每页&nbsp;</span>
45
- <Limit
46
- value={data.limit}
47
- limitData={limitData}
48
- onChange={handleChangeLimit}
49
- />
50
- <span>&nbsp;条</span>
51
- </Flex>
52
- )
53
- }
54
-
55
- Left.propTypes = {
56
- data: PropTypes.object,
57
- onChange: PropTypes.func.isRequired,
58
- showCount: PropTypes.bool,
59
- limitData: PropTypes.array
60
- }
61
- Left.defaultProps = {
62
- limitData: defaultLimitData
63
- }
64
-
65
- export default Left
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import { Select } from '../select'
4
+ import Flex from '../flex'
5
+
6
+ const defaultLimitData = [
7
+ { value: 10, text: 10 },
8
+ { value: 20, text: 20 },
9
+ { value: 50, text: 50 }
10
+ ]
11
+
12
+ const Limit = ({ value, onChange, limitData }) => {
13
+ return (
14
+ <Select
15
+ data={limitData}
16
+ value={value}
17
+ onChange={onChange}
18
+ style={{ width: '70px' }}
19
+ />
20
+ )
21
+ }
22
+
23
+ Limit.propTypes = {
24
+ value: PropTypes.any.isRequired,
25
+ onChange: PropTypes.func.isRequired,
26
+ limitData: PropTypes.array
27
+ }
28
+ Limit.defaultProps = {
29
+ limitData: defaultLimitData
30
+ }
31
+
32
+ const Left = ({ data, onChange, showCount, limitData }) => {
33
+ const handleChangeLimit = limit => {
34
+ // 回到第一页
35
+ onChange({
36
+ offset: 0,
37
+ limit
38
+ })
39
+ }
40
+
41
+ return (
42
+ <Flex alignCenter>
43
+ {showCount && <span>共{data.count}条记录,&nbsp;</span>}
44
+ <span>每页&nbsp;</span>
45
+ <Limit
46
+ value={data.limit}
47
+ limitData={limitData}
48
+ onChange={handleChangeLimit}
49
+ />
50
+ <span>&nbsp;条</span>
51
+ </Flex>
52
+ )
53
+ }
54
+
55
+ Left.propTypes = {
56
+ data: PropTypes.object,
57
+ onChange: PropTypes.func.isRequired,
58
+ showCount: PropTypes.bool,
59
+ limitData: PropTypes.array
60
+ }
61
+ Left.defaultProps = {
62
+ limitData: defaultLimitData
63
+ }
64
+
65
+ export default Left
@@ -1,120 +1,120 @@
1
- import React from 'react'
2
- import PropTypes from 'prop-types'
3
- import SVGLeftSmall from '../../../svg/left-small.svg'
4
- import SVGRightSmall from '../../../svg/right-small.svg'
5
- import Flex from '../flex'
6
- import classNames from 'classnames'
7
- import { getIndex } from './util'
8
-
9
- function getInfo(data) {
10
- const index = getIndex(data)
11
- const all = Math.ceil(data.count / data.limit)
12
-
13
- const diff = 2
14
- let pages = []
15
-
16
- let begin = Math.max(index - diff, 1)
17
-
18
- let end = Math.min(index + diff, all)
19
-
20
- if (all > diff * 2 + 1) {
21
- if (begin === 1) {
22
- end = diff * 2 + 1
23
- } else if (end === all) {
24
- begin = Math.max(end - 2 * diff, 1)
25
- }
26
- }
27
-
28
- for (let i = begin; i <= end; i++) {
29
- pages.push(i)
30
- }
31
-
32
- // 如果总数为0,还是要给个页码1
33
- if (data.count === 0) {
34
- pages = [1]
35
- }
36
-
37
- return {
38
- index,
39
- all,
40
- begin,
41
- end,
42
- pages
43
- }
44
- }
45
-
46
- const Page = props => {
47
- const { data, onChange } = props
48
- const { index, all, begin, end, pages } = getInfo(data)
49
-
50
- const handlePage = _index => {
51
- // 不处理
52
- if (index === _index || _index < 1 || _index > all) {
53
- return
54
- }
55
-
56
- onChange({
57
- offset: (_index - 1) * data.limit,
58
- limit: data.limit
59
- })
60
- }
61
-
62
- return (
63
- <Flex alignCenter className='gm-pagination-page'>
64
- <div
65
- className={classNames('gm-pagination-page-item', {
66
- disabled: index === 1
67
- })}
68
- onClick={() => handlePage(index - 1)}
69
- >
70
- <SVGLeftSmall />
71
- </div>
72
-
73
- {begin >= 2 && (
74
- <div className='gm-pagination-page-item' onClick={() => handlePage(1)}>
75
- 1
76
- </div>
77
- )}
78
- {begin >= 3 && <span className='gm-pagination-page-text'>···</span>}
79
-
80
- {pages.map((page, i) => (
81
- <div
82
- key={i}
83
- className={classNames('gm-pagination-page-item', {
84
- active: index === page
85
- })}
86
- onClick={() => handlePage(page)}
87
- >
88
- {page}
89
- </div>
90
- ))}
91
-
92
- {end <= all - 2 && <span className='gm-pagination-page-text'>···</span>}
93
- {end <= all - 1 && (
94
- <div
95
- className='gm-pagination-page-item'
96
- onClick={() => handlePage(all)}
97
- >
98
- {all}
99
- </div>
100
- )}
101
-
102
- <div
103
- className={classNames('gm-pagination-page-item', {
104
- disabled: index === all || all === 0
105
- })}
106
- onClick={() => handlePage(index + 1)}
107
- >
108
- <SVGRightSmall />
109
- </div>
110
- </Flex>
111
- )
112
- }
113
-
114
- Page.propTypes = {
115
- data: PropTypes.object,
116
- /* 提供 {index, limit} */
117
- onChange: PropTypes.func.isRequired
118
- }
119
-
120
- export default Page
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import SVGLeftSmall from '../../../svg/left-small.svg'
4
+ import SVGRightSmall from '../../../svg/right-small.svg'
5
+ import Flex from '../flex'
6
+ import classNames from 'classnames'
7
+ import { getIndex } from './util'
8
+
9
+ function getInfo(data) {
10
+ const index = getIndex(data)
11
+ const all = Math.ceil(data.count / data.limit)
12
+
13
+ const diff = 2
14
+ let pages = []
15
+
16
+ let begin = Math.max(index - diff, 1)
17
+
18
+ let end = Math.min(index + diff, all)
19
+
20
+ if (all > diff * 2 + 1) {
21
+ if (begin === 1) {
22
+ end = diff * 2 + 1
23
+ } else if (end === all) {
24
+ begin = Math.max(end - 2 * diff, 1)
25
+ }
26
+ }
27
+
28
+ for (let i = begin; i <= end; i++) {
29
+ pages.push(i)
30
+ }
31
+
32
+ // 如果总数为0,还是要给个页码1
33
+ if (data.count === 0) {
34
+ pages = [1]
35
+ }
36
+
37
+ return {
38
+ index,
39
+ all,
40
+ begin,
41
+ end,
42
+ pages
43
+ }
44
+ }
45
+
46
+ const Page = props => {
47
+ const { data, onChange } = props
48
+ const { index, all, begin, end, pages } = getInfo(data)
49
+
50
+ const handlePage = _index => {
51
+ // 不处理
52
+ if (index === _index || _index < 1 || _index > all) {
53
+ return
54
+ }
55
+
56
+ onChange({
57
+ offset: (_index - 1) * data.limit,
58
+ limit: data.limit
59
+ })
60
+ }
61
+
62
+ return (
63
+ <Flex alignCenter className='gm-pagination-page'>
64
+ <div
65
+ className={classNames('gm-pagination-page-item', {
66
+ disabled: index === 1
67
+ })}
68
+ onClick={() => handlePage(index - 1)}
69
+ >
70
+ <SVGLeftSmall />
71
+ </div>
72
+
73
+ {begin >= 2 && (
74
+ <div className='gm-pagination-page-item' onClick={() => handlePage(1)}>
75
+ 1
76
+ </div>
77
+ )}
78
+ {begin >= 3 && <span className='gm-pagination-page-text'>···</span>}
79
+
80
+ {pages.map((page, i) => (
81
+ <div
82
+ key={i}
83
+ className={classNames('gm-pagination-page-item', {
84
+ active: index === page
85
+ })}
86
+ onClick={() => handlePage(page)}
87
+ >
88
+ {page}
89
+ </div>
90
+ ))}
91
+
92
+ {end <= all - 2 && <span className='gm-pagination-page-text'>···</span>}
93
+ {end <= all - 1 && (
94
+ <div
95
+ className='gm-pagination-page-item'
96
+ onClick={() => handlePage(all)}
97
+ >
98
+ {all}
99
+ </div>
100
+ )}
101
+
102
+ <div
103
+ className={classNames('gm-pagination-page-item', {
104
+ disabled: index === all || all === 0
105
+ })}
106
+ onClick={() => handlePage(index + 1)}
107
+ >
108
+ <SVGRightSmall />
109
+ </div>
110
+ </Flex>
111
+ )
112
+ }
113
+
114
+ Page.propTypes = {
115
+ data: PropTypes.object,
116
+ /* 提供 {index, limit} */
117
+ onChange: PropTypes.func.isRequired
118
+ }
119
+
120
+ export default Page