@gmfe/react 2.14.17 → 2.14.19-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 (376) hide show
  1. package/package.json +3 -3
  2. package/src/common/hooks/index.js +3 -3
  3. package/src/common/hooks/use_mutation_observer.js +25 -25
  4. package/src/common/util.js +52 -52
  5. package/src/component/affix/affix.stories.js +13 -13
  6. package/src/component/affix/index.js +21 -21
  7. package/src/component/box/box.js +31 -31
  8. package/src/component/box/box.stories.js +94 -94
  9. package/src/component/box/box_form.js +77 -77
  10. package/src/component/box/box_panel.js +91 -91
  11. package/src/component/box/box_table.js +51 -51
  12. package/src/component/box/index.js +6 -6
  13. package/src/component/box/style.less +39 -39
  14. package/src/component/button/button.stories.js +91 -91
  15. package/src/component/button/index.js +92 -92
  16. package/src/component/button/style.less +114 -114
  17. package/src/component/calendar/calendar.js +52 -52
  18. package/src/component/calendar/calendar.stories.js +57 -57
  19. package/src/component/calendar/content.js +89 -89
  20. package/src/component/calendar/day.js +109 -109
  21. package/src/component/calendar/head.js +243 -243
  22. package/src/component/calendar/index.js +4 -4
  23. package/src/component/calendar/range_calendar.js +150 -150
  24. package/src/component/calendar/style.less +140 -140
  25. package/src/component/calendar/week.js +27 -27
  26. package/src/component/carousel/carousel.js +178 -178
  27. package/src/component/carousel/stories.js +50 -50
  28. package/src/component/carousel/style.less +48 -48
  29. package/src/component/cascader/cascader.js +443 -443
  30. package/src/component/cascader/cascader.select.js +195 -195
  31. package/src/component/cascader/stories.js +240 -240
  32. package/src/component/cascader/style.less +122 -122
  33. package/src/component/checkbox/checkbox.js +86 -86
  34. package/src/component/checkbox/checkbox_group.js +66 -66
  35. package/src/component/checkbox/index.js +4 -4
  36. package/src/component/checkbox/stories.js +103 -103
  37. package/src/component/checkbox/style.less +88 -88
  38. package/src/component/collapse/collapse.stories.js +18 -18
  39. package/src/component/collapse/index.js +36 -36
  40. package/src/component/color_picker/index.js +190 -190
  41. package/src/component/color_picker/stories.js +17 -17
  42. package/src/component/color_picker/style.less +41 -41
  43. package/src/component/date_picker/date_picker.stories.js +102 -102
  44. package/src/component/date_picker/index.js +217 -217
  45. package/src/component/date_picker/overlay.js +119 -119
  46. package/src/component/date_picker/style.less +22 -22
  47. package/src/component/date_picker/time_select.js +62 -62
  48. package/src/component/date_range_picker/date_range_picker.stories.js +196 -196
  49. package/src/component/date_range_picker/index.js +206 -206
  50. package/src/component/date_range_picker/left.js +127 -127
  51. package/src/component/date_range_picker/overlay.js +202 -202
  52. package/src/component/date_range_picker/style.less +46 -46
  53. package/src/component/date_range_picker/time_range_select.js +150 -150
  54. package/src/component/date_range_picker/two.js +129 -129
  55. package/src/component/date_range_picker/util.js +42 -42
  56. package/src/component/dialog/index.js +240 -240
  57. package/src/component/dialog/stories.js +125 -125
  58. package/src/component/divider/index.js +28 -28
  59. package/src/component/divider/stories.js +5 -5
  60. package/src/component/divider/style.less +15 -15
  61. package/src/component/drawer/index.js +107 -107
  62. package/src/component/drawer/style.less +43 -43
  63. package/src/component/drop_down/drop_down.js +84 -84
  64. package/src/component/drop_down/drop_down_item.js +43 -43
  65. package/src/component/drop_down/drop_down_items.js +22 -22
  66. package/src/component/drop_down/index.js +5 -5
  67. package/src/component/drop_down/stories.js +38 -38
  68. package/src/component/drop_down/style.less +21 -21
  69. package/src/component/drop_select/index.js +208 -208
  70. package/src/component/drop_select/style.less +69 -69
  71. package/src/component/dropper/index.js +62 -62
  72. package/src/component/dropper/style.less +18 -18
  73. package/src/component/editable_text/editable_text.stories.js +47 -47
  74. package/src/component/editable_text/index.js +106 -106
  75. package/src/component/editable_text/style.less +29 -29
  76. package/src/component/filter_select/filter.select.js +416 -416
  77. package/src/component/filter_select/multiple.filter.select.js +425 -425
  78. package/src/component/filter_select/style.less +117 -117
  79. package/src/component/flex/index.js +132 -132
  80. package/src/component/flex/stories.js +13 -13
  81. package/src/component/flex/style.less +101 -101
  82. package/src/component/flip_number/index.js +196 -196
  83. package/src/component/flip_number/stories.js +25 -25
  84. package/src/component/flip_number/utils.js +50 -50
  85. package/src/component/form/form.js +153 -153
  86. package/src/component/form/form.stories.js +553 -553
  87. package/src/component/form/form_block.js +59 -59
  88. package/src/component/form/form_button.js +29 -29
  89. package/src/component/form/form_group.js +173 -173
  90. package/src/component/form/form_item.js +163 -163
  91. package/src/component/form/form_panel.js +71 -71
  92. package/src/component/form/index.js +8 -8
  93. package/src/component/form/style.less +130 -130
  94. package/src/component/form/util.js +13 -13
  95. package/src/component/function_set/function_set.stories.js +91 -91
  96. package/src/component/function_set/index.js +98 -98
  97. package/src/component/function_set/overlay.js +56 -56
  98. package/src/component/grid/col.js +72 -72
  99. package/src/component/grid/grid.stories.js +123 -123
  100. package/src/component/grid/index.js +4 -4
  101. package/src/component/grid/mixin.less +48 -48
  102. package/src/component/grid/row.js +44 -44
  103. package/src/component/grid/style.less +26 -26
  104. package/src/component/grid/util.js +11 -11
  105. package/src/component/icon_down_up/index.js +28 -28
  106. package/src/component/icon_down_up/stories.js +18 -18
  107. package/src/component/icon_down_up/style.less +8 -8
  108. package/src/component/image_preview/index.js +20 -20
  109. package/src/component/image_preview/preview_modal.js +193 -193
  110. package/src/component/image_preview/style.less +119 -119
  111. package/src/component/img_uploader/index.js +149 -149
  112. package/src/component/img_uploader/index.stories.js +51 -51
  113. package/src/component/img_uploader/style.less +22 -22
  114. package/src/component/input/index.js +19 -19
  115. package/src/component/input_number/index.js +73 -73
  116. package/src/component/input_number/number.js +158 -158
  117. package/src/component/input_number/stories.js +21 -21
  118. package/src/component/input_number/style.less +10 -10
  119. package/src/component/layout_root/index.js +165 -165
  120. package/src/component/lazy_img/index.js +68 -68
  121. package/src/component/level_list/index.js +120 -120
  122. package/src/component/level_list/level_item.js +64 -64
  123. package/src/component/level_list/level_list.stories.js +139 -139
  124. package/src/component/level_list/style.less +47 -47
  125. package/src/component/level_list/util.js +22 -22
  126. package/src/component/level_select/index.js +240 -240
  127. package/src/component/level_select/level_select.stories.js +67 -67
  128. package/src/component/list/base.js +155 -155
  129. package/src/component/list/index.js +93 -93
  130. package/src/component/list/list.stories.js +99 -99
  131. package/src/component/list/style.less +58 -58
  132. package/src/component/loading/index.js +45 -45
  133. package/src/component/loading/loading_chunk.js +59 -59
  134. package/src/component/loading/loading_full_screen.js +62 -62
  135. package/src/component/loading/stories.js +46 -46
  136. package/src/component/loading/style.less +92 -92
  137. package/src/component/mask/index.js +34 -34
  138. package/src/component/mask/style.less +10 -10
  139. package/src/component/modal/clean_modal.js +36 -36
  140. package/src/component/modal/index.js +293 -293
  141. package/src/component/modal/right_side_modal.js +37 -37
  142. package/src/component/modal/stories.js +96 -96
  143. package/src/component/modal/style.less +145 -145
  144. package/src/component/more_select/base.js +517 -517
  145. package/src/component/more_select/index.js +91 -91
  146. package/src/component/more_select/stories.js +261 -261
  147. package/src/component/more_select/style.less +130 -130
  148. package/src/component/nav/index.js +269 -269
  149. package/src/component/nav/nav.stories.js +133 -133
  150. package/src/component/nav/style.less +156 -156
  151. package/src/component/nprogress/index.js +34 -34
  152. package/src/component/nprogress/stories.js +22 -22
  153. package/src/component/nprogress/style.less +39 -39
  154. package/src/component/pagination/base.js +67 -67
  155. package/src/component/pagination/left.js +65 -65
  156. package/src/component/pagination/page.js +120 -120
  157. package/src/component/pagination/page_peek.js +96 -96
  158. package/src/component/pagination/pagination.js +54 -54
  159. package/src/component/pagination/pagination.stories.js +104 -104
  160. package/src/component/pagination/pagination_text.js +71 -71
  161. package/src/component/pagination/pagination_v2.js +30 -30
  162. package/src/component/pagination/right.js +67 -67
  163. package/src/component/pagination/style.less +52 -52
  164. package/src/component/pagination/util.js +5 -5
  165. package/src/component/picture_preview/index.js +21 -21
  166. package/src/component/popover/index.js +373 -373
  167. package/src/component/popover/stories.js +101 -101
  168. package/src/component/popup/index.js +4 -4
  169. package/src/component/popup/popup.js +172 -172
  170. package/src/component/popup/popup_content_confirm.js +67 -67
  171. package/src/component/popup/style.less +105 -105
  172. package/src/component/price/index.js +147 -147
  173. package/src/component/price/stories.js +34 -34
  174. package/src/component/progress/index.js +101 -101
  175. package/src/component/progress/stories.js +60 -60
  176. package/src/component/progress/style.less +88 -88
  177. package/src/component/progress_circle/index.js +116 -116
  178. package/src/component/progress_circle/stories.js +54 -54
  179. package/src/component/progress_circle/style.less +17 -17
  180. package/src/component/radio/index.js +4 -4
  181. package/src/component/radio/radio.js +76 -76
  182. package/src/component/radio/radio_group.js +51 -51
  183. package/src/component/radio/stories.js +80 -80
  184. package/src/component/radio/style.less +63 -63
  185. package/src/component/recommend_input/index.js +118 -118
  186. package/src/component/recommend_input/recommend_input.stories.js +56 -56
  187. package/src/component/recommend_input/style.less +25 -25
  188. package/src/component/select/index.js +4 -4
  189. package/src/component/select/option.js +22 -22
  190. package/src/component/select/select.js +186 -186
  191. package/src/component/select/select.stories.js +79 -79
  192. package/src/component/select/style.less +4 -4
  193. package/src/component/selection/index.js +132 -132
  194. package/src/component/selection/selection.stories.js +41 -41
  195. package/src/component/selection/style.less +67 -67
  196. package/src/component/sheet/index.js +7 -7
  197. package/src/component/sheet/sheet.js +348 -348
  198. package/src/component/sheet/sheet_action.js +16 -16
  199. package/src/component/sheet/sheet_batch_action.js +16 -16
  200. package/src/component/sheet/sheet_column.js +21 -21
  201. package/src/component/sheet/sheet_select.js +31 -31
  202. package/src/component/sheet/stories.js +210 -210
  203. package/src/component/sheet/style.less +95 -95
  204. package/src/component/steps/index.js +66 -66
  205. package/src/component/steps/steps.stories.js +15 -15
  206. package/src/component/steps/style.less +39 -39
  207. package/src/component/storage/index.js +54 -54
  208. package/src/component/storage/stories.js +38 -38
  209. package/src/component/switch/index.js +118 -118
  210. package/src/component/switch/stories.js +7 -7
  211. package/src/component/switch/style.less +70 -70
  212. package/src/component/table_select/index.js +152 -152
  213. package/src/component/table_select/style.less +12 -12
  214. package/src/component/table_select/table_select.stories.js +91 -91
  215. package/src/component/table_select/util.js +21 -21
  216. package/src/component/tabs/style.less +33 -33
  217. package/src/component/tabs/tabs.js +97 -97
  218. package/src/component/tabs/tabs.stories.js +48 -48
  219. package/src/component/time_span/style.less +45 -45
  220. package/src/component/time_span/time_span.js +183 -183
  221. package/src/component/time_span/time_span.stories.js +66 -66
  222. package/src/component/time_span/time_span_picker.js +112 -112
  223. package/src/component/time_span/time_span_picker.stories.js +71 -71
  224. package/src/component/tip/index.js +168 -168
  225. package/src/component/tip/stories.js +54 -54
  226. package/src/component/tip/style.less +41 -41
  227. package/src/component/tool_tip/index.js +58 -58
  228. package/src/component/tool_tip/stories.js +36 -36
  229. package/src/component/transfer/box.js +186 -141
  230. package/src/component/transfer/index.js +4 -4
  231. package/src/component/transfer/stories.js +108 -118
  232. package/src/component/transfer/style.less +34 -34
  233. package/src/component/transfer/transfer.js +181 -173
  234. package/src/component/transfer/transfer_group.js +178 -178
  235. package/src/component/transfer_v2/index.js +171 -171
  236. package/src/component/transfer_v2/transfer_v2.stories.js +226 -226
  237. package/src/component/tree/bottom.js +41 -41
  238. package/src/component/tree/index.js +205 -205
  239. package/src/component/tree/item.js +154 -154
  240. package/src/component/tree/list.js +151 -151
  241. package/src/component/tree/style.less +147 -147
  242. package/src/component/tree/tree.stories.js +241 -241
  243. package/src/component/tree/util.js +24 -24
  244. package/src/component/tree_v2/bottom.js +40 -40
  245. package/src/component/tree_v2/index.js +260 -260
  246. package/src/component/tree_v2/list.js +230 -230
  247. package/src/component/tree_v2/style.less +38 -38
  248. package/src/component/tree_v2/tree.stories.js +419 -419
  249. package/src/component/tree_v2/util.js +185 -185
  250. package/src/component/uploader/index.js +108 -108
  251. package/src/component/uploader/style.less +24 -24
  252. package/src/component/uploader/uploader.stories.js +51 -51
  253. package/src/css/arrow.less +56 -56
  254. package/src/css/bg.less +52 -52
  255. package/src/css/border.less +40 -40
  256. package/src/css/cover.less +236 -236
  257. package/src/css/cursor.less +19 -19
  258. package/src/css/display.less +16 -16
  259. package/src/css/distance.less +324 -324
  260. package/src/css/error.less +10 -10
  261. package/src/css/other.less +16 -16
  262. package/src/css/overflow.less +23 -23
  263. package/src/css/position.less +11 -11
  264. package/src/css/rotate.less +28 -28
  265. package/src/css/shadow.less +11 -11
  266. package/src/css/stories.js +104 -104
  267. package/src/css/svg.less +51 -51
  268. package/src/css/text.less +120 -120
  269. package/src/css/variables.less +62 -62
  270. package/src/event_type.js +16 -16
  271. package/src/fonts/glyphicons-halflings-regular.svg +542 -542
  272. package/src/index.js +237 -237
  273. package/src/index.less +108 -108
  274. package/src/less/.csscomb.json +304 -304
  275. package/src/less/.csslintrc +19 -19
  276. package/src/less/alerts.less +72 -72
  277. package/src/less/badges.less +65 -65
  278. package/src/less/bootstrap.less +51 -51
  279. package/src/less/breadcrumbs.less +25 -25
  280. package/src/less/button-groups.less +253 -253
  281. package/src/less/buttons.less +186 -186
  282. package/src/less/carousel.less +269 -269
  283. package/src/less/close.less +33 -33
  284. package/src/less/code.less +68 -68
  285. package/src/less/component-animations.less +39 -39
  286. package/src/less/custom.less +37 -37
  287. package/src/less/dropdowns.less +215 -215
  288. package/src/less/forms.less +612 -612
  289. package/src/less/glyphicons.less +1614 -1614
  290. package/src/less/grid.less +76 -76
  291. package/src/less/input-groups.less +175 -175
  292. package/src/less/jumbotron.less +53 -53
  293. package/src/less/labels.less +64 -64
  294. package/src/less/list-group.less +126 -126
  295. package/src/less/media.less +66 -66
  296. package/src/less/mixins/alerts.less +14 -14
  297. package/src/less/mixins/background-variant.less +9 -9
  298. package/src/less/mixins/border-radius.less +21 -21
  299. package/src/less/mixins/buttons.less +65 -65
  300. package/src/less/mixins/center-block.less +7 -7
  301. package/src/less/mixins/clearfix.less +22 -22
  302. package/src/less/mixins/forms.less +84 -84
  303. package/src/less/mixins/gradients.less +59 -59
  304. package/src/less/mixins/grid-framework.less +96 -96
  305. package/src/less/mixins/grid.less +134 -134
  306. package/src/less/mixins/hide-text.less +21 -21
  307. package/src/less/mixins/image.less +25 -25
  308. package/src/less/mixins/labels.less +12 -12
  309. package/src/less/mixins/list-group.less +30 -30
  310. package/src/less/mixins/nav-divider.less +10 -10
  311. package/src/less/mixins/nav-vertical-align.less +9 -9
  312. package/src/less/mixins/opacity.less +8 -8
  313. package/src/less/mixins/pagination.less +24 -24
  314. package/src/less/mixins/panels.less +24 -24
  315. package/src/less/mixins/progress-bar.less +10 -10
  316. package/src/less/mixins/reset-filter.less +8 -8
  317. package/src/less/mixins/reset-text.less +18 -18
  318. package/src/less/mixins/resize.less +6 -6
  319. package/src/less/mixins/responsive-visibility.less +21 -21
  320. package/src/less/mixins/size.less +10 -10
  321. package/src/less/mixins/tab-focus.less +9 -9
  322. package/src/less/mixins/table-row.less +28 -28
  323. package/src/less/mixins/text-emphasis.less +9 -9
  324. package/src/less/mixins/text-overflow.less +8 -8
  325. package/src/less/mixins/vendor-prefixes.less +254 -254
  326. package/src/less/mixins.less +36 -36
  327. package/src/less/modals.less +163 -163
  328. package/src/less/navbar.less +651 -651
  329. package/src/less/navs.less +236 -236
  330. package/src/less/normalize.less +424 -424
  331. package/src/less/pager.less +54 -54
  332. package/src/less/pagination.less +90 -90
  333. package/src/less/panels.less +274 -274
  334. package/src/less/popovers.less +140 -140
  335. package/src/less/print.less +103 -103
  336. package/src/less/progress-bars.less +92 -92
  337. package/src/less/responsive-embed.less +35 -35
  338. package/src/less/responsive-utilities.less +209 -209
  339. package/src/less/scaffolding.less +154 -154
  340. package/src/less/tables.less +228 -228
  341. package/src/less/theme.less +344 -344
  342. package/src/less/thumbnails.less +35 -35
  343. package/src/less/tooltip.less +115 -115
  344. package/src/less/type.less +352 -352
  345. package/src/less/utilities.less +57 -57
  346. package/src/less/variables.less +833 -833
  347. package/src/less/wells.less +29 -29
  348. package/src/sotries.js +4 -4
  349. package/src/validator/index.js +10 -10
  350. package/src/validator/rules.js +66 -66
  351. package/src/validator/type.js +10 -10
  352. package/src/validator/validator.js +86 -86
  353. package/src/var.less +4 -4
  354. package/svg/calendar-month.svg +8 -8
  355. package/svg/calendar-year.svg +13 -13
  356. package/svg/calendar.svg +17 -17
  357. package/svg/check-detail.svg +18 -18
  358. package/svg/close-circle.svg +13 -13
  359. package/svg/closeup.svg +20 -20
  360. package/svg/delete.svg +10 -10
  361. package/svg/down-small.svg +1 -1
  362. package/svg/down.svg +1 -1
  363. package/svg/edit-box.svg +17 -17
  364. package/svg/edit-pen.svg +17 -17
  365. package/svg/empty.svg +27 -27
  366. package/svg/expand.svg +21 -21
  367. package/svg/left-small.svg +1 -1
  368. package/svg/more.svg +10 -10
  369. package/svg/next.svg +40 -40
  370. package/svg/pen.svg +12 -12
  371. package/svg/remove.svg +1 -1
  372. package/svg/right-small.svg +1 -1
  373. package/svg/search.svg +8 -8
  374. package/svg/setting.svg +17 -17
  375. package/svg/up-small.svg +1 -1
  376. package/svg/up.svg +1 -1
package/src/component/calendar/range_calendar.js CHANGED
@@ -1,150 +1,150 @@
1
- import React, { useState, useEffect } from 'react'
2
- import PropTypes from 'prop-types'
3
- import moment from 'moment'
4
- import classNames from 'classnames'
5
- import _ from 'lodash'
6
- import Week from './week'
7
- import Content from './content'
8
- import Head from './head'
9
-
10
- const RangeCalendar = props => {
11
- const {
12
- begin,
13
- end,
14
- onSelect,
15
- willActiveSelected,
16
- onWillActiveSelected,
17
-
18
- min,
19
- max,
20
- disabledDate,
21
-
22
- disabledYearAndMonth,
23
-
24
- hoverDay,
25
- onHoverDay,
26
-
27
- className,
28
- ...rest
29
- } = props
30
-
31
- // 如果 willActiveSelected 就取 begin，否则当前
32
- const _will = willActiveSelected
33
- ? moment(willActiveSelected)
34
- : begin
35
- ? moment(begin)
36
- : moment()
37
-
38
- // 需要有状态，因为 willActiveSelected 非必传
39
- const [will, setWill] = useState(_will)
40
- // 响应 willActiveSelected 的变化，重新设置 will
41
- useEffect(() => {
42
- setWill(_will)
43
- }, [willActiveSelected])
44
-
45
- const handleSelectDay = m => {
46
- // 如果都有，则当做选 begin
47
- if (begin && end) {
48
- onSelect(m.toDate(), null)
49
- } else if (begin) {
50
- // 如果相等，选中同一天
51
- if (+begin === +m) {
52
- onSelect(m.toDate(), m.toDate())
53
- }
54
-
55
- // 根据大小调整 begin end
56
- if (+begin < +m) {
57
- onSelect(begin, m.toDate())
58
- } else {
59
- onSelect(m.toDate(), begin)
60
- }
61
- } else if (end) {
62
- // 如果相等，选中同一天
63
- if (+end === +m) {
64
- onSelect(m.toDate(), m.toDate())
65
- // return
66
- }
67
-
68
- // 根据大小调整 begin end
69
- if (+end < +m) {
70
- onSelect(end, m.toDate())
71
- } else {
72
- onSelect(m.toDate(), end)
73
- }
74
- }
75
- // 如果都没有，则当做选 begin
76
- else {
77
- onSelect(m.toDate(), null)
78
- }
79
- }
80
-
81
- const handleChangeHead = m => {
82
- setWill(m)
83
-
84
- onWillActiveSelected(m.toDate())
85
- }
86
-
87
- return (
88
- <div {...rest} className={classNames('gm-calendar', className)}>
89
- <Head
90
- value={will}
91
- onChange={handleChangeHead}
92
- disabledYearAndMonth={disabledYearAndMonth}
93
- />
94
- <Week />
95
- <Content
96
- begin={begin && moment(begin)}
97
- end={end && moment(end)}
98
- onSelect={handleSelectDay}
99
- will={will}
100
- min={min}
101
- max={max}
102
- disabledDate={disabledDate}
103
- hoverDay={hoverDay}
104
- onHoverDay={onHoverDay}
105
- />
106
- </div>
107
- )
108
- }
109
-
110
- RangeCalendar.propTypes = {
111
- /** 开始日期，Date 对象 */
112
- begin: PropTypes.object,
113
- /** 结束日期, Date 对象 */
114
- end: PropTypes.object,
115
- /** 日期选中回调函数，参数 begin, end */
116
- onSelect: PropTypes.func,
117
- /** 键盘 和 日历显示的月份 */
118
- willActiveSelected: PropTypes.object,
119
- /** 参数 date */
120
- onWillActiveSelected: PropTypes.func,
121
-
122
- /** Date对象，表示可选的最小日期 */
123
- min: PropTypes.object,
124
- /** Date对象，表示可选的最大日期 */
125
- max: PropTypes.object,
126
- /** 自定义日期是否可选。传入参数为Date对象，返回true or false。 有此属性则min max无效。 */
127
- disabledDate: PropTypes.func,
128
-
129
- /** 禁用 年 / 月 切换按钮。 可以通过 onWillActiveSelected 变更来设置此 */
130
- disabledYearAndMonth: PropTypes.oneOf(['left', 'right']),
131
-
132
- className: PropTypes.string,
133
- style: PropTypes.object,
134
-
135
- /** 当前鼠标hover日期，Date对象 */
136
- hoverDay: PropTypes.object,
137
- /** 鼠标hover回调, 参数 hoverDay */
138
- onHoverDay: PropTypes.func,
139
-
140
- /** 目前全键盘用 */
141
- onKeyDown: PropTypes.func
142
- }
143
-
144
- RangeCalendar.defaultProps = {
145
- onSelect: _.noop,
146
- onWillActiveSelected: _.noop,
147
- onKeyDown: _.noop
148
- }
149
-
150
- export default RangeCalendar
1
+ import React, { useState, useEffect } from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import moment from 'moment'
4
+ import classNames from 'classnames'
5
+ import _ from 'lodash'
6
+ import Week from './week'
7
+ import Content from './content'
8
+ import Head from './head'
9
+
10
+ const RangeCalendar = props => {
11
+ const {
12
+ begin,
13
+ end,
14
+ onSelect,
15
+ willActiveSelected,
16
+ onWillActiveSelected,
17
+
18
+ min,
19
+ max,
20
+ disabledDate,
21
+
22
+ disabledYearAndMonth,
23
+
24
+ hoverDay,
25
+ onHoverDay,
26
+
27
+ className,
28
+ ...rest
29
+ } = props
30
+
31
+ // 如果 willActiveSelected 就取 begin，否则当前
32
+ const _will = willActiveSelected
33
+ ? moment(willActiveSelected)
34
+ : begin
35
+ ? moment(begin)
36
+ : moment()
37
+
38
+ // 需要有状态，因为 willActiveSelected 非必传
39
+ const [will, setWill] = useState(_will)
40
+ // 响应 willActiveSelected 的变化，重新设置 will
41
+ useEffect(() => {
42
+ setWill(_will)
43
+ }, [willActiveSelected])
44
+
45
+ const handleSelectDay = m => {
46
+ // 如果都有，则当做选 begin
47
+ if (begin && end) {
48
+ onSelect(m.toDate(), null)
49
+ } else if (begin) {
50
+ // 如果相等，选中同一天
51
+ if (+begin === +m) {
52
+ onSelect(m.toDate(), m.toDate())
53
+ }
54
+
55
+ // 根据大小调整 begin end
56
+ if (+begin < +m) {
57
+ onSelect(begin, m.toDate())
58
+ } else {
59
+ onSelect(m.toDate(), begin)
60
+ }
61
+ } else if (end) {
62
+ // 如果相等，选中同一天
63
+ if (+end === +m) {
64
+ onSelect(m.toDate(), m.toDate())
65
+ // return
66
+ }
67
+
68
+ // 根据大小调整 begin end
69
+ if (+end < +m) {
70
+ onSelect(end, m.toDate())
71
+ } else {
72
+ onSelect(m.toDate(), end)
73
+ }
74
+ }
75
+ // 如果都没有，则当做选 begin
76
+ else {
77
+ onSelect(m.toDate(), null)
78
+ }
79
+ }
80
+
81
+ const handleChangeHead = m => {
82
+ setWill(m)
83
+
84
+ onWillActiveSelected(m.toDate())
85
+ }
86
+
87
+ return (
88
+ <div {...rest} className={classNames('gm-calendar', className)}>
89
+ <Head
90
+ value={will}
91
+ onChange={handleChangeHead}
92
+ disabledYearAndMonth={disabledYearAndMonth}
93
+ />
94
+ <Week />
95
+ <Content
96
+ begin={begin && moment(begin)}
97
+ end={end && moment(end)}
98
+ onSelect={handleSelectDay}
99
+ will={will}
100
+ min={min}
101
+ max={max}
102
+ disabledDate={disabledDate}
103
+ hoverDay={hoverDay}
104
+ onHoverDay={onHoverDay}
105
+ />
106
+ </div>
107
+ )
108
+ }
109
+
110
+ RangeCalendar.propTypes = {
111
+ /** 开始日期，Date 对象 */
112
+ begin: PropTypes.object,
113
+ /** 结束日期, Date 对象 */
114
+ end: PropTypes.object,
115
+ /** 日期选中回调函数，参数 begin, end */
116
+ onSelect: PropTypes.func,
117
+ /** 键盘 和 日历显示的月份 */
118
+ willActiveSelected: PropTypes.object,
119
+ /** 参数 date */
120
+ onWillActiveSelected: PropTypes.func,
121
+
122
+ /** Date对象，表示可选的最小日期 */
123
+ min: PropTypes.object,
124
+ /** Date对象，表示可选的最大日期 */
125
+ max: PropTypes.object,
126
+ /** 自定义日期是否可选。传入参数为Date对象，返回true or false。 有此属性则min max无效。 */
127
+ disabledDate: PropTypes.func,
128
+
129
+ /** 禁用 年 / 月 切换按钮。 可以通过 onWillActiveSelected 变更来设置此 */
130
+ disabledYearAndMonth: PropTypes.oneOf(['left', 'right']),
131
+
132
+ className: PropTypes.string,
133
+ style: PropTypes.object,
134
+
135
+ /** 当前鼠标hover日期，Date对象 */
136
+ hoverDay: PropTypes.object,
137
+ /** 鼠标hover回调, 参数 hoverDay */
138
+ onHoverDay: PropTypes.func,
139
+
140
+ /** 目前全键盘用 */
141
+ onKeyDown: PropTypes.func
142
+ }
143
+
144
+ RangeCalendar.defaultProps = {
145
+ onSelect: _.noop,
146
+ onWillActiveSelected: _.noop,
147
+ onKeyDown: _.noop
148
+ }
149
+
150
+ export default RangeCalendar
package/src/component/calendar/style.less CHANGED
@@ -1,140 +1,140 @@
1
- .gm-calendar {
2
- width: 228px;
3
- overflow: hidden;
4
- border: 1px solid @gm-border-color;
5
- background: white;
6
- cursor: pointer;
7
- user-select: none;
8
- position: relative;
9
-
10
- .gm-calendar-head {
11
- height: 32px;
12
-
13
- .gm-calendar-head-icon {
14
- width: 30px;
15
- height: 30px;
16
- line-height: 30px;
17
- text-align: center;
18
- display: inline-block;
19
- color: @gm-color-fourth;
20
- }
21
-
22
- .gm-calendar-head-text {
23
- font-weight: bold;
24
- line-height: 30px;
25
- height: 30px;
26
- text-align: center;
27
-
28
- &:hover {
29
- color: @brand-primary;
30
- }
31
- }
32
-
33
- .gm-calendar-head-year-icon {
34
- width: 10px;
35
- height: 10px;
36
- }
37
- }
38
-
39
- .gm-calendar-yaers-or-months {
40
- position: absolute;
41
- color: black;
42
- top: 37px;
43
- bottom: 5px;
44
- background-color: white;
45
- }
46
-
47
- .gm-calendar-year-or-month {
48
- display: inline-block;
49
- width: 50px;
50
- height: 28px;
51
- line-height: 28px;
52
- text-align: center;
53
- margin: 9px 7px;
54
- cursor: pointer;
55
- border: 1px solid white;
56
-
57
- &.active {
58
- border: 1px solid @brand-primary;
59
- background-color: white;
60
- color: @brand-primary;
61
- }
62
-
63
- &:hover {
64
- background-color: @brand-primary;
65
- color: white;
66
- }
67
- }
68
-
69
- .gm-calendar-year-or-month-change {
70
- color: @gm-color-third;
71
- }
72
-
73
- .gm-calendar-week {
74
- height: 24px;
75
- padding: 0 5px;
76
- }
77
-
78
- .gm-calendar-content {
79
- padding: 0 4px;
80
- }
81
-
82
- .gm-calendar-day {
83
- color: black;
84
- display: inline-block;
85
- text-align: center;
86
- line-height: 25px;
87
- width: 31px;
88
- margin: -1px 0;
89
- border: 3px solid white;
90
-
91
- &:hover:not(.gm-calendar-day-disabled):not(.active):not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
92
- background-color: @brand-primary;
93
- color: white;
94
- }
95
-
96
- &.gm-calendar-day-old,
97
- &.gm-calendar-day-new {
98
- color: @gm-color-third;
99
- }
100
-
101
- &.gm-calendar-day-now:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
102
- color: @brand-primary;
103
- outline: 1px solid @brand-primary;
104
- outline-offset: -4px;
105
- }
106
-
107
- &.gm-calendar-day-will:not(.active) {
108
- outline: 1px solid @brand-primary;
109
- outline-offset: -4px;
110
- }
111
-
112
- &.active:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
113
- background-color: #d7e8fc;
114
- color: black;
115
- border-left: none;
116
- border-right: none;
117
- }
118
-
119
- &.gm-calendar-day-hover:not(.gm-calendar-day-old):not(.gm-calendar-day-new):not(.gm-calendar-day-disabled) {
120
- background-color: #d7e8fc;
121
- color: black;
122
- border-left: none;
123
- border-right: none;
124
- transition: background-color 0.2s ease;
125
- }
126
-
127
- &.gm-calendar-day-begin:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
128
- &.gm-calendar-day-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
129
- &.gm-calendar-day-hover-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
130
- background-color: @brand-primary;
131
- color: white;
132
- border: 3px solid white;
133
- }
134
-
135
- &.gm-calendar-day-disabled {
136
- color: @gm-color-third;
137
- cursor: not-allowed;
138
- }
139
- }
140
- }
1
+ .gm-calendar {
2
+ width: 228px;
3
+ overflow: hidden;
4
+ border: 1px solid @gm-border-color;
5
+ background: white;
6
+ cursor: pointer;
7
+ user-select: none;
8
+ position: relative;
9
+
10
+ .gm-calendar-head {
11
+ height: 32px;
12
+
13
+ .gm-calendar-head-icon {
14
+ width: 30px;
15
+ height: 30px;
16
+ line-height: 30px;
17
+ text-align: center;
18
+ display: inline-block;
19
+ color: @gm-color-fourth;
20
+ }
21
+
22
+ .gm-calendar-head-text {
23
+ font-weight: bold;
24
+ line-height: 30px;
25
+ height: 30px;
26
+ text-align: center;
27
+
28
+ &:hover {
29
+ color: @brand-primary;
30
+ }
31
+ }
32
+
33
+ .gm-calendar-head-year-icon {
34
+ width: 10px;
35
+ height: 10px;
36
+ }
37
+ }
38
+
39
+ .gm-calendar-yaers-or-months {
40
+ position: absolute;
41
+ color: black;
42
+ top: 37px;
43
+ bottom: 5px;
44
+ background-color: white;
45
+ }
46
+
47
+ .gm-calendar-year-or-month {
48
+ display: inline-block;
49
+ width: 50px;
50
+ height: 28px;
51
+ line-height: 28px;
52
+ text-align: center;
53
+ margin: 9px 7px;
54
+ cursor: pointer;
55
+ border: 1px solid white;
56
+
57
+ &.active {
58
+ border: 1px solid @brand-primary;
59
+ background-color: white;
60
+ color: @brand-primary;
61
+ }
62
+
63
+ &:hover {
64
+ background-color: @brand-primary;
65
+ color: white;
66
+ }
67
+ }
68
+
69
+ .gm-calendar-year-or-month-change {
70
+ color: @gm-color-third;
71
+ }
72
+
73
+ .gm-calendar-week {
74
+ height: 24px;
75
+ padding: 0 5px;
76
+ }
77
+
78
+ .gm-calendar-content {
79
+ padding: 0 4px;
80
+ }
81
+
82
+ .gm-calendar-day {
83
+ color: black;
84
+ display: inline-block;
85
+ text-align: center;
86
+ line-height: 25px;
87
+ width: 31px;
88
+ margin: -1px 0;
89
+ border: 3px solid white;
90
+
91
+ &:hover:not(.gm-calendar-day-disabled):not(.active):not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
92
+ background-color: @brand-primary;
93
+ color: white;
94
+ }
95
+
96
+ &.gm-calendar-day-old,
97
+ &.gm-calendar-day-new {
98
+ color: @gm-color-third;
99
+ }
100
+
101
+ &.gm-calendar-day-now:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
102
+ color: @brand-primary;
103
+ outline: 1px solid @brand-primary;
104
+ outline-offset: -4px;
105
+ }
106
+
107
+ &.gm-calendar-day-will:not(.active) {
108
+ outline: 1px solid @brand-primary;
109
+ outline-offset: -4px;
110
+ }
111
+
112
+ &.active:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
113
+ background-color: #d7e8fc;
114
+ color: black;
115
+ border-left: none;
116
+ border-right: none;
117
+ }
118
+
119
+ &.gm-calendar-day-hover:not(.gm-calendar-day-old):not(.gm-calendar-day-new):not(.gm-calendar-day-disabled) {
120
+ background-color: #d7e8fc;
121
+ color: black;
122
+ border-left: none;
123
+ border-right: none;
124
+ transition: background-color 0.2s ease;
125
+ }
126
+
127
+ &.gm-calendar-day-begin:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
128
+ &.gm-calendar-day-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
129
+ &.gm-calendar-day-hover-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
130
+ background-color: @brand-primary;
131
+ color: white;
132
+ border: 3px solid white;
133
+ }
134
+
135
+ &.gm-calendar-day-disabled {
136
+ color: @gm-color-third;
137
+ cursor: not-allowed;
138
+ }
139
+ }
140
+ }
package/src/component/calendar/week.js CHANGED
@@ -1,27 +1,27 @@
1
- import { getLocale } from '@gmfe/locales'
2
- import React from 'react'
3
- import _ from 'lodash'
4
- import Flex from '../flex'
5
-
6
- const weekDays = [
7
- getLocale('week__日'),
8
- getLocale('week__一'),
9
- getLocale('week__二'),
10
- getLocale('week__三'),
11
- getLocale('week__四'),
12
- getLocale('week__五'),
13
- getLocale('week__六')
14
- ]
15
- const Week = () => {
16
- return (
17
- <Flex className='gm-calendar-week'>
18
- {_.map(weekDays, (v, i) => (
19
- <Flex key={i} flex alignCenter justifyCenter>
20
- {v}
21
- </Flex>
22
- ))}
23
- </Flex>
24
- )
25
- }
26
-
27
- export default Week
1
+ import { getLocale } from '@gmfe/locales'
2
+ import React from 'react'
3
+ import _ from 'lodash'
4
+ import Flex from '../flex'
5
+
6
+ const weekDays = [
7
+ getLocale('week__日'),
8
+ getLocale('week__一'),
9
+ getLocale('week__二'),
10
+ getLocale('week__三'),
11
+ getLocale('week__四'),
12
+ getLocale('week__五'),
13
+ getLocale('week__六')
14
+ ]
15
+ const Week = () => {
16
+ return (
17
+ <Flex className='gm-calendar-week'>
18
+ {_.map(weekDays, (v, i) => (
19
+ <Flex key={i} flex alignCenter justifyCenter>
20
+ {v}
21
+ </Flex>
22
+ ))}
23
+ </Flex>
24
+ )
25
+ }
26
+
27
+ export default Week