@laser-ui/components 2.5.0 → 2.6.1

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 (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/date-picker/DatePicker.js +176 -168
  3. package/dropdown/Dropdown.js +1 -5
  4. package/hooks/useNestedPopup.d.ts +3 -4
  5. package/hooks/useNestedPopup.js +7 -12
  6. package/image/Image.js +14 -20
  7. package/input/InputNumber.js +52 -38
  8. package/menu/Menu.js +1 -2
  9. package/package.json +2 -2
  10. package/spinner/Spinner.js +8 -10
  11. package/time-picker/TimePicker.js +173 -149
  12. package/transition/Transition.js +7 -9
package/time-picker/TimePicker.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useAsync, useEventCallback, useForceUpdate, useImmer, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
3
+ import { useAsync, useEventCallback, useImmer, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
4
4
  import { setRef } from '@laser-ui/utils';
5
5
  import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
6
6
  import AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
7
7
  import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
8
- import { isNull, isUndefined } from 'lodash';
9
- import { useEffect, useImperativeHandle, useRef } from 'react';
8
+ import { isArray, isNull, isUndefined } from 'lodash';
9
+ import { useImperativeHandle, useRef } from 'react';
10
10
  import { TimePickerPanel } from './internal/TimePickerPanel';
11
11
  import { deepCompareDate, orderTime } from './utils';
12
12
  import { CLASSES } from './vars';
@@ -21,85 +21,132 @@ import { Transition } from '../transition';
21
21
  import { getVerticalSidePosition, mergeCS } from '../utils';
22
22
  import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
23
23
  export function TimePicker(props) {
24
- var _a, _b;
25
- const _c = useComponentProps('TimePicker', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, escClosable = true, inputProps, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["ref", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "config", "escClosable", "inputProps", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
24
+ var _a;
25
+ const _b = useComponentProps('TimePicker', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, escClosable = true, inputProps, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _b, restProps = __rest(_b, ["ref", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "config", "escClosable", "inputProps", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
26
26
  const namespace = useNamespace();
27
27
  const styled = useStyled(CLASSES, { 'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'], 'time-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker-popup'] }, styleOverrides);
28
28
  const { t } = useTranslation();
29
- const forceUpdate = useForceUpdate();
30
29
  const async = useAsync();
31
30
  const { contentResizeRef } = useLayout();
32
31
  const boxRef = useRef(null);
33
32
  const popupRef = useRef(null);
34
- const inputLeftRef = useRef(null);
35
- const inputRightRef = useRef(null);
33
+ const inputStartRef = useRef(null);
34
+ const inputEndRef = useRef(null);
36
35
  const indicatorRef = useRef(null);
37
36
  const panelRef = useRef(null);
38
- const dataRef = useRef({
39
- latestFocused: 'start',
40
- onceVisible: false,
41
- focusAnother: false,
42
- inputValue: [undefined, undefined],
43
- rangeDate: [null, null],
44
- });
45
- const order = (date) => orderTime(date, orderProp);
37
+ const updatePanel = (date) => {
38
+ var _a;
39
+ if (visible) {
40
+ (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
41
+ }
42
+ };
43
+ const dataRef = useRef({ focusWithoutUser: false });
46
44
  const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
47
45
  const [focused, setFocused] = useImmer([false, false]);
48
- if (focused[0]) {
49
- dataRef.current.latestFocused = 'start';
50
- }
51
- if (focused[1]) {
52
- dataRef.current.latestFocused = 'end';
53
- }
54
- const [_value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
55
- let [valueLeft, valueRight = null] = range ? ((_a = _value) !== null && _a !== void 0 ? _a : [null, null]) : [_value, null];
56
- if (range) {
57
- if (isNull(_value)) {
58
- [valueLeft, valueRight] = dataRef.current.rangeDate;
46
+ const [value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
47
+ const [placeholderValues, setPlaceholderValues] = useImmer(() => {
48
+ let values = ['', ''];
49
+ if (value) {
50
+ if (range) {
51
+ values = value.map((v) => dayjs(v).format(format));
52
+ }
53
+ else {
54
+ values[0] = dayjs(value).format(format);
55
+ }
56
+ }
57
+ return values;
58
+ });
59
+ const newPlaceholderValues = (() => {
60
+ if (focused.some((f) => f)) {
61
+ return;
62
+ }
63
+ if (isNull(value)) {
64
+ if (placeholderValues.some((p) => p)) {
65
+ return ['', ''];
66
+ }
59
67
  }
60
68
  else {
61
- dataRef.current.rangeDate = [null, null];
69
+ if (isArray(value)) {
70
+ const currentPlaceholder = value.map((v) => dayjs(v).format(format));
71
+ if (currentPlaceholder.some((p, i) => p !== placeholderValues[i])) {
72
+ return currentPlaceholder;
73
+ }
74
+ }
75
+ else {
76
+ const currentPlaceholder = dayjs(value).format(format);
77
+ if (currentPlaceholder !== placeholderValues[0]) {
78
+ return [currentPlaceholder, ''];
79
+ }
80
+ }
62
81
  }
82
+ })();
83
+ if (!isUndefined(newPlaceholderValues)) {
84
+ setPlaceholderValues(newPlaceholderValues);
63
85
  }
64
- const inputValue = [0, 1].map((index) => focused[index] && !isUndefined(dataRef.current.inputValue[index])
65
- ? dataRef.current.inputValue[index]
66
- : (() => {
67
- const value = index === 0 ? valueLeft : valueRight;
68
- return isNull(value) ? '' : dayjs(value).format(format);
69
- })());
86
+ const placeholderDates = placeholderValues.map((v) => (v && dayjs(v, format, true).isValid() ? dayjs(v, format).toDate() : null));
70
87
  const changeValue = (date) => {
71
- const index = focused.findIndex((f) => f);
72
- if (range) {
73
- if (isNull(_value)) {
74
- dataRef.current.rangeDate[index] = date;
75
- if (dataRef.current.rangeDate.every((v) => !isNull(v))) {
76
- dataRef.current.focusAnother = order(dataRef.current.rangeDate);
77
- if (dataRef.current.focusAnother) {
78
- dataRef.current.rangeDate.reverse();
88
+ if (isNull(date)) {
89
+ _changeValue(null);
90
+ setPlaceholderValues(['', '']);
91
+ }
92
+ else {
93
+ if (range) {
94
+ let newValue = [...placeholderDates];
95
+ if (isArray(date)) {
96
+ newValue = date;
97
+ }
98
+ else {
99
+ newValue[focused[0] ? 0 : 1] = date;
100
+ }
101
+ if (newValue.every((v) => !isNull(v))) {
102
+ const reverse = orderTime(newValue, orderProp);
103
+ if (reverse) {
104
+ newValue.reverse();
105
+ const inputEl = focused[0] ? inputEndRef.current : inputStartRef.current;
106
+ if (inputEl) {
107
+ dataRef.current.focusWithoutUser = true;
108
+ inputEl.focus({ preventScroll: true });
109
+ }
79
110
  }
80
- dataRef.current.inputValue = [undefined, undefined];
81
- _changeValue(dataRef.current.rangeDate);
111
+ _changeValue(newValue);
82
112
  }
113
+ setPlaceholderValues(newValue.map((v) => (v ? dayjs(v).format(format) : '')));
83
114
  }
84
115
  else {
85
- dataRef.current.inputValue = [undefined, undefined];
86
- _changeValue((draft) => {
87
- draft[index] = date;
88
- dataRef.current.focusAnother = order(draft);
89
- if (dataRef.current.focusAnother) {
90
- draft.reverse();
91
- }
92
- });
116
+ _changeValue(date);
117
+ setPlaceholderValues([dayjs(date).format(format), '']);
93
118
  }
94
119
  }
120
+ };
121
+ const handleEnter = (date) => {
122
+ if (isArray(date)) {
123
+ updatePanel(date[focused[0] ? 0 : 1]);
124
+ changeVisible(false);
125
+ dataRef.current.lastVisible = focused[0] ? 'start' : 'end';
126
+ }
95
127
  else {
96
- dataRef.current.inputValue = [undefined, undefined];
97
- _changeValue(date);
128
+ updatePanel(date);
129
+ if (range) {
130
+ if (placeholderDates[focused[0] ? 1 : 0]) {
131
+ changeVisible(false);
132
+ dataRef.current.lastVisible = focused[0] ? 'start' : 'end';
133
+ }
134
+ else {
135
+ const inputEl = focused[0] ? inputEndRef.current : inputStartRef.current;
136
+ if (inputEl) {
137
+ dataRef.current.focusWithoutUser = true;
138
+ inputEl.focus({ preventScroll: true });
139
+ }
140
+ }
141
+ }
142
+ else {
143
+ changeVisible(false);
144
+ dataRef.current.lastVisible = 'start';
145
+ }
98
146
  }
99
- forceUpdate();
100
147
  };
101
148
  const [placeholderLeft = t('TimePicker', range ? 'Start time' : 'Select time'), placeholderRight = t('TimePicker', 'End time')] = range
102
- ? ((_b = placeholder) !== null && _b !== void 0 ? _b : [])
149
+ ? ((_a = placeholder) !== null && _a !== void 0 ? _a : [])
103
150
  : [placeholder];
104
151
  const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
105
152
  const zIndexValue = useZIndex(visible);
@@ -119,6 +166,24 @@ export function TimePicker(props) {
119
166
  popupRef.current.style.maxWidth = maxWidth + 'px';
120
167
  }
121
168
  });
169
+ const updatePanelWhenEnter = useEventCallback(() => {
170
+ const update = () => {
171
+ const date = placeholderDates[focused[0] ? 0 : 1];
172
+ if (date) {
173
+ updatePanel(date);
174
+ }
175
+ };
176
+ if (range) {
177
+ if ((focused[0] ? 'start' : 'end') !== dataRef.current.lastVisible) {
178
+ update();
179
+ }
180
+ }
181
+ else {
182
+ if (dataRef.current.lastVisible !== 'start') {
183
+ update();
184
+ }
185
+ }
186
+ });
122
187
  useContainerScrolling(boxRef, updatePosition, !visible);
123
188
  useResize(boxRef, updatePosition, undefined, !visible);
124
189
  useResize(popupRef, updatePosition, undefined, !visible);
@@ -130,13 +195,13 @@ export function TimePicker(props) {
130
195
  if (boxRef.current && indicatorRef.current) {
131
196
  let focus = false;
132
197
  const boxRect = boxRef.current.getBoundingClientRect();
133
- if (inputLeftRef.current && document.activeElement === inputLeftRef.current) {
134
- const rect = inputLeftRef.current.getBoundingClientRect();
198
+ if (inputStartRef.current && document.activeElement === inputStartRef.current) {
199
+ const rect = inputStartRef.current.getBoundingClientRect();
135
200
  indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
136
201
  focus = true;
137
202
  }
138
- if (inputRightRef.current && document.activeElement === inputRightRef.current) {
139
- const rect = inputRightRef.current.getBoundingClientRect();
203
+ if (inputEndRef.current && document.activeElement === inputEndRef.current) {
204
+ const rect = inputEndRef.current.getBoundingClientRect();
140
205
  indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
141
206
  focus = true;
142
207
  }
@@ -145,44 +210,11 @@ export function TimePicker(props) {
145
210
  }
146
211
  }
147
212
  });
148
- useEffect(() => {
149
- if (dataRef.current.focusAnother && document.activeElement) {
150
- const el = document.activeElement.parentElement;
151
- for (let index = 0; index < el.childElementCount; index++) {
152
- const element = el.children.item(index);
153
- if (element.tagName.toLowerCase() === 'input' && element !== document.activeElement) {
154
- element.focus({ preventScroll: true });
155
- break;
156
- }
157
- }
158
- }
159
- dataRef.current.focusAnother = false;
160
- });
161
- const handleEnter = (time) => {
162
- var _a;
163
- if (range) {
164
- const index = focused.findIndex((f) => f);
165
- if (isNull(index === 0 ? valueRight : valueLeft)) {
166
- dataRef.current.focusAnother = true;
167
- forceUpdate();
168
- }
169
- else {
170
- changeVisible(false);
171
- }
172
- }
173
- else {
174
- changeVisible(false);
175
- }
176
- if (!dataRef.current.focusAnother) {
177
- (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, time);
178
- }
179
- };
180
- const clearable = clearableProp && !isNull(_value) && !visible && !disabled;
181
- const inputNode = (isLeft) => {
213
+ const clearable = clearableProp && !disabled && !visible && placeholderValues.some((p) => p);
214
+ const inputNode = (isStart) => {
182
215
  var _a, _b;
183
- const index = isLeft ? 0 : 1;
184
- const value = isLeft ? valueLeft : valueRight;
185
- const inputRef = isLeft ? inputLeftRef : inputRightRef;
216
+ const index = isStart ? 0 : 1;
217
+ const inputRef = isStart ? inputStartRef : inputEndRef;
186
218
  return (_jsx(BaseInput, Object.assign({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps[index], mergeCS(styled('time-picker__input'), {
187
219
  className: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.className,
188
220
  style: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _b === void 0 ? void 0 : _b.style,
@@ -194,14 +226,29 @@ export function TimePicker(props) {
194
226
  inputRef.current = null;
195
227
  ret();
196
228
  };
197
- }, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
198
- var _a;
199
- forceUpdate();
200
- dataRef.current.inputValue[index] = val;
201
- if (dayjs(val, format, true).isValid()) {
202
- const date = dayjs(val, format).toDate();
203
- changeValue(date);
204
- (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
229
+ }, type: "text", autoComplete: "off", value: placeholderValues[index], size: 10, placeholder: isStart ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
230
+ const values = [...placeholderValues];
231
+ values[index] = val;
232
+ setPlaceholderValues(values);
233
+ if (range) {
234
+ if (values.every((v) => !v)) {
235
+ _changeValue(null);
236
+ }
237
+ else if (values.every((v) => v && dayjs(v, format, true).isValid())) {
238
+ const dates = values.map((v) => dayjs(v, format).toDate());
239
+ _changeValue(dates);
240
+ updatePanel(dates[index]);
241
+ }
242
+ }
243
+ else {
244
+ if (!values[index]) {
245
+ _changeValue(null);
246
+ }
247
+ else if (values[index] && dayjs(values[index], format, true).isValid()) {
248
+ const date = dayjs(values[index], format).toDate();
249
+ _changeValue(date);
250
+ updatePanel(date);
251
+ }
205
252
  }
206
253
  }, onKeyDown: (e) => {
207
254
  var _a, _b;
@@ -211,38 +258,41 @@ export function TimePicker(props) {
211
258
  e.stopPropagation();
212
259
  e.preventDefault();
213
260
  changeVisible(false);
261
+ dataRef.current.lastVisible = isStart ? 'start' : 'end';
214
262
  }
215
263
  }
216
- else if (e.code === 'Enter' && inputValue[index] && dayjs(inputValue[index], format, true).isValid()) {
217
- e.preventDefault();
218
- const time = dayjs(inputValue[index], format).toDate();
219
- handleEnter(time);
264
+ else if (e.code === 'Enter') {
265
+ if (placeholderDates[index]) {
266
+ e.preventDefault();
267
+ handleEnter(placeholderDates[index]);
268
+ }
220
269
  }
221
270
  }, onFocus: (e) => {
222
- var _a, _b, _c, _d, _e;
271
+ var _a, _b, _c, _d;
223
272
  (_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
224
273
  (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
225
274
  setFocused((draft) => {
226
275
  draft.fill(false);
227
- draft[isLeft ? 0 : 1] = true;
276
+ draft[index] = true;
228
277
  });
229
- dataRef.current.inputValue = [undefined, undefined];
230
- if (visible && range && value) {
231
- (_e = panelRef.current) === null || _e === void 0 ? void 0 : _e.call(panelRef, value);
278
+ if (range && !dataRef.current.focusWithoutUser && placeholderDates[index]) {
279
+ updatePanel(placeholderDates[index]);
232
280
  }
281
+ dataRef.current.focusWithoutUser = false;
233
282
  }, onBlur: (e) => {
234
283
  var _a, _b;
235
284
  (_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
236
285
  dataRef.current.clearTid = async.setTimeout(() => {
237
286
  setFocused([false, false]);
238
287
  changeVisible(false);
288
+ dataRef.current.lastVisible = isStart ? 'start' : 'end';
239
289
  }, 20);
240
290
  } })));
241
291
  };
242
292
  const preventBlur = (e) => {
243
- if ((document.activeElement === inputLeftRef.current || document.activeElement === inputRightRef.current) &&
244
- e.target !== inputLeftRef.current &&
245
- e.target !== inputRightRef.current &&
293
+ if ((document.activeElement === inputStartRef.current || document.activeElement === inputEndRef.current) &&
294
+ e.target !== inputStartRef.current &&
295
+ e.target !== inputEndRef.current &&
246
296
  e.button === 0) {
247
297
  e.preventDefault();
248
298
  }
@@ -270,7 +320,8 @@ export function TimePicker(props) {
270
320
  var _a, _b;
271
321
  (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
272
322
  if (!focused.some((f) => f)) {
273
- (_b = inputLeftRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
323
+ dataRef.current.focusWithoutUser = true;
324
+ (_b = inputStartRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
274
325
  }
275
326
  changeVisible(true);
276
327
  }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('time-picker__indicator'), { ref: (instance) => {
@@ -280,8 +331,7 @@ export function TimePicker(props) {
280
331
  };
281
332
  } })), _jsx("div", Object.assign({}, styled('time-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('time-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
282
333
  e.stopPropagation();
283
- dataRef.current.inputValue = [undefined, undefined];
284
- _changeValue(null);
334
+ changeValue(null);
285
335
  onClear === null || onClear === void 0 ? void 0 : onClear();
286
336
  }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('time-picker__icon'), {
287
337
  style: { visibility: clearable ? 'hidden' : undefined },
@@ -295,36 +345,10 @@ export function TimePicker(props) {
295
345
  return el;
296
346
  }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: () => {
297
347
  updatePosition();
298
- const cb = () => {
299
- var _a;
300
- const value = focused[0] ? valueLeft : valueRight;
301
- if (value) {
302
- (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, value);
303
- }
304
- };
305
- if (range) {
306
- cb();
307
- }
308
- else if (!dataRef.current.onceVisible) {
309
- dataRef.current.onceVisible = true;
310
- cb();
311
- }
348
+ updatePanelWhenEnter();
312
349
  }, onBeforeEnter: () => {
313
350
  updatePosition();
314
- const cb = () => {
315
- var _a;
316
- const value = focused[0] ? valueLeft : valueRight;
317
- if (value) {
318
- (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, value);
319
- }
320
- };
321
- if (range) {
322
- cb();
323
- }
324
- else if (!dataRef.current.onceVisible) {
325
- dataRef.current.onceVisible = true;
326
- cb();
327
- }
351
+ updatePanelWhenEnter();
328
352
  }, onAfterEnter: () => {
329
353
  afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
330
354
  }, onAfterLeave: () => {
@@ -347,7 +371,7 @@ export function TimePicker(props) {
347
371
  return () => {
348
372
  panelRef.current = null;
349
373
  };
350
- }, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, onTimeChange: (time) => {
374
+ }, styled: styled, time: placeholderDates[focused[0] ? 0 : 1], format: format, config: config ? (...args) => config(...args, focused[0] ? 'start' : 'end', placeholderDates) : undefined, onTimeChange: (time) => {
351
375
  changeValue(time);
352
376
  } }), _jsx("div", Object.assign({}, styled('time-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
353
377
  const now = new Date();
package/transition/Transition.js CHANGED
@@ -1,20 +1,19 @@
1
- import { useAsync, useForceUpdate, useIsomorphicLayoutEffect, useUnmount } from '@laser-ui/hooks';
1
+ import { useAsync, useIsomorphicLayoutEffect, useUnmount } from '@laser-ui/hooks';
2
2
  import { isNumber, isUndefined } from 'lodash';
3
- import { useRef } from 'react';
3
+ import { useRef, useState } from 'react';
4
4
  import { flushSync } from 'react-dom';
5
5
  const CLASSES = ['enter-from', 'enter-active', 'enter-to', 'leave-from', 'leave-active', 'leave-to'];
6
6
  export function Transition(props) {
7
7
  const { children, enter, name, duration, skipFirstTransition = true, onSkipEnter, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onSkipLeave, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, } = props;
8
- const forceUpdate = useForceUpdate();
9
8
  const async = useAsync();
10
9
  const el = useRef(null);
11
10
  const entering = useRef(false);
12
11
  const leaving = useRef(false);
13
12
  const skipTransition = useRef(skipFirstTransition);
14
13
  const prevEnter = useRef(enter);
15
- const leaved = useRef(skipFirstTransition ? !enter : false);
16
- if (enter) {
17
- leaved.current = false;
14
+ const [leaved, setLeaved] = useState(() => (skipFirstTransition ? !enter : false));
15
+ if (enter && leaved) {
16
+ setLeaved(false);
18
17
  }
19
18
  const resetClasses = useRef(() => { });
20
19
  const clearTransitionEnd = useRef(() => { });
@@ -99,9 +98,8 @@ export function Transition(props) {
99
98
  clearTransitionEnd.current();
100
99
  removeClasses(['leave-active', 'leave-to']);
101
100
  onAfterLeave === null || onAfterLeave === void 0 ? void 0 : onAfterLeave(el.current);
102
- leaved.current = true;
103
101
  flushSync(() => {
104
- forceUpdate();
102
+ setLeaved(true);
105
103
  });
106
104
  };
107
105
  if (isUndefined(duration)) {
@@ -144,5 +142,5 @@ export function Transition(props) {
144
142
  });
145
143
  return children((instance) => {
146
144
  el.current = instance;
147
- }, leaved.current);
145
+ }, leaved);
148
146
  }