@gm-pc/react 1.27.0 → 1.27.1-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 (399) hide show
  1. package/package.json +3 -3
  2. package/src/common/hooks/index.ts +5 -5
  3. package/src/common/hooks/use_form/index.ts +2 -2
  4. package/src/common/hooks/use_form/use_form.ts +184 -184
  5. package/src/common/hooks/use_form/utils.ts +23 -23
  6. package/src/common/hooks/use_mutation_observer.ts +19 -19
  7. package/src/common/utils/date.ts +28 -28
  8. package/src/common/utils/get_record_partical_object.ts +4 -4
  9. package/src/common/utils/index.ts +3 -3
  10. package/src/common/utils/utils.ts +16 -16
  11. package/src/component/affix/affix.tsx +31 -31
  12. package/src/component/affix/index.ts +2 -2
  13. package/src/component/affix/stories.tsx +16 -16
  14. package/src/component/affix/style.less +3 -3
  15. package/src/component/auto_complete/auto_complete.tsx +202 -202
  16. package/src/component/auto_complete/index.ts +6 -6
  17. package/src/component/auto_complete/stories.tsx +37 -37
  18. package/src/component/auto_full/auto_full.tsx +36 -36
  19. package/src/component/auto_full/index.ts +1 -1
  20. package/src/component/box/box.tsx +29 -29
  21. package/src/component/box/box_form.tsx +83 -83
  22. package/src/component/box/box_pagination.tsx +12 -12
  23. package/src/component/box/box_panel.tsx +91 -91
  24. package/src/component/box/box_table.tsx +57 -57
  25. package/src/component/box/index.ts +10 -10
  26. package/src/component/box/stories.tsx +119 -119
  27. package/src/component/box/style.less +41 -41
  28. package/src/component/button/button.tsx +94 -94
  29. package/src/component/button/button_text.tsx +33 -33
  30. package/src/component/button/index.ts +4 -4
  31. package/src/component/button/stories.tsx +131 -131
  32. package/src/component/button/style.less +158 -158
  33. package/src/component/calendar/calendar.tsx +25 -25
  34. package/src/component/calendar/content.tsx +87 -87
  35. package/src/component/calendar/day.tsx +106 -106
  36. package/src/component/calendar/head.tsx +244 -244
  37. package/src/component/calendar/index.ts +4 -4
  38. package/src/component/calendar/range_calendar.tsx +121 -121
  39. package/src/component/calendar/stories.tsx +54 -54
  40. package/src/component/calendar/style.less +136 -136
  41. package/src/component/calendar/types.ts +56 -56
  42. package/src/component/calendar/week.tsx +27 -27
  43. package/src/component/card/card.tsx +148 -148
  44. package/src/component/card/form_card.tsx +42 -42
  45. package/src/component/card/index.ts +2 -2
  46. package/src/component/card/stories.tsx +90 -90
  47. package/src/component/card/style.less +125 -125
  48. package/src/component/checkbox/checkbox.tsx +75 -75
  49. package/src/component/checkbox/checkbox_group.tsx +51 -51
  50. package/src/component/checkbox/index.ts +5 -5
  51. package/src/component/checkbox/stories.tsx +152 -152
  52. package/src/component/checkbox/style.less +73 -73
  53. package/src/component/checkbox/util.ts +19 -19
  54. package/src/component/collapse/collapse.tsx +27 -27
  55. package/src/component/collapse/index.ts +2 -2
  56. package/src/component/collapse/stories.tsx +21 -21
  57. package/src/component/color_picker/color_list.ts +34 -34
  58. package/src/component/color_picker/color_picker.tsx +43 -43
  59. package/src/component/color_picker/color_select.tsx +97 -97
  60. package/src/component/color_picker/index.ts +2 -2
  61. package/src/component/color_picker/stories.tsx +20 -20
  62. package/src/component/color_picker/style.less +41 -41
  63. package/src/component/config_provider/config_provider.tsx +16 -16
  64. package/src/component/config_provider/context.ts +10 -10
  65. package/src/component/config_provider/index.ts +3 -3
  66. package/src/component/controlled_form/context.tsx +18 -18
  67. package/src/component/controlled_form/controlled_form.tsx +141 -141
  68. package/src/component/controlled_form/index.ts +8 -8
  69. package/src/component/controlled_form/items/index.tsx +115 -115
  70. package/src/component/controlled_form/items/utils.ts +132 -132
  71. package/src/component/controlled_form/stories/components/date_range_filter.tsx +83 -83
  72. package/src/component/controlled_form/stories/components/index.ts +2 -2
  73. package/src/component/controlled_form/stories/components/search_filter.tsx +52 -52
  74. package/src/component/controlled_form/stories/stories.tsx +372 -372
  75. package/src/component/date_picker/date_picker.tsx +187 -187
  76. package/src/component/date_picker/index.ts +2 -2
  77. package/src/component/date_picker/overlay.tsx +115 -115
  78. package/src/component/date_picker/stories.tsx +109 -109
  79. package/src/component/date_picker/style.less +23 -23
  80. package/src/component/date_picker/time_select.tsx +58 -58
  81. package/src/component/date_picker/types.ts +7 -7
  82. package/src/component/date_range_picker/date_range_picker.tsx +144 -144
  83. package/src/component/date_range_picker/index.ts +2 -2
  84. package/src/component/date_range_picker/left.tsx +107 -107
  85. package/src/component/date_range_picker/overlay.tsx +204 -204
  86. package/src/component/date_range_picker/stories.tsx +181 -181
  87. package/src/component/date_range_picker/style.less +41 -41
  88. package/src/component/date_range_picker/time_range_select.tsx +144 -144
  89. package/src/component/date_range_picker/two.tsx +108 -108
  90. package/src/component/date_range_picker/types.ts +42 -42
  91. package/src/component/date_range_picker/util.ts +11 -11
  92. package/src/component/dialog/alert.tsx +38 -38
  93. package/src/component/dialog/confirm.tsx +120 -120
  94. package/src/component/dialog/delete_com.tsx +27 -27
  95. package/src/component/dialog/dialog.tsx +70 -70
  96. package/src/component/dialog/index.ts +16 -16
  97. package/src/component/dialog/prompt.tsx +95 -95
  98. package/src/component/dialog/stories.tsx +195 -195
  99. package/src/component/dialog/types.ts +70 -70
  100. package/src/component/divider/divider.tsx +25 -25
  101. package/src/component/divider/index.ts +2 -2
  102. package/src/component/divider/stories.tsx +14 -14
  103. package/src/component/divider/style.less +29 -29
  104. package/src/component/flex/flex.tsx +133 -133
  105. package/src/component/flex/index.ts +2 -2
  106. package/src/component/flex/stories.tsx +17 -17
  107. package/src/component/flex/style.less +105 -105
  108. package/src/component/flip_number/flip_number.tsx +209 -209
  109. package/src/component/flip_number/index.ts +2 -2
  110. package/src/component/flip_number/stories.tsx +28 -28
  111. package/src/component/flip_number/utils.ts +58 -58
  112. package/src/component/form/context.tsx +15 -15
  113. package/src/component/form/form.tsx +142 -142
  114. package/src/component/form/form_block.tsx +39 -39
  115. package/src/component/form/form_button.tsx +28 -28
  116. package/src/component/form/form_group.tsx +157 -157
  117. package/src/component/form/form_item.tsx +141 -141
  118. package/src/component/form/form_panel.tsx +63 -63
  119. package/src/component/form/index.ts +15 -15
  120. package/src/component/form/stories.tsx +448 -448
  121. package/src/component/form/style.less +159 -159
  122. package/src/component/form/types.ts +110 -110
  123. package/src/component/function_set/function_set.tsx +84 -84
  124. package/src/component/function_set/index.ts +2 -2
  125. package/src/component/function_set/overlay.tsx +41 -41
  126. package/src/component/function_set/stories.tsx +71 -71
  127. package/src/component/function_set/types.ts +15 -15
  128. package/src/component/function_set/utils.ts +21 -21
  129. package/src/component/grid/col.tsx +55 -55
  130. package/src/component/grid/index.ts +3 -3
  131. package/src/component/grid/mixin.less +48 -48
  132. package/src/component/grid/row.tsx +27 -27
  133. package/src/component/grid/stories.tsx +65 -65
  134. package/src/component/grid/style.less +27 -27
  135. package/src/component/grid/types.ts +35 -35
  136. package/src/component/grid/util.ts +12 -12
  137. package/src/component/icon_down_up/icon_down_up.tsx +22 -22
  138. package/src/component/icon_down_up/index.ts +2 -2
  139. package/src/component/icon_down_up/stories.tsx +21 -21
  140. package/src/component/icon_down_up/style.less +10 -10
  141. package/src/component/icon_expand/icon_expand.tsx +22 -22
  142. package/src/component/icon_expand/index.ts +1 -1
  143. package/src/component/img_uploader/img_uploader.tsx +168 -168
  144. package/src/component/img_uploader/index.ts +2 -2
  145. package/src/component/img_uploader/stories.tsx +58 -58
  146. package/src/component/img_uploader/style.less +22 -22
  147. package/src/component/input/index.ts +5 -5
  148. package/src/component/input/input.tsx +24 -24
  149. package/src/component/input/input_close.tsx +51 -51
  150. package/src/component/input/stories.tsx +56 -56
  151. package/src/component/input/style.less +33 -33
  152. package/src/component/input_number/index.ts +2 -2
  153. package/src/component/input_number/input_number.tsx +115 -115
  154. package/src/component/input_number/stories.tsx +27 -27
  155. package/src/component/input_number/style.less +10 -10
  156. package/src/component/input_number/utils.ts +44 -44
  157. package/src/component/label/index.tsx +19 -19
  158. package/src/component/label/stories.tsx +26 -26
  159. package/src/component/label/style.less +34 -34
  160. package/src/component/layout_root/index.ts +2 -2
  161. package/src/component/layout_root/layout_root.tsx +116 -116
  162. package/src/component/layout_root/types.ts +38 -38
  163. package/src/component/level_list/index.ts +2 -2
  164. package/src/component/level_list/level_item.tsx +79 -79
  165. package/src/component/level_list/level_list.tsx +123 -123
  166. package/src/component/level_list/stories/constants.ts +72 -72
  167. package/src/component/level_list/stories/stories.tsx +87 -87
  168. package/src/component/level_list/style.less +41 -41
  169. package/src/component/level_list/types.ts +36 -36
  170. package/src/component/level_list/utils.ts +19 -19
  171. package/src/component/level_select/index.ts +7 -7
  172. package/src/component/level_select/level_select.tsx +216 -216
  173. package/src/component/level_select/multiple_level_select.tsx +104 -104
  174. package/src/component/level_select/stories.tsx +102 -102
  175. package/src/component/level_select/types.ts +38 -38
  176. package/src/component/level_select/util.ts +20 -20
  177. package/src/component/list/base.tsx +129 -129
  178. package/src/component/list/index.ts +3 -3
  179. package/src/component/list/list.tsx +61 -61
  180. package/src/component/list/stories.tsx +113 -113
  181. package/src/component/list/style.less +58 -58
  182. package/src/component/list/types.ts +37 -37
  183. package/src/component/loading/index.ts +10 -10
  184. package/src/component/loading/loading.tsx +26 -26
  185. package/src/component/loading/loading_chunk.tsx +37 -37
  186. package/src/component/loading/loading_full_screen.tsx +45 -45
  187. package/src/component/loading/stories.tsx +43 -43
  188. package/src/component/loading/style.less +69 -69
  189. package/src/component/loading/types.ts +30 -30
  190. package/src/component/mask/index.ts +2 -2
  191. package/src/component/mask/mask.tsx +22 -22
  192. package/src/component/mask/style.less +10 -10
  193. package/src/component/modal/clean_modal.tsx +14 -14
  194. package/src/component/modal/index.ts +5 -5
  195. package/src/component/modal/modal.tsx +145 -145
  196. package/src/component/modal/right_side_modal.tsx +22 -22
  197. package/src/component/modal/stories.tsx +132 -132
  198. package/src/component/modal/style.less +138 -138
  199. package/src/component/modal/types.ts +27 -27
  200. package/src/component/more_select/base.tsx +408 -408
  201. package/src/component/more_select/index.ts +6 -6
  202. package/src/component/more_select/more_select.tsx +137 -137
  203. package/src/component/more_select/render_list_filter.ts +39 -39
  204. package/src/component/more_select/stories.tsx +323 -323
  205. package/src/component/more_select/style.less +72 -72
  206. package/src/component/more_select/types.ts +114 -114
  207. package/src/component/multiple_selection/index.ts +2 -2
  208. package/src/component/multiple_selection/multiple_selection.tsx +118 -118
  209. package/src/component/multiple_selection/stories.tsx +37 -37
  210. package/src/component/multiple_selection/style.less +57 -57
  211. package/src/component/n_progress/index.ts +1 -1
  212. package/src/component/n_progress/n_progress.tsx +39 -39
  213. package/src/component/n_progress/stories.tsx +25 -25
  214. package/src/component/n_progress/style.less +39 -39
  215. package/src/component/nav/a.tsx +7 -7
  216. package/src/component/nav/index.ts +10 -10
  217. package/src/component/nav/nav.tsx +114 -114
  218. package/src/component/nav/nav_item.tsx +98 -98
  219. package/src/component/nav/nav_single_item.tsx +28 -28
  220. package/src/component/nav/popup.tsx +100 -100
  221. package/src/component/nav/portal.ts +17 -17
  222. package/src/component/nav/stories.tsx +152 -152
  223. package/src/component/nav/style.less +246 -246
  224. package/src/component/nav/types.ts +93 -93
  225. package/src/component/pagination/index.ts +2 -2
  226. package/src/component/pagination/left.tsx +56 -56
  227. package/src/component/pagination/page_with_count.tsx +115 -115
  228. package/src/component/pagination/page_without_count.tsx +64 -64
  229. package/src/component/pagination/pagination.tsx +23 -23
  230. package/src/component/pagination/right.tsx +79 -79
  231. package/src/component/pagination/stories.tsx +63 -63
  232. package/src/component/pagination/style.less +51 -51
  233. package/src/component/pagination/types.ts +18 -18
  234. package/src/component/pagination/util.ts +7 -7
  235. package/src/component/popover/index.ts +2 -2
  236. package/src/component/popover/popover.tsx +279 -279
  237. package/src/component/popover/stories.tsx +104 -104
  238. package/src/component/popover/types.ts +25 -25
  239. package/src/component/popover/utils.ts +22 -22
  240. package/src/component/popup/element_in_viewport.ts +33 -33
  241. package/src/component/popup/index.ts +4 -4
  242. package/src/component/popup/popup.tsx +149 -149
  243. package/src/component/popup/popup_content_confirm.tsx +106 -106
  244. package/src/component/popup/style.less +107 -107
  245. package/src/component/price/constant.ts +4 -4
  246. package/src/component/price/event_bus.ts +13 -13
  247. package/src/component/price/index.ts +2 -2
  248. package/src/component/price/price.tsx +154 -154
  249. package/src/component/price/stories.tsx +22 -22
  250. package/src/component/progress/index.ts +2 -2
  251. package/src/component/progress/progress.tsx +53 -53
  252. package/src/component/progress/stories.tsx +20 -20
  253. package/src/component/progress/style.less +35 -35
  254. package/src/component/progress_circle/index.ts +2 -2
  255. package/src/component/progress_circle/progress_circle.tsx +85 -85
  256. package/src/component/progress_circle/stories.tsx +31 -31
  257. package/src/component/progress_circle/style.less +21 -21
  258. package/src/component/radio/index.ts +5 -5
  259. package/src/component/radio/radio.tsx +72 -72
  260. package/src/component/radio/radio_group.tsx +48 -48
  261. package/src/component/radio/stories.tsx +103 -103
  262. package/src/component/radio/style.less +56 -56
  263. package/src/component/radio/util.ts +19 -19
  264. package/src/component/recommend_input/index.ts +2 -2
  265. package/src/component/recommend_input/recommend_input.tsx +100 -100
  266. package/src/component/recommend_input/stories.tsx +47 -47
  267. package/src/component/recommend_input/style.less +25 -25
  268. package/src/component/select/index.ts +2 -2
  269. package/src/component/select/select.tsx +172 -172
  270. package/src/component/select/stories.tsx +140 -140
  271. package/src/component/select/style.less +4 -4
  272. package/src/component/select/types.ts +29 -29
  273. package/src/component/selection/index.ts +2 -2
  274. package/src/component/selection/selection.tsx +162 -162
  275. package/src/component/selection/stories.tsx +45 -45
  276. package/src/component/selection/style.less +65 -65
  277. package/src/component/steps/index.ts +2 -2
  278. package/src/component/steps/steps.tsx +61 -61
  279. package/src/component/steps/stories.tsx +18 -18
  280. package/src/component/steps/style.less +39 -39
  281. package/src/component/storage/index.ts +1 -1
  282. package/src/component/storage/storage.ts +7 -7
  283. package/src/component/storage/stories.tsx +7 -7
  284. package/src/component/switch/index.ts +2 -2
  285. package/src/component/switch/stories.tsx +39 -39
  286. package/src/component/switch/style.less +60 -60
  287. package/src/component/switch/switch.tsx +127 -127
  288. package/src/component/table_select/index.ts +2 -2
  289. package/src/component/table_select/stories.tsx +97 -97
  290. package/src/component/table_select/style.less +20 -20
  291. package/src/component/table_select/table_select.tsx +92 -92
  292. package/src/component/table_select/types.ts +30 -30
  293. package/src/component/table_select/util.ts +15 -15
  294. package/src/component/tabs/index.ts +2 -2
  295. package/src/component/tabs/stories.tsx +172 -172
  296. package/src/component/tabs/style.less +149 -149
  297. package/src/component/tabs/tabs.tsx +232 -232
  298. package/src/component/textarea/index.ts +3 -3
  299. package/src/component/textarea/stories.tsx +37 -37
  300. package/src/component/textarea/style.less +12 -12
  301. package/src/component/textarea/textarea.tsx +22 -22
  302. package/src/component/time_span/index.ts +4 -4
  303. package/src/component/time_span/stories.tsx +87 -87
  304. package/src/component/time_span/style.less +45 -45
  305. package/src/component/time_span/time_span.tsx +129 -129
  306. package/src/component/time_span/time_span_picker.tsx +71 -71
  307. package/src/component/time_span/types.ts +58 -58
  308. package/src/component/time_span/util.ts +18 -18
  309. package/src/component/tip/index.ts +2 -2
  310. package/src/component/tip/stories.tsx +44 -44
  311. package/src/component/tip/style.less +53 -53
  312. package/src/component/tip/tip.tsx +95 -95
  313. package/src/component/tip/types.ts +20 -20
  314. package/src/component/tooltip/index.ts +2 -2
  315. package/src/component/tooltip/stories.tsx +32 -32
  316. package/src/component/tooltip/tooltip.tsx +40 -40
  317. package/src/component/transfer/index.ts +2 -2
  318. package/src/component/transfer/stories.tsx +140 -140
  319. package/src/component/transfer/transfer.tsx +147 -147
  320. package/src/component/transfer/types.ts +42 -42
  321. package/src/component/tree/bottom.tsx +34 -34
  322. package/src/component/tree/find.tsx +73 -73
  323. package/src/component/tree/index.ts +2 -2
  324. package/src/component/tree/item.tsx +75 -75
  325. package/src/component/tree/list.tsx +123 -123
  326. package/src/component/tree/search.tsx +29 -29
  327. package/src/component/tree/stories.tsx +309 -309
  328. package/src/component/tree/style.less +35 -35
  329. package/src/component/tree/tree.tsx +238 -238
  330. package/src/component/tree/types.ts +155 -155
  331. package/src/component/tree/util.ts +208 -208
  332. package/src/component/uploader/default_container.tsx +24 -24
  333. package/src/component/uploader/default_image.tsx +15 -15
  334. package/src/component/uploader/index.ts +10 -10
  335. package/src/component/uploader/stories.tsx +53 -53
  336. package/src/component/uploader/style.less +22 -22
  337. package/src/component/uploader/types.ts +25 -25
  338. package/src/component/uploader/uploader.tsx +62 -62
  339. package/src/component/v_browser/context/browser.ts +7 -7
  340. package/src/component/v_browser/context/browserWindow.ts +7 -7
  341. package/src/component/v_browser/hooks/useWindowEffect.ts +53 -53
  342. package/src/component/v_browser/index.ts +4 -4
  343. package/src/component/v_browser/types.ts +46 -46
  344. package/src/component/v_browser/ui/iframe_portal.tsx +28 -28
  345. package/src/component/v_browser/ui/index.tsx +213 -213
  346. package/src/component/v_browser/ui/style.less +113 -113
  347. package/src/component/v_browser/ui/window_wrapper.tsx +74 -74
  348. package/src/component/v_browser/v_browser.stories.mdx +128 -128
  349. package/src/component/v_browser/v_browser.tsx +287 -287
  350. package/src/css/base.less +64 -64
  351. package/src/css/bg.less +52 -52
  352. package/src/css/border.less +40 -40
  353. package/src/css/cursor.less +19 -19
  354. package/src/css/display.less +16 -16
  355. package/src/css/distance.less +93 -93
  356. package/src/css/error.less +8 -8
  357. package/src/css/other.less +15 -15
  358. package/src/css/overflow.less +23 -23
  359. package/src/css/position.less +11 -11
  360. package/src/css/svg.less +48 -48
  361. package/src/css/text.less +127 -127
  362. package/src/css/var/mixin.less +75 -75
  363. package/src/css/var/variables.less +125 -125
  364. package/src/event_type.ts +11 -11
  365. package/src/index.less +64 -64
  366. package/src/index.ts +61 -61
  367. package/src/svg/calendar-month.svg +8 -8
  368. package/src/svg/calendar-year.svg +13 -13
  369. package/src/svg/calendar.svg +17 -17
  370. package/src/svg/check-detail.svg +18 -18
  371. package/src/svg/close-circle.svg +13 -13
  372. package/src/svg/close-square.svg +12 -12
  373. package/src/svg/closeup.svg +20 -20
  374. package/src/svg/delete.svg +10 -10
  375. package/src/svg/down-small.svg +1 -1
  376. package/src/svg/down.svg +1 -1
  377. package/src/svg/edit-box.svg +17 -17
  378. package/src/svg/edit-pen.svg +17 -17
  379. package/src/svg/empty.svg +27 -27
  380. package/src/svg/expand.svg +21 -21
  381. package/src/svg/left-small.svg +1 -1
  382. package/src/svg/more.svg +10 -10
  383. package/src/svg/next.svg +40 -40
  384. package/src/svg/pen.svg +12 -12
  385. package/src/svg/remove.svg +1 -1
  386. package/src/svg/right-small.svg +1 -1
  387. package/src/svg/search.svg +8 -8
  388. package/src/svg/setting.svg +17 -17
  389. package/src/svg/up-small.svg +1 -1
  390. package/src/svg/up.svg +1 -1
  391. package/src/svg/vbrowser-tab-delete.svg +8 -8
  392. package/src/svg/vbrowser-tab-left.svg +8 -8
  393. package/src/svg/vbrowser-tab-right.svg +8 -8
  394. package/src/types.ts +33 -33
  395. package/src/validator/index.ts +16 -16
  396. package/src/validator/rules.ts +61 -61
  397. package/src/validator/types.ts +10 -10
  398. package/src/validator/validator.ts +95 -95
  399. package/src/var.less +2 -2
package/src/component/calendar/range_calendar.tsx CHANGED
@@ -1,121 +1,121 @@
1
- import React, { useState, FC, useEffect } from 'react'
2
- import moment, { Moment } from 'moment'
3
- import classNames from 'classnames'
4
- import _ from 'lodash'
5
-
6
- import Week from './week'
7
- import Content from './content'
8
- import Head from './head'
9
- import { RangeCalendarProps } from './types'
10
-
11
- const RangeCalendar: FC<RangeCalendarProps> = (props) => {
12
- const {
13
- begin,
14
- end,
15
- onSelect,
16
- willActiveSelected,
17
- onWillActiveSelected,
18
-
19
- min,
20
- max,
21
- disabledDate,
22
-
23
- disabledYearAndMonth,
24
-
25
- hoverDay,
26
- onHoverDay,
27
-
28
- className,
29
- ...rest
30
- } = props
31
-
32
- // 取值优先 willActiveSelected > begin > 当前
33
- const _will = willActiveSelected
34
- ? moment(willActiveSelected)
35
- : begin
36
- ? moment(begin)
37
- : moment()
38
-
39
- // 需要有状态，因为 willActiveSelected 非必传
40
- const [will, setWill] = useState(_will)
41
- // 响应 willActiveSelected 的变化，重新设置 will
42
- useEffect(() => {
43
- const new_will = willActiveSelected
44
- ? moment(willActiveSelected)
45
- : begin
46
- ? moment(begin)
47
- : moment()
48
- if (willActiveSelected) {
49
- setWill(new_will)
50
- }
51
- }, [willActiveSelected, begin])
52
-
53
- const handleSelectDay = (m: Moment): void => {
54
- if (!onSelect) {
55
- return
56
- }
57
-
58
- // 如果都有，则当做选 begin
59
- if (begin && end) {
60
- onSelect(m.toDate(), null)
61
- } else if (begin) {
62
- // 如果相等，选中同一天
63
- if (+begin === +m) {
64
- onSelect(m.toDate(), m.toDate())
65
- }
66
-
67
- // 根据大小调整 begin end
68
- if (+begin < +m) {
69
- onSelect(begin, m.toDate())
70
- } else {
71
- onSelect(m.toDate(), begin)
72
- }
73
- } else if (end) {
74
- // 如果相等，选中同一天
75
- if (+end === +m) {
76
- onSelect(m.toDate(), m.toDate())
77
- }
78
-
79
- // 根据大小调整 begin end
80
- if (+end < +m) {
81
- onSelect(end, m.toDate())
82
- } else {
83
- onSelect(m.toDate(), end)
84
- }
85
- }
86
- // 如果都没有，则当做选 begin
87
- else {
88
- onSelect(m.toDate(), null)
89
- }
90
- }
91
-
92
- const handleChangeHead = (m: Moment): void => {
93
- setWill(m)
94
-
95
- onWillActiveSelected && onWillActiveSelected(m.toDate())
96
- }
97
-
98
- return (
99
- <div {...rest} className={classNames('gm-calendar', className)}>
100
- <Head
101
- value={will}
102
- onChange={handleChangeHead}
103
- disabledYearAndMonth={disabledYearAndMonth!}
104
- />
105
- <Week />
106
- <Content
107
- begin={(begin && moment(begin))!}
108
- end={(end && moment(end))!}
109
- onSelect={handleSelectDay}
110
- will={will}
111
- min={min}
112
- max={max}
113
- disabledDate={disabledDate}
114
- hoverDay={hoverDay}
115
- onHoverDay={onHoverDay}
116
- />
117
- </div>
118
- )
119
- }
120
-
121
- export default RangeCalendar
1
+ import React, { useState, FC, useEffect } from 'react'
2
+ import moment, { Moment } from 'moment'
3
+ import classNames from 'classnames'
4
+ import _ from 'lodash'
5
+
6
+ import Week from './week'
7
+ import Content from './content'
8
+ import Head from './head'
9
+ import { RangeCalendarProps } from './types'
10
+
11
+ const RangeCalendar: FC<RangeCalendarProps> = (props) => {
12
+ const {
13
+ begin,
14
+ end,
15
+ onSelect,
16
+ willActiveSelected,
17
+ onWillActiveSelected,
18
+
19
+ min,
20
+ max,
21
+ disabledDate,
22
+
23
+ disabledYearAndMonth,
24
+
25
+ hoverDay,
26
+ onHoverDay,
27
+
28
+ className,
29
+ ...rest
30
+ } = props
31
+
32
+ // 取值优先 willActiveSelected > begin > 当前
33
+ const _will = willActiveSelected
34
+ ? moment(willActiveSelected)
35
+ : begin
36
+ ? moment(begin)
37
+ : moment()
38
+
39
+ // 需要有状态，因为 willActiveSelected 非必传
40
+ const [will, setWill] = useState(_will)
41
+ // 响应 willActiveSelected 的变化，重新设置 will
42
+ useEffect(() => {
43
+ const new_will = willActiveSelected
44
+ ? moment(willActiveSelected)
45
+ : begin
46
+ ? moment(begin)
47
+ : moment()
48
+ if (willActiveSelected) {
49
+ setWill(new_will)
50
+ }
51
+ }, [willActiveSelected, begin])
52
+
53
+ const handleSelectDay = (m: Moment): void => {
54
+ if (!onSelect) {
55
+ return
56
+ }
57
+
58
+ // 如果都有，则当做选 begin
59
+ if (begin && end) {
60
+ onSelect(m.toDate(), null)
61
+ } else if (begin) {
62
+ // 如果相等，选中同一天
63
+ if (+begin === +m) {
64
+ onSelect(m.toDate(), m.toDate())
65
+ }
66
+
67
+ // 根据大小调整 begin end
68
+ if (+begin < +m) {
69
+ onSelect(begin, m.toDate())
70
+ } else {
71
+ onSelect(m.toDate(), begin)
72
+ }
73
+ } else if (end) {
74
+ // 如果相等，选中同一天
75
+ if (+end === +m) {
76
+ onSelect(m.toDate(), m.toDate())
77
+ }
78
+
79
+ // 根据大小调整 begin end
80
+ if (+end < +m) {
81
+ onSelect(end, m.toDate())
82
+ } else {
83
+ onSelect(m.toDate(), end)
84
+ }
85
+ }
86
+ // 如果都没有，则当做选 begin
87
+ else {
88
+ onSelect(m.toDate(), null)
89
+ }
90
+ }
91
+
92
+ const handleChangeHead = (m: Moment): void => {
93
+ setWill(m)
94
+
95
+ onWillActiveSelected && onWillActiveSelected(m.toDate())
96
+ }
97
+
98
+ return (
99
+ <div {...rest} className={classNames('gm-calendar', className)}>
100
+ <Head
101
+ value={will}
102
+ onChange={handleChangeHead}
103
+ disabledYearAndMonth={disabledYearAndMonth!}
104
+ />
105
+ <Week />
106
+ <Content
107
+ begin={(begin && moment(begin))!}
108
+ end={(end && moment(end))!}
109
+ onSelect={handleSelectDay}
110
+ will={will}
111
+ min={min}
112
+ max={max}
113
+ disabledDate={disabledDate}
114
+ hoverDay={hoverDay}
115
+ onHoverDay={onHoverDay}
116
+ />
117
+ </div>
118
+ )
119
+ }
120
+
121
+ export default RangeCalendar
package/src/component/calendar/stories.tsx CHANGED
@@ -1,54 +1,54 @@
1
- import React from 'react'
2
- import { observable } from 'mobx'
3
- import moment from 'moment'
4
-
5
- import Calendar from './calendar'
6
- import RangeCalendar from './range_calendar'
7
-
8
- const store = observable({
9
- selected: null,
10
- setSelected(date: any) {
11
- this.selected = date
12
- },
13
- })
14
-
15
- const rangeStore = observable({
16
- begin: null,
17
- end: null,
18
- setSelected(begin: any, end: any) {
19
- console.log(begin, end)
20
- this.begin = begin
21
- this.end = end
22
- },
23
- })
24
-
25
- export const ComCalendar = () => (
26
- <Calendar
27
- selected={store.selected}
28
- onSelect={(selected) => store.setSelected(selected)}
29
- />
30
- )
31
-
32
- export const ComCalendarWithMinAndMax = () => (
33
- <div>
34
- <div className='gm-margin-tb-10'>设置min, max</div>
35
- <Calendar
36
- selected={store.selected}
37
- onSelect={(selected) => store.setSelected(selected)}
38
- min={moment().toDate()}
39
- max={moment().add('d', 10).toDate()}
40
- />
41
- </div>
42
- )
43
-
44
- export const ComRangeCalendar = () => (
45
- <RangeCalendar
46
- begin={rangeStore.begin}
47
- end={rangeStore.end}
48
- onSelect={(begin, end) => rangeStore.setSelected(begin, end)}
49
- />
50
- )
51
-
52
- export default {
53
- title: '表单/Calendar',
54
- }
1
+ import React from 'react'
2
+ import { observable } from 'mobx'
3
+ import moment from 'moment'
4
+
5
+ import Calendar from './calendar'
6
+ import RangeCalendar from './range_calendar'
7
+
8
+ const store = observable({
9
+ selected: null,
10
+ setSelected(date: any) {
11
+ this.selected = date
12
+ },
13
+ })
14
+
15
+ const rangeStore = observable({
16
+ begin: null,
17
+ end: null,
18
+ setSelected(begin: any, end: any) {
19
+ console.log(begin, end)
20
+ this.begin = begin
21
+ this.end = end
22
+ },
23
+ })
24
+
25
+ export const ComCalendar = () => (
26
+ <Calendar
27
+ selected={store.selected}
28
+ onSelect={(selected) => store.setSelected(selected)}
29
+ />
30
+ )
31
+
32
+ export const ComCalendarWithMinAndMax = () => (
33
+ <div>
34
+ <div className='gm-margin-tb-10'>设置min, max</div>
35
+ <Calendar
36
+ selected={store.selected}
37
+ onSelect={(selected) => store.setSelected(selected)}
38
+ min={moment().toDate()}
39
+ max={moment().add('d', 10).toDate()}
40
+ />
41
+ </div>
42
+ )
43
+
44
+ export const ComRangeCalendar = () => (
45
+ <RangeCalendar
46
+ begin={rangeStore.begin}
47
+ end={rangeStore.end}
48
+ onSelect={(begin, end) => rangeStore.setSelected(begin, end)}
49
+ />
50
+ )
51
+
52
+ export default {
53
+ title: '表单/Calendar',
54
+ }
package/src/component/calendar/style.less CHANGED
@@ -1,136 +1,136 @@
1
- .gm-calendar {
2
- width: 228px;
3
- overflow: hidden;
4
- border: 1px solid var(--gm-color-border);
5
- background: white;
6
- cursor: pointer;
7
- user-select: none;
8
- position: relative;
9
-
10
- .gm-calendar-head {
11
- height: 30px;
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: var(--gm-color-desc);
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: var(--gm-color-primary);
30
- }
31
- }
32
-
33
- .gm-calendar-head-year-icon {
34
- width: 10px;
35
- height: 10px;
36
- }
37
- }
38
-
39
- .gm-calendar-years-or-months {
40
- position: absolute;
41
- color: black;
42
- top: 37px;
43
- bottom: 5px;
44
- background-color: white;
45
- z-index: 1;
46
- }
47
-
48
- .gm-calendar-year-or-month {
49
- display: inline-block;
50
- width: 60px;
51
- height: 28px;
52
- line-height: 28px;
53
- text-align: center;
54
- margin: 9px 7px;
55
- cursor: pointer;
56
- border: 1px solid white;
57
-
58
- &.active {
59
- border: 1px solid var(--gm-color-primary);
60
- background-color: white;
61
- color: var(--gm-color-primary);
62
- }
63
-
64
- &:hover {
65
- background-color: var(--gm-color-primary);
66
- color: white;
67
- }
68
- }
69
-
70
- .gm-calendar-week {
71
- height: 24px;
72
- padding: 0 5px;
73
- }
74
-
75
- .gm-calendar-content {
76
- padding: 0 4px;
77
- }
78
-
79
- .gm-calendar-day {
80
- color: black;
81
- display: inline-block;
82
- text-align: center;
83
- line-height: 25px;
84
- width: 31px;
85
- margin: -1px 0;
86
- border: 3px solid white;
87
-
88
- &:hover:not(.gm-calendar-day-disabled):not(.active):not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
89
- background-color: var(--gm-color-primary);
90
- color: white;
91
- }
92
-
93
- &.gm-calendar-day-old,
94
- &.gm-calendar-day-new {
95
- color: var(--gm-color-desc);
96
- }
97
-
98
- &.gm-calendar-day-now:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
99
- color: var(--gm-color-primary);
100
- outline: 1px solid var(--gm-color-primary);
101
- outline-offset: -4px;
102
- }
103
-
104
- &.gm-calendar-day-will:not(.active) {
105
- outline: 1px solid var(--gm-color-primary);
106
- outline-offset: -4px;
107
- }
108
-
109
- &.active:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
110
- background-color: #d7e8fc;
111
- color: black;
112
- border-left: none;
113
- border-right: none;
114
- }
115
-
116
- &.gm-calendar-day-hover:not(.gm-calendar-day-old):not(.gm-calendar-day-new):not(.gm-calendar-day-disabled) {
117
- background-color: #d7e8fc;
118
- color: black;
119
- border-left: none;
120
- border-right: none;
121
- transition: background-color 0.2s ease;
122
- }
123
-
124
- &.gm-calendar-day-begin:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
125
- &.gm-calendar-day-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
126
- &.gm-calendar-day-hover-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
127
- background-color: var(--gm-color-primary);
128
- color: white;
129
- border: 3px solid white;
130
- }
131
-
132
- &.disabled {
133
- .gmDisabled();
134
- }
135
- }
136
- }
1
+ .gm-calendar {
2
+ width: 228px;
3
+ overflow: hidden;
4
+ border: 1px solid var(--gm-color-border);
5
+ background: white;
6
+ cursor: pointer;
7
+ user-select: none;
8
+ position: relative;
9
+
10
+ .gm-calendar-head {
11
+ height: 30px;
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: var(--gm-color-desc);
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: var(--gm-color-primary);
30
+ }
31
+ }
32
+
33
+ .gm-calendar-head-year-icon {
34
+ width: 10px;
35
+ height: 10px;
36
+ }
37
+ }
38
+
39
+ .gm-calendar-years-or-months {
40
+ position: absolute;
41
+ color: black;
42
+ top: 37px;
43
+ bottom: 5px;
44
+ background-color: white;
45
+ z-index: 1;
46
+ }
47
+
48
+ .gm-calendar-year-or-month {
49
+ display: inline-block;
50
+ width: 60px;
51
+ height: 28px;
52
+ line-height: 28px;
53
+ text-align: center;
54
+ margin: 9px 7px;
55
+ cursor: pointer;
56
+ border: 1px solid white;
57
+
58
+ &.active {
59
+ border: 1px solid var(--gm-color-primary);
60
+ background-color: white;
61
+ color: var(--gm-color-primary);
62
+ }
63
+
64
+ &:hover {
65
+ background-color: var(--gm-color-primary);
66
+ color: white;
67
+ }
68
+ }
69
+
70
+ .gm-calendar-week {
71
+ height: 24px;
72
+ padding: 0 5px;
73
+ }
74
+
75
+ .gm-calendar-content {
76
+ padding: 0 4px;
77
+ }
78
+
79
+ .gm-calendar-day {
80
+ color: black;
81
+ display: inline-block;
82
+ text-align: center;
83
+ line-height: 25px;
84
+ width: 31px;
85
+ margin: -1px 0;
86
+ border: 3px solid white;
87
+
88
+ &:hover:not(.gm-calendar-day-disabled):not(.active):not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
89
+ background-color: var(--gm-color-primary);
90
+ color: white;
91
+ }
92
+
93
+ &.gm-calendar-day-old,
94
+ &.gm-calendar-day-new {
95
+ color: var(--gm-color-desc);
96
+ }
97
+
98
+ &.gm-calendar-day-now:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
99
+ color: var(--gm-color-primary);
100
+ outline: 1px solid var(--gm-color-primary);
101
+ outline-offset: -4px;
102
+ }
103
+
104
+ &.gm-calendar-day-will:not(.active) {
105
+ outline: 1px solid var(--gm-color-primary);
106
+ outline-offset: -4px;
107
+ }
108
+
109
+ &.active:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
110
+ background-color: #d7e8fc;
111
+ color: black;
112
+ border-left: none;
113
+ border-right: none;
114
+ }
115
+
116
+ &.gm-calendar-day-hover:not(.gm-calendar-day-old):not(.gm-calendar-day-new):not(.gm-calendar-day-disabled) {
117
+ background-color: #d7e8fc;
118
+ color: black;
119
+ border-left: none;
120
+ border-right: none;
121
+ transition: background-color 0.2s ease;
122
+ }
123
+
124
+ &.gm-calendar-day-begin:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
125
+ &.gm-calendar-day-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new),
126
+ &.gm-calendar-day-hover-end:not(.gm-calendar-day-old):not(.gm-calendar-day-new) {
127
+ background-color: var(--gm-color-primary);
128
+ color: white;
129
+ border: 3px solid white;
130
+ }
131
+
132
+ &.disabled {
133
+ .gmDisabled();
134
+ }
135
+ }
136
+ }