@bifrostui/react 1.4.6 → 1.4.7-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 (232) hide show
  1. package/dist/Calendar/Calendar.js +5 -1
  2. package/dist/Calendar/Calendar.types.d.ts +5 -0
  3. package/dist/CitySelector/CitySelectorCore.js +3 -3
  4. package/dist/Collapse/Collapse.css +0 -1
  5. package/dist/Collapse/Collapse.d.ts +1 -1
  6. package/dist/Collapse/Collapse.js +11 -8
  7. package/dist/Collapse/Collapse.miniapp.d.ts +5 -0
  8. package/dist/Collapse/Collapse.miniapp.js +177 -0
  9. package/dist/CollapsePanel/CollapsePanel.css +4 -2
  10. package/dist/DatePicker/DatePicker.d.ts +4 -0
  11. package/dist/DatePicker/DatePicker.js +335 -0
  12. package/dist/DatePicker/DatePicker.types.d.ts +43 -0
  13. package/dist/DatePicker/DatePicker.types.js +35 -0
  14. package/dist/DatePicker/index.d.ts +2 -0
  15. package/dist/DatePicker/index.js +41 -0
  16. package/dist/DesktopDatePicker/DesktopDatePicker.d.ts +5 -0
  17. package/dist/DesktopDatePicker/DesktopDatePicker.js +280 -0
  18. package/dist/DesktopDatePicker/DesktopDatePicker.types.d.ts +163 -0
  19. package/dist/DesktopDatePicker/DesktopDatePicker.types.js +15 -0
  20. package/dist/DesktopDatePicker/deskTopPickerContainer.css +100 -0
  21. package/dist/DesktopDatePicker/index.css +61 -0
  22. package/dist/DesktopDatePicker/index.d.ts +2 -0
  23. package/dist/DesktopDatePicker/index.js +41 -0
  24. package/dist/DesktopDatePicker/useGetDatePickerContent.d.ts +6 -0
  25. package/dist/DesktopDatePicker/useGetDatePickerContent.js +343 -0
  26. package/dist/DesktopDateTimePicker/DesktopDateTimePicker.d.ts +5 -0
  27. package/dist/DesktopDateTimePicker/DesktopDateTimePicker.js +322 -0
  28. package/dist/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +163 -0
  29. package/dist/DesktopDateTimePicker/DesktopDateTimePicker.types.js +15 -0
  30. package/dist/DesktopDateTimePicker/index.css +66 -0
  31. package/dist/DesktopDateTimePicker/index.d.ts +2 -0
  32. package/dist/DesktopDateTimePicker/index.js +41 -0
  33. package/dist/DesktopPicker/DesktopPicker.d.ts +5 -0
  34. package/dist/DesktopPicker/DesktopPicker.js +238 -0
  35. package/dist/DesktopPicker/DesktopPicker.types.d.ts +57 -0
  36. package/dist/DesktopPicker/DesktopPicker.types.js +15 -0
  37. package/dist/DesktopPicker/index.css +37 -0
  38. package/dist/DesktopPicker/index.d.ts +2 -0
  39. package/dist/DesktopPicker/index.js +41 -0
  40. package/dist/DesktopPicker/utils/calcAfterMounted.d.ts +2 -0
  41. package/dist/{Tabs/utils/bound.js → DesktopPicker/utils/calcAfterMounted.js} +7 -14
  42. package/dist/DesktopPicker/utils/calcAfterMounted.miniapp.d.ts +2 -0
  43. package/dist/DesktopPicker/utils/calcAfterMounted.miniapp.js +38 -0
  44. package/dist/DesktopTimePicker/DesktopTimePicker.d.ts +5 -0
  45. package/dist/DesktopTimePicker/DesktopTimePicker.js +288 -0
  46. package/dist/DesktopTimePicker/DesktopTimePicker.types.d.ts +182 -0
  47. package/dist/DesktopTimePicker/DesktopTimePicker.types.js +15 -0
  48. package/dist/DesktopTimePicker/DesktopTimePickerList.d.ts +4 -0
  49. package/dist/DesktopTimePicker/DesktopTimePickerList.js +111 -0
  50. package/dist/DesktopTimePicker/index.css +170 -0
  51. package/dist/DesktopTimePicker/index.d.ts +2 -0
  52. package/dist/DesktopTimePicker/index.js +41 -0
  53. package/dist/DesktopTimePicker/useGetTimePickerContent.d.ts +6 -0
  54. package/dist/DesktopTimePicker/useGetTimePickerContent.js +246 -0
  55. package/dist/DesktopTimePicker/utils/scrollUtil.d.ts +2 -0
  56. package/dist/DesktopTimePicker/utils/scrollUtil.js +27 -0
  57. package/dist/DesktopTimePicker/utils/scrollUtil.miniapp.d.ts +2 -0
  58. package/dist/DesktopTimePicker/utils/scrollUtil.miniapp.js +51 -0
  59. package/dist/DesktopTimePicker/utils/utils.d.ts +28 -0
  60. package/dist/DesktopTimePicker/utils/utils.js +408 -0
  61. package/dist/Dialog/FunctionalDialog.js +1 -1
  62. package/dist/ItemSelector/ItemSelector.css +120 -0
  63. package/dist/ItemSelector/ItemSelector.d.ts +4 -0
  64. package/dist/ItemSelector/ItemSelector.js +84 -0
  65. package/dist/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
  66. package/dist/ItemSelector/ItemSelector.miniapp.js +125 -0
  67. package/dist/ItemSelector/ItemSelector.types.d.ts +40 -0
  68. package/dist/ItemSelector/ItemSelector.types.js +15 -0
  69. package/dist/ItemSelector/ItemSelectorCore.d.ts +5 -0
  70. package/dist/ItemSelector/ItemSelectorCore.js +217 -0
  71. package/dist/ItemSelector/Selector/index.css +11 -0
  72. package/dist/ItemSelector/Selector/index.d.ts +9 -0
  73. package/dist/ItemSelector/Selector/index.js +48 -0
  74. package/dist/ItemSelector/index.d.ts +2 -0
  75. package/dist/ItemSelector/index.js +41 -0
  76. package/dist/ItemSelector/miniapp.css +4 -0
  77. package/dist/Modal/Modal.miniapp.d.ts +1 -1
  78. package/dist/Picker/Picker.css +5 -0
  79. package/dist/Picker/Picker.js +27 -5
  80. package/dist/Picker/Picker.types.d.ts +15 -2
  81. package/dist/Picker/PickerPanel.css +4 -0
  82. package/dist/Picker/PickerPanel.js +7 -6
  83. package/dist/Popover/Popover.js +70 -27
  84. package/dist/Portal/Portal.miniapp.js +7 -4
  85. package/dist/ScrollView/ScrollView.js +24 -11
  86. package/dist/ScrollView/ScrollView.types.d.ts +0 -1
  87. package/dist/Select/Select.css +1 -4
  88. package/dist/Select/Select.js +63 -40
  89. package/dist/Slider/Slider.js +13 -5
  90. package/dist/SwipeAction/SwipeAction.css +79 -0
  91. package/dist/SwipeAction/SwipeAction.d.ts +5 -0
  92. package/dist/SwipeAction/SwipeAction.js +349 -0
  93. package/dist/SwipeAction/SwipeAction.types.d.ts +83 -0
  94. package/dist/SwipeAction/SwipeAction.types.js +39 -0
  95. package/dist/SwipeAction/SwipeActionContext.d.ts +4 -0
  96. package/dist/SwipeAction/SwipeActionContext.js +30 -0
  97. package/dist/SwipeAction/SwipeActionItem.css +31 -0
  98. package/dist/SwipeAction/SwipeActionItem.d.ts +5 -0
  99. package/dist/SwipeAction/SwipeActionItem.js +105 -0
  100. package/dist/SwipeAction/index.d.ts +4 -0
  101. package/dist/SwipeAction/index.js +45 -0
  102. package/dist/Tabs/Tab.js +13 -4
  103. package/dist/Tabs/Tabs.js +30 -15
  104. package/dist/Tabs/utils/scroll.d.ts +2 -0
  105. package/dist/Tabs/utils/scroll.js +55 -0
  106. package/dist/Toast/FunctionalToast.js +1 -1
  107. package/dist/Toast/Toast.css +0 -1
  108. package/dist/Tooltip/Tooltip.js +70 -27
  109. package/dist/index.d.ts +7 -0
  110. package/dist/index.js +15 -1
  111. package/dist/locales/base.d.ts +11 -0
  112. package/dist/locales/en-US.js +24 -0
  113. package/dist/locales/zh-CN.js +24 -0
  114. package/dist/locales/zh-TW.js +24 -0
  115. package/es/Calendar/Calendar.js +5 -1
  116. package/es/Calendar/Calendar.types.d.ts +5 -0
  117. package/es/CitySelector/CitySelectorCore.js +3 -3
  118. package/es/Collapse/Collapse.css +0 -1
  119. package/es/Collapse/Collapse.d.ts +1 -1
  120. package/es/Collapse/Collapse.js +11 -8
  121. package/es/Collapse/Collapse.miniapp.d.ts +5 -0
  122. package/es/Collapse/Collapse.miniapp.js +157 -0
  123. package/es/CollapsePanel/CollapsePanel.css +4 -2
  124. package/es/DatePicker/DatePicker.d.ts +4 -0
  125. package/es/DatePicker/DatePicker.js +310 -0
  126. package/es/DatePicker/DatePicker.types.d.ts +43 -0
  127. package/es/DatePicker/DatePicker.types.js +1 -0
  128. package/es/DatePicker/index.d.ts +2 -0
  129. package/es/DatePicker/index.js +6 -0
  130. package/es/DesktopDatePicker/DesktopDatePicker.d.ts +5 -0
  131. package/es/DesktopDatePicker/DesktopDatePicker.js +253 -0
  132. package/es/DesktopDatePicker/DesktopDatePicker.types.d.ts +163 -0
  133. package/es/DesktopDatePicker/DesktopDatePicker.types.js +1 -0
  134. package/es/DesktopDatePicker/deskTopPickerContainer.css +100 -0
  135. package/es/DesktopDatePicker/index.css +61 -0
  136. package/es/DesktopDatePicker/index.d.ts +2 -0
  137. package/es/DesktopDatePicker/index.js +6 -0
  138. package/es/DesktopDatePicker/useGetDatePickerContent.d.ts +6 -0
  139. package/es/DesktopDatePicker/useGetDatePickerContent.js +316 -0
  140. package/es/DesktopDateTimePicker/DesktopDateTimePicker.d.ts +5 -0
  141. package/es/DesktopDateTimePicker/DesktopDateTimePicker.js +295 -0
  142. package/es/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +163 -0
  143. package/es/DesktopDateTimePicker/DesktopDateTimePicker.types.js +1 -0
  144. package/es/DesktopDateTimePicker/index.css +66 -0
  145. package/es/DesktopDateTimePicker/index.d.ts +2 -0
  146. package/es/DesktopDateTimePicker/index.js +9 -0
  147. package/es/DesktopPicker/DesktopPicker.d.ts +5 -0
  148. package/es/DesktopPicker/DesktopPicker.js +221 -0
  149. package/es/DesktopPicker/DesktopPicker.types.d.ts +57 -0
  150. package/es/DesktopPicker/DesktopPicker.types.js +1 -0
  151. package/es/DesktopPicker/index.css +37 -0
  152. package/es/DesktopPicker/index.d.ts +2 -0
  153. package/es/DesktopPicker/index.js +6 -0
  154. package/es/DesktopPicker/utils/calcAfterMounted.d.ts +2 -0
  155. package/es/DesktopPicker/utils/calcAfterMounted.js +6 -0
  156. package/es/DesktopPicker/utils/calcAfterMounted.miniapp.d.ts +2 -0
  157. package/es/DesktopPicker/utils/calcAfterMounted.miniapp.js +9 -0
  158. package/es/DesktopTimePicker/DesktopTimePicker.d.ts +5 -0
  159. package/es/DesktopTimePicker/DesktopTimePicker.js +261 -0
  160. package/es/DesktopTimePicker/DesktopTimePicker.types.d.ts +182 -0
  161. package/es/DesktopTimePicker/DesktopTimePicker.types.js +1 -0
  162. package/es/DesktopTimePicker/DesktopTimePickerList.d.ts +4 -0
  163. package/es/DesktopTimePicker/DesktopTimePickerList.js +84 -0
  164. package/es/DesktopTimePicker/index.css +170 -0
  165. package/es/DesktopTimePicker/index.d.ts +2 -0
  166. package/es/DesktopTimePicker/index.js +6 -0
  167. package/es/DesktopTimePicker/useGetTimePickerContent.d.ts +6 -0
  168. package/es/DesktopTimePicker/useGetTimePickerContent.js +223 -0
  169. package/es/DesktopTimePicker/utils/scrollUtil.d.ts +2 -0
  170. package/es/DesktopTimePicker/utils/scrollUtil.js +8 -0
  171. package/es/DesktopTimePicker/utils/scrollUtil.miniapp.d.ts +2 -0
  172. package/es/DesktopTimePicker/utils/scrollUtil.miniapp.js +22 -0
  173. package/es/DesktopTimePicker/utils/utils.d.ts +28 -0
  174. package/es/DesktopTimePicker/utils/utils.js +365 -0
  175. package/es/Dialog/FunctionalDialog.js +2 -2
  176. package/es/ItemSelector/ItemSelector.css +120 -0
  177. package/es/ItemSelector/ItemSelector.d.ts +4 -0
  178. package/es/ItemSelector/ItemSelector.js +57 -0
  179. package/es/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
  180. package/es/ItemSelector/ItemSelector.miniapp.js +98 -0
  181. package/es/ItemSelector/ItemSelector.types.d.ts +40 -0
  182. package/es/ItemSelector/ItemSelector.types.js +1 -0
  183. package/es/ItemSelector/ItemSelectorCore.d.ts +5 -0
  184. package/es/ItemSelector/ItemSelectorCore.js +190 -0
  185. package/es/ItemSelector/Selector/index.css +11 -0
  186. package/es/ItemSelector/Selector/index.d.ts +9 -0
  187. package/es/ItemSelector/Selector/index.js +19 -0
  188. package/es/ItemSelector/index.d.ts +2 -0
  189. package/es/ItemSelector/index.js +6 -0
  190. package/es/ItemSelector/miniapp.css +4 -0
  191. package/es/Modal/Modal.miniapp.d.ts +1 -1
  192. package/es/Picker/Picker.css +5 -0
  193. package/es/Picker/Picker.js +27 -5
  194. package/es/Picker/Picker.types.d.ts +15 -2
  195. package/es/Picker/PickerPanel.css +4 -0
  196. package/es/Picker/PickerPanel.js +7 -6
  197. package/es/Popover/Popover.js +73 -29
  198. package/es/Portal/Portal.miniapp.js +8 -5
  199. package/es/ScrollView/ScrollView.js +24 -11
  200. package/es/ScrollView/ScrollView.types.d.ts +0 -1
  201. package/es/Select/Select.css +1 -4
  202. package/es/Select/Select.js +63 -41
  203. package/es/Slider/Slider.js +16 -6
  204. package/es/SwipeAction/SwipeAction.css +79 -0
  205. package/es/SwipeAction/SwipeAction.d.ts +5 -0
  206. package/es/SwipeAction/SwipeAction.js +337 -0
  207. package/es/SwipeAction/SwipeAction.types.d.ts +83 -0
  208. package/es/SwipeAction/SwipeAction.types.js +1 -0
  209. package/es/SwipeAction/SwipeActionContext.d.ts +4 -0
  210. package/es/SwipeAction/SwipeActionContext.js +11 -0
  211. package/es/SwipeAction/SwipeActionItem.css +31 -0
  212. package/es/SwipeAction/SwipeActionItem.d.ts +5 -0
  213. package/es/SwipeAction/SwipeActionItem.js +78 -0
  214. package/es/SwipeAction/index.d.ts +4 -0
  215. package/es/SwipeAction/index.js +9 -0
  216. package/es/Tabs/Tab.js +13 -4
  217. package/es/Tabs/Tabs.js +30 -15
  218. package/es/Tabs/utils/scroll.d.ts +2 -0
  219. package/es/Tabs/utils/scroll.js +36 -0
  220. package/es/Toast/FunctionalToast.js +2 -2
  221. package/es/Toast/Toast.css +0 -1
  222. package/es/Tooltip/Tooltip.js +73 -29
  223. package/es/index.d.ts +7 -0
  224. package/es/index.js +7 -0
  225. package/es/locales/base.d.ts +11 -0
  226. package/es/locales/en-US.js +24 -0
  227. package/es/locales/zh-CN.js +24 -0
  228. package/es/locales/zh-TW.js +24 -0
  229. package/package.json +5 -5
  230. package/dist/Tabs/utils/bound.d.ts +0 -1
  231. package/es/Tabs/utils/bound.d.ts +0 -1
  232. package/es/Tabs/utils/bound.js +0 -13
@@ -0,0 +1,182 @@
1
+ import React, { Ref } from 'react';
2
+ import { OverrideProps } from '@bifrostui/types';
3
+ import { Dayjs } from 'dayjs';
4
+ import { DesktopPickerProps } from '../DesktopPicker';
5
+ export type Views = Array<'hour' | 'minute' | 'second'>;
6
+ export type ViewType = 'hour' | 'minute' | 'second';
7
+ export type ViewTypeWithMeridiem = ViewType | 'meridiem';
8
+ export type TimeSteps = {
9
+ hour?: number;
10
+ minute?: number;
11
+ second?: number;
12
+ };
13
+ export type TimePickerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
14
+ props: P & {
15
+ /**
16
+ * 默认选中的值,当组件非受控时使用
17
+ */
18
+ defaultValue?: Date;
19
+ /**
20
+ * 选中的值,当组件受控时使用
21
+ */
22
+ value?: Date;
23
+ /**
24
+ * 输入框占位内容
25
+ */
26
+ placeholder?: string;
27
+ /**
28
+ * 面板视图选择
29
+ */
30
+ views?: Views;
31
+ /**
32
+ * 时间间隔
33
+ */
34
+ timeSteps?: TimeSteps;
35
+ /**
36
+ * 是否使用十二小时制模式
37
+ */
38
+ ampm?: boolean;
39
+ /**
40
+ * 时间格式化
41
+ */
42
+ format?: string;
43
+ /**
44
+ * 可选择的最小时间
45
+ */
46
+ minTime?: Date;
47
+ /**
48
+ * 可选择的最大时间
49
+ */
50
+ maxTime?: Date;
51
+ /**
52
+ * 禁止选择的时间
53
+ */
54
+ disabledTimeView?: DisabledTimeView;
55
+ /**
56
+ * 禁用弹层选择功能
57
+ */
58
+ disableOpenPicker?: boolean;
59
+ /**
60
+ * 是否禁用时间选择器
61
+ */
62
+ disabled?: boolean;
63
+ /**
64
+ * 选择时间后是否立刻关闭
65
+ */
66
+ closeOnSelect?: boolean;
67
+ /**
68
+ * 弹层是否打开
69
+ */
70
+ open?: boolean;
71
+ /**
72
+ * 输入框icon
73
+ */
74
+ icon?: React.ReactNode;
75
+ /**
76
+ * 时间发生变化的回调
77
+ */
78
+ onChange?: (e: React.SyntheticEvent, data: {
79
+ value: Date | null;
80
+ }) => void;
81
+ /**
82
+ * 弹层关闭的回调
83
+ */
84
+ onClose?: () => void;
85
+ /**
86
+ * 弹层打开的回调
87
+ */
88
+ onOpen?: () => void;
89
+ /**
90
+ * inputRef
91
+ */
92
+ inputRef?: Ref<HTMLInputElement>;
93
+ /**
94
+ * inputProp
95
+ */
96
+ inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
97
+ /**
98
+ * DesktopPickerProps
99
+ */
100
+ DesktopPickerProps?: DesktopPickerProps;
101
+ /**
102
+ * 自定义时间单元格渲染内容
103
+ */
104
+ timeRender?: (item: ITimeInstance) => React.ReactNode;
105
+ };
106
+ defaultComponent: D;
107
+ }, D>;
108
+ export type DisabledTimeView = () => {
109
+ hour?: () => number[];
110
+ minute?: (selectedHour: number) => number[];
111
+ second?: (selectedHour: number, selectedMinute: number) => number[];
112
+ };
113
+ export interface TimePickerContentProps {
114
+ setIsOpen: Function;
115
+ triggerChange: Function;
116
+ disabledTimeView?: DisabledTimeView;
117
+ timeValue: Dayjs;
118
+ /**
119
+ * 关闭浮层
120
+ */
121
+ onClose?: (e: React.MouseEvent<any>, data: {
122
+ value: boolean;
123
+ }) => void;
124
+ /**
125
+ * 打开浮层
126
+ */
127
+ onOpen?: (e: React.MouseEvent<any>, data: {
128
+ value: boolean;
129
+ }) => void;
130
+ /**
131
+ * 选择时间后是否立刻关闭
132
+ */
133
+ closeOnSelect?: boolean;
134
+ /**
135
+ * 打开浮层的视图
136
+ */
137
+ views?: Views;
138
+ /**
139
+ * 时间间隔
140
+ */
141
+ timeSteps?: TimeSteps;
142
+ /**
143
+ * 是否使用十二小时制模式
144
+ */
145
+ ampm?: boolean;
146
+ /**
147
+ * 可选择的最小时间
148
+ */
149
+ minTime?: Dayjs;
150
+ /**
151
+ * 可选择的最大时间
152
+ */
153
+ maxTime?: Dayjs;
154
+ /**
155
+ * 自定义时间单元格渲染内容
156
+ */
157
+ timeRender?: (item: ITimeInstance) => React.ReactNode;
158
+ /**
159
+ * 校验timeValue是否有效
160
+ */
161
+ setIsInvalid: (a: boolean) => void;
162
+ }
163
+ /** 时间面板单元格对象 */
164
+ export interface ITimeInstance {
165
+ value: number | string;
166
+ label: string;
167
+ disabled: boolean;
168
+ }
169
+ /** 时分秒面板单元格对象 */
170
+ export interface ITimeItemNumberInstance {
171
+ value: number;
172
+ label: string;
173
+ }
174
+ export interface DesktopTimePickerListProps {
175
+ timeValue: Dayjs;
176
+ type: ViewTypeWithMeridiem;
177
+ dataList: ITimeInstance[];
178
+ selectedValue: string | number;
179
+ prefixCls: string;
180
+ handleClick: Function;
181
+ timeRender: (item: ITimeInstance) => React.ReactNode;
182
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { DesktopTimePickerListProps } from './DesktopTimePicker.types';
3
+ declare const DesktopTimePickerList: React.ForwardRefExoticComponent<DesktopTimePickerListProps & React.RefAttributes<HTMLDivElement>>;
4
+ export default DesktopTimePickerList;
@@ -0,0 +1,84 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import React, { useEffect, useRef, useState } from "react";
21
+ import { isMini } from "@bifrostui/utils";
22
+ import clsx from "clsx";
23
+ import { ScrollView } from "../ScrollView";
24
+ import handleScroll from "./utils/scrollUtil";
25
+ const DesktopTimePickerList = /* @__PURE__ */ React.forwardRef((props, ref) => {
26
+ const {
27
+ timeValue,
28
+ type,
29
+ dataList,
30
+ selectedValue,
31
+ prefixCls,
32
+ handleClick,
33
+ timeRender
34
+ } = props;
35
+ const ulRef = useRef(null);
36
+ const [scrollTop, setScrollTop] = useState(0);
37
+ useEffect(() => {
38
+ if (!ulRef.current)
39
+ return;
40
+ const elementName = `.${prefixCls}-${type}-active`;
41
+ if (!isMini) {
42
+ handleScroll(elementName, setScrollTop);
43
+ } else {
44
+ const index = dataList.findIndex((item) => item.value === selectedValue);
45
+ if (index === -1)
46
+ return;
47
+ handleScroll(elementName, setScrollTop, index);
48
+ }
49
+ }, [timeValue]);
50
+ return /* @__PURE__ */ React.createElement(
51
+ ScrollView,
52
+ {
53
+ scrollY: true,
54
+ scrollWithAnimation: true,
55
+ className: clsx(`${prefixCls}-${type}-ul`),
56
+ key: type,
57
+ scrollTop,
58
+ scrollAnimationDuration: 300,
59
+ ref: ulRef
60
+ },
61
+ dataList.map((item, index) => {
62
+ const { value, label, disabled } = item;
63
+ return /* @__PURE__ */ React.createElement(
64
+ "div",
65
+ {
66
+ key: index,
67
+ className: clsx(`${prefixCls}-${type}-li`, {
68
+ [`${prefixCls}-${type}-active`]: value === selectedValue,
69
+ [`${prefixCls}-${type}-disabled`]: disabled
70
+ }),
71
+ onClick: (e) => {
72
+ handleClick(e, disabled, item);
73
+ }
74
+ },
75
+ (timeRender == null ? void 0 : timeRender(__spreadProps(__spreadValues({}, item), { disabled }))) || label
76
+ );
77
+ })
78
+ );
79
+ });
80
+ DesktopTimePickerList.displayName = "BuiDesktopTimePickerList";
81
+ var DesktopTimePickerList_default = DesktopTimePickerList;
82
+ export {
83
+ DesktopTimePickerList_default as default
84
+ };
@@ -0,0 +1,170 @@
1
+ :root,
2
+ page,
3
+ xhs-page {
4
+ --bui-d-time-picker-height: var(--bui-input-height, 32px);
5
+ --bui-d-time-picker-min-width: var(--bui-input-min-width, 100px);
6
+ --bui-d-time-picker-font-size: var(--bui-title-size-3, 16px);
7
+ --bui-d-time-picker-icon-size: var(--bui-title-size-3, 16px);
8
+ --bui-d-time-picker-container-padding: var(--bui-spacing-md, 9px);
9
+ --bui-d-time-picker-bg: var(--bui-color-bg-view);
10
+ --bui-d-time-picker-font-family: var(--bui-font-family);
11
+ --bui-d-time-picker-border: 1px solid var(--bui-color-border-default);
12
+ --bui-d-time-picker-border-invalid: 1px solid var(--bui-color-danger);
13
+ --bui-d-time-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
14
+ --bui-d-time-picker-disabled-color: var(--bui-color-fg-subtle);
15
+ --bui-d-time-picker-container-main-radius: 3px;
16
+ --bui-d-time-picker-container-li-padding: 8px;
17
+ --bui-d-time-picker-container-li-height: 24px;
18
+ --bui-d-time-picker-container-li-line-height: 24px;
19
+ --bui-d-time-picker-container-li-width: 24px;
20
+ --bui-d-time-picker-container-li-radius: var(--bui-shape-radius-default, 6px);
21
+ --bui-d-time-picker-container-li-font-size: var(--bui-title-size-4);
22
+ --bui-d-time-picker-container-li-color: var(--bui-color-fg-default);
23
+ --bui-d-time-picker-container-li-color-active: var(--bui-color-fg-default);
24
+ --bui-d-time-picker-container-li-bg-active: #ffc7da;
25
+ }
26
+ .bui-d-time-picker {
27
+ position: relative;
28
+ cursor: pointer;
29
+ vertical-align: middle;
30
+ height: var(--bui-d-time-picker-height);
31
+ min-width: var(--bui-d-time-picker-min-width);
32
+ font-size: var(--bui-d-time-picker-font-size);
33
+ border-radius: 5px;
34
+ background-color: var(--bui-d-time-picker-bg);
35
+ font-family: var(--bui-d-time-picker-font-family);
36
+ border: var(--bui-d-time-picker-border);
37
+ }
38
+ .bui-d-time-picker:active,
39
+ .bui-d-time-picker-active {
40
+ box-shadow: var(--bui-d-time-picker-shadow);
41
+ }
42
+ .bui-d-time-picker-invalid {
43
+ border: var(--bui-d-time-picker-border-invalid);
44
+ }
45
+ .bui-d-time-picker-icon {
46
+ display: flex;
47
+ align-items: center;
48
+ font-size: var(--bui-d-time-picker-icon-size);
49
+ }
50
+ .bui-d-time-picker-container {
51
+ display: flex;
52
+ align-items: center;
53
+ padding: 0 var(--bui-d-time-picker-container-padding);
54
+ height: 100%;
55
+ }
56
+ .bui-d-time-picker-placeholder {
57
+ color: var(--bui-color-fg-disabled);
58
+ }
59
+ .bui-d-time-picker-content {
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ flex: 1;
64
+ height: 100%;
65
+ background-color: transparent;
66
+ outline: none;
67
+ border: 0;
68
+ }
69
+ .bui-d-time-picker-container-top {
70
+ bottom: 100%;
71
+ margin-bottom: 6px;
72
+ }
73
+ .bui-d-time-picker-container-bottom {
74
+ top: 100%;
75
+ margin-top: 6px;
76
+ }
77
+ .bui-d-time-picker-main {
78
+ border-radius: var(--bui-d-time-picker-container-main-radius);
79
+ padding: 3px 0;
80
+ height: 308px;
81
+ overflow: hidden;
82
+ }
83
+ .bui-d-time-picker-table {
84
+ height: 100%;
85
+ overflow: hidden;
86
+ display: flex;
87
+ }
88
+ .bui-d-time-picker-hour-ul,
89
+ .bui-d-time-picker-minute-ul,
90
+ .bui-d-time-picker-second-ul,
91
+ .bui-d-time-picker-meridiem-ul {
92
+ padding: 0;
93
+ border-radius: 0;
94
+ text-align: center;
95
+ border: none;
96
+ border-right: 1px solid var(--bui-color-border-default);
97
+ overflow-y: auto;
98
+ list-style: none;
99
+ scrollbar-width: thin;
100
+ scrollbar-color: #888 transparent;
101
+ }
102
+ .bui-d-time-picker-hour-li,
103
+ .bui-d-time-picker-minute-li,
104
+ .bui-d-time-picker-second-li,
105
+ .bui-d-time-picker-meridiem-li {
106
+ box-sizing: content-box;
107
+ width: var(--bui-d-time-picker-container-li-width);
108
+ height: var(--bui-d-time-picker-container-li-height);
109
+ line-height: var(--bui-d-time-picker-container-li-line-height);
110
+ padding: var(--bui-d-time-picker-container-li-padding);
111
+ margin: 0 4px;
112
+ border-radius: var(--bui-d-time-picker-container-li-radius);
113
+ font-size: var(--bui-d-time-picker-container-li-font-size);
114
+ font-family: var(--bui-d-time-picker-lay-font-family);
115
+ color: var(--bui-d-time-picker-container-li-color);
116
+ font-weight: var(--bui-font-weight-medium);
117
+ cursor: pointer;
118
+ }
119
+ .bui-d-time-picker-hour:last-child,
120
+ .bui-d-time-picker-minute:last-child,
121
+ .bui-d-time-picker-second:last-child,
122
+ .bui-d-time-picker-meridiem:last-child {
123
+ border-right: none;
124
+ }
125
+ .bui-d-time-picker-hour-li:hover,
126
+ .bui-d-time-picker-minute-li:hover,
127
+ .bui-d-time-picker-second-li:hover,
128
+ .bui-d-time-picker-meridiem-li:hover {
129
+ background-color: var(--bui-color-bg-default);
130
+ }
131
+ .bui-d-time-picker-hour-active,
132
+ .bui-d-time-picker-minute-active,
133
+ .bui-d-time-picker-second-active,
134
+ .bui-d-time-picker-meridiem-active {
135
+ color: var(--bui-d-time-picker-container-li-color-active);
136
+ background-color: var(--bui-d-time-picker-container-li-bg-active);
137
+ }
138
+ .bui-d-time-picker-hour-disabled,
139
+ .bui-d-time-picker-minute-disabled,
140
+ .bui-d-time-picker-second-disabled,
141
+ .bui-d-time-picker-meridiem-disabled {
142
+ opacity: 0.38;
143
+ }
144
+ .bui-d-time-picker-hour .bui-d-time-picker-hour-disabled:hover,
145
+ .bui-d-time-picker-hour .bui-d-time-picker-minute-disabled:hover,
146
+ .bui-d-time-picker-hour .bui-d-time-picker-second-disabled:hover,
147
+ .bui-d-time-picker-hour .bui-d-time-picker-meridiem-disabled:hover,
148
+ .bui-d-time-picker-minute .bui-d-time-picker-hour-disabled:hover,
149
+ .bui-d-time-picker-minute .bui-d-time-picker-minute-disabled:hover,
150
+ .bui-d-time-picker-minute .bui-d-time-picker-second-disabled:hover,
151
+ .bui-d-time-picker-minute .bui-d-time-picker-meridiem-disabled:hover,
152
+ .bui-d-time-picker-second .bui-d-time-picker-hour-disabled:hover,
153
+ .bui-d-time-picker-second .bui-d-time-picker-minute-disabled:hover,
154
+ .bui-d-time-picker-second .bui-d-time-picker-second-disabled:hover,
155
+ .bui-d-time-picker-second .bui-d-time-picker-meridiem-disabled:hover,
156
+ .bui-d-time-picker-meridiem .bui-d-time-picker-hour-disabled:hover,
157
+ .bui-d-time-picker-meridiem .bui-d-time-picker-minute-disabled:hover,
158
+ .bui-d-time-picker-meridiem .bui-d-time-picker-second-disabled:hover,
159
+ .bui-d-time-picker-meridiem .bui-d-time-picker-meridiem-disabled:hover {
160
+ opacity: 0.38;
161
+ cursor: default;
162
+ }
163
+ .bui-d-time-picker.bui-d-time-picker-disabled {
164
+ pointer-events: none;
165
+ box-shadow: none;
166
+ background-color: rgba(188, 188, 188, 0.2);
167
+ }
168
+ .bui-d-time-picker.bui-d-time-picker-disabled input {
169
+ color: var(--bui-d-time-picker-disabled-color);
170
+ }
@@ -0,0 +1,2 @@
1
+ export { default as DesktopTimePicker, default } from './DesktopTimePicker';
2
+ export * from './DesktopTimePicker.types';
@@ -0,0 +1,6 @@
1
+ import { default as default2, default as default3 } from "./DesktopTimePicker";
2
+ export * from "./DesktopTimePicker.types";
3
+ export {
4
+ default2 as DesktopTimePicker,
5
+ default3 as default
6
+ };
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { TimePickerContentProps } from './DesktopTimePicker.types';
3
+ declare const useGetTimePickerContent: (props: TimePickerContentProps) => {
4
+ desktopTimePanel: () => React.JSX.Element;
5
+ };
6
+ export default useGetTimePickerContent;
@@ -0,0 +1,223 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import clsx from "clsx";
21
+ import React, { useEffect } from "react";
22
+ import DesktopTimePickerList from "./DesktopTimePickerList";
23
+ import {
24
+ getdisabledTime,
25
+ calculateValidMinTime,
26
+ isDisabledTime
27
+ } from "./utils/utils";
28
+ const prefixCls = "bui-d-time-picker";
29
+ const useGetTimePickerContent = (props) => {
30
+ const {
31
+ views = ["hour", "minute", "second"],
32
+ timeSteps = {
33
+ hour: 1,
34
+ minute: 1,
35
+ second: 1
36
+ },
37
+ ampm = false,
38
+ disabledTimeView = () => ({
39
+ hour: () => [],
40
+ minute: () => [],
41
+ second: () => []
42
+ }),
43
+ minTime,
44
+ maxTime,
45
+ timeValue,
46
+ closeOnSelect,
47
+ setIsOpen,
48
+ triggerChange,
49
+ timeRender,
50
+ setIsInvalid
51
+ } = props;
52
+ useEffect(() => {
53
+ if (isDisabledTime(timeValue, minTime, maxTime, disabledTimeView)) {
54
+ setIsInvalid(true);
55
+ } else {
56
+ setIsInvalid(false);
57
+ }
58
+ }, [timeValue]);
59
+ const getViewListData = (type, timeStep = 1) => {
60
+ if (type === "meridiem") {
61
+ return [
62
+ { label: "AM", value: "AM" },
63
+ { label: "PM", value: "PM" }
64
+ ];
65
+ }
66
+ let maxNum;
67
+ if (type === "hour") {
68
+ maxNum = ampm ? 12 : 24;
69
+ } else {
70
+ maxNum = 60;
71
+ }
72
+ const list = [];
73
+ if (timeStep <= 0) {
74
+ timeStep = 1;
75
+ }
76
+ for (let i = 0; i < maxNum; i += timeStep) {
77
+ const value = i;
78
+ let label = value < 10 ? `0${value}` : `${value}`;
79
+ if (type === "hour" && ampm && value === 0) {
80
+ label = "12";
81
+ }
82
+ list.push({ label, value });
83
+ }
84
+ return list;
85
+ };
86
+ const renderViewsFunc = () => {
87
+ const lists = ampm ? [...views, "meridiem"] : views;
88
+ return lists.map((type, index) => {
89
+ var _a;
90
+ const dataList = getViewListData(type, timeSteps[type]);
91
+ const disabledTime = getdisabledTime(
92
+ type,
93
+ timeValue,
94
+ minTime,
95
+ maxTime,
96
+ dataList,
97
+ disabledTimeView,
98
+ timeSteps,
99
+ ampm
100
+ );
101
+ dataList.forEach((item, idx) => {
102
+ const { value } = item;
103
+ const disabled = disabledTime == null ? void 0 : disabledTime.includes(value);
104
+ dataList[idx] = __spreadProps(__spreadValues({}, item), { disabled });
105
+ });
106
+ const isLastList = index === lists.length - 1;
107
+ let selectedValue;
108
+ if (timeValue) {
109
+ if (type === "meridiem") {
110
+ selectedValue = timeValue.format("A");
111
+ } else if (type === "hour" && ampm) {
112
+ selectedValue = timeValue.hour() % 12;
113
+ } else {
114
+ selectedValue = (_a = timeValue[type]) == null ? void 0 : _a.call(timeValue);
115
+ }
116
+ }
117
+ const handleClick = (e, disabled, item) => {
118
+ e.stopPropagation();
119
+ if (disabled || selectedValue === item.value)
120
+ return;
121
+ const validMinTime = calculateValidMinTime(disabledTimeView, minTime);
122
+ const validTime = timeValue != null ? timeValue : validMinTime;
123
+ const updateHour = (hour) => validTime.format("A") === "PM" ? hour + 12 : hour;
124
+ const getValidTimeValue = (view, newTimeValue) => {
125
+ var _a2, _b;
126
+ let viewDisabledTime = getdisabledTime(
127
+ view,
128
+ newTimeValue,
129
+ minTime,
130
+ maxTime,
131
+ getViewListData(view, timeSteps[view]),
132
+ disabledTimeView,
133
+ timeSteps,
134
+ ampm
135
+ );
136
+ let viewDataList = getViewListData(view, timeSteps[view]);
137
+ if (view === "hour" && ampm && newTimeValue.format("A") === "PM") {
138
+ viewDataList = viewDataList.map((el) => __spreadProps(__spreadValues({}, el), {
139
+ value: el.value + 12
140
+ }));
141
+ viewDisabledTime = viewDisabledTime.map(
142
+ (el) => el + 12
143
+ );
144
+ }
145
+ const validValues = viewDataList.map((i) => i.value).filter((el) => !viewDisabledTime.includes(el));
146
+ const curViewValue = (_b = (_a2 = newTimeValue[view]) == null ? void 0 : _a2.call(newTimeValue)) != null ? _b : 0;
147
+ const nearestValue = validValues.reduce(
148
+ (prev, curr) => Math.abs(curr - curViewValue) < Math.abs(prev - curViewValue) ? curr : prev,
149
+ validValues[0]
150
+ );
151
+ return nearestValue !== void 0 ? nearestValue : curViewValue;
152
+ };
153
+ const handleNewTimeValue = (newTimeValue, event) => {
154
+ const isDisabledNewTime = isDisabledTime(
155
+ newTimeValue,
156
+ minTime,
157
+ maxTime,
158
+ disabledTimeView
159
+ );
160
+ if (isDisabledNewTime) {
161
+ views.forEach((view) => {
162
+ if (view !== type) {
163
+ const validValue = getValidTimeValue(view, newTimeValue);
164
+ newTimeValue = newTimeValue.set(view, validValue);
165
+ }
166
+ });
167
+ }
168
+ triggerChange(event, newTimeValue.toDate());
169
+ };
170
+ const calculateNewValue = (view, el) => {
171
+ if (view === "hour" && ampm) {
172
+ return updateHour(item.value);
173
+ }
174
+ return el.value;
175
+ };
176
+ if (type === "meridiem") {
177
+ const newHour = item.value === "PM" ? validTime.hour() + 12 : validTime.hour() - 12;
178
+ const newTimeValue = validTime.set("hour", newHour);
179
+ handleNewTimeValue(newTimeValue, e);
180
+ } else {
181
+ const newValue = calculateNewValue(type, item);
182
+ const newTimeValue = validTime.set(type, newValue);
183
+ handleNewTimeValue(newTimeValue, e);
184
+ }
185
+ if (isLastList && closeOnSelect) {
186
+ setIsOpen(false);
187
+ }
188
+ };
189
+ return /* @__PURE__ */ React.createElement(
190
+ DesktopTimePickerList,
191
+ {
192
+ timeValue,
193
+ type,
194
+ dataList,
195
+ selectedValue,
196
+ prefixCls,
197
+ handleClick,
198
+ key: type,
199
+ timeRender
200
+ }
201
+ );
202
+ });
203
+ };
204
+ const desktopTimePanel = () => {
205
+ return /* @__PURE__ */ React.createElement(
206
+ "div",
207
+ {
208
+ className: clsx(`${prefixCls}-main`),
209
+ onClick: (e) => {
210
+ e.stopPropagation();
211
+ }
212
+ },
213
+ /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-table`) }, renderViewsFunc())
214
+ );
215
+ };
216
+ return {
217
+ desktopTimePanel
218
+ };
219
+ };
220
+ var useGetTimePickerContent_default = useGetTimePickerContent;
221
+ export {
222
+ useGetTimePickerContent_default as default
223
+ };
@@ -0,0 +1,2 @@
1
+ declare const handleScroll: (elementName: string, setScrollTop: (scrollTop: number) => void, index?: number) => void;
2
+ export default handleScroll;
@@ -0,0 +1,8 @@
1
+ const handleScroll = (elementName, setScrollTop, index) => {
2
+ const selectedLi = document.querySelector(elementName);
3
+ setScrollTop(selectedLi == null ? void 0 : selectedLi.offsetTop);
4
+ };
5
+ var scrollUtil_default = handleScroll;
6
+ export {
7
+ scrollUtil_default as default
8
+ };