x-ui-design 0.2.2 → 0.2.3

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 (139) hide show
  1. package/dist/esm/types/index.d.ts +0 -25
  2. package/dist/index.d.ts +2 -655
  3. package/dist/index.esm.js +9 -2962
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +5 -2994
  6. package/dist/index.js.map +1 -1
  7. package/lib/index.ts +0 -52
  8. package/package.json +1 -1
  9. package/{lib → src}/components/Checkbox/Checkbox.tsx +2 -2
  10. package/{lib → src}/components/Form/Form.tsx +1 -1
  11. package/{lib → src}/components/Form/Item/Item.tsx +2 -2
  12. package/{lib → src}/components/Input/Input.tsx +2 -2
  13. package/{lib → src}/components/Input/Textarea/Textarea.tsx +2 -2
  14. package/{lib → src}/components/Select/Option/Option.tsx +2 -2
  15. package/{lib → src}/components/Select/Select.tsx +2 -2
  16. package/{lib → src}/components/Select/Tag/Tag.tsx +1 -1
  17. package/{lib → src}/components/Skeleton/Avatar/Avatar.tsx +2 -2
  18. package/{lib → src}/components/Skeleton/Button/Button.tsx +2 -2
  19. package/{lib → src}/components/Skeleton/Image/Image.tsx +1 -1
  20. package/{lib → src}/components/Skeleton/Input/Input.tsx +2 -2
  21. package/{lib → src}/components/Skeleton/Skeleton.tsx +2 -2
  22. package/{lib → src}/hooks/useForm.ts +2 -2
  23. package/{lib → src}/hooks/useWatch.ts +2 -2
  24. package/{lib → src}/types/checkbox.ts +1 -1
  25. package/src/types/index.ts +27 -0
  26. package/dist/esm/types/components/Checkbox/Checkbox.d.ts +0 -23
  27. package/dist/esm/types/components/Checkbox/index.d.ts +0 -1
  28. package/dist/esm/types/components/DatePicker/DatePicker.d.ts +0 -9
  29. package/dist/esm/types/components/DatePicker/RangePicker/RangePicker.d.ts +0 -4
  30. package/dist/esm/types/components/DatePicker/RangePicker/index.d.ts +0 -1
  31. package/dist/esm/types/components/DatePicker/TimePicker/TimePicker.d.ts +0 -5
  32. package/dist/esm/types/components/DatePicker/TimePicker/index.d.ts +0 -1
  33. package/dist/esm/types/components/DatePicker/index.d.ts +0 -1
  34. package/dist/esm/types/components/Empty/Empty.d.ts +0 -4
  35. package/dist/esm/types/components/Empty/index.d.ts +0 -1
  36. package/dist/esm/types/components/Form/Form.d.ts +0 -7
  37. package/dist/esm/types/components/Form/Item/Item.d.ts +0 -7
  38. package/dist/esm/types/components/Form/Item/index.d.ts +0 -1
  39. package/dist/esm/types/components/Form/index.d.ts +0 -1
  40. package/dist/esm/types/components/Icons/Icons.d.ts +0 -16
  41. package/dist/esm/types/components/Icons/index.d.ts +0 -1
  42. package/dist/esm/types/components/Input/Input.d.ts +0 -28
  43. package/dist/esm/types/components/Input/Textarea/Textarea.d.ts +0 -27
  44. package/dist/esm/types/components/Input/Textarea/index.d.ts +0 -1
  45. package/dist/esm/types/components/Input/index.d.ts +0 -1
  46. package/dist/esm/types/components/Radio/Button/Button.d.ts +0 -4
  47. package/dist/esm/types/components/Radio/Button/index.d.ts +0 -1
  48. package/dist/esm/types/components/Radio/Group/Group.d.ts +0 -4
  49. package/dist/esm/types/components/Radio/Group/index.d.ts +0 -1
  50. package/dist/esm/types/components/Radio/Radio.d.ts +0 -30
  51. package/dist/esm/types/components/Radio/index.d.ts +0 -1
  52. package/dist/esm/types/components/Select/Option/Option.d.ts +0 -5
  53. package/dist/esm/types/components/Select/Option/index.d.ts +0 -1
  54. package/dist/esm/types/components/Select/Select.d.ts +0 -51
  55. package/dist/esm/types/components/Select/Tag/Tag.d.ts +0 -5
  56. package/dist/esm/types/components/Select/Tag/index.d.ts +0 -1
  57. package/dist/esm/types/components/Select/index.d.ts +0 -1
  58. package/dist/esm/types/components/Skeleton/Avatar/Avatar.d.ts +0 -8
  59. package/dist/esm/types/components/Skeleton/Avatar/index.d.ts +0 -1
  60. package/dist/esm/types/components/Skeleton/Button/Button.d.ts +0 -5
  61. package/dist/esm/types/components/Skeleton/Button/index.d.ts +0 -1
  62. package/dist/esm/types/components/Skeleton/Image/Image.d.ts +0 -5
  63. package/dist/esm/types/components/Skeleton/Image/index.d.ts +0 -1
  64. package/dist/esm/types/components/Skeleton/Input/Input.d.ts +0 -5
  65. package/dist/esm/types/components/Skeleton/Input/index.d.ts +0 -1
  66. package/dist/esm/types/components/Skeleton/Skeleton.d.ts +0 -11
  67. package/dist/esm/types/components/Skeleton/index.d.ts +0 -1
  68. package/dist/esm/types/components/Upload/Upload.d.ts +0 -4
  69. package/dist/esm/types/components/Upload/index.d.ts +0 -1
  70. package/dist/esm/types/hooks/useForm.d.ts +0 -4
  71. package/dist/esm/types/hooks/useWatch.d.ts +0 -9
  72. package/dist/esm/types/types/checkbox.d.ts +0 -22
  73. package/dist/esm/types/types/datepicker.d.ts +0 -119
  74. package/dist/esm/types/types/empty.d.ts +0 -7
  75. package/dist/esm/types/types/form.d.ts +0 -107
  76. package/dist/esm/types/types/input.d.ts +0 -47
  77. package/dist/esm/types/types/radio.d.ts +0 -57
  78. package/dist/esm/types/types/select.d.ts +0 -97
  79. package/dist/esm/types/types/skeleton.d.ts +0 -50
  80. package/dist/esm/types/types/upload.d.ts +0 -54
  81. /package/{lib → src}/components/Checkbox/index.ts +0 -0
  82. /package/{lib → src}/components/Checkbox/style.css +0 -0
  83. /package/{lib → src}/components/DatePicker/DatePicker.tsx +0 -0
  84. /package/{lib → src}/components/DatePicker/RangePicker/RangePicker.tsx +0 -0
  85. /package/{lib → src}/components/DatePicker/RangePicker/index.ts +0 -0
  86. /package/{lib → src}/components/DatePicker/RangePicker/style.css +0 -0
  87. /package/{lib → src}/components/DatePicker/TimePicker/TimePicker.tsx +0 -0
  88. /package/{lib → src}/components/DatePicker/TimePicker/index.ts +0 -0
  89. /package/{lib → src}/components/DatePicker/TimePicker/style.css +0 -0
  90. /package/{lib → src}/components/DatePicker/index.ts +0 -0
  91. /package/{lib → src}/components/DatePicker/style.css +0 -0
  92. /package/{lib → src}/components/Empty/Empty.tsx +0 -0
  93. /package/{lib → src}/components/Empty/index.ts +0 -0
  94. /package/{lib → src}/components/Empty/style.css +0 -0
  95. /package/{lib → src}/components/Form/Item/index.ts +0 -0
  96. /package/{lib → src}/components/Form/Item/style.css +0 -0
  97. /package/{lib → src}/components/Form/index.ts +0 -0
  98. /package/{lib → src}/components/Icons/Icons.tsx +0 -0
  99. /package/{lib → src}/components/Icons/index.ts +0 -0
  100. /package/{lib → src}/components/Input/Textarea/index.ts +0 -0
  101. /package/{lib → src}/components/Input/Textarea/style.css +0 -0
  102. /package/{lib → src}/components/Input/index.ts +0 -0
  103. /package/{lib → src}/components/Input/style.css +0 -0
  104. /package/{lib → src}/components/Radio/Button/Button.tsx +0 -0
  105. /package/{lib → src}/components/Radio/Button/index.ts +0 -0
  106. /package/{lib → src}/components/Radio/Button/style.css +0 -0
  107. /package/{lib → src}/components/Radio/Group/Group.tsx +0 -0
  108. /package/{lib → src}/components/Radio/Group/index.ts +0 -0
  109. /package/{lib → src}/components/Radio/Group/style.css +0 -0
  110. /package/{lib → src}/components/Radio/Radio.tsx +0 -0
  111. /package/{lib → src}/components/Radio/index.ts +0 -0
  112. /package/{lib → src}/components/Radio/style.css +0 -0
  113. /package/{lib → src}/components/Select/Option/index.ts +0 -0
  114. /package/{lib → src}/components/Select/Option/style.css +0 -0
  115. /package/{lib → src}/components/Select/Tag/index.ts +0 -0
  116. /package/{lib → src}/components/Select/Tag/style.css +0 -0
  117. /package/{lib → src}/components/Select/index.ts +0 -0
  118. /package/{lib → src}/components/Select/style.css +0 -0
  119. /package/{lib → src}/components/Skeleton/Avatar/index.ts +0 -0
  120. /package/{lib → src}/components/Skeleton/Avatar/style.css +0 -0
  121. /package/{lib → src}/components/Skeleton/Button/index.ts +0 -0
  122. /package/{lib → src}/components/Skeleton/Button/style.css +0 -0
  123. /package/{lib → src}/components/Skeleton/Image/index.ts +0 -0
  124. /package/{lib → src}/components/Skeleton/Image/style.css +0 -0
  125. /package/{lib → src}/components/Skeleton/Input/index.ts +0 -0
  126. /package/{lib → src}/components/Skeleton/Input/style.css +0 -0
  127. /package/{lib → src}/components/Skeleton/index.ts +0 -0
  128. /package/{lib → src}/components/Skeleton/style.css +0 -0
  129. /package/{lib → src}/components/Upload/Upload.tsx +0 -0
  130. /package/{lib → src}/components/Upload/index.ts +0 -0
  131. /package/{lib → src}/components/Upload/style.css +0 -0
  132. /package/{lib → src}/types/datepicker.ts +0 -0
  133. /package/{lib → src}/types/empty.ts +0 -0
  134. /package/{lib → src}/types/form.ts +0 -0
  135. /package/{lib → src}/types/input.ts +0 -0
  136. /package/{lib → src}/types/radio.ts +0 -0
  137. /package/{lib → src}/types/select.ts +0 -0
  138. /package/{lib → src}/types/skeleton.ts +0 -0
  139. /package/{lib → src}/types/upload.ts +0 -0
package/dist/index.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
- var reactDom = require('react-dom');
6
5
 
7
6
  function styleInject(css, ref) {
8
7
  if (ref === void 0) ref = {};
@@ -29,257 +28,9 @@ function styleInject(css, ref) {
29
28
  }
30
29
  }
31
30
 
32
- var css_248z$l = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
33
- styleInject(css_248z$l);
34
-
35
- const useForm = (initialValues = {}, onFieldsChange, onValuesChange) => {
36
- const touchedFieldsRef = react.useRef(new Set());
37
- const rulesRef = react.useRef({});
38
- const warningsRef = react.useRef({});
39
- const formRef = react.useRef({
40
- ...initialValues
41
- });
42
- const fieldInstancesRef = react.useRef({});
43
- const [isReseting, setIsReseting] = react.useState(false);
44
- const [errors, setErrors] = react.useState({});
45
- const fieldSubscribers = react.useRef({});
46
- const formSubscribers = react.useRef([]);
47
- function getFieldInstance(name) {
48
- return fieldInstancesRef.current[name] || null;
49
- }
50
- function getFieldValue(name) {
51
- return formRef.current[name];
52
- }
53
- function getFieldsValue(nameList) {
54
- if (!nameList) {
55
- return {
56
- ...formRef.current
57
- };
58
- }
59
- return nameList.reduce((acc, key) => {
60
- acc[key] = formRef.current[key];
61
- return acc;
62
- }, {});
63
- }
64
- function getFieldError(name) {
65
- return errors[name] || [];
66
- }
67
- function getFieldWarning(name) {
68
- return warningsRef.current[name] || [];
69
- }
70
- function getFieldsError() {
71
- return Object.entries(errors).map(([name, err]) => ({
72
- name,
73
- errors: err
74
- }));
75
- }
76
- function setFieldValue(name, value, errors, reset) {
77
- if (!reset && ([undefined, null].includes(value) || formRef.current[name] === value)) {
78
- return;
79
- }
80
- formRef.current[name] = value;
81
- touchedFieldsRef.current.add(name);
82
- if (!errors?.length) {
83
- validateField(name).then(() => {
84
- const allValues = getFieldsValue();
85
- fieldSubscribers.current[name]?.forEach(callback => callback(value));
86
- formSubscribers.current.forEach(callback => callback(allValues));
87
- if (onValuesChange) {
88
- onValuesChange({
89
- [name]: value
90
- }, allValues);
91
- }
92
- if (onFieldsChange) {
93
- onFieldsChange([{
94
- name,
95
- value
96
- }]);
97
- }
98
- });
99
- } else {
100
- setErrors({
101
- [name]: errors
102
- });
103
- }
104
- }
105
- function setFieldsValue(values) {
106
- Object.entries(values).forEach(([name, value]) => setFieldValue(name, value));
107
- }
108
- function setFields(fields) {
109
- fields.forEach(({
110
- name,
111
- value,
112
- errors
113
- }) => setFieldValue(Array.isArray(name) ? name[0] : name, value, errors));
114
- }
115
- function isFieldTouched(name) {
116
- return touchedFieldsRef.current.has(name);
117
- }
118
- function isFieldsTouched(nameList, allFieldsTouched = false) {
119
- if (!nameList) {
120
- return touchedFieldsRef.current.size > 0;
121
- }
122
- return allFieldsTouched ? nameList.every(name => touchedFieldsRef.current.has(name)) : nameList.some(name => touchedFieldsRef.current.has(name));
123
- }
124
- function isFieldValidating(name) {
125
- return !!name;
126
- }
127
- function registerField(name, rules = []) {
128
- if (!(name in formRef.current)) {
129
- formRef.current[name] = initialValues?.[name];
130
- }
131
- rulesRef.current[name] = rules;
132
- }
133
- async function validateField(name) {
134
- const value = formRef.current[name];
135
- const rules = rulesRef.current[name] || [];
136
- const fieldErrors = [];
137
- const fieldWarnings = [];
138
- await Promise.all([rules].flat(1).map(async rule => {
139
- rule = typeof rule === 'function' ? rule(formInstance) : rule;
140
- if (rule.required && (value === undefined || value === null || value === '' || Array.isArray(value) && !value.length)) {
141
- fieldErrors.push(rule.message || 'This field is required');
142
- }
143
- if ((typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) && rule.min !== undefined && String(value).length < rule.min) {
144
- fieldErrors.push(rule.message || `Must be at least ${rule.min} characters`);
145
- }
146
- if ((typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) && rule.max !== undefined && String(value).length > rule.max) {
147
- fieldErrors.push(rule.message || `Must be at most ${rule.max} characters`);
148
- }
149
- if (rule.pattern && !rule.pattern.test(String(value))) {
150
- fieldErrors.push(rule.message || 'Invalid format');
151
- }
152
- if (rule.warningPattern && !rule.warningPattern.test(String(value))) {
153
- fieldWarnings.push(rule.warningMessage || 'Invalid format');
154
- }
155
- if (rule.validator) {
156
- try {
157
- await rule.validator(rule, value, error => error && fieldErrors.push(error));
158
- } catch (error) {
159
- fieldErrors.push(error instanceof Error ? error.message : String(error));
160
- }
161
- }
162
- }));
163
- setErrors(prev => ({
164
- ...prev,
165
- [name]: fieldErrors
166
- }));
167
- warningsRef.current[name] = fieldWarnings;
168
- return fieldErrors.length === 0;
169
- }
170
- async function validateFields(nameList) {
171
- const fieldsToValidate = nameList || Object.keys(formRef.current);
172
- const results = await Promise.all(fieldsToValidate.map(name => validateField(name)));
173
- return results.every(valid => valid);
174
- }
175
- function resetFields(nameList) {
176
- if (nameList?.length) {
177
- nameList.forEach(name => {
178
- formRef.current[name] = initialValues[name];
179
- touchedFieldsRef.current.delete(name);
180
- delete warningsRef.current[name];
181
- setErrors(prev => ({
182
- ...prev,
183
- [name]: []
184
- }));
185
- setFieldValue(name, initialValues[name], undefined, true);
186
- });
187
- } else {
188
- touchedFieldsRef.current.clear();
189
- warningsRef.current = {};
190
- Object.keys(formRef.current).forEach(name => {
191
- setFieldValue(name, initialValues[name], undefined, true);
192
- });
193
- }
194
- formSubscribers.current.forEach(callback => callback(getFieldsValue()));
195
- setIsReseting(prev => !prev);
196
- }
197
- async function submit() {
198
- return (await validateFields()) ? formRef.current : undefined;
199
- }
200
- function subscribeToField(name, callback) {
201
- if (!fieldSubscribers.current[name]) {
202
- fieldSubscribers.current[name] = [];
203
- }
204
- fieldSubscribers.current[name].push(callback);
205
- return () => {
206
- fieldSubscribers.current[name] = fieldSubscribers.current[name].filter(cb => cb !== callback);
207
- };
208
- }
209
- function subscribeToForm(callback) {
210
- formSubscribers.current.push(callback);
211
- return () => {
212
- formSubscribers.current = formSubscribers.current.filter(cb => cb !== callback);
213
- };
214
- }
215
- function subscribeToFields(names, callback) {
216
- const fieldCallbacks = names.map(name => subscribeToField(name, () => {
217
- const updatedValues = getFieldsValue(names);
218
- callback(updatedValues);
219
- }));
220
- return () => {
221
- fieldCallbacks.forEach(unsubscribe => unsubscribe());
222
- };
223
- }
224
- const formInstance = {
225
- submit,
226
- setFields,
227
- resetFields,
228
- getFieldError,
229
- registerField,
230
- setFieldValue,
231
- getFieldValue,
232
- validateFields,
233
- setFieldsValue,
234
- getFieldsValue,
235
- isFieldTouched,
236
- getFieldsError,
237
- isFieldsTouched,
238
- getFieldWarning,
239
- isFieldValidating,
240
- subscribeToField,
241
- subscribeToForm,
242
- onFieldsChange,
243
- onValuesChange,
244
- getFieldInstance,
245
- subscribeToFields,
246
- isReseting
247
- };
248
- return formInstance;
249
- };
250
-
251
- const prefixClsForm = 'xUi-form';
252
- const prefixClsFormItem = 'xUi-form-item';
253
- const prefixClsEmpty = 'xUi-empty';
254
- const prefixClsInput = 'xUi-input';
255
- const prefixClsSelect = 'xUi-select';
256
- const prefixClsCheckbox = 'xUi-checkbox';
257
- const prefixClsRadio = 'xUi-radio';
258
- const prefixClsTextArea = 'xUi-textarea';
259
- const prefixClsUpload = 'xUi-upload';
260
- const prefixClsDatePicker = 'xUi-datepicker';
261
- const prefixClsRangePicker = 'xUi-rangepicker';
262
- const prefixClsTimePicker = 'xUi-timepicker';
263
- const prefixClsButton = 'xUi-button';
264
- const prefixClsSkeleton = 'xUi-skeleton';
31
+ var css_248z$1 = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
32
+ styleInject(css_248z$1);
265
33
 
266
- const parseValue = value => {
267
- if (value === 'true') {
268
- return true;
269
- }
270
- if (value === 'false') {
271
- return false;
272
- }
273
- if (!isNaN(Number(value))) {
274
- return Number(value);
275
- }
276
- return value;
277
- };
278
- function createArray(length) {
279
- return Array.from({
280
- length
281
- }, (_, index) => index);
282
- }
283
34
  function clsx(...args) {
284
35
  return args.flatMap(arg => {
285
36
  if (!arg) {
@@ -301,2388 +52,10 @@ function clsx(...args) {
301
52
  }).filter(Boolean).join(' ');
302
53
  }
303
54
 
304
- var css_248z$k = ".xUi-form-item{display:flex;margin-bottom:10px;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:-6px;color:var(--xui-error-color);font-size:var(--xui-font-size-xs);line-height:16px;position:absolute;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}";
305
- styleInject(css_248z$k);
306
-
307
- const REF_CLIENT_HEIGHT = 24;
308
- const FormItem = ({
309
- prefixCls = prefixClsFormItem,
310
- name,
311
- label,
312
- rules = [],
313
- children,
314
- className = '',
315
- layout = 'vertical',
316
- style = {},
317
- valuePropName,
318
- dependencies = [],
319
- initialValue,
320
- feedbackIcons,
321
- ...props
322
- }) => {
323
- const formContext = react.useContext(FormContext);
324
- const errorRef = react.useRef(null);
325
- if (!formContext) {
326
- throw new Error('FormItem must be used within a Form');
327
- }
328
- const {
329
- isReseting,
330
- registerField,
331
- getFieldError,
332
- getFieldValue,
333
- setFieldValue,
334
- getFieldInstance,
335
- subscribeToFields,
336
- validateFields
337
- } = formContext;
338
- const childrenList = react.useMemo(() => (Array.isArray(children) ? children : [children]).filter(Boolean), [children]);
339
- react.useEffect(() => {
340
- if (name && !getFieldInstance(name)) {
341
- registerField(name, rules);
342
- }
343
- }, [name, rules]);
344
- react.useEffect(() => {
345
- if (initialValue) {
346
- setFieldValue(name, initialValue);
347
- }
348
- }, []);
349
- react.useEffect(() => {
350
- if (name && dependencies.length > 0) {
351
- const unsubscribe = subscribeToFields(dependencies, () => {
352
- validateFields([name]);
353
- });
354
- return () => {
355
- unsubscribe();
356
- };
357
- }
358
- }, [dependencies, name]);
359
- react.useEffect(() => {
360
- if (errorRef.current && errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT) {
361
- errorRef.current.style.position = 'relative';
362
- errorRef.current.style.marginTop = '-16px';
363
- }
364
- }, [errorRef.current]);
365
- const isRequired = react.useMemo(() => rules.some(rule => rule.required), [rules]);
366
- const errorMessage = getFieldError(valuePropName || name)?.[0];
367
- return jsxRuntime.jsxs("div", {
368
- style: style,
369
- className: clsx([`${prefixCls}`, {
370
- [layout]: layout,
371
- [className]: className,
372
- noStyle: props.noStyle
373
- }]),
374
- children: [!props.noStyle && (label || name) && jsxRuntime.jsxs("label", {
375
- className: `${prefixCls}-label`,
376
- htmlFor: name,
377
- children: [label || name, ":", isRequired && jsxRuntime.jsx("span", {
378
- className: `${prefixCls}-required`,
379
- children: "*"
380
- })]
381
- }), react.Children.map(childrenList, (child, key) => {
382
- if (/*#__PURE__*/react.isValidElement(child) && child.type !== react.Fragment) {
383
- const {
384
- value,
385
- ...childProps
386
- } = child.props;
387
- const fieldValue = getFieldValue(valuePropName || name) ?? initialValue;
388
- return /*#__PURE__*/react.createElement(FormItemChildComponent, {
389
- ...childProps,
390
- name: name,
391
- child: child,
392
- value: value,
393
- fieldValue: fieldValue,
394
- noStyle: props.noStyle,
395
- normalize: props.normalize,
396
- key: `${key}_${isReseting}`,
397
- error: Boolean(errorMessage),
398
- setFieldValue: setFieldValue,
399
- valuePropName: valuePropName,
400
- feedbackIcons: feedbackIcons,
401
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
402
- // @ts-expect-error
403
- size: childProps.size || props.size
404
- });
405
- }
406
- return child;
407
- }), !props.noStyle && errorMessage && jsxRuntime.jsx("span", {
408
- ref: errorRef,
409
- className: `${prefixCls}-error`,
410
- children: errorMessage
411
- })]
412
- });
413
- };
414
- const FormItemChildComponent = ({
415
- child,
416
- name,
417
- error,
418
- fieldValue,
419
- setFieldValue,
420
- onChange,
421
- valuePropName,
422
- normalize,
423
- ...props
424
- }) => {
425
- const formContext = react.useContext(FormContext);
426
- const [wasNormalize, setWasNormalize] = react.useState(false);
427
- const {
428
- getFieldsValue
429
- } = formContext || {};
430
- const handleChange = (e, option) => {
431
- let rawValue = e?.target ? e.target.value : e;
432
- if (normalize) {
433
- const prevValue = fieldValue ?? props.value;
434
- const allValues = getFieldsValue?.();
435
- rawValue = normalize(rawValue, prevValue, allValues);
436
- if (rawValue === prevValue) {
437
- e.target.value = rawValue;
438
- setWasNormalize(prev => !prev);
439
- const timeout = setTimeout(() => {
440
- document.querySelector(`[name='${name}']`)?.focus();
441
- clearTimeout(timeout);
442
- }, 0);
443
- return;
444
- }
445
- }
446
- setFieldValue(valuePropName || name, rawValue);
447
- onChange?.(e, option);
448
- };
449
- return /*#__PURE__*/react.createElement(child.type, {
450
- ...props,
451
- name: name,
452
- onChange: handleChange,
453
- ...(error ? {
454
- error
455
- } : {}),
456
- key: `${name}_${wasNormalize}`,
457
- value: fieldValue ?? props.value
458
- });
459
- };
460
- FormItem.displayName = 'FormItem';
461
-
462
- const FormContext = /*#__PURE__*/react.createContext(null);
463
- const Form = ({
464
- children,
465
- form,
466
- style = {},
467
- prefixCls = prefixClsForm,
468
- className = '',
469
- onFinish,
470
- onFinishFailed,
471
- initialValues = {},
472
- onValuesChange,
473
- onFieldsChange,
474
- layout = 'horizontal',
475
- ...rest
476
- }) => {
477
- const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
478
- const formInstance = form || internalForm;
479
- const formRef = react.useRef(null);
480
- const handleSubmit = async e => {
481
- e.preventDefault();
482
- if (await formInstance.validateFields()) {
483
- onFinish?.(formInstance.getFieldsValue());
484
- } else if (onFinishFailed) {
485
- const errorFields = formInstance.getFieldsError();
486
- onFinishFailed({
487
- values: formInstance.getFieldsValue(),
488
- errorFields
489
- });
490
- }
491
- };
492
- const childrenList = react.useMemo(() => (Array.isArray(children) ? children : [children]).filter(Boolean), [children]);
493
- react.useEffect(() => {
494
- if (onFieldsChange) {
495
- formInstance.onFieldsChange = onFieldsChange;
496
- }
497
- if (onValuesChange) {
498
- formInstance.onValuesChange = onValuesChange;
499
- }
500
- }, [formInstance, onFieldsChange, onValuesChange]);
501
- return jsxRuntime.jsx(FormContext.Provider, {
502
- value: formInstance,
503
- children: jsxRuntime.jsx("form", {
504
- style: style,
505
- ref: formRef,
506
- onSubmit: handleSubmit,
507
- className: `${prefixCls} ${className}`,
508
- children: react.Children.map(childrenList, child => {
509
- if (/*#__PURE__*/react.isValidElement(child) && child.type !== react.Fragment) {
510
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
511
- // @ts-expect-error
512
- const {
513
- ...childProps
514
- } = child.props;
515
- return jsxRuntime.jsx(child.type, {
516
- ...childProps,
517
- child: child,
518
- size: childProps.size || rest.size,
519
- layout: childProps.layout || layout
520
- });
521
- }
522
- return child;
523
- })
524
- })
525
- });
526
- };
527
- Form.Item = FormItem;
528
-
529
- var css_248z$j = ".xUi-rangepicker-range-container{font-size:14px;position:relative;user-select:none}.xUi-rangepicker-range-input-wrapper{background-color:#fff;border-radius:6px;display:flex;transition:all .3s;width:100%}.xUi-rangepicker-range-input-wrapper:hover{border-color:#4096ff}.xUi-rangepicker-range-input{align-items:center;border-right:1px solid var(--xui-border-color);cursor:pointer;display:flex;flex:1;padding:4px 11px}.xUi-rangepicker-range-input:last-child{border-right:none}.xUi-rangepicker-range-input input{background:transparent;border:none;color:#000;cursor:pointer;font-size:14px;outline:none;width:100%}.xUi-rangepicker-range-input input::placeholder{color:#bfbfbf}.xUi-rangepicker-range-clear,.xUi-rangepicker-range-icon{align-items:center;display:flex;margin-left:8px;transition:color .3s}.xUi-rangepicker-range-icon{color:rgba(0,0,0,.25)}.xUi-rangepicker-range-clear{color:rgba(0,0,0,.45);cursor:pointer}.xUi-rangepicker-range-clear:hover{color:#000}.xUi-rangepicker-range-dropdown-wrapper{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;left:0;margin-top:4px;min-width:560px;opacity:1;padding:8px;position:absolute;top:100%;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;z-index:1050}.xUi-rangepicker-range-dropdown-wrapper.show{display:flex}.xUi-rangepicker-dropdown-range,.xUi-rangepicker-range-dropdown{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:6px;display:flex;margin-top:2px;overflow:hidden}.xUi-rangepicker-calendar{background:#fff;border-radius:6px;margin:12px}.xUi-rangepicker-calendar.month,.xUi-rangepicker-calendar.year{width:280px}.xUi-rangepicker-calendar-header{align-items:center;display:flex;font-weight:500;justify-content:space-between}.xUi-rangepicker-month,.xUi-rangepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;margin:7px;min-width:30px;text-align:center;transition:all .2s}.xUi-rangepicker-day:disabled,.xUi-rangepicker-month:disabled,.xUi-rangepicker-select:disabled,.xUi-rangepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-rangepicker-day:not(:disabled):hover,.xUi-rangepicker-month:not(:disabled):hover,.xUi-rangepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-rangepicker-calendar-header button,.xUi-rangepicker-dropdown-selects button,.xUi-rangepicker-nav-buttons button{background:transparent;border:none;color:#595959;cursor:pointer;font-size:14px;font-weight:600;line-height:1;padding:0 6px;transition:color .2s ease}.xUi-rangepicker-nav-buttons button{font-size:20px;font-weight:400}.xUi-rangepicker-calendar-header button:hover,.xUi-rangepicker-dropdown-selects button:hover,.xUi-rangepicker-nav-buttons button:hover{color:var(--xui-primary-color)}.xUi-rangepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-rangepicker-input.noBordered{border:none!important}.xUi-rangepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-rangepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-rangepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-rangepicker-weekday-row{background-color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);display:grid;gap:4px;grid-template-columns:repeat(7,1fr);position:sticky;top:0;z-index:1}.xUi-rangepicker-weekday{align-items:center;color:var(--xui-text-color);display:flex;font-size:12px;font-weight:500;font-weight:600;height:30px;justify-content:center;text-align:center}.xUi-rangepicker-days-grid,.xUi-rangepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr)}.xUi-rangepicker-days-grid.day{grid-template-columns:repeat(7,0fr)}.xUi-rangepicker-day{background-color:transparent;border:none;border-radius:4px;cursor:pointer;height:30px;line-height:30px;text-align:center;transition:background-color .3s,color .3s;width:30px}.xUi-rangepicker-day:hover{background-color:var(--xui-primary-color);border-radius:4px;color:#fff}.xUi-rangepicker-day.xUi-rangepicker-other-month:hover{background-color:var(--xui-color-disabled)!important;color:var(--xui-text-color)}.xUi-rangepicker-range-end:not(.xUi-rangepicker-other-month),.xUi-rangepicker-range-start:not(.xUi-rangepicker-other-month),.xUi-rangepicker-selected:not(.xUi-rangepicker-other-month){background-color:var(--xui-primary-color);color:#fff;font-weight:600}.xUi-rangepicker-in-range:not(.xUi-rangepicker-other-month){background-color:#f0f5ff}.xUi-rangepicker-hover-end{background-color:var(--xui-primary-color)!important}.xUi-rangepicker-disabled,.xUi-rangepicker-other-month{color:#ccc}.xUi-rangepicker-disabled{cursor:not-allowed}.xUi-rangepicker-footer{display:flex;grid-column:span 7;justify-content:center;padding-top:6px}.xUi-rangepicker-select{background:none;border:none;color:var(--xui-primary-color);cursor:pointer}.xUi-rangepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-rangepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-rangepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-rangepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-rangepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-rangepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-rangepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-rangepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-rangepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-rangepicker-large .xUi-rangepicker-selected-date{font-size:16px}.xUi-rangepicker-large .xUi-rangepicker-input{padding:11px}.xUi-rangepicker-middle .xUi-rangepicker-input{padding:6px 11px}.xUi-rangepicker-dropdown-trigger{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:2px;cursor:pointer;line-height:32px;padding:0 8px}.xUi-rangepicker-dropdown-menu{background:#fff;border:1px solid var(--xui-border-color);box-shadow:0 2px 8px rgba(0,0,0,.15);max-height:200px;overflow-y:auto;position:absolute;z-index:1000}.xUi-rangepicker-dropdown-item{cursor:pointer;padding:4px 12px}.xUi-rangepicker-dropdown-item:hover{background:#f5f5f5}.xUi-rangepicker-dropdown-item.active{background-color:#e6f7ff;font-weight:700}.xUi-rangepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px;width:100%}";
530
- styleInject(css_248z$j);
531
-
532
- const ClearIcon = () => jsxRuntime.jsx("svg", {
533
- width: "10",
534
- height: "10",
535
- viewBox: "0 0 14 14",
536
- fill: "none",
537
- xmlns: "http://www.w3.org/2000/svg",
538
- children: jsxRuntime.jsx("path", {
539
- d: "M1 1L13 13M13 1L1 13",
540
- stroke: "currentColor",
541
- strokeWidth: "2",
542
- strokeLinecap: "round"
543
- })
544
- });
545
- const ArrowIcon = ({
546
- isOpen
547
- }) => jsxRuntime.jsx("svg", {
548
- width: "18",
549
- height: "18",
550
- viewBox: "0 0 24 24",
551
- fill: "none",
552
- xmlns: "http://www.w3.org/2000/svg",
553
- children: jsxRuntime.jsx("path", {
554
- d: "M7 10L12 15L17 10",
555
- stroke: "currentColor",
556
- strokeWidth: "2",
557
- strokeLinecap: "round",
558
- strokeLinejoin: "round",
559
- transform: isOpen ? 'rotate(180, 12, 12)' : ''
560
- })
561
- });
562
- const LoadingIcon = () => jsxRuntime.jsx("svg", {
563
- viewBox: "0 0 1024 1024",
564
- focusable: "false",
565
- "data-icon": "loading",
566
- width: "12",
567
- height: "12",
568
- fill: "currentColor",
569
- "aria-hidden": "true",
570
- children: jsxRuntime.jsx("path", {
571
- d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
572
- })
573
- });
574
- const CheckIcon = () => jsxRuntime.jsx("svg", {
575
- viewBox: "64 64 896 896",
576
- focusable: "false",
577
- "data-icon": "check",
578
- width: "12",
579
- height: "12",
580
- fill: "currentColor",
581
- "aria-hidden": "true",
582
- children: jsxRuntime.jsx("path", {
583
- d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
584
- })
585
- });
586
- const SearchIcon = () => jsxRuntime.jsx("svg", {
587
- viewBox: "64 64 896 896",
588
- focusable: "false",
589
- "data-icon": "search",
590
- width: "1em",
591
- height: "1em",
592
- fill: "currentColor",
593
- "aria-hidden": "true",
594
- children: jsxRuntime.jsx("path", {
595
- d: "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
596
- })
597
- });
598
- const CalendarIcon = () => jsxRuntime.jsx("svg", {
599
- viewBox: "64 64 896 896",
600
- focusable: "false",
601
- "data-icon": "calendar",
602
- width: "1em",
603
- height: "1em",
604
- fill: "currentColor",
605
- "aria-hidden": "true",
606
- children: jsxRuntime.jsx("path", {
607
- d: "M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
608
- })
609
- });
610
- const SuccessIcon = () => jsxRuntime.jsx("svg", {
611
- viewBox: "64 64 896 896",
612
- focusable: "false",
613
- "data-icon": "check-circle",
614
- width: "1em",
615
- height: "1em",
616
- fill: "currentColor",
617
- "aria-hidden": "true",
618
- children: jsxRuntime.jsx("path", {
619
- d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
620
- })
621
- });
622
- const ErrorIcon = () => jsxRuntime.jsx("svg", {
623
- className: "error-svg-icon",
624
- viewBox: "64 64 896 896",
625
- focusable: "false",
626
- "data-icon": "close-circle",
627
- width: "1em",
628
- height: "1em",
629
- fill: "currentColor",
630
- "aria-hidden": "true",
631
- children: jsxRuntime.jsx("path", {
632
- d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
633
- })
634
- });
635
- const DateDistanceIcon = () => jsxRuntime.jsx("svg", {
636
- viewBox: "0 0 1024 1024",
637
- focusable: "false",
638
- "data-icon": "swap-right",
639
- width: "1em",
640
- height: "1em",
641
- fill: "currentColor",
642
- "aria-hidden": "true",
643
- children: jsxRuntime.jsx("path", {
644
- d: "M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
645
- })
646
- });
647
- const TimeIcon = () => jsxRuntime.jsxs("svg", {
648
- viewBox: "64 64 896 896",
649
- focusable: "false",
650
- "data-icon": "clock-circle",
651
- width: "1em",
652
- height: "1em",
653
- fill: "currentColor",
654
- "aria-hidden": "true",
655
- children: [jsxRuntime.jsx("path", {
656
- d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
657
- }), jsxRuntime.jsx("path", {
658
- d: "M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
659
- })]
660
- });
661
- const StampleIcon = () => jsxRuntime.jsx("svg", {
662
- viewBox: "64 64 896 896",
663
- focusable: "false",
664
- "data-icon": "paper-clip",
665
- width: "1em",
666
- height: "1em",
667
- fill: "currentColor",
668
- "aria-hidden": "true",
669
- children: jsxRuntime.jsx("path", {
670
- d: "M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
671
- })
672
- });
673
- const TrashIcon = () => jsxRuntime.jsx("svg", {
674
- viewBox: "64 64 896 896",
675
- focusable: "false",
676
- "data-icon": "delete",
677
- width: "1em",
678
- height: "1em",
679
- fill: "currentColor",
680
- "aria-hidden": "true",
681
- children: jsxRuntime.jsx("path", {
682
- d: "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
683
- })
684
- });
685
- const SpinerIcon = () => jsxRuntime.jsx("svg", {
686
- viewBox: "0 0 1024 1024",
687
- focusable: "false",
688
- "data-icon": "loading",
689
- width: "1em",
690
- height: "1em",
691
- fill: "currentColor",
692
- "aria-hidden": "true",
693
- children: jsxRuntime.jsx("path", {
694
- d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
695
- })
696
- });
697
-
698
- const RangePicker = ({
699
- prefixCls = prefixClsRangePicker,
700
- value,
701
- onChange,
702
- placeholder = ['Start date', 'End date'],
703
- disabled,
704
- error,
705
- format = 'YYYY-MM-DD',
706
- prefix,
707
- allowClear = true,
708
- inputReadOnly = false,
709
- size = 'large',
710
- picker = 'date',
711
- locale,
712
- disabledDate,
713
- style = {},
714
- className = '',
715
- separator,
716
- defaultValue,
717
- bordered = true
718
- }) => {
719
- const containerRef = react.useRef(null);
720
- const [isOpen, setIsOpen] = react.useState(false);
721
- const [selectedDates, setSelectedDates] = react.useState([value?.[0] || defaultValue?.[0] || null, value?.[1] || defaultValue?.[1] || null]);
722
- const [hoveredDate, setHoveredDate] = react.useState(null);
723
- const [currentMonth, setCurrentMonth] = react.useState(new Date().getMonth());
724
- const [currentYear, setCurrentYear] = react.useState(new Date().getFullYear());
725
- const [viewMode, setViewMode] = react.useState(picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day');
726
- const localeMonths = locale?.shortMonths || Array.from({
727
- length: 12
728
- }, (_, i) => new Date(0, i).toLocaleString(locale?.locale || 'default', {
729
- month: 'short'
730
- }));
731
- const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
732
- react.useEffect(() => {
733
- const handleClickOutside = event => {
734
- if (containerRef.current && !containerRef.current.contains(event.target)) {
735
- setIsOpen(false);
736
- }
737
- };
738
- document.addEventListener('mousedown', handleClickOutside);
739
- return () => document.removeEventListener('mousedown', handleClickOutside);
740
- }, []);
741
- const handleSelect = date => {
742
- if (!selectedDates[0] || selectedDates[0] && selectedDates[1]) {
743
- setSelectedDates([date, null]);
744
- } else {
745
- const start = selectedDates[0];
746
- const end = date < start ? start : date;
747
- const begin = date < start ? date : start;
748
- setSelectedDates([begin, end]);
749
- onChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)]);
750
- setIsOpen(false);
751
- }
752
- };
753
- const isMonthDisabled = month => {
754
- const date = new Date(currentYear, month + 1, 1);
755
- return disabledDate?.(date, {
756
- from: undefined,
757
- to: undefined
758
- });
759
- };
760
- const isYearDisabled = year => {
761
- const date = new Date(year + 1, currentMonth, 1);
762
- return disabledDate?.(date, {
763
- from: undefined,
764
- to: undefined
765
- });
766
- };
767
- const formatDate = date => {
768
- if (typeof format === 'function') {
769
- return format(date);
770
- }
771
- return `${format}`.replace(/YYYY/, date.getFullYear().toString()).replace(/MM/, (date.getMonth() + 1).toString().padStart(2, '0')).replace(/DD/, date.getDate().toString().padStart(2, '0'));
772
- };
773
- const isInRange = date => {
774
- const [start, end] = selectedDates;
775
- return start && end && date > start && date < end;
776
- };
777
- const renderMonthYearSelector = (monthOffset = 0, all) => {
778
- const baseYear = currentYear;
779
- const baseMonth = currentMonth + monthOffset;
780
- return jsxRuntime.jsxs("div", {
781
- className: `${prefixCls}-header`,
782
- children: [all || !monthOffset ? jsxRuntime.jsxs("div", {
783
- className: `${prefixCls}-nav-buttons`,
784
- children: [jsxRuntime.jsx("button", {
785
- onClick: () => setCurrentYear(y => y - 1),
786
- children: "\u00AB"
787
- }), jsxRuntime.jsx("button", {
788
- onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1),
789
- children: "\u2039"
790
- })]
791
- }) : jsxRuntime.jsx("span", {}), jsxRuntime.jsxs("div", {
792
- className: `${prefixCls}-dropdown-selects`,
793
- children: [jsxRuntime.jsx("button", {
794
- type: "button",
795
- className: `${prefixCls}-select`,
796
- onClick: () => setViewMode('year'),
797
- children: baseYear
798
- }), jsxRuntime.jsx("button", {
799
- type: "button",
800
- className: `${prefixCls}-select`,
801
- onClick: () => setViewMode('month'),
802
- children: localeMonths[baseMonth]
803
- })]
804
- }), all || monthOffset ? jsxRuntime.jsxs("div", {
805
- className: `${prefixCls}-nav-buttons`,
806
- children: [jsxRuntime.jsx("button", {
807
- onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1),
808
- children: "\u203A"
809
- }), jsxRuntime.jsx("button", {
810
- onClick: () => setCurrentYear(y => y + 1),
811
- children: "\u00BB"
812
- })]
813
- }) : jsxRuntime.jsx("span", {})]
814
- });
815
- };
816
- const renderCalendar = (monthOffset = 0, all) => {
817
- const baseDate = new Date(currentYear, currentMonth + monthOffset, 1);
818
- const year = baseDate.getFullYear();
819
- const month = baseDate.getMonth();
820
- const firstDay = new Date(year, month, 1).getDay();
821
- const daysInMonth = new Date(year, month + 1, 0).getDate();
822
- const prevMonthDays = (() => {
823
- const prevMonth = new Date(year, month, 0);
824
- const totalDays = prevMonth.getDate();
825
- return Array.from({
826
- length: firstDay
827
- }, (_, i) => new Date(year, month - 1, totalDays - firstDay + i + 1));
828
- })();
829
- const currentMonthDays = Array.from({
830
- length: daysInMonth
831
- }, (_, i) => new Date(year, month, i + 1));
832
- const totalDisplayed = prevMonthDays.length + currentMonthDays.length;
833
- const remaining = NEXT_DAYS_COUNT_AS_CURRENT_MUNTH - totalDisplayed;
834
- const nextMonthDays = Array.from({
835
- length: remaining
836
- }, (_, i) => new Date(year, month + 1, i + 1));
837
- const days = [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
838
- return jsxRuntime.jsxs("div", {
839
- className: `${prefixCls}-calendar ${viewMode}`,
840
- children: [jsxRuntime.jsx("div", {
841
- className: `${prefixCls}-calendar-header`,
842
- children: renderMonthYearSelector(monthOffset, all)
843
- }), viewMode === 'day' && jsxRuntime.jsxs("div", {
844
- className: `${prefixCls}-days-grid day`,
845
- children: [localeWeekdays.map((day, i) => jsxRuntime.jsx("div", {
846
- className: `${prefixCls}-weekday`,
847
- children: day
848
- }, i)), days.map((day, i) => {
849
- const isSelected = day && selectedDates.some(d => d?.toDateString() === day.toDateString());
850
- const inRange = day && isInRange(day);
851
- const isSameMonth = day?.getMonth() === month;
852
- return jsxRuntime.jsx("button", {
853
- disabled: disabledDate?.(day, {
854
- from: undefined,
855
- to: undefined
856
- }),
857
- onClick: () => day && handleSelect(day),
858
- onMouseEnter: () => day && setHoveredDate(day),
859
- className: clsx([`${prefixCls}-day`, {
860
- [`${prefixCls}-selected`]: isSelected,
861
- [`${prefixCls}-in-range`]: inRange,
862
- [`${prefixCls}-hover-end`]: hoveredDate && selectedDates[0] && !selectedDates[1] && hoveredDate > selectedDates[0] && hoveredDate.toDateString() === day?.toDateString(),
863
- [`${prefixCls}-other-month`]: !isSameMonth
864
- }]),
865
- children: day?.getDate()
866
- }, i);
867
- })]
868
- }), viewMode === 'month' && jsxRuntime.jsx("div", {
869
- className: `${prefixCls}-grid`,
870
- children: localeMonths.map((m, i) => jsxRuntime.jsx("button", {
871
- className: `${prefixCls}-month`,
872
- onClick: () => {
873
- setCurrentMonth(i);
874
- setViewMode('day');
875
- },
876
- disabled: isMonthDisabled(i),
877
- children: m
878
- }, i))
879
- }), viewMode === 'year' && jsxRuntime.jsx("div", {
880
- className: `${prefixCls}-grid`,
881
- children: Array.from({
882
- length: 12
883
- }, (_, i) => {
884
- const year = currentYear - NUMBER_SIX + i;
885
- return jsxRuntime.jsx("button", {
886
- className: `${prefixCls}-year`,
887
- disabled: isYearDisabled(year),
888
- onClick: () => {
889
- setCurrentYear(year);
890
- setViewMode('month');
891
- },
892
- children: year
893
- }, year);
894
- })
895
- })]
896
- });
897
- };
898
- const handleClear = () => {
899
- setSelectedDates([null, null]);
900
- onChange?.(null, ['', '']);
901
- };
902
- return jsxRuntime.jsxs("div", {
903
- ref: containerRef,
904
- style: style,
905
- className: clsx([`${prefixCls}-range-container`, {
906
- [`${prefixCls}-${size}`]: size,
907
- [className]: className
908
- }]),
909
- children: [jsxRuntime.jsx("div", {
910
- className: `${prefixCls}-range-input-wrapper`,
911
- children: jsxRuntime.jsxs("button", {
912
- type: "button",
913
- className: clsx([`${prefixCls}-input`, {
914
- noBordered: !bordered,
915
- [`${prefixCls}-error`]: error,
916
- [`${prefixCls}-disabled`]: disabled
917
- }]),
918
- disabled: disabled,
919
- onClick: () => setIsOpen(!isOpen),
920
- children: [prefix, jsxRuntime.jsx("input", {
921
- readOnly: inputReadOnly,
922
- className: `${prefixCls}-selected-date`,
923
- placeholder: placeholder[0],
924
- value: selectedDates[0] ? formatDate(selectedDates[0]) : ''
925
- }), jsxRuntime.jsx("span", {
926
- className: `${prefixCls}-range-separator`,
927
- children: separator || jsxRuntime.jsx(DateDistanceIcon, {})
928
- }), jsxRuntime.jsx("input", {
929
- readOnly: inputReadOnly,
930
- className: `${prefixCls}-selected-date`,
931
- placeholder: placeholder[1],
932
- value: selectedDates[1] ? formatDate(selectedDates[1]) : ''
933
- }), jsxRuntime.jsx("span", {
934
- className: `${prefixCls}-icon`,
935
- children: allowClear && (selectedDates[0] || selectedDates[1]) ? jsxRuntime.jsx("span", {
936
- className: `${prefixCls}-clear`,
937
- onClick: handleClear,
938
- children: jsxRuntime.jsx(ClearIcon, {})
939
- }) : jsxRuntime.jsx(CalendarIcon, {})
940
- })]
941
- })
942
- }), isOpen && jsxRuntime.jsx("div", {
943
- className: `${prefixCls}-dropdown-wrapper show`,
944
- children: jsxRuntime.jsxs("div", {
945
- className: `${prefixCls}-dropdown-range`,
946
- children: [renderCalendar(0, viewMode !== 'day'), viewMode === 'day' && renderCalendar(1, viewMode !== 'day')]
947
- })
948
- })]
949
- });
950
- };
951
-
952
- var css_248z$i = ".xUi-datepicker-container{font-family:Arial,sans-serif;height:max-content;position:relative}.xUi-datepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-datepicker-input.noBordered{border:none!important}.xUi-datepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-datepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-datepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-datepicker-icon{color:var(--xui-text-color);cursor:pointer;height:16px;opacity:.6;transition:.3s ease;width:16px}.xUi-datepicker-icon:hover{color:var(--xui-primary-color);opacity:1}.xUi-datepicker-selected-date{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);letter-spacing:.8px;outline:none}.xUi-datepicker-disabled{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-datepicker-disabled .xUi-datepicker-selected-date{cursor:not-allowed;opacity:.6}.xUi-datepicker-disabled .xUi-datepicker-icon{cursor:not-allowed}.xUi-datepicker-icon{align-items:center;color:#8c8c8c;display:flex;font-size:16px;gap:6px}.xUi-datepicker-error{border-color:var(--xui-error-color)}.xUi-datepicker-error .error-svg-icon,.xUi-datepicker-error .xUi-datepicker-icon,.xUi-datepicker-icon .error-svg-icon{color:var(--xui-error-color)}.xUi-datepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-datepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-datepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-datepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-datepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-datepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-datepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-datepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-datepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-datepicker-dropdown{background:var(--xui-background-color);border:1px solid var(--xui-border-color);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:250px;padding:12px}.xUi-datepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px}.xUi-datepicker-day-footer{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:center;margin-top:8px;padding-top:12px;width:100%}.xUi-datepicker-nav-buttons{display:flex;gap:4px}.xUi-datepicker-nav-buttons button{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-size:20px;opacity:.7;padding:2px 6px;transition:all .3s}.xUi-datepicker-nav-buttons button:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-dropdown-selects{align-items:center;display:flex;gap:6px}.xUi-datepicker-dropdown-selects button,.xUi-datepicker-select{background:var(--xui-background-color);border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-weight:600;padding:4px 8px;transition:all .3s}.xUi-datepicker-dropdown-selects button:hover,.xUi-datepicker-select:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);text-align:center}.xUi-datepicker-grid.day{grid-template-columns:repeat(7,1fr)}.xUi-datepicker-day-header{color:var(--xui-text-color);font-size:14px;margin:4px 0;user-select:none}.xUi-datepicker-day,.xUi-datepicker-month,.xUi-datepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;min-width:30px;text-align:center;transition:all .2s}.xUi-datepicker-month,.xUi-datepicker-year{margin:7px}.xUi-datepicker-day:disabled,.xUi-datepicker-month:disabled,.xUi-datepicker-select:disabled,.xUi-datepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-datepicker-day:not(:disabled):hover,.xUi-datepicker-month:not(:disabled):hover,.xUi-datepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-selected{background:var(--xui-primary-color)!important;color:#fff!important;font-weight:700}.xUi-datepicker-other-month{color:var(--xui-text-color);opacity:.4}.xUi-datepicker-other-month:not(:disabled):hover{background-color:var(--xui-color-hover);color:var(--xui-text-color);user-select:none}.xUi-datepicker-footer{margin-top:12px;text-align:right}.xUi-datepicker-footer-today-btn{background:none;border:1px solid var(--xui-border-color);border-radius:4px;color:var(--xui-primary-color);cursor:pointer;font-size:13px;padding:4px 8px;transition:all .3s}.xUi-datepicker-footer-today-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-large .xUi-datepicker-selected-date{font-size:16px}.xUi-datepicker-large .xUi-datepicker-input{padding:11px}.xUi-datepicker-middle .xUi-datepicker-input{padding:6px 11px}";
953
- styleInject(css_248z$i);
954
-
955
- const INPUT_SIZE$1 = 12;
956
- const CONTENT_PADDING = 6;
957
- const NUMBER_SIX = 6;
958
- const MONTH_LENGTH = 11;
959
- const NEXT_DAYS_COUNT_AS_CURRENT_MUNTH = 35;
960
- const DatePickerComponent = ({
961
- value,
962
- onChange,
963
- onCalendarChange,
964
- disabled,
965
- error,
966
- placeholder = 'Select date',
967
- prefixCls = prefixClsDatePicker,
968
- noStyle,
969
- feedbackIcons,
970
- locale,
971
- placement = 'bottomLeft',
972
- defaultValue,
973
- size = 'large',
974
- format = 'YYYY-MM-DD',
975
- getPopupContainer,
976
- showToday = true,
977
- allowClear = false,
978
- disabledDate,
979
- suffixIcon,
980
- picker = 'date',
981
- prefix,
982
- defaultOpen = false,
983
- inputReadOnly = false,
984
- bordered = true
985
- }) => {
986
- const containerRef = react.useRef(null);
987
- const initialDate = value || defaultValue;
988
- const popupContainerRef = react.useRef(null);
989
- const [placementPossition, setPlacementPossition] = react.useState({});
990
- const DateNow = new Date();
991
- const [selectedDate, setSelectedDate] = react.useState(initialDate);
992
- const [selectedDatePlaceholder, setSelectedDatePlaceholder] = react.useState(initialDate ? formatDate(initialDate) : undefined);
993
- const [isOpen, setIsOpen] = react.useState(defaultOpen);
994
- const [currentYear, setCurrentYear] = react.useState(initialDate ? new Date(initialDate).getFullYear() : DateNow.getFullYear());
995
- const [currentMonth, setCurrentMonth] = react.useState(initialDate ? new Date(initialDate).getMonth() : DateNow.getMonth());
996
- const [viewMode, setViewMode] = react.useState(picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day');
997
- const localeMonths = locale?.shortMonths || Array.from({
998
- length: 12
999
- }, (_, i) => new Date(0, i).toLocaleString(locale?.locale || 'default', {
1000
- month: 'short'
1001
- }));
1002
- const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
1003
- react.useEffect(() => {
1004
- const handleClickOutside = event => {
1005
- if (containerRef.current && !containerRef.current.contains(event.target)) {
1006
- setIsOpen(false);
1007
- }
1008
- };
1009
- const controller = new AbortController();
1010
- if (isOpen) {
1011
- calculateDatePickerPopupPossition();
1012
- document.addEventListener('scroll', calculateDatePickerPopupPossition, {
1013
- signal: controller.signal
1014
- });
1015
- document.addEventListener('mousedown', handleClickOutside, {
1016
- signal: controller.signal
1017
- });
1018
- }
1019
- return () => {
1020
- controller.abort();
1021
- };
1022
- }, [isOpen]);
1023
- react.useEffect(() => {
1024
- if (getPopupContainer && containerRef.current) {
1025
- popupContainerRef.current = getPopupContainer(containerRef.current);
1026
- }
1027
- }, [getPopupContainer]);
1028
- const daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
1029
- const firstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
1030
- function formatDate(date) {
1031
- if (typeof format === 'function') {
1032
- return format(date);
1033
- }
1034
- if (typeof format === 'string') {
1035
- date = new Date(date);
1036
- return format.replace(/YYYY/, date.getFullYear().toString()).replace(/MM/, (date.getMonth() + 1).toString().padStart(2, '0')).replace(/DD/, date.getDate().toString().padStart(2, '0'));
1037
- }
1038
- return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
1039
- }
1040
- const handleSelect = (day, month, year) => {
1041
- if (disabled) {
1042
- return;
1043
- }
1044
- const date = new Date(year, month, day);
1045
- if (disabledDate?.(date, {
1046
- from: undefined,
1047
- to: undefined
1048
- })) {
1049
- return;
1050
- }
1051
- setCurrentMonth(month);
1052
- setCurrentYear(year);
1053
- setSelectedDate(date);
1054
- const formatted = formatDate(date);
1055
- setSelectedDatePlaceholder(formatted);
1056
- onChange?.(date.toUTCString(), formatted);
1057
- onCalendarChange?.(date.toUTCString(), formatted, {
1058
- range: undefined
1059
- });
1060
- setIsOpen(false);
1061
- };
1062
- const clearSelection = () => {
1063
- setSelectedDate(undefined);
1064
- setSelectedDatePlaceholder(undefined);
1065
- onChange?.(null, '');
1066
- };
1067
- const isMonthDisabled = month => {
1068
- const date = new Date(currentYear, month + 1, 1);
1069
- return disabledDate?.(date, {
1070
- from: undefined,
1071
- to: undefined
1072
- });
1073
- };
1074
- const isYearDisabled = year => {
1075
- const date = new Date(year + 1, currentMonth, 1);
1076
- return disabledDate?.(date, {
1077
- from: undefined,
1078
- to: undefined
1079
- });
1080
- };
1081
- function calculateDatePickerPopupPossition() {
1082
- const datePickerContainerHeight = (containerRef.current?.clientHeight || 0) + CONTENT_PADDING;
1083
- const datePickerPossitionFromTop = containerRef.current?.getBoundingClientRect().top || 0;
1084
- const datePickerPossitionFromBottom = window.innerHeight - (containerRef.current?.getBoundingClientRect().bottom || 0);
1085
- const datePickerContainerPopupHeight = containerRef.current?.querySelector(`.${prefixCls}-dropdown`)?.clientHeight || 0;
1086
- setPlacementPossition(['topLeft', 'topRight'].includes(placement) ? {
1087
- position: 'absolute',
1088
- top: datePickerPossitionFromTop - datePickerContainerPopupHeight < 0 ? datePickerContainerHeight : -datePickerContainerPopupHeight
1089
- } : {
1090
- position: 'absolute',
1091
- top: datePickerPossitionFromBottom > datePickerContainerPopupHeight ? 0 : -(datePickerContainerPopupHeight + datePickerContainerHeight)
1092
- });
1093
- }
1094
- const prevMonth = currentMonth === 0 ? MONTH_LENGTH : currentMonth - 1;
1095
- const nextMonth = currentMonth === MONTH_LENGTH ? 0 : currentMonth + 1;
1096
- const prevMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;
1097
- const nextMonthYear = currentMonth === MONTH_LENGTH ? currentYear + 1 : currentYear;
1098
- const totalDays = daysInMonth(currentYear, currentMonth);
1099
- const firstDay = firstDayOfMonth(currentYear, currentMonth);
1100
- const prevMonthDays = daysInMonth(prevMonthYear, prevMonth);
1101
- const nextDaysCount = NEXT_DAYS_COUNT_AS_CURRENT_MUNTH - (firstDay + totalDays);
1102
- const days = [...Array.from({
1103
- length: firstDay
1104
- }, (_, i) => ({
1105
- day: prevMonthDays - firstDay + i + 1,
1106
- current: false,
1107
- month: prevMonth,
1108
- year: prevMonthYear
1109
- })), ...Array.from({
1110
- length: totalDays
1111
- }, (_, i) => ({
1112
- day: i + 1,
1113
- current: true,
1114
- month: currentMonth,
1115
- year: currentYear
1116
- })), ...Array.from({
1117
- length: nextDaysCount
1118
- }, (_, i) => ({
1119
- day: i + 1,
1120
- current: false,
1121
- month: nextMonth,
1122
- year: nextMonthYear
1123
- }))];
1124
- return jsxRuntime.jsxs("div", {
1125
- ref: containerRef,
1126
- className: clsx([`${prefixCls}-container`, {
1127
- noStyle,
1128
- [`${prefixCls}-${size}`]: size
1129
- }]),
1130
- children: [jsxRuntime.jsx("div", {
1131
- className: `${prefixCls}-input-wrapper`,
1132
- children: jsxRuntime.jsxs("button", {
1133
- type: "button",
1134
- className: clsx([`${prefixCls}-input`, {
1135
- noBordered: !bordered,
1136
- [`${prefixCls}-error`]: error,
1137
- [`${prefixCls}-${size}`]: size,
1138
- [`${prefixCls}-disabled`]: disabled
1139
- }]),
1140
- disabled: disabled,
1141
- onClick: () => setIsOpen(!isOpen),
1142
- children: [prefix || null, jsxRuntime.jsx("input", {
1143
- size: INPUT_SIZE$1,
1144
- disabled: disabled,
1145
- readOnly: inputReadOnly,
1146
- className: `${prefixCls}-selected-date globalEllipsis`,
1147
- placeholder: placeholder,
1148
- style: {
1149
- opacity: isOpen ? '0.6' : 1
1150
- },
1151
- defaultValue: selectedDatePlaceholder
1152
- }), jsxRuntime.jsxs("span", {
1153
- className: `${prefixCls}-icon`,
1154
- children: [allowClear && selectedDate ? jsxRuntime.jsx("span", {
1155
- className: `${prefixCls}-clear`,
1156
- onClick: clearSelection,
1157
- children: typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : jsxRuntime.jsx(ClearIcon, {})
1158
- }) : suffixIcon || jsxRuntime.jsx(CalendarIcon, {}), error && feedbackIcons ? jsxRuntime.jsx(ErrorIcon, {}) : null]
1159
- })]
1160
- })
1161
- }), jsxRuntime.jsx("div", {
1162
- style: popupContainerRef.current ? {
1163
- position: 'absolute'
1164
- } : {},
1165
- className: clsx([placement, `${prefixCls}-dropdown-wrapper`, {
1166
- show: isOpen
1167
- }]),
1168
- children: isOpen && jsxRuntime.jsxs("div", {
1169
- className: `${prefixCls}-dropdown`,
1170
- style: placementPossition,
1171
- children: [jsxRuntime.jsxs("div", {
1172
- className: `${prefixCls}-header`,
1173
- children: [jsxRuntime.jsxs("div", {
1174
- className: `${prefixCls}-nav-buttons`,
1175
- children: [jsxRuntime.jsx("button", {
1176
- onClick: () => setCurrentYear(y => y - 1),
1177
- children: "\u00AB"
1178
- }), jsxRuntime.jsx("button", {
1179
- onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1),
1180
- children: "\u2039"
1181
- })]
1182
- }), jsxRuntime.jsxs("div", {
1183
- className: `${prefixCls}-dropdown-selects`,
1184
- children: [jsxRuntime.jsx("button", {
1185
- type: "button",
1186
- className: `${prefixCls}-select`,
1187
- onClick: () => setViewMode('year'),
1188
- children: currentYear
1189
- }), jsxRuntime.jsx("button", {
1190
- type: "button",
1191
- className: `${prefixCls}-select`,
1192
- onClick: () => setViewMode('month'),
1193
- children: localeMonths[currentMonth]
1194
- })]
1195
- }), jsxRuntime.jsxs("div", {
1196
- className: `${prefixCls}-nav-buttons`,
1197
- children: [jsxRuntime.jsx("button", {
1198
- onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1),
1199
- children: "\u203A"
1200
- }), jsxRuntime.jsx("button", {
1201
- onClick: () => setCurrentYear(y => y + 1),
1202
- children: "\u00BB"
1203
- })]
1204
- })]
1205
- }), viewMode === 'day' && jsxRuntime.jsxs("div", {
1206
- className: `${prefixCls}-grid day`,
1207
- children: [localeWeekdays.map(day => jsxRuntime.jsx("div", {
1208
- className: `${prefixCls}-day-header`,
1209
- children: day
1210
- }, day)), days.map(({
1211
- day,
1212
- current,
1213
- month,
1214
- year
1215
- }, idx) => {
1216
- const isSelected = selectedDate && selectedDate.getDate() === day && selectedDate.getMonth() === month && selectedDate.getFullYear() === year;
1217
- return jsxRuntime.jsx("button", {
1218
- className: clsx([`${prefixCls}-day`, {
1219
- [`${prefixCls}-selected`]: isSelected,
1220
- [`${prefixCls}-other-month`]: !current
1221
- }]),
1222
- onClick: () => handleSelect(day, month, year),
1223
- disabled: disabledDate?.(new Date(year, month, day), {
1224
- from: undefined,
1225
- to: undefined
1226
- }),
1227
- children: day
1228
- }, `${year}-${month}-${day}-${idx}`);
1229
- })]
1230
- }), viewMode === 'month' && jsxRuntime.jsx("div", {
1231
- className: `${prefixCls}-grid`,
1232
- children: localeMonths.map((m, i) => jsxRuntime.jsx("button", {
1233
- className: `${prefixCls}-month`,
1234
- onClick: () => {
1235
- setCurrentMonth(i);
1236
- setViewMode('day');
1237
- },
1238
- disabled: isMonthDisabled(i),
1239
- children: m
1240
- }, i))
1241
- }), viewMode === 'year' && jsxRuntime.jsx("div", {
1242
- className: `${prefixCls}-grid`,
1243
- children: Array.from({
1244
- length: 12
1245
- }, (_, i) => {
1246
- const year = currentYear - NUMBER_SIX + i;
1247
- return jsxRuntime.jsx("button", {
1248
- className: `${prefixCls}-year`,
1249
- disabled: isYearDisabled(year),
1250
- onClick: () => {
1251
- setCurrentYear(year);
1252
- setViewMode('month');
1253
- },
1254
- children: year
1255
- }, year);
1256
- })
1257
- }), showToday && jsxRuntime.jsx("div", {
1258
- className: `${prefixCls}-day-footer`,
1259
- style: {
1260
- gridColumn: 'span 7'
1261
- },
1262
- children: jsxRuntime.jsx("button", {
1263
- className: `${prefixCls}-select`,
1264
- disabled: disabledDate?.(new Date(DateNow.getDate(), DateNow.getMonth(), DateNow.getFullYear()), {
1265
- from: undefined,
1266
- to: undefined
1267
- }),
1268
- onClick: () => {
1269
- handleSelect(DateNow.getDate(), DateNow.getMonth(), DateNow.getFullYear());
1270
- },
1271
- children: locale?.today || 'Today'
1272
- })
1273
- })]
1274
- })
1275
- })]
1276
- });
1277
- };
1278
- const DatePicker = Object.assign(DatePickerComponent, {
1279
- RangePicker
1280
- });
1281
-
1282
- var css_248z$h = ".xUi-timepicker-wrapper{display:inline-block;font-size:14px;position:relative}.xUi-timepicker-input-wrapper{position:relative;width:100%}.xUi-timepicker-input{border:1px solid var(--xui-border-color);border-radius:6px;box-sizing:border-box;font-size:14px;height:32px;line-height:32px;padding:4px 11px;transition:all .3s;width:100%}.xUi-timepicker-input:focus,.xUi-timepicker-input:hover{border-color:var(--xui-primary-color-light)}.xUi-timepicker-input:focus{outline:none}.xUi-timepicker-input::placeholder{opacity:.6}.xUi-timepicker-clear{color:rgba(0,0,0,.45);cursor:pointer;font-size:12px;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.xUi-timepicker-clear:hover{color:rgba(0,0,0,.75)}.xUi-timepicker-popup{background:#fff;border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;left:0;margin-top:4px;padding:8px 4px;position:absolute;top:100%;z-index:1}.xUi-timepicker-panel{display:flex;width:100%}.xUi-timepicker-column{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:5px;max-height:169px;overflow-y:auto;padding-left:4px;width:45px}.xUi-timepicker-column::-webkit-scrollbar,.xUi-timepicker-column::-webkit-scrollbar-thumb{width:4px}.xUi-timepicker-column:nth-child(2){border-left:1px solid var(--xui-border-color);border-right:1px solid var(--xui-border-color)}.xUi-timepicker-cell{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:14px;justify-content:center;padding:6px 0;text-align:center;transition:background .3s;width:40px}.xUi-timepicker-cell:hover{background-color:#e9e9e9}.xUi-timepicker-cell-selected{background-color:#e6f4ff;font-weight:500}.xUi-timepicker-cell-disabled{color:rgba(0,0,0,.25);pointer-events:none;user-select:none}.xUi-timepicker-now-btn{color:#4096ff;cursor:pointer;font-weight:500;margin-top:10px;padding:0 0 4px;text-align:center;transition:background .3s}.xUi-timepicker-icons{align-items:center;display:flex;gap:4px;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.xUi-timepicker-suffix{align-items:center;cursor:pointer;display:flex;justify-content:center}.xUi-timepicker-suffix svg{color:#999;height:14px;width:14px}.xUi-timepicker-clear{right:0;top:1px}.xUi-timepicker-actions{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:space-between;padding:0 4px}.xUi-timepicker-ok-btn{background-color:var(--xui-primary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:7px;outline:none;padding:4px 8px;transition:.3s ease}.xUi-timepicker-ok-btn:disabled{background-color:var(--xui-color-disabled);color:grey;font-size:13px}.xUi-timepicker-ok-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light)}";
1283
- styleInject(css_248z$h);
1284
-
1285
- const HOURS = 24;
1286
- const INPUT_SIZE = 13;
1287
- const TIME_OPTION_PADDING = 4;
1288
- const MINUTES_AND_SECONDS = 60;
1289
- const ADD_EMPTY_SECTION_COUNT = 5;
1290
- const pad = num => String(num).padStart(2, '0');
1291
- const TimePicker = ({
1292
- prefixCls = prefixClsTimePicker,
1293
- style = {},
1294
- className = '',
1295
- disabledTime,
1296
- inputReadOnly = false,
1297
- format = 'HH:mm:ss',
1298
- defaultValue = null,
1299
- value: propValue = null,
1300
- onChange,
1301
- onBlur,
1302
- onSelect,
1303
- showNow = true,
1304
- clearIcon = jsxRuntime.jsx(ClearIcon, {}),
1305
- suffixIcon = jsxRuntime.jsx(TimeIcon, {}),
1306
- placeholder = 'Select time'
1307
- }) => {
1308
- const [open, setOpen] = react.useState(false);
1309
- const [innerValue, setInnerValue] = react.useState(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
1310
- const [tempValue, setTempValue] = react.useState(null);
1311
- const inputRef = react.useRef(null);
1312
- const popupRef = react.useRef(null);
1313
- const hourRef = react.useRef(null);
1314
- const minuteRef = react.useRef(null);
1315
- const secondRef = react.useRef(null);
1316
- react.useEffect(() => {
1317
- const handleClickOutside = e => {
1318
- if (popupRef.current && !popupRef.current.contains(e.target) && inputRef.current && !inputRef.current.contains(e.target)) {
1319
- setOpen(false);
1320
- setTempValue(null);
1321
- if (!innerValue) {
1322
- onChange?.(null, '');
1323
- }
1324
- }
1325
- };
1326
- document.addEventListener('mousedown', handleClickOutside);
1327
- return () => {
1328
- document.removeEventListener('mousedown', handleClickOutside);
1329
- };
1330
- }, [innerValue, onChange]);
1331
- react.useEffect(() => {
1332
- if (open) {
1333
- setTempValue(innerValue ? new Date(innerValue) : null);
1334
- const {
1335
- hour = 0,
1336
- minute = 0,
1337
- second = 0
1338
- } = getTimeParts(innerValue);
1339
- scrollToTop(hourRef, hour || 0);
1340
- scrollToTop(minuteRef, minute || 0);
1341
- scrollToTop(secondRef, second || 0);
1342
- }
1343
- }, [open, innerValue]);
1344
- react.useEffect(() => {
1345
- onSelect?.(tempValue);
1346
- }, [tempValue, onSelect]);
1347
- const formatDate = date => {
1348
- if (!date) {
1349
- return '';
1350
- }
1351
- return `${format}`.replace(/HH|hh/, pad(date.getHours())).replace(/MM|mm/, pad(date.getMinutes())).replace(/SS|ss/, pad(date.getSeconds()));
1352
- };
1353
- const getTimeParts = date => ({
1354
- hour: date?.getHours() ?? null,
1355
- minute: date?.getMinutes() ?? null,
1356
- second: date?.getSeconds() ?? null
1357
- });
1358
- const getDisabled = (type, hour = 0, minute = 0) => {
1359
- const disabled = disabledTime?.(tempValue || new Date());
1360
- if (!disabled) {
1361
- return [];
1362
- }
1363
- if (type === 'hour') {
1364
- return disabled.disabledHours?.() || [];
1365
- }
1366
- if (type === 'minute') {
1367
- return disabled.disabledMinutes?.(hour) || [];
1368
- }
1369
- if (type === 'second') {
1370
- return disabled.disabledSeconds?.(hour, minute) || [];
1371
- }
1372
- return [];
1373
- };
1374
- const scrollToTop = (ref, selectedIndex) => {
1375
- const el = ref.current?.querySelectorAll('div')[selectedIndex];
1376
- if (el && ref.current) {
1377
- ref.current.scrollTo({
1378
- top: el.offsetTop - TIME_OPTION_PADDING * 2,
1379
- behavior: 'smooth'
1380
- });
1381
- }
1382
- };
1383
- const updateTempValue = (hour, minute, second) => {
1384
- const newDate = new Date();
1385
- newDate.setHours(hour, minute, second, 0);
1386
- setTempValue(newDate);
1387
- };
1388
- const onSelectHour = (h, auto) => {
1389
- const {
1390
- minute = 0,
1391
- second = 0
1392
- } = getTimeParts(tempValue);
1393
- if (!auto) {
1394
- if (!minute) {
1395
- onSelectMinute(0, true);
1396
- }
1397
- if (!second) {
1398
- onSelectSecond(0, true);
1399
- }
1400
- }
1401
- updateTempValue(h, minute || 0, second || 0);
1402
- scrollToTop(hourRef, h);
1403
- };
1404
- const onSelectMinute = (m, auto) => {
1405
- const {
1406
- hour = 0,
1407
- second = 0
1408
- } = getTimeParts(tempValue);
1409
- if (!auto) {
1410
- if (!hour) {
1411
- onSelectHour(0, true);
1412
- }
1413
- if (!second) {
1414
- onSelectSecond(0, true);
1415
- }
1416
- }
1417
- updateTempValue(hour || 0, m, second || 0);
1418
- scrollToTop(minuteRef, m);
1419
- };
1420
- const onSelectSecond = (s, auto) => {
1421
- const {
1422
- hour = 0,
1423
- minute = 0
1424
- } = getTimeParts(tempValue);
1425
- if (!auto) {
1426
- if (!hour) {
1427
- onSelectHour(0, true);
1428
- }
1429
- if (!minute) {
1430
- onSelectMinute(0, true);
1431
- }
1432
- }
1433
- updateTempValue(hour || 0, minute || 0, s);
1434
- scrollToTop(secondRef, s);
1435
- };
1436
- const handleClear = e => {
1437
- e?.stopPropagation();
1438
- setInnerValue(null);
1439
- setTempValue(null);
1440
- onChange?.(null, '');
1441
- };
1442
- const handleShowNow = () => {
1443
- const now = new Date();
1444
- setTempValue(now);
1445
- setInnerValue(now);
1446
- onChange?.(now, formatDate(now));
1447
- onSelect?.(now);
1448
- setOpen(false);
1449
- };
1450
- const handleOkButton = () => {
1451
- if (tempValue) {
1452
- setInnerValue(tempValue);
1453
- onChange?.(tempValue, formatDate(tempValue));
1454
- onSelect?.(tempValue);
1455
- }
1456
- setOpen(false);
1457
- };
1458
- const handleOnChange = e => {
1459
- const inputVal = e.target.value.trim();
1460
- const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/;
1461
- const match = inputVal.match(timeRegex);
1462
- if (match) {
1463
- const [, hStr, mStr, sStr] = match;
1464
- const h = parseInt(hStr, 10);
1465
- const m = parseInt(mStr, 10);
1466
- const s = parseInt(sStr, 10);
1467
- if (h >= 0 && h < HOURS && m >= 0 && m < MINUTES_AND_SECONDS && s >= 0 && s < MINUTES_AND_SECONDS && !getDisabled('hour').includes(h) && !getDisabled('minute', h).includes(m) && !getDisabled('second', h, m).includes(s)) {
1468
- onSelectHour(h);
1469
- onSelectMinute(m);
1470
- onSelectSecond(s);
1471
- }
1472
- }
1473
- };
1474
- const renderOptions = () => {
1475
- const hours = Array.from({
1476
- length: HOURS + ADD_EMPTY_SECTION_COUNT
1477
- }, (_, i) => i < HOURS ? i : false);
1478
- const minutesSeconds = Array.from({
1479
- length: MINUTES_AND_SECONDS + ADD_EMPTY_SECTION_COUNT
1480
- }, (_, i) => i < MINUTES_AND_SECONDS ? i : false);
1481
- const {
1482
- hour: selectedHour,
1483
- minute: selectedMinute,
1484
- second: selectedSecond
1485
- } = getTimeParts(tempValue);
1486
- const currentHour = selectedHour ?? 0;
1487
- const currentMinute = selectedMinute ?? 0;
1488
- return jsxRuntime.jsxs("div", {
1489
- children: [jsxRuntime.jsxs("div", {
1490
- className: `${prefixCls}-panel`,
1491
- children: [jsxRuntime.jsx("div", {
1492
- ref: hourRef,
1493
- className: `${prefixCls}-column`,
1494
- children: hours.map((h, index) => h === false ? jsxRuntime.jsx("div", {
1495
- className: `${prefixCls}-cell`,
1496
- style: {
1497
- opacity: 0,
1498
- userSelect: 'none',
1499
- cursor: 'inherit'
1500
- },
1501
- children: "0"
1502
- }, `${h}_${index}`) : jsxRuntime.jsx("div", {
1503
- className: clsx([`${prefixCls}-cell`, {
1504
- [`${prefixCls}-cell-disabled`]: getDisabled('hour').includes(h),
1505
- [`${prefixCls}-cell-selected`]: selectedHour === h
1506
- }]),
1507
- onClick: () => !getDisabled('hour').includes(h) && onSelectHour(h),
1508
- children: pad(h)
1509
- }, h))
1510
- }), jsxRuntime.jsx("div", {
1511
- ref: minuteRef,
1512
- className: `${prefixCls}-column`,
1513
- children: minutesSeconds.map((m, index) => m === false ? jsxRuntime.jsx("div", {
1514
- className: `${prefixCls}-cell`,
1515
- style: {
1516
- opacity: 0,
1517
- userSelect: 'none',
1518
- cursor: 'inherit'
1519
- },
1520
- children: "0"
1521
- }, `${m}_${index}`) : jsxRuntime.jsx("div", {
1522
- className: clsx([`${prefixCls}-cell`, {
1523
- [`${prefixCls}-cell-disabled`]: getDisabled('minute', currentHour).includes(m),
1524
- [`${prefixCls}-cell-selected`]: selectedMinute === m
1525
- }]),
1526
- onClick: () => !getDisabled('minute', currentHour).includes(m) && onSelectMinute(m),
1527
- children: pad(m)
1528
- }, m))
1529
- }), jsxRuntime.jsx("div", {
1530
- ref: secondRef,
1531
- className: `${prefixCls}-column`,
1532
- children: minutesSeconds.map((s, index) => s === false ? jsxRuntime.jsx("div", {
1533
- className: `${prefixCls}-cell`,
1534
- style: {
1535
- opacity: 0,
1536
- userSelect: 'none',
1537
- cursor: 'inherit'
1538
- },
1539
- children: "0"
1540
- }, `${s}_${index}`) : jsxRuntime.jsx("div", {
1541
- className: clsx([`${prefixCls}-cell`, {
1542
- [`${prefixCls}-cell-disabled`]: getDisabled('second', currentHour, currentMinute).includes(s),
1543
- [`${prefixCls}-cell-selected`]: selectedSecond === s
1544
- }]),
1545
- onClick: () => !getDisabled('second', currentHour, currentMinute).includes(s) && onSelectSecond(s),
1546
- children: pad(s)
1547
- }, s))
1548
- })]
1549
- }), jsxRuntime.jsxs("div", {
1550
- className: `${prefixCls}-actions`,
1551
- children: [showNow ? jsxRuntime.jsx("div", {
1552
- className: `${prefixCls}-now-btn`,
1553
- onClick: handleShowNow,
1554
- children: "Now"
1555
- }) : jsxRuntime.jsx("span", {}), jsxRuntime.jsx("button", {
1556
- className: `${prefixCls}-ok-btn`,
1557
- disabled: selectedHour === null || selectedMinute === null || selectedSecond === null,
1558
- onClick: handleOkButton,
1559
- children: "OK"
1560
- })]
1561
- })]
1562
- });
1563
- };
1564
- return jsxRuntime.jsxs("div", {
1565
- className: clsx([`${prefixCls}-wrapper`, className]),
1566
- style: style,
1567
- children: [jsxRuntime.jsxs("div", {
1568
- className: `${prefixCls}-input-wrapper`,
1569
- onClick: () => setOpen(true),
1570
- children: [jsxRuntime.jsx("input", {
1571
- ref: inputRef,
1572
- size: INPUT_SIZE,
1573
- placeholder: placeholder,
1574
- className: `${prefixCls}-input`,
1575
- readOnly: inputReadOnly,
1576
- onChange: handleOnChange,
1577
- ...(open ? {} : {
1578
- value: formatDate(innerValue)
1579
- }),
1580
- onBlur: e => {
1581
- onBlur?.(e, {
1582
- source: 'input'
1583
- });
1584
- }
1585
- }), jsxRuntime.jsx("div", {
1586
- className: `${prefixCls}-icons`,
1587
- children: clearIcon && innerValue ? jsxRuntime.jsx("span", {
1588
- className: `${prefixCls}-clear`,
1589
- onClick: handleClear,
1590
- children: clearIcon
1591
- }) : suffixIcon && jsxRuntime.jsx("span", {
1592
- className: `${prefixCls}-suffix`,
1593
- onClick: e => {
1594
- e.stopPropagation();
1595
- setOpen(true);
1596
- },
1597
- children: suffixIcon
1598
- })
1599
- })]
1600
- }), open && jsxRuntime.jsx("div", {
1601
- ref: popupRef,
1602
- className: `${prefixCls}-popup`,
1603
- children: renderOptions()
1604
- })]
1605
- });
1606
- };
1607
-
1608
- var css_248z$g = ".xUi-input-container{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:flex;overflow:hidden}.xUi-input-container:not(.xUi-input-error):has(.xUi-input):hover,.xUi-input-container:not(.xUi-input-error):has(.xUi-input:focus){border:1px solid var(--xui-primary-color)}.xUi-input-container.xUi-input-error{border-color:var(--xui-error-color)}.xUi-input-container.xUi-input-error .error-svg-icon,.xUi-input-suffix .error-svg-icon{color:var(--xui-error-color)}.xUi-input-wrapper{align-items:center;display:flex;flex-grow:1;margin:-1px;position:relative;transition:border .3s}.xUi-input,.xUi-input-wrapper{background-color:transparent;height:-webkit-fill-available}.xUi-input{border:none;color:var(--xui-text-color);flex:1;outline:none;padding:0 7px;width:100%}.xUi-input:placeholder-shown{text-overflow:ellipsis}.xUi-input::placeholder{color:var(--xui-text-color);opacity:.6}.xUi-input-prefix,.xUi-input-suffix{background-color:transparent;gap:4px}.xUi-input-addon,.xUi-input-prefix,.xUi-input-suffix{align-items:center;color:var(--xui-text-color);display:flex;height:-webkit-fill-available;padding:0 7px}.xUi-input-addon.xUi-input-after{border-left:1px solid var(--xui-border-color)}.xUi-input-addon.xUi-input-before{border-right:1px solid var(--xui-border-color)}.xUi-input-large .xUi-input-addon{padding:0 10px}.xUi-input-clear{align-items:center;cursor:pointer;display:flex;margin:0 3px;position:relative;width:16px}.xUi-input-clear svg{color:var(--xui-text-color)}.xUi-input-disabled{background-color:var(--xui-color-disabled);cursor:not-allowed}.xUi-input-small{height:22px}.xUi-input-large .xUi-input-clear,.xUi-input-small .xUi-input,.xUi-input-small .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-middle{border-radius:var(--xui-border-radius-md);height:30px}.xUi-input-large .xUi-input-clear,.xUi-input-middle .xUi-input,.xUi-input-middle .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-large{border-radius:var(--xui-border-radius-lg);height:40px}.xUi-input-large .xUi-input,.xUi-input-large .xUi-input-clear,.xUi-input-large .xUi-input::placeholder{font-size:var(--xui-font-size-lg)}";
1609
- styleInject(css_248z$g);
1610
-
1611
- var css_248z$f = ".xUi-textarea-wrapper{margin-bottom:10px;position:relative;width:100%}.xUi-textarea{border:none;border-radius:6px;box-shadow:none;color:var(--xui-text-color);font-size:14px;min-height:14px;outline:none;padding:8px 12px;resize:vertical;transition:all .3s ease;width:100%}.xUi-textarea:placeholder-shown{font-size:14px;text-overflow:ellipsis}.xUi-textarea::placeholder{color:var(--xui-text-color);opacity:.6}.xUi-textarea-small{font-size:12px;padding:6px 10px}.xUi-textarea-middle{font-size:14px;padding:8px 12px}.xUi-textarea-large{padding:10px}.xUi-textarea-outlined{background:transparent;border:1px solid var(--xui-border-color)}.xUi-textarea-outlined:focus{border-color:var(--xui-primary-color)}.xUi-textarea-borderless{background:transparent;border:none}.xUi-textarea-filled{background:var(--xui-primary-color);border:1px solid var(--xui-border-color)}.xUi-textarea-filled:focus{background:var(--xui-background-color);border-color:var(--xui-primary-color)}.xUi-textarea-underlined{background:transparent;border:none;border-bottom:1px solid var(--xui-border-color)}.xUi-textarea-underlined:focus{border-bottom-color:var(--xui-primary-color)}.xUi-textarea-container:has(.xUi-textarea-bordered){border:1px solid var(--xui-border-color)}.xUi-textarea-container:has(.xUi-textarea-success){border-color:var(--xui-success-color)}.xUi-textarea-wrapper:has(.xUi-textarea-error) textarea,.xUi-textarea-wrapper:has(.xUi-textarea-error) textarea:focus{border-color:var(--xui-error-color)}.xUi-textarea-clear{background:transparent;border:none;color:#999;cursor:pointer;position:absolute;right:0;top:15px;transform:translateY(-50%)}.xUi-textarea-clear:hover{color:#333}";
1612
- styleInject(css_248z$f);
1613
-
1614
- const Textarea = /*#__PURE__*/react.forwardRef(({
1615
- prefixCls = prefixClsTextArea,
1616
- value,
1617
- className = '',
1618
- style,
1619
- autoSize,
1620
- onPressEnter,
1621
- onResize,
1622
- styles,
1623
- bordered = true,
1624
- size = 'large',
1625
- status,
1626
- rootClassName,
1627
- variant = 'outlined',
1628
- error,
1629
- allowClear = false,
1630
- ...props
1631
- }, ref) => {
1632
- const [inputValue, setInputValue] = react.useState(value?.toString() || '');
1633
- const textareaRef = react.useRef(null);
1634
- react.useEffect(() => {
1635
- const textarea = ref?.current || textareaRef.current;
1636
- if (textarea && autoSize) {
1637
- textarea.style.height = 'auto';
1638
- textarea.style.height = `${textarea.scrollHeight}px`;
1639
- if (onResize) {
1640
- onResize({
1641
- width: textarea.clientWidth,
1642
- height: textarea.scrollHeight
1643
- });
1644
- }
1645
- }
1646
- }, [inputValue, autoSize, onResize, ref]);
1647
- const handleChange = e => {
1648
- setInputValue(e.target.value);
1649
- if (props.onChange) {
1650
- props.onChange(e);
1651
- }
1652
- };
1653
- const handleKeyDown = e => {
1654
- if (e.key === 'Enter' && onPressEnter) {
1655
- onPressEnter(e);
1656
- }
1657
- };
1658
- const handleClear = () => {
1659
- setInputValue('');
1660
- if (props.onChange) {
1661
- props.onChange({
1662
- target: {
1663
- value: ''
1664
- }
1665
- });
1666
- }
1667
- };
1668
- return jsxRuntime.jsxs("div", {
1669
- className: `${prefixCls}-wrapper ${rootClassName || ''}`,
1670
- children: [jsxRuntime.jsx("textarea", {
1671
- ...props,
1672
- ref: ref || textareaRef,
1673
- value: inputValue,
1674
- onChange: handleChange,
1675
- onKeyDown: handleKeyDown,
1676
- style: {
1677
- ...styles?.textarea,
1678
- ...style
1679
- },
1680
- className: clsx([`${prefixCls} ${prefixCls}-${size} ${prefixCls}-${variant} ${className}`, {
1681
- [`${prefixCls}-bordered`]: bordered,
1682
- [`${prefixCls}-success`]: status === 'success',
1683
- [`${prefixCls}-error`]: status === 'error' || error
1684
- }])
1685
- }), allowClear && inputValue && jsxRuntime.jsx("button", {
1686
- className: `${prefixCls}-clear`,
1687
- onClick: handleClear,
1688
- children: "\u2715"
1689
- })]
1690
- });
1691
- });
1692
- Textarea.displayName = 'Textarea';
1693
-
1694
- const InputComponent = /*#__PURE__*/react.forwardRef(({
1695
- size = 'large',
1696
- error,
1697
- suffix,
1698
- prefix,
1699
- addonAfter,
1700
- addonBefore,
1701
- onPressEnter,
1702
- disabled = false,
1703
- allowClear = false,
1704
- prefixCls = prefixClsInput,
1705
- className = '',
1706
- value = undefined,
1707
- iconRender,
1708
- noStyle,
1709
- feedbackIcons,
1710
- ...props
1711
- }, ref) => {
1712
- const inputRef = react.useRef(null);
1713
- const [internalValue, setInternalValue] = react.useState(value ?? '');
1714
- const [iconRenderVisible, setIconRenderVisible] = react.useState(false);
1715
- react.useImperativeHandle(ref, () => ({
1716
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1717
- // @ts-expect-error
1718
- focus: inputRef.current?.focus,
1719
- input: inputRef.current,
1720
- blur: inputRef.current.blur,
1721
- nativeElement: inputRef.current,
1722
- setSelectionRange: (start, end) => {
1723
- if (inputRef.current) {
1724
- inputRef.current.setSelectionRange(start, end);
1725
- }
1726
- }
1727
- }));
1728
- const handleChange = e => {
1729
- setInternalValue(e.target.value);
1730
- props.onChange?.(e);
1731
- };
1732
- const handleClear = e => {
1733
- setInternalValue('');
1734
- e.target.value = '';
1735
- props.onChange?.(e);
1736
- };
1737
- const handleOnKeyDown = e => {
1738
- if (e.key === 'Enter' && onPressEnter) {
1739
- onPressEnter(e);
1740
- }
1741
- };
1742
- return jsxRuntime.jsxs("div", {
1743
- className: clsx([`${prefixCls}-container`, {
1744
- [`${prefixCls}-error`]: error,
1745
- [`${prefixCls}-disabled`]: disabled,
1746
- [`${prefixCls}-${size}`]: size,
1747
- noStyle: noStyle
1748
- }, className]),
1749
- style: props.style,
1750
- children: [addonBefore && jsxRuntime.jsx("span", {
1751
- className: `${prefixCls}-addon ${prefixCls}-before`,
1752
- children: addonBefore
1753
- }), jsxRuntime.jsxs("div", {
1754
- className: `${prefixCls}-wrapper`,
1755
- children: [prefix && jsxRuntime.jsx("span", {
1756
- className: `${prefixCls}-prefix`,
1757
- children: prefix
1758
- }), jsxRuntime.jsx("input", {
1759
- ...props,
1760
- ref: inputRef,
1761
- ...(props.type === 'password' && iconRender ? {
1762
- type: iconRenderVisible ? 'text' : 'password'
1763
- } : {}),
1764
- disabled: disabled,
1765
- value: internalValue,
1766
- onChange: handleChange,
1767
- onKeyDown: handleOnKeyDown,
1768
- className: clsx([prefixCls, className])
1769
- }), jsxRuntime.jsx("span", {
1770
- className: `${prefixCls}-clear`,
1771
- onClick: handleClear,
1772
- children: allowClear && internalValue ? jsxRuntime.jsx(ErrorIcon, {}) : null
1773
- }), (suffix || iconRender) && jsxRuntime.jsxs("span", {
1774
- className: `${prefixCls}-suffix`,
1775
- ...(iconRender !== undefined ? {
1776
- onClick: () => setIconRenderVisible(icon => !icon)
1777
- } : {}),
1778
- children: [suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? jsxRuntime.jsx(ErrorIcon, {}) : null]
1779
- })]
1780
- }), addonAfter ? jsxRuntime.jsx("span", {
1781
- className: `${prefixCls}-addon ${prefixCls}-after`,
1782
- children: addonAfter
1783
- }) : null]
1784
- });
1785
- });
1786
- InputComponent.displayName = 'Input';
1787
- const Input = InputComponent;
1788
- Input.TextArea = Textarea;
1789
-
1790
- var css_248z$e = ".xUi-radio-button{align-items:center;background:var(--xui-background-color);border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);cursor:pointer;display:inline-flex;height:-webkit-fill-available;justify-content:center;margin:-1px;padding:8px 16px;transition:all .3s}.xUi-radio-button .xUi-radio{display:none}.xUi-radio-button.xUi-radio-button-middle{border-radius:var(--xui-border-radius-md)}.xUi-radio-button.xUi-radio-button-large{border-radius:var(--xui-border-radius-lg)}.xUi-radio-button-checked{background:var(--xui-primary-color);border-color:var(--xui-primary-color);color:var(--xui-background-color);z-index:1}.xUi-radio-button-content{font-size:14px}.xUi-radio-button.disabled{background:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-color-disabled);cursor:not-allowed}";
1791
- styleInject(css_248z$e);
1792
-
1793
- const RadioButton = ({
1794
- prefixCls = prefixClsRadio,
1795
- className = '',
1796
- checked,
1797
- disabled,
1798
- children,
1799
- size = 'large',
1800
- ...props
1801
- }) => {
1802
- return jsxRuntime.jsx(Radio, {
1803
- ...props,
1804
- checked: checked,
1805
- disabled: disabled,
1806
- className: clsx([`${prefixCls}-button`, {
1807
- disabled,
1808
- [className]: className,
1809
- [`${prefixCls}-button-${size}`]: size,
1810
- [`${prefixCls}-button-checked`]: checked
1811
- }]),
1812
- children: jsxRuntime.jsx("span", {
1813
- className: `${prefixCls}-button-content`,
1814
- children: children ?? props.value
1815
- })
1816
- });
1817
- };
1818
-
1819
- var css_248z$d = ".xUi-radio-group.xUi-radio-group-small{height:24px}.xUi-radio-group.xUi-radio-group-small .xUi-radio-button:first-child{border-radius:var(--xui-border-radius-sm) 0 0 var(--xui-border-radius-sm)}.xUi-radio-group.xUi-radio-group-small .xUi-radio-button:last-child{border-radius:0 var(--xui-border-radius-sm) var(--xui-border-radius-sm) 0}.xUi-radio-group.xUi-radio-group-middle{height:32px}.xUi-radio-group.xUi-radio-group-middle .xUi-radio-button:first-child{border-radius:var(--xui-border-radius-md) 0 0 var(--xui-border-radius-md)}.xUi-radio-group.xUi-radio-group-middle .xUi-radio-button:last-child{border-radius:0 var(--xui-border-radius-md) var(--xui-border-radius-md) 0}.xUi-radio-group.xUi-radio-group-large{height:40px}.xUi-radio-group.xUi-radio-group-large .xUi-radio-button:first-child{border-radius:var(--xui-border-radius-lg) 0 0 var(--xui-border-radius-lg)}.xUi-radio-group.xUi-radio-group-large .xUi-radio-button:last-child{border-radius:0 var(--xui-border-radius-lg) var(--xui-border-radius-lg) 0}.xUi-radio-group .xUi-radio-button:not(:first-child){border-radius:0}.xUi-radio-group.block{display:inline-flex;width:100%}.xUi-radio-group.block .xUi-radio-button{width:100%}.xUi-radio-group:not(.xUi-radio-group-solid) .xUi-radio-button-checked{background-color:var(--xui-background-color);color:var(--xui-primary-color)}";
1820
- styleInject(css_248z$d);
1821
-
1822
- const RadioGroup = ({
1823
- defaultValue,
1824
- value,
1825
- size = 'large',
1826
- disabled,
1827
- name,
1828
- id,
1829
- style = {},
1830
- buttonStyle = 'outline',
1831
- block,
1832
- prefixCls = prefixClsRadio,
1833
- className = '',
1834
- options = [],
1835
- children,
1836
- ...props
1837
- }) => {
1838
- const selectedValue = react.useMemo(() => value !== undefined ? value : defaultValue, [value, defaultValue]);
1839
- const renderChildren = () => {
1840
- if (options.length > 0) {
1841
- return options.map((option, key) => {
1842
- const optionValue = typeof option === 'object' ? option.value : option;
1843
- const optionLabel = typeof option === 'object' ? option.label : option;
1844
- return jsxRuntime.jsx(Radio, {
1845
- value: optionValue,
1846
- checked: selectedValue === optionValue,
1847
- disabled: disabled || typeof option === 'object' && option.disabled,
1848
- ...props,
1849
- children: optionLabel
1850
- }, `${key}_${optionValue}`);
1851
- });
1852
- }
1853
- return react.Children.map(children, child => {
1854
- if (/*#__PURE__*/react.isValidElement(child) && (child.type === Radio || child.type === RadioButton)) {
1855
- return /*#__PURE__*/react.cloneElement(child, {
1856
- ...props,
1857
- ...(child.type === RadioButton ? {
1858
- size,
1859
- buttonStyle
1860
- } : {}),
1861
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1862
- // @ts-expect-error
1863
- defaultValue,
1864
- disabled: disabled ?? child.props.disabled,
1865
- checked: selectedValue === child.props.value,
1866
- name: name ?? prefixClsRadio
1867
- });
1868
- }
1869
- return child;
1870
- });
1871
- };
1872
- return jsxRuntime.jsx("div", {
1873
- id: id,
1874
- style: style,
1875
- className: clsx([`${prefixCls}-group`, {
1876
- block,
1877
- className,
1878
- [`${prefixCls}-group-${size}`]: size,
1879
- [`${prefixCls}-group-solid`]: buttonStyle === 'solid'
1880
- }]),
1881
- children: renderChildren()
1882
- });
1883
- };
1884
-
1885
- var css_248z$c = ".xUi-radio-label{align-items:center;cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);line-height:1;margin:16px 0;position:relative}.xUi-radio-label input{display:none}.xUi-radio{border:1px solid var(--xui-border-color);border-radius:50%;height:16px;position:relative;transition:all .3s;width:16px}.xUi-radio-error:not(.xUi-radio-disabled){border:1px solid var(--xui-error-color)}.xUi-radio-label input:checked+.xUi-radio-error:not(.xUi-radio-disabled){background:var(--xui-error-color)}.xUi-radio-group{display:flex}.xUi-radio-label .xUi-radio-enabled:not(.xUi-radio-error):hover{border:1px solid var(--xui-primary-color-light)!important}.xUi-radio-disabled{background-color:var(--xui-color-disabled)}.xUi-radio-title{color:var(--xui-text-color);padding-inline-end:8px;padding-inline-start:8px}.xUi-radio-label input:checked+.xUi-radio{background:var(--xui-primary-color)}.xUi-radio-label input:checked+.xUi-radio:after{background-color:#fff;border-radius:50%;content:\"\";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.xUi-radio-label.disabled{cursor:not-allowed;opacity:.5}";
1886
- styleInject(css_248z$c);
1887
-
1888
- const RadioComponent = /*#__PURE__*/react.forwardRef(({
1889
- prefixCls = prefixClsRadio,
1890
- className = '',
1891
- value,
1892
- onChange,
1893
- onClick,
1894
- disabled,
1895
- children,
1896
- name,
1897
- title,
1898
- defaultChecked,
1899
- checked,
1900
- onBlur,
1901
- onFocus,
1902
- onMouseEnter,
1903
- onMouseLeave,
1904
- noStyle
1905
- }, ref) => {
1906
- const handleChange = () => {
1907
- if (!disabled) {
1908
- onClick?.(parseValue(title ?? value));
1909
- onChange?.(parseValue(title ?? value));
1910
- }
1911
- };
1912
- react.useEffect(() => {
1913
- if (defaultChecked ?? checked) {
1914
- onChange?.(parseValue(value));
1915
- }
1916
- }, [defaultChecked, checked]);
1917
- return jsxRuntime.jsxs("label", {
1918
- ref: ref,
1919
- title: title,
1920
- onMouseEnter: onMouseEnter,
1921
- onMouseLeave: onMouseLeave,
1922
- className: clsx([`${prefixCls}-label`, {
1923
- disabled,
1924
- noStyle: noStyle,
1925
- [className]: className
1926
- }]),
1927
- children: [jsxRuntime.jsx("input", {
1928
- name: name,
1929
- type: "radio",
1930
- onClick: onClick,
1931
- disabled: disabled,
1932
- onChange: handleChange,
1933
- onBlur: e => onBlur?.(e),
1934
- onFocus: e => onFocus?.(e)
1935
- }), jsxRuntime.jsx("span", {
1936
- className: clsx([`${prefixCls} ${prefixCls}-${disabled ? 'disabled' : 'enabled'}`])
1937
- }), jsxRuntime.jsx("span", {
1938
- className: `${prefixCls}-title`,
1939
- children: children ?? title ?? value
1940
- })]
1941
- });
1942
- });
1943
- RadioComponent.displayName = 'Radio';
1944
- const Radio = Object.assign(RadioComponent, {
1945
- Group: RadioGroup,
1946
- Button: RadioButton
1947
- });
1948
-
1949
- var css_248z$b = ".xUi-select-options{list-style:none;margin:0;padding:4px}.xUi-select-option,.xUi-select-options{border-radius:var(--xui-border-radius-sm)}.xUi-select-option{align-items:center;color:var(--xui-text-color);cursor:pointer;display:flex;font-size:var(--xui-font-size-md);padding:8px 16px}.xUi-select-option.xUi-select-focused,.xUi-select-option:hover{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.xUi-select-focused{align-items:center;display:flex;font-weight:600;justify-content:space-between}.xUi-select-option.xUi-select-disabled{color:rgba(0,0,0,.25);cursor:not-allowed}.xUi-select-option.selected{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.selected:hover{background-color:var(--xui-primary-color-light)}";
1950
- styleInject(css_248z$b);
1951
-
1952
- const Option = ({
1953
- value,
1954
- children,
1955
- disabled,
1956
- className = '',
1957
- style,
1958
- onClick,
1959
- render,
1960
- prefixCls = prefixClsSelect,
1961
- selected,
1962
- title
1963
- }) => {
1964
- const handleClick = e => {
1965
- if (disabled) {
1966
- return;
1967
- }
1968
- onClick?.(e);
1969
- };
1970
- return jsxRuntime.jsx("div", {
1971
- className: clsx([`${prefixCls}-option ${className} `, {
1972
- selected: selected,
1973
- disabled: disabled
1974
- }]),
1975
- style: style,
1976
- onClick: handleClick,
1977
- ...(title ? {
1978
- title
1979
- } : {}),
1980
- children: render ? render(value) : children || value
1981
- });
1982
- };
1983
-
1984
- var css_248z$a = ".xUi-select .xUi-select-tag-container{display:flex;flex:auto;flex-wrap:wrap;gap:4px;line-height:12px;position:relative}.xUi-select.large .xUi-select-tag-container,.xUi-select.middle .xUi-select-tag-container{line-height:22px}.xUi-select .xUi-select-tag{align-items:center;align-self:center;background:rgba(0,0,0,.06);border:1px solid transparent;border-radius:var(--xui-border-radius-sm);box-sizing:border-box;cursor:default;display:flex;flex:none;height:100%;max-width:100%;overflow:hidden;padding:2px;text-overflow:ellipsis;transition:font-size .3s,line-height .3s,height .3s;white-space:nowrap}.xUi-select.middle .xUi-select-tag{padding:4px 8px}.xUi-select.large .xUi-select-tag{font-size:var(--xui-font-size-lg);padding:8px}.xUi-select .xUi-select-tag span{font-size:var(--xui-font-size-sm);margin:0 2px}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon{color:rgba(0,0,0,.5);cursor:pointer;font-size:var(--xui-font-size-xs)}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon:hover{color:var(--xui-text-color)}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]){background:transparent;border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);outline:none;padding:0}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]) input{background-color:transparent;border:none;font-size:var(--xui-font-size-md);height:-webkit-fill-available;padding:0}.xUi-select .xUi-select-tag-input:focus{border:none;box-shadow:none;outline:none}";
1985
- styleInject(css_248z$a);
1986
-
1987
- const Tag = ({
1988
- prefixCls = prefixClsSelect,
1989
- style = {},
1990
- onClose,
1991
- value,
1992
- label,
1993
- closable,
1994
- color,
1995
- icon
1996
- }) => {
1997
- const handleOnClick = e => {
1998
- e.preventDefault();
1999
- e.stopPropagation();
2000
- e.target.value = value;
2001
- onClose(e);
2002
- };
2003
- return jsxRuntime.jsxs("div", {
2004
- style: {
2005
- ...style,
2006
- backgroundColor: color
2007
- },
2008
- className: `${prefixCls}-tag`,
2009
- children: [jsxRuntime.jsx("span", {
2010
- children: label !== undefined ? label : value
2011
- }), closable && jsxRuntime.jsx("span", {
2012
- className: `${prefixCls}-tag-close-icon`,
2013
- onClick: handleOnClick,
2014
- children: icon || jsxRuntime.jsx(jsxRuntime.Fragment, {
2015
- children: "\u2715"
2016
- })
2017
- })]
2018
- });
2019
- };
2020
-
2021
- var css_248z$9 = ".xUi-empty{align-items:center;display:grid;gap:4px;justify-content:center;padding:14px}.xUi-empty-description{color:var(--xui-text-color);font-size:var(--xui-font-size-md);text-align:center}";
2022
- styleInject(css_248z$9);
2023
-
2024
- const EmptyContent = ({
2025
- icon,
2026
- style = {},
2027
- className = '',
2028
- title = 'No Data',
2029
- description = 'No data',
2030
- prefixCls = prefixClsEmpty
2031
- }) => jsxRuntime.jsxs("div", {
2032
- style: style,
2033
- className: `${prefixCls} ${prefixCls}-normal ${prefixCls}-small ${className}`,
2034
- children: [jsxRuntime.jsx("div", {
2035
- className: `${prefixCls}-image`,
2036
- children: icon || jsxRuntime.jsxs("svg", {
2037
- width: "64",
2038
- height: "41",
2039
- viewBox: "0 0 64 41",
2040
- xmlns: "http://www.w3.org/2000/svg",
2041
- children: [jsxRuntime.jsx("title", {
2042
- children: title
2043
- }), jsxRuntime.jsxs("g", {
2044
- transform: "translate(0 1)",
2045
- fill: "none",
2046
- children: [jsxRuntime.jsx("ellipse", {
2047
- fill: "#f5f5f5",
2048
- cx: "32",
2049
- cy: "33",
2050
- rx: "32",
2051
- ry: "7"
2052
- }), jsxRuntime.jsxs("g", {
2053
- stroke: "#d9d9d9",
2054
- children: [jsxRuntime.jsx("path", {
2055
- d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
2056
- }), jsxRuntime.jsx("path", {
2057
- d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z",
2058
- fill: "#fafafa"
2059
- })]
2060
- })]
2061
- })]
2062
- })
2063
- }), jsxRuntime.jsx("div", {
2064
- className: `${prefixCls}-description`,
2065
- children: description
2066
- })]
2067
- });
2068
-
2069
- var css_248z$8 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-select{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);box-sizing:border-box;color:var(--xui-text-color);display:inline-flex;flex-direction:row-reverse;margin-bottom:15px;min-height:24px;padding:2px 8px;position:relative;width:100%}.xUi-select-disabled{background:rgba(0,0,0,.04)}.xUi-select-arrow{align-items:center;color:var(--xui-text-color-light);display:flex;gap:6px;margin:0 4px}.xUi-select-arrow svg{align-items:center;display:flex;justify-content:center}.xUi-select-loading{animation:spin 1s linear infinite;color:var(--xui-text-color-light);display:inline-block;margin:0 8px}.xUi-select .xUi-select-trigger{align-items:center;background:transparent;border-radius:var(--xui-border-radius-sm);cursor:pointer;display:flex;justify-content:end;width:100%}.xUi-select .xUi-select-clear-btn{background:none;border:none;color:#999;cursor:pointer;font-size:var(--xui-font-size-lg);line-height:1;margin:0 8px;padding:0}.xUi-select .xUi-select-clear-btn:hover{color:var(--xui-primary-color)}.xUi-select-dropdown{background-color:var(--xui-select-background-color);border-radius:var(--xui-border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:5px;max-height:200px;min-width:max-content;overflow-y:auto;position:absolute;right:unset;top:100%;width:inherit;z-index:10}.xUi-select-dropdown.bottomRight,.xUi-select-dropdown.topRight{left:unset;right:0}.xUi-select .xUi-select-loading-spinner{color:#999;padding:10px;text-align:center}.xUi-select:focus-within{border-color:var(--xui-primary-color-light);box-shadow:none}.xUi-select:hover:not(.xUi-select-disabled){border-color:var(--xui-primary-color)}.xUi-select-disabled,.xUi-select-disabled .xUi-select-input,.xUi-select-disabled .xUi-select-trigger{cursor:not-allowed!important;opacity:.6!important}.xUi-select-selected-icon{color:var(--xui-primary-color-light)}.xUi-select-error{border-color:var(--xui-error-color)}.xUi-select-arrow .error-svg-icon,.xUi-select-error .error-svg-icon{color:var(--xui-error-color)}.xUi-select .xUi-select-input{align-items:center;background:transparent;border:none;color:var(--xui-text-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);height:-webkit-fill-available;outline:none;padding:0;user-select:none;width:100%}.xUi-select .xUi-select-input:focus{border:none;box-shadow:none;outline:none}.xUi-select.middle{border-radius:var(--xui-border-radius-md);min-height:30px}.xUi-select.middle,.xUi-select.middle input{font-size:var(--xui-font-size-md)}.xUi-select.middle .xUi-select-trigger{border-radius:var(--xui-border-radius-md)}.xUi-select.large{font-size:var(--xui-font-size-lg);min-height:40px}.xUi-select.large,.xUi-select.large .xUi-select-trigger{border-radius:var(--xui-border-radius-lg)}.xUi-select input{font-size:var(--xui-font-size-lg)}";
2070
- styleInject(css_248z$8);
2071
-
2072
- const LIST_HEIGHT = 200;
2073
- const PADDING_PLACEMENT = 18;
2074
- const PADDING_TAG_INPUT = 4;
2075
- const SelectComponent = /*#__PURE__*/react.forwardRef(({
2076
- prefixCls = prefixClsSelect,
2077
- id,
2078
- searchValue = '',
2079
- autoClearSearchValue = true,
2080
- filterOption = true,
2081
- optionFilterProp = 'value',
2082
- children,
2083
- options = [],
2084
- listHeight = LIST_HEIGHT,
2085
- menuItemSelectedIcon,
2086
- mode = 'default',
2087
- value,
2088
- defaultValue,
2089
- maxCount,
2090
- disabled = false,
2091
- loading = false,
2092
- placeholder = 'Select',
2093
- allowClear = false,
2094
- filterable = false,
2095
- defaultOpen = false,
2096
- size = 'large',
2097
- error = false,
2098
- dropdownClassName = '',
2099
- suffixIcon,
2100
- style,
2101
- onSearch,
2102
- onSelect,
2103
- onDeselect,
2104
- onClear,
2105
- onChange,
2106
- showSearch = false,
2107
- open = false,
2108
- showArrow = true,
2109
- notFoundContent = false,
2110
- tagRender,
2111
- getPopupContainer,
2112
- dropdownRender,
2113
- noStyle,
2114
- feedbackIcons,
2115
- placement = 'bottomLeft',
2116
- removeIcon
2117
- }, ref) => {
2118
- const asTag = mode === 'tags';
2119
- const asMultiple = mode === 'multiple';
2120
- const hasMode = asTag || asMultiple;
2121
- const initialValue = react.useMemo(() => value || defaultValue || '', [value, defaultValue]);
2122
- const checkModeInitialValue = react.useMemo(() => (!Array.isArray(initialValue) ? [initialValue] : initialValue).filter(e => e), [initialValue]);
2123
- const [isHover, setIsHover] = react.useState(false);
2124
- const selectRef = react.useRef(null);
2125
- const [searchInputWidth, setSearchInputWidth] = react.useState(0);
2126
- const [isOpen, setIsOpen] = react.useState(defaultOpen || open);
2127
- const [searchQuery, setSearchQuery] = react.useState(searchValue || '');
2128
- const [dropdownPosition, setDropdownPosition] = react.useState({});
2129
- const [selected, setSelected] = react.useState(hasMode ? checkModeInitialValue : initialValue);
2130
- react.useImperativeHandle(ref, () => ({
2131
- focus: () => selectRef.current?.focus(),
2132
- blur: () => selectRef.current?.blur(),
2133
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2134
- // @ts-expect-error
2135
- scrollTo: (...args) =>
2136
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2137
- // @ts-expect-error
2138
- selectRef.current?.scrollTo(...args),
2139
- nativeElement: selectRef.current
2140
- }));
2141
- const handleMouseEnter = () => !disabled && selected?.length && setIsHover(true);
2142
- const handleMouseLeave = () => !disabled && setIsHover(false);
2143
- const handleClearInputValue = react.useCallback(() => {
2144
- if (!autoClearSearchValue) {
2145
- return;
2146
- }
2147
- setSearchQuery('');
2148
- const inputContainer = selectRef.current?.querySelector("[content-editable='plaintext-only']");
2149
- if (inputContainer) {
2150
- inputContainer.innerText = '';
2151
- }
2152
- }, [autoClearSearchValue]);
2153
- react.useEffect(() => {
2154
- const handleClickOutside = event => {
2155
- if (selectRef.current && !selectRef.current.contains(event.target)) {
2156
- setIsOpen(open);
2157
- if (hasMode) {
2158
- handleClearInputValue();
2159
- }
2160
- }
2161
- };
2162
- document.addEventListener('mousedown', handleClickOutside);
2163
- return () => {
2164
- document.removeEventListener('mousedown', handleClickOutside);
2165
- };
2166
- }, [handleClearInputValue, open, hasMode]);
2167
- react.useEffect(() => {
2168
- if (!selectRef.current || !getPopupContainer) {
2169
- return;
2170
- }
2171
- const selectBox = selectRef.current.getBoundingClientRect();
2172
- const dropdownHeight = listHeight;
2173
- const windowHeight = window.innerHeight;
2174
- const spaceBelow = windowHeight - selectBox.bottom;
2175
- const spaceAbove = selectBox.top;
2176
- let positionStyle = {
2177
- top: `${selectBox.bottom}px`,
2178
- left: `${selectBox.left}px`,
2179
- width: `${selectBox.width}px`
2180
- };
2181
- if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
2182
- positionStyle = {
2183
- top: `${selectBox.top - dropdownHeight}px`,
2184
- left: `${selectBox.left}px`,
2185
- width: `${selectBox.width}px`
2186
- };
2187
- }
2188
- setDropdownPosition(positionStyle);
2189
- }, [listHeight, getPopupContainer]);
2190
- const handleSearch = e => {
2191
- setSearchQuery(e.target.value);
2192
- onSearch?.(e.target.value);
2193
- if (!isOpen) {
2194
- setIsOpen(!isOpen || open);
2195
- handleClearInputValue();
2196
- }
2197
- };
2198
- const handleEnterAddNewTag = () => {
2199
- if (asMultiple || maxCount && selected.length >= maxCount && !selected.includes(searchQuery)) {
2200
- return;
2201
- }
2202
- const newOptionValue = searchQuery.trim();
2203
- if (!newOptionValue || !hasMode || selected.includes(newOptionValue)) {
2204
- return;
2205
- }
2206
- const updatedSelected = [...selected, newOptionValue];
2207
- onChange?.(updatedSelected);
2208
- onSelect?.(newOptionValue);
2209
- const input = selectRef.current?.querySelector('input');
2210
- if (input) {
2211
- input.value = '';
2212
- }
2213
- setSelected(updatedSelected);
2214
- handleClearInputValue();
2215
- };
2216
- const handleSelect = (e, optionValue, option) => {
2217
- if (hasMode) {
2218
- if (maxCount && selected.length >= maxCount && !selected.includes(optionValue)) {
2219
- return;
2220
- }
2221
- const newSelection = selected.includes(optionValue) ? selected.filter(item => item !== optionValue) : [...selected, optionValue];
2222
- setSelected(newSelection);
2223
- onChange?.(newSelection, option);
2224
- if (selected.includes(optionValue)) {
2225
- onDeselect?.(optionValue, option);
2226
- } else {
2227
- onSelect?.(optionValue, option);
2228
- }
2229
- } else {
2230
- setIsOpen(open);
2231
- setSelected(optionValue);
2232
- onChange?.(optionValue, option);
2233
- onSelect?.(optionValue, option);
2234
- }
2235
- handleClearInputValue();
2236
- };
2237
- const handleClear = () => {
2238
- const value = hasMode ? [] : '';
2239
- setSelected(value);
2240
- onChange?.('');
2241
- onClear?.();
2242
- handleClearInputValue();
2243
- };
2244
- const handleRemoveTag = e => {
2245
- const updatedSelected = hasMode ? selected.filter(item => item !== e.target.value) : e.target.value;
2246
- onChange?.(updatedSelected);
2247
- setSelected(updatedSelected);
2248
- };
2249
- const handleOnKeyDown = e => {
2250
- const timeout = setTimeout(() => {
2251
- e.target.value = e.target.innerText.trim().replace('\n', '');
2252
- setSearchQuery(e.target.value);
2253
- onSearch?.(e.target.value);
2254
- if (e.key === 'Enter' && searchQuery.trim() !== '') {
2255
- if (!asTag) {
2256
- e.stopPropagation();
2257
- e.preventDefault();
2258
- clearTimeout(timeout);
2259
- return;
2260
- }
2261
- handleEnterAddNewTag();
2262
- e.target.innerText = '';
2263
- }
2264
- if (e.key === 'Backspace' && (hasMode ? !searchQuery.trim().length : searchQuery.trim().length)) {
2265
- const updatedSelected = hasMode ? selected.filter(item => item !== selected[selected.length - 1]) : searchQuery.trim();
2266
- onChange?.(updatedSelected);
2267
- setSelected(updatedSelected);
2268
- }
2269
- clearTimeout(timeout);
2270
- });
2271
- };
2272
- const ArrowContainer = react.useMemo(() => {
2273
- if (!showArrow) {
2274
- return null;
2275
- }
2276
- return showSearch && isOpen ? jsxRuntime.jsx(SearchIcon, {}) : jsxRuntime.jsx("span", {
2277
- children: suffixIcon || showArrow && jsxRuntime.jsx(ArrowIcon, {
2278
- isOpen: isOpen
2279
- })
2280
- });
2281
- }, [showArrow, showSearch, isOpen, suffixIcon]);
2282
- const popupContainer = react.useMemo(() => {
2283
- return selectRef.current ? getPopupContainer?.(selectRef.current) : selectRef.current;
2284
- }, [getPopupContainer]);
2285
- const extractedOptions = children ? (Array.isArray(children) ? children : [children]).filter(e => e).map(child => child.props) : options;
2286
- const filteredOptions = extractedOptions.filter(option => {
2287
- if (typeof filterOption === 'function') {
2288
- return filterOption(searchQuery, option);
2289
- }
2290
- if (filterOption === false) {
2291
- return true;
2292
- }
2293
- const valueToCheck = `${['string', 'number'].includes(typeof option.children) ? option.children :
2294
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2295
- // @ts-expect-error
2296
- option[optionFilterProp] || option.value}`;
2297
- return valueToCheck.toLowerCase().includes(searchQuery.toLowerCase());
2298
- });
2299
- const handleTriggerClick = () => {
2300
- if (!disabled) {
2301
- setIsOpen(!isOpen);
2302
- }
2303
- const searchContent = document.getElementsByClassName(`${prefixCls}-tag-container`)?.[0];
2304
- if (searchContent) {
2305
- setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
2306
- }
2307
- const timeout = setTimeout(() => {
2308
- const searchInput = document.getElementById(`${prefixCls}-search-tag-input`);
2309
- if (searchInput) {
2310
- searchInput?.focus();
2311
- }
2312
- clearTimeout(timeout);
2313
- }, 0);
2314
- };
2315
- const dataRender = (() => {
2316
- const options = filteredOptions.map(({
2317
- children,
2318
- className = '',
2319
- ...props
2320
- }) => {
2321
- const isSelected = hasMode ? selected.includes(props.value) : props.value === selected;
2322
- return jsxRuntime.jsxs(Option, {
2323
- ...props,
2324
- selected: isSelected,
2325
- className: clsx([className, {
2326
- [`${prefixCls}-focused`]: hasMode ? isSelected : props.value === selected,
2327
- [`${prefixCls}-disabled`]: maxCount && hasMode && !isSelected ? selected.length >= maxCount : false
2328
- }]),
2329
- onClick: e => {
2330
- if (props.disabled) {
2331
- return;
2332
- }
2333
- handleSelect(e, props.value, {
2334
- children,
2335
- className,
2336
- ...props
2337
- });
2338
- },
2339
- "data-value": props.value,
2340
- children: [children || props.value, hasMode && isSelected && jsxRuntime.jsx("span", {
2341
- className: `${prefixCls}-selected-icon`,
2342
- children: menuItemSelectedIcon === true ? jsxRuntime.jsx(CheckIcon, {}) : menuItemSelectedIcon
2343
- })]
2344
- }, `${props.value}`);
2345
- });
2346
- return dropdownRender ? dropdownRender(options) : options;
2347
- })();
2348
- const dropdownContent = !loading && isOpen && jsxRuntime.jsxs("div", {
2349
- className: clsx([`${prefixCls}-dropdown`, {
2350
- [placement]: placement,
2351
- [dropdownClassName]: dropdownClassName
2352
- }]),
2353
- style: {
2354
- ...dropdownPosition,
2355
- maxHeight: listHeight,
2356
- ...(['topLeft', 'topRight'].includes(placement) ? {
2357
- top: -((selectRef.current?.querySelector(`.${prefixCls}-dropdown`)?.clientHeight || listHeight) + PADDING_PLACEMENT) + (selectRef.current?.clientHeight || 0)
2358
- } : {})
2359
- },
2360
- children: [filterable && jsxRuntime.jsx("input", {
2361
- type: "text",
2362
- className: `${prefixCls}-search`,
2363
- value: searchQuery,
2364
- onChange: handleSearch,
2365
- placeholder: "Search..."
2366
- }), !loading && jsxRuntime.jsxs("div", {
2367
- className: `${prefixCls}-options globalEllipsis`,
2368
- style: {
2369
- maxHeight: listHeight,
2370
- overflowY: 'auto'
2371
- },
2372
- children: [asTag && !!searchQuery && jsxRuntime.jsx(Option, {
2373
- value: searchQuery,
2374
- className: `${prefixCls}-focused`,
2375
- onClick: e => {
2376
- handleSelect(e, searchQuery);
2377
- },
2378
- "data-value": searchQuery,
2379
- children: searchQuery
2380
- }), filteredOptions.length ? dataRender : !asTag ? notFoundContent || jsxRuntime.jsx(EmptyContent, {}) : null]
2381
- })]
2382
- });
2383
- return jsxRuntime.jsxs("div", {
2384
- id: id,
2385
- ref: selectRef,
2386
- style: style,
2387
- className: clsx([{
2388
- [size]: size,
2389
- noStyle: noStyle,
2390
- [prefixCls]: prefixCls,
2391
- [`${prefixCls}-error`]: error,
2392
- [`${prefixCls}-multi`]: hasMode,
2393
- [`${prefixCls}-disabled`]: disabled
2394
- }]),
2395
- children: [jsxRuntime.jsxs("div", {
2396
- onClick: handleTriggerClick,
2397
- onMouseEnter: handleMouseEnter,
2398
- onMouseLeave: handleMouseLeave,
2399
- className: `${prefixCls}-trigger`,
2400
- children: [showSearch ? jsxRuntime.jsxs("div", {
2401
- style: {
2402
- ...style,
2403
- ...(isOpen ? {
2404
- maxWidth: `${searchInputWidth}px`
2405
- } : {}),
2406
- minWidth: `${searchInputWidth}px`
2407
- },
2408
- className: `${prefixCls}-tag-container`,
2409
- children: [hasMode && selected.map((tag, index) => tagRender ? jsxRuntime.jsx("div", {
2410
- children: tagRender?.({
2411
- label: extractedOptions.find(e => e.value === tag)?.children || tag,
2412
- value: tag,
2413
- onClose: handleRemoveTag,
2414
- closable: true
2415
- })
2416
- }, `${index}_${tag}`) : jsxRuntime.jsx(Tag, {
2417
- closable: true,
2418
- value: tag,
2419
- label: tag === '' ? placeholder : extractedOptions.find(e => e.value === tag)?.children || tag,
2420
- onClose: handleRemoveTag
2421
- }, `${index}_${tag}`)), isOpen ? jsxRuntime.jsx("div", {
2422
- className: `${prefixCls}-tag`,
2423
- children: jsxRuntime.jsx("div", {
2424
- onClick: e => {
2425
- if (disabled) {
2426
- e.preventDefault();
2427
- e.stopPropagation();
2428
- return;
2429
- }
2430
- },
2431
- onKeyDown: handleOnKeyDown,
2432
- style: {
2433
- width: 'auto',
2434
- display: 'ruby',
2435
- textAlign: 'center'
2436
- },
2437
- contentEditable: "plaintext-only",
2438
- id: `${prefixCls}-search-tag-input`,
2439
- className: `${prefixCls}-tag-input`
2440
- })
2441
- }) : !hasMode ? jsxRuntime.jsx("div", {
2442
- className: `${prefixCls}-input`,
2443
- style: {
2444
- opacity: isOpen || selected === '' ? '0.6' : '1'
2445
- },
2446
- children: selected === '' ? placeholder : extractedOptions.find(e => e.value === selected)?.children || selected
2447
- }) : null]
2448
- }) : !hasMode ? jsxRuntime.jsx("div", {
2449
- className: `${prefixCls}-input`,
2450
- onClick: () => !disabled && setIsOpen(!isOpen || open),
2451
- style: {
2452
- opacity: isOpen || selected === '' ? '0.6' : '1'
2453
- },
2454
- children: selected === '' ? placeholder : (() => {
2455
- const option = extractedOptions.find(e => e.value === selected);
2456
- return option?.children || option?.value || null;
2457
- })()
2458
- }) : null, isHover && !loading ? allowClear && selected ? jsxRuntime.jsx("button", {
2459
- className: `${prefixCls}-clear-btn`,
2460
- onClick: handleClear,
2461
- children: removeIcon || jsxRuntime.jsx(ClearIcon, {})
2462
- }) : jsxRuntime.jsxs("span", {
2463
- className: `${prefixCls}-arrow`,
2464
- children: [ArrowContainer, error && feedbackIcons ? jsxRuntime.jsx(ErrorIcon, {}) : null]
2465
- }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
2466
- children: [!loading && jsxRuntime.jsxs("span", {
2467
- className: `${prefixCls}-arrow`,
2468
- children: [ArrowContainer, error && feedbackIcons ? jsxRuntime.jsx(ErrorIcon, {}) : null]
2469
- }), loading && jsxRuntime.jsx("span", {
2470
- className: `${prefixCls}-loading`,
2471
- children: jsxRuntime.jsx(LoadingIcon, {})
2472
- })]
2473
- })]
2474
- }), popupContainer ? /*#__PURE__*/reactDom.createPortal(dropdownContent, popupContainer) : dropdownContent]
2475
- });
2476
- });
2477
- SelectComponent.displayName = 'Select';
2478
- const Select = Object.assign(SelectComponent, {
2479
- Option
2480
- });
2481
-
2482
- var css_248z$7 = "@keyframes xUi-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.xUi-skeleton-element{display:inline-block!important;width:auto!important}.xUi-skeleton-button{background:hsla(0,0%,75%,.2);border-radius:4px;display:inline-block;height:32px;line-height:32px;min-width:64px;vertical-align:top;width:64px}.xUi-skeleton-button-sm{height:24px;line-height:24px;min-width:48px;width:48px}.xUi-skeleton-button-lg{height:40px;line-height:40px;min-width:80px;width:80px}.xUi-skeleton-active .xUi-skeleton-button{animation:xUi-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);background-size:400% 100%}";
2483
- styleInject(css_248z$7);
2484
-
2485
- const BUTTON_SKELETON_SIZE = {
2486
- small: `${prefixClsSkeleton}-button-sm`,
2487
- large: `${prefixClsSkeleton}-button-lg`,
2488
- default: ''
2489
- };
2490
- const SkeletonButton = ({
2491
- prefixCls = prefixClsSkeleton,
2492
- style = {},
2493
- active,
2494
- className,
2495
- size = 'default',
2496
- applyElementStyle = true
2497
- }) => {
2498
- return jsxRuntime.jsx("div", {
2499
- className: clsx([`${prefixCls}`, {
2500
- [`${prefixCls}-element`]: applyElementStyle,
2501
- [`${prefixCls}-active`]: active
2502
- }, className]),
2503
- children: jsxRuntime.jsx("span", {
2504
- className: clsx([`${prefixCls}-button `, BUTTON_SKELETON_SIZE[size], className]),
2505
- style: style
2506
- })
2507
- });
2508
- };
2509
-
2510
- var css_248z$6 = "@keyframes xUi-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.xUi-skeleton-avatar{animation:xUi-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);background-size:400% 100%;display:block;height:40px;line-height:40px;width:40px}.xUi-skeleton-avatar-circle{border-radius:50%}.xUi-skeleton-avatar-square{border-radius:4px}";
2511
- styleInject(css_248z$6);
2512
-
2513
- const AVATAR_DEFAULT_SIZE = 32;
2514
- const AVATAR_GLOBAL_SIZE = 40;
2515
- const GET_AVATAR_SKELETON_PROPS = avatar => {
2516
- return typeof avatar !== 'boolean' ? {
2517
- shape: avatar?.shape || 'circle',
2518
- size: avatar?.size || AVATAR_GLOBAL_SIZE,
2519
- style: avatar?.style || {},
2520
- className: avatar?.className || ''
2521
- } : {
2522
- shape: 'circle',
2523
- size: AVATAR_GLOBAL_SIZE
2524
- };
2525
- };
2526
- const SkeletonAvatar = ({
2527
- prefixCls = prefixClsSkeleton,
2528
- className,
2529
- shape = 'circle',
2530
- style,
2531
- wrapperStyle,
2532
- size = AVATAR_DEFAULT_SIZE,
2533
- active,
2534
- applyElementStyle = true,
2535
- ...props
2536
- }) => {
2537
- return jsxRuntime.jsx("div", {
2538
- className: clsx([`${prefixCls}`, {
2539
- [`${prefixCls}-element`]: applyElementStyle,
2540
- [`${prefixCls}-active`]: active
2541
- }, className]),
2542
- style: wrapperStyle,
2543
- ...props,
2544
- children: jsxRuntime.jsx("span", {
2545
- className: clsx([`${prefixCls}-avatar ${prefixCls}-avatar-${shape}`]),
2546
- style: {
2547
- ...(size ? {
2548
- width: size,
2549
- height: size,
2550
- lineHeight: size
2551
- } : {}),
2552
- ...(style || {})
2553
- }
2554
- })
2555
- });
2556
- };
2557
-
2558
- var css_248z$5 = ".xUi-skeleton-image{align-items:center;background:hsla(0,0%,75%,.2);display:flex;height:96px;justify-content:center;line-height:96px;vertical-align:top;width:96px}.xUi-skeleton-image .xUi-skeleton-icon{font-size:inherit!important}.xUi-skeleton-image svg{height:100%;line-height:48px;max-width:192px;width:48px}";
2559
- styleInject(css_248z$5);
2560
-
2561
- const CUSTOm_ICON_SIZE = 48;
2562
- const SkeletonImage = ({
2563
- prefixCls = prefixClsSkeleton,
2564
- className,
2565
- style = {}
2566
- }) => {
2567
- return jsxRuntime.jsx("div", {
2568
- className: `${prefixCls}-image ${className || ''}`,
2569
- style: style,
2570
- children: jsxRuntime.jsx("span", {
2571
- className: `${prefixCls}-icon`,
2572
- style: {
2573
- fontSize: `${style?.width || CUSTOm_ICON_SIZE}px`,
2574
- color: '#bfbfbf',
2575
- position: 'relative',
2576
- width: '100%',
2577
- height: '100%',
2578
- ...(style?.backgroundColor ? {
2579
- backgroundColor: style?.backgroundColor
2580
- } : {})
2581
- },
2582
- children: jsxRuntime.jsx("svg", {
2583
- viewBox: "0 0 1098 1024",
2584
- xmlns: "http://www.w3.org/2000/svg",
2585
- width: "1em",
2586
- height: "1em",
2587
- fill: "currentColor",
2588
- children: jsxRuntime.jsx("path", {
2589
- d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z",
2590
- className: `${prefixCls}-image-path`
2591
- })
2592
- })
2593
- })
2594
- });
2595
- };
2596
-
2597
- var css_248z$4 = "@keyframes xUi-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.xUi-skeleton-element{display:inline-block!important;width:auto!important}.xUi-skeleton-input{background:hsla(0,0%,75%,.2);display:inline-block;height:32px;line-height:32px;min-width:160px;vertical-align:top;width:160px}.xUi-skeleton-input-sm{height:24px;line-height:24px;min-width:120px;width:120px}.xUi-skeleton-input-lg{height:40px;line-height:40px;min-width:200px;width:200px}.xUi-skeleton-active .xUi-skeleton-input{animation:xUi-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);background-size:400% 100%}.xUi-skeleton-block,.xUi-skeleton-block .xUi-skeleton-input{width:100%}";
2598
- styleInject(css_248z$4);
2599
-
2600
- const INPUT_SKELETON_SIZE = {
2601
- small: `${prefixClsSkeleton}-input-sm`,
2602
- large: `${prefixClsSkeleton}-input-lg`,
2603
- default: ''
2604
- };
2605
- const SkeletonInput = ({
2606
- prefixCls = prefixClsSkeleton,
2607
- style,
2608
- block,
2609
- active,
2610
- className,
2611
- size = 'default'
2612
- }) => {
2613
- return jsxRuntime.jsx("div", {
2614
- className: clsx([`${prefixCls}-element`, {
2615
- [`${prefixCls}-active`]: active,
2616
- [`${prefixCls}-block`]: block
2617
- }, className]),
2618
- children: jsxRuntime.jsx("span", {
2619
- className: `${prefixCls}-input ${INPUT_SKELETON_SIZE[size]} ${className || ''}`,
2620
- style: style
2621
- })
2622
- });
2623
- };
2624
-
2625
- var css_248z$3 = "@keyframes xUi-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.xUi-skeleton{display:table;width:100%}.xUi-skeleton__withAvatar{display:flex;gap:12px}.xUi-skeleton-content{width:100%}.xUi-skeleton-content,.xUi-skeleton__header{display:table-cell;vertical-align:top}.xUi-skeleton-title{background:hsla(0,0%,75%,.2);border-radius:4px;height:16px;margin-top:16px;width:38%}.xUi-skeleton-title-avatar{margin-top:12px;width:100%}.xUi-skeleton-title+.xUi-skeleton-paragraph{margin-top:24px}.xUi-skeleton-paragraph{padding:0}.xUi-skeleton-paragraph li{background:hsla(0,0%,75%,.2);border-radius:4px;height:16px;list-style:none;width:100%}.xUi-skeleton-paragraph li+li{margin-top:16px}.xUi-skeleton-paragraph li:last-child:not(:first-child){width:61%}.xUi-skeleton-active .xUi-skeleton-paragraph>li,.xUi-skeleton-active .xUi-skeleton-title{animation:xUi-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);background-size:400% 100%}.xUi-skeleton-round .xUi-skeleton-content,.xUi-skeleton-round .xUi-skeleton-paragraph>li,.xUi-skeleton-round .xUi-skeleton-title{border-radius:100px}";
2626
- styleInject(css_248z$3);
2627
-
2628
- const PARAGRAPH_AVATAR_ROWS = 2;
2629
- const PARAGRAPH_DEFAULT_ROWS = 3;
2630
- const Skeleton = ({
2631
- prefixCls = prefixClsSkeleton,
2632
- active,
2633
- className,
2634
- style,
2635
- avatar,
2636
- paragraph,
2637
- round,
2638
- title,
2639
- teamLogo = true
2640
- }) => {
2641
- const GET_TITLE_SKELETON_PROPS = typeof title !== 'boolean' ? {
2642
- style: {
2643
- width: title?.width,
2644
- ...title?.style
2645
- },
2646
- className: title?.className || ''
2647
- } : {};
2648
- const PARAGRAPH_ROWS = avatar ? PARAGRAPH_AVATAR_ROWS : PARAGRAPH_DEFAULT_ROWS;
2649
- const HAS_PHARAGRAPH = typeof paragraph === 'boolean' || !paragraph ? PARAGRAPH_ROWS : paragraph?.rows ?? PARAGRAPH_ROWS;
2650
- return jsxRuntime.jsxs("div", {
2651
- className: clsx([prefixCls, {
2652
- [`${prefixCls}__withAvatar`]: avatar,
2653
- [`${prefixCls}-active`]: active,
2654
- [`${prefixCls}-round`]: round
2655
- }, className]),
2656
- style: style,
2657
- children: [avatar && teamLogo && jsxRuntime.jsx("div", {
2658
- className: `${prefixCls}__header`,
2659
- children: jsxRuntime.jsx(SkeletonAvatar, {
2660
- ...GET_AVATAR_SKELETON_PROPS(avatar)
2661
- })
2662
- }), jsxRuntime.jsxs("div", {
2663
- className: `${prefixCls}-content`,
2664
- children: [jsxRuntime.jsx("h3", {
2665
- className: clsx([`${prefixCls}-title ${GET_TITLE_SKELETON_PROPS.className}`, {
2666
- [`${prefixCls}-title-avatar`]: avatar
2667
- }]),
2668
- style: GET_TITLE_SKELETON_PROPS.style
2669
- }), paragraph !== false && jsxRuntime.jsx("ul", {
2670
- className: `${prefixCls}-paragraph`,
2671
- style: {
2672
- ...(typeof paragraph !== 'boolean' && paragraph ? paragraph.style : {})
2673
- },
2674
- children: createArray(HAS_PHARAGRAPH).map(key => jsxRuntime.jsx("li", {}, key))
2675
- })]
2676
- })]
2677
- });
2678
- };
2679
- Skeleton.Image = SkeletonImage;
2680
- Skeleton.Input = SkeletonInput;
2681
- Skeleton.Avatar = SkeletonAvatar;
2682
- Skeleton.Button = SkeletonButton;
55
+ const prefixClsButton = 'xUi-button';
2683
56
 
2684
- var css_248z$2 = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
2685
- styleInject(css_248z$2);
57
+ var css_248z = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
58
+ styleInject(css_248z);
2686
59
 
2687
60
  const ButtonBase = ({
2688
61
  type = 'default',
@@ -2775,367 +148,5 @@ const MyButton = props => {
2775
148
  });
2776
149
  };
2777
150
 
2778
- var css_248z$1 = ".xUi-upload-wrapper{font-family:Arial,sans-serif;width:100%}.xUi-upload{align-items:center;border-radius:6px;color:#666;cursor:pointer;display:flex;justify-content:flex-start;text-align:center;transition:all .3s}.xUi-upload:hover{border-color:var(--xui-primary-color,var(--xui-primary-color));color:var(--xui-primary-color,var(--xui-primary-color))}.xUi-upload-disabled{cursor:not-allowed;opacity:.6}.xUi-upload-disabled .xUi-upload-picture button{cursor:not-allowed}.xUi-upload-input{display:none}.xUi-upload-list{list-style:none;margin:0;padding:0}.xUi-upload-list-picture .xUi-upload-item{border:1px dashed var(--xui-border-color);line-height:unset;margin-top:8px;padding:8px}.xUi-upload-list-picture .xUi-upload-item-done{border:1px solid var(--xui-border-color)}.xUi-upload-list-picture .xUi-upload-item-error{border:1px solid var(--xui-error-color)}.xUi-upload-list-picture .xUi-upload-item-error .xUi-upload-item-title{color:var(--xui-error-color)}.xUi-upload-item{align-items:center;border-radius:8px;color:#333;display:flex;font-size:14px;gap:8px;line-height:35px;margin:0;transition:background .3s}.xUi-upload-item.uploading{color:var(--xui-primary-color)}.xUi-upload-item.done{color:var(--xui-success-color)}.xUi-upload-item.error{color:var(--xui-error-color)}.xUi-upload-remove{color:rgba(0,0,0,.45)}.xUi-upload-item-title{align-items:center;color:var(--xui-text-color);display:flex;justify-content:space-between}.xUi-upload-item-title svg{color:var(--xui-error-color)}.xUi-upload-list-picture-card{display:flex;flex-wrap:wrap;gap:8px}.xUi-upload-list-picture-card .xUi-upload-item{align-items:center;border-radius:4px;display:flex;flex-direction:column;height:104px;justify-content:center;position:relative;width:104px}.xUi-upload-list-picture-card .xUi-upload-item img{max-height:100%;max-width:100%;object-fit:cover}.xUi-upload-list-picture-card .xUi-upload-remove{border-radius:50%;color:#fff;font-size:12px;line-height:1;padding:2px 6px;position:absolute;right:4px;top:4px}.xUi-upload-item-thumbnail{border-radius:4px;height:40px;object-fit:cover;width:40px}.xUi-upload-item-progress-line{border:1px solid var(--xui-border-color);height:0;width:calc(100% - 8px)}.xUi-upload-item-progress-line-percent{border:1px solid red;height:0;position:relative;top:-2px}";
2779
- styleInject(css_248z$1);
2780
-
2781
- const IMAGE_SIZE = 40;
2782
- const IMAGE_PROGRESS_PERCENT = 100;
2783
- const Upload = ({
2784
- prefixCls = prefixClsUpload,
2785
- multiple = false,
2786
- style,
2787
- className,
2788
- onChange,
2789
- action,
2790
- name = 'file',
2791
- method = 'POST',
2792
- headers,
2793
- directory,
2794
- beforeUpload,
2795
- rootClassName,
2796
- onRemove,
2797
- disabled,
2798
- withCredentials,
2799
- openFileDialogOnClick = true,
2800
- maxCount,
2801
- fileList: controlledFileList,
2802
- customRequest,
2803
- accept,
2804
- listType = 'text',
2805
- showUploadList = true,
2806
- children,
2807
- noStyle,
2808
- defaultFileList
2809
- }) => {
2810
- const uploadRef = react.useRef(null);
2811
- const [fileList, setFileList] = react.useState(() => (controlledFileList || defaultFileList || []).map((file, idx) => ({
2812
- ...file,
2813
- uid: file.uid || `${Date.now()}-${idx}`,
2814
- status: file.status || 'done',
2815
- percent: file.percent || IMAGE_PROGRESS_PERCENT
2816
- })));
2817
- const updateFileList = newList => {
2818
- setFileList(newList);
2819
- if (onChange) {
2820
- onChange({
2821
- fileList: newList,
2822
- file: newList[0] || {}
2823
- });
2824
- }
2825
- };
2826
- const handleFileChange = async event => {
2827
- const rawFiles = Array.from(event.target.files || []);
2828
- let uploadFiles = rawFiles.map((file, i) => ({
2829
- uid: `${Date.now()}-${i}`,
2830
- name: file.name,
2831
- size: file.size,
2832
- type: file.type,
2833
- status: 'uploading',
2834
- percent: 0,
2835
- originFileObj: file
2836
- }));
2837
- if (beforeUpload) {
2838
- const filtered = [];
2839
- for (let i = 0; i < uploadFiles.length; i++) {
2840
- const file = uploadFiles[i].originFileObj;
2841
- const result = await beforeUpload(file, rawFiles);
2842
- if (result === false) {
2843
- continue;
2844
- }
2845
- filtered.push(uploadFiles[i]);
2846
- }
2847
- uploadFiles = filtered;
2848
- }
2849
- const newList = (multiple ? [...fileList, ...uploadFiles] : uploadFiles).slice(0, maxCount);
2850
- updateFileList(newList);
2851
- uploadFiles.forEach(file => {
2852
- const rcFile = file.originFileObj;
2853
- const updateProgress = percent => {
2854
- file.percent = percent;
2855
- updateFileList([...newList]);
2856
- };
2857
- const markSuccess = () => {
2858
- file.status = 'done';
2859
- file.percent = 100;
2860
- updateFileList([...newList]);
2861
- };
2862
- const markError = () => {
2863
- file.status = 'error';
2864
- updateFileList([...newList]);
2865
- };
2866
- if (customRequest) {
2867
- customRequest({
2868
- file: rcFile,
2869
- onSuccess: markSuccess,
2870
- onError: markError,
2871
- onProgress: event => {
2872
- const percent = Math.round(event.loaded / (event.total || event.loaded) * IMAGE_PROGRESS_PERCENT);
2873
- updateProgress(percent);
2874
- }
2875
- });
2876
- } else if (typeof action === 'string') {
2877
- const formData = new FormData();
2878
- formData.append(name, rcFile);
2879
- fetch(action, {
2880
- method,
2881
- body: formData,
2882
- headers,
2883
- credentials: withCredentials ? 'include' : 'same-origin'
2884
- }).then(res => {
2885
- if (!res.ok) {
2886
- throw new Error('Upload failed');
2887
- }
2888
- return res.json();
2889
- }).then(markSuccess).catch(markError);
2890
- } else if (typeof action === 'function') {
2891
- action(rcFile);
2892
- markSuccess();
2893
- } else {
2894
- markSuccess();
2895
- }
2896
- });
2897
- if (uploadRef.current) {
2898
- uploadRef.current.value = '';
2899
- }
2900
- };
2901
- const handleRemove = uid => {
2902
- const filtered = [];
2903
- let removedFile = undefined;
2904
- fileList.forEach(file => {
2905
- if (file.uid !== uid) {
2906
- filtered.push(file);
2907
- } else {
2908
- removedFile = file;
2909
- }
2910
- });
2911
- updateFileList(filtered);
2912
- if (removedFile) {
2913
- onRemove?.(removedFile);
2914
- }
2915
- };
2916
- const handleClick = () => {
2917
- if (!disabled && openFileDialogOnClick && uploadRef.current) {
2918
- uploadRef.current.click();
2919
- }
2920
- };
2921
- return jsxRuntime.jsxs("div", {
2922
- className: clsx([`${prefixCls}-wrapper`, className, rootClassName, {
2923
- noStyle: noStyle,
2924
- [`${prefixCls}-disabled`]: disabled
2925
- }]),
2926
- style: style,
2927
- children: [jsxRuntime.jsxs("span", {
2928
- className: clsx([`${prefixCls}`, `${prefixCls}-${listType}`]),
2929
- onClick: handleClick,
2930
- children: [children, jsxRuntime.jsx("input", {
2931
- type: "file",
2932
- ref: uploadRef,
2933
- accept: accept,
2934
- multiple: multiple,
2935
- onChange: handleFileChange,
2936
- className: `${prefixCls}-input`,
2937
- disabled: disabled,
2938
- ...(directory ? {
2939
- directory: true,
2940
- webkitdirectory: true
2941
- } : {})
2942
- })]
2943
- }), showUploadList && fileList.length > 0 && jsxRuntime.jsx("ul", {
2944
- className: `${prefixCls}-list ${prefixCls}-list-${listType}`,
2945
- children: fileList.map(file => jsxRuntime.jsxs("li", {
2946
- className: `${prefixCls}-item ${prefixCls}-item-${file.status}`,
2947
- children: [jsxRuntime.jsx("span", {
2948
- className: `${prefixCls}-remove`,
2949
- onClick: () => handleRemove(file.uid),
2950
- children: listType === 'picture' && (file.originFileObj || file.url) ?
2951
- // eslint-disable-next-line @next/next/no-img-element
2952
- jsxRuntime.jsx("img", {
2953
- width: IMAGE_SIZE,
2954
- height: IMAGE_SIZE,
2955
- alt: file.name,
2956
- src: file.url || URL.createObjectURL(file.originFileObj),
2957
- className: `${prefixCls}-item-thumbnail`
2958
- }) : jsxRuntime.jsx(StampleIcon, {})
2959
- }), jsxRuntime.jsxs("div", {
2960
- style: {
2961
- width: '100%'
2962
- },
2963
- children: [jsxRuntime.jsx("div", {
2964
- className: `${prefixCls}-item-title`,
2965
- style: {
2966
- ...(file.status === 'uploading' ? {
2967
- marginBottom: 12
2968
- } : {})
2969
- },
2970
- children: jsxRuntime.jsx("span", {
2971
- className: `${prefixCls}-item-remove-icon`,
2972
- onClick: () => handleRemove(file.uid),
2973
- style: {
2974
- cursor: 'pointer',
2975
- marginLeft: 'auto'
2976
- },
2977
- role: "button",
2978
- "aria-label": "Remove file",
2979
- children: jsxRuntime.jsx(TrashIcon, {})
2980
- })
2981
- }), file.status === 'uploading' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
2982
- children: [jsxRuntime.jsx("div", {
2983
- className: `${prefixCls}-item-progress-line`
2984
- }), jsxRuntime.jsx("div", {
2985
- className: `${prefixCls}-item-progress-line-percent`,
2986
- style: {
2987
- width: `${file.percent}%`
2988
- }
2989
- })]
2990
- })]
2991
- })]
2992
- }, file.uid))
2993
- })]
2994
- });
2995
- };
2996
-
2997
- var css_248z = ".xUi-checkbox-wrapper{align-items:center;color:var(--xui-main-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);margin:16px 0}.xUi-checkbox{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:inline-block;height:14px;position:relative;transition:all .3s;width:14px}.xUi-checkbox.xUi-checkbox-checked{background-color:#f0f5ff;border-color:var(--xui-primary-color)}.xUi-checkbox input{cursor:pointer;inset:0;opacity:0;position:absolute}.xUi-checkbox-inner{border-left:0;border-top:0;border:2px solid var(--xui-background-color);height:6px;left:50%;position:absolute;top:50%;transform:rotate(45deg) scale(0);transition:transform .2s ease-in-out;width:10px}.xUi-checkbox-check{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);display:block;height:100%;position:relative;transition:.1s ease;width:100%}.xUi-checkbox-check:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:8px;left:3px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.xUi-checkbox-disabled,.xUi-checkbox-disabled .xUi-checkbox-check{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-checkbox-label{font-size:14px;margin-left:8px;user-select:none}.xUi-checkbox:focus:not(.disabled),.xUi-checkbox:hover:not(.disabled){border-color:var(--xui-primary-color);cursor:pointer}.xUi-checkbox.disabled{cursor:not-allowed;opacity:.5}";
2998
- styleInject(css_248z);
2999
-
3000
- const Checkbox = /*#__PURE__*/react.forwardRef(({
3001
- prefixCls = prefixClsCheckbox,
3002
- className = '',
3003
- defaultChecked = false,
3004
- checked,
3005
- style,
3006
- disabled = false,
3007
- onChange,
3008
- onClick,
3009
- onMouseEnter,
3010
- onMouseLeave,
3011
- onKeyPress,
3012
- onKeyDown,
3013
- tabIndex,
3014
- name,
3015
- children,
3016
- id,
3017
- autoFocus,
3018
- type = 'checkbox',
3019
- value = false,
3020
- required = false,
3021
- noStyle
3022
- }, ref) => {
3023
- const isChecked = checked !== undefined ? checked : defaultChecked || value;
3024
- const [internalChecked, setInternalChecked] = react.useState(isChecked);
3025
- const handleClick = e => {
3026
- e.stopPropagation();
3027
- if (disabled) {
3028
- return;
3029
- }
3030
- setInternalChecked(!internalChecked);
3031
- e.target.value = !internalChecked;
3032
- onClick?.(e);
3033
- onChange?.(e);
3034
- };
3035
- react.useEffect(() => {
3036
- if (checked !== undefined) {
3037
- setInternalChecked(checked);
3038
- }
3039
- }, [checked]);
3040
- return jsxRuntime.jsxs("div", {
3041
- className: `${prefixCls}-wrapper`,
3042
- children: [jsxRuntime.jsxs("div", {
3043
- ref: ref,
3044
- style: style,
3045
- onClick: handleClick,
3046
- className: clsx([prefixCls, className, {
3047
- noStyle: noStyle,
3048
- [`${prefixCls}-disabled`]: disabled,
3049
- [`${prefixCls}-checked`]: internalChecked
3050
- }]),
3051
- children: [jsxRuntime.jsx("input", {
3052
- id: id,
3053
- type: type,
3054
- name: name,
3055
- disabled: disabled,
3056
- tabIndex: tabIndex,
3057
- required: required,
3058
- autoFocus: autoFocus,
3059
- onKeyDown: onKeyDown,
3060
- onKeyPress: onKeyPress,
3061
- onMouseEnter: onMouseEnter,
3062
- onMouseLeave: onMouseLeave
3063
- }), jsxRuntime.jsx("span", {
3064
- className: `${prefixCls}-box`,
3065
- children: jsxRuntime.jsx("span", {
3066
- className: `${prefixCls}-check`,
3067
- style: {
3068
- opacity: Number(internalChecked)
3069
- }
3070
- })
3071
- })]
3072
- }), children && jsxRuntime.jsx("span", {
3073
- className: `${prefixCls}-label`,
3074
- children: children
3075
- })]
3076
- });
3077
- });
3078
- Checkbox.displayName = 'Checkbox';
3079
-
3080
- const useWatch = ({
3081
- name,
3082
- defaultValue,
3083
- form
3084
- }) => {
3085
- const formContext = react.useContext(FormContext);
3086
- const formInstance = form || formContext;
3087
- if (!formInstance) {
3088
- throw new Error('useWatch must be used within a Form or with a form instance.');
3089
- }
3090
- const [value, setValue] = react.useState(() => {
3091
- return name ? formInstance.getFieldValue(name) ?? defaultValue : formInstance.getFieldsValue() ?? defaultValue;
3092
- });
3093
- react.useEffect(() => {
3094
- if (!name) {
3095
- const unsubscribe = formInstance.subscribeToForm(setValue);
3096
- return () => unsubscribe();
3097
- }
3098
- const unsubscribe = formInstance.subscribeToField(name, setValue);
3099
- return () => unsubscribe();
3100
- }, [name, formInstance]);
3101
- return value;
3102
- };
3103
-
3104
- exports.ArrowIcon = ArrowIcon;
3105
151
  exports.Button = MyButton;
3106
- exports.CalendarIcon = CalendarIcon;
3107
- exports.CheckIcon = CheckIcon;
3108
- exports.Checkbox = Checkbox;
3109
- exports.ClearIcon = ClearIcon;
3110
- exports.DateDistanceIcon = DateDistanceIcon;
3111
- exports.DatePicker = DatePicker;
3112
- exports.Empty = EmptyContent;
3113
- exports.ErrorIcon = ErrorIcon;
3114
- exports.Form = Form;
3115
- exports.FormItem = FormItem;
3116
- exports.Input = Input;
3117
- exports.LoadingIcon = LoadingIcon;
3118
- exports.Option = Option;
3119
- exports.Radio = Radio;
3120
- exports.RadioButton = RadioButton;
3121
- exports.RadioGroup = RadioGroup;
3122
- exports.RangePicker = RangePicker;
3123
- exports.SearchIcon = SearchIcon;
3124
- exports.Select = Select;
3125
- exports.Skeleton = Skeleton;
3126
- exports.SkeletonAvatar = SkeletonAvatar;
3127
- exports.SkeletonButton = SkeletonButton;
3128
- exports.SkeletonImage = SkeletonImage;
3129
- exports.SkeletonInput = SkeletonInput;
3130
- exports.SpinerIcon = SpinerIcon;
3131
- exports.StampleIcon = StampleIcon;
3132
- exports.SuccessIcon = SuccessIcon;
3133
- exports.Tag = Tag;
3134
- exports.Textarea = Textarea;
3135
- exports.TimeIcon = TimeIcon;
3136
- exports.TimePicker = TimePicker;
3137
- exports.TrashIcon = TrashIcon;
3138
- exports.Upload = Upload;
3139
- exports.useForm = useForm;
3140
- exports.useWatch = useWatch;
3141
152
  //# sourceMappingURL=index.js.map