@tecsinapse/cortex-react 1.13.0-beta.5 → 1.13.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/DatePicker/DatePickerInput.js +2 -1
- package/dist/cjs/components/DatePicker/DateRangePickerInput.js +2 -1
- package/dist/cjs/components/ScrollableDigitSelector.js +57 -0
- package/dist/cjs/components/TimePicker/TimeField.js +48 -0
- package/dist/cjs/components/TimePicker/TimeFieldInput.js +82 -0
- package/dist/cjs/components/TimePicker/TimePickerInput.js +78 -0
- package/dist/cjs/components/TimePicker/TimePickerSelector.js +118 -0
- package/dist/cjs/hooks/useTimePickerInput.js +45 -0
- package/dist/cjs/index.js +8 -2
- package/dist/cjs/styles/time-field-input.js +18 -0
- package/dist/cjs/utils/date.js +0 -5
- package/dist/esm/components/DatePicker/DatePickerInput.js +2 -1
- package/dist/esm/components/DatePicker/DateRangePickerInput.js +2 -1
- package/dist/esm/components/ScrollableDigitSelector.js +55 -0
- package/dist/esm/components/TimePicker/TimeField.js +46 -0
- package/dist/esm/components/TimePicker/TimeFieldInput.js +80 -0
- package/dist/esm/components/TimePicker/TimePickerInput.js +76 -0
- package/dist/esm/components/TimePicker/TimePickerSelector.js +116 -0
- package/dist/esm/hooks/useTimePickerInput.js +43 -0
- package/dist/esm/index.js +5 -2
- package/dist/esm/styles/time-field-input.js +16 -0
- package/dist/esm/utils/date.js +2 -6
- package/dist/types/components/ScrollableDigitSelector.d.ts +10 -0
- package/dist/types/components/{TimeField → TimePicker}/TimeField.d.ts +2 -1
- package/dist/types/components/TimePicker/TimeFieldInput.d.ts +14 -0
- package/dist/types/components/TimePicker/TimePickerInput.d.ts +15 -0
- package/dist/types/components/TimePicker/TimePickerSelector.d.ts +14 -0
- package/dist/types/components/TimePicker/index.d.ts +4 -0
- package/dist/types/components/index.d.ts +1 -1
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useTimePickerInput.d.ts +14 -0
- package/dist/types/styles/time-field-input.d.ts +25 -0
- package/package.json +2 -2
- package/dist/cjs/components/TimeField/TimeField.js +0 -24
- package/dist/cjs/components/TimeField/TimeFieldInput.js +0 -42
- package/dist/esm/components/TimeField/TimeField.js +0 -22
- package/dist/esm/components/TimeField/TimeFieldInput.js +0 -40
- package/dist/types/components/TimeField/TimeFieldInput.d.ts +0 -11
- package/dist/types/components/TimeField/index.d.ts +0 -2
- /package/dist/cjs/components/{DatePicker/Content.js → Content.js} +0 -0
- /package/dist/esm/components/{DatePicker/Content.js → Content.js} +0 -0
- /package/dist/types/components/{DatePicker/Content.d.ts → Content.d.ts} +0 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
3
|
+
import { Input } from '../Input/index.js';
|
|
4
|
+
import { LiaClock } from 'react-icons/lia';
|
|
5
|
+
import { timePickerInputBase } from '../../styles/time-field-input.js';
|
|
6
|
+
import { IoMdClose } from 'react-icons/io';
|
|
7
|
+
import { TimeField } from './TimeField.js';
|
|
8
|
+
|
|
9
|
+
const { icon } = timePickerInputBase();
|
|
10
|
+
const TimeFieldInput = ({
|
|
11
|
+
variants,
|
|
12
|
+
label,
|
|
13
|
+
disabled = false,
|
|
14
|
+
value,
|
|
15
|
+
onChange,
|
|
16
|
+
onToggle,
|
|
17
|
+
onClean,
|
|
18
|
+
hourCycle,
|
|
19
|
+
granularity
|
|
20
|
+
}) => {
|
|
21
|
+
const showCloseIcon = useMemo(() => {
|
|
22
|
+
const hasTime = value != void 0;
|
|
23
|
+
return hasTime;
|
|
24
|
+
}, [value]);
|
|
25
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
26
|
+
Input.Face,
|
|
27
|
+
{
|
|
28
|
+
variants,
|
|
29
|
+
className: "flex flex-row justify-between",
|
|
30
|
+
"data-testid": "time-field-input"
|
|
31
|
+
},
|
|
32
|
+
/* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label),
|
|
33
|
+
/* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React__default.createElement(
|
|
34
|
+
TimeField,
|
|
35
|
+
{
|
|
36
|
+
onClickTime: onToggle,
|
|
37
|
+
disabled,
|
|
38
|
+
value,
|
|
39
|
+
onChange,
|
|
40
|
+
hourCycle,
|
|
41
|
+
granularity
|
|
42
|
+
}
|
|
43
|
+
)),
|
|
44
|
+
/* @__PURE__ */ React__default.createElement(Input.Right, { className: "h-full justify-center" }, showCloseIcon ? /* @__PURE__ */ React__default.createElement(
|
|
45
|
+
"button",
|
|
46
|
+
{
|
|
47
|
+
className: "flex bg-transparent items-center",
|
|
48
|
+
onClick: onClean,
|
|
49
|
+
disabled,
|
|
50
|
+
"data-testid": "time-picker-input-base-clean-button",
|
|
51
|
+
type: "button"
|
|
52
|
+
},
|
|
53
|
+
/* @__PURE__ */ React__default.createElement(
|
|
54
|
+
IoMdClose,
|
|
55
|
+
{
|
|
56
|
+
className: icon({ disabled }),
|
|
57
|
+
"data-testid": "time-picker-input-base-clean-icon"
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
) : /* @__PURE__ */ React__default.createElement(
|
|
61
|
+
"button",
|
|
62
|
+
{
|
|
63
|
+
className: "flex bg-transparent items-center",
|
|
64
|
+
onClick: onToggle,
|
|
65
|
+
disabled,
|
|
66
|
+
"data-testid": "time-picker-input-base-calendar-button",
|
|
67
|
+
type: "button"
|
|
68
|
+
},
|
|
69
|
+
/* @__PURE__ */ React__default.createElement(
|
|
70
|
+
LiaClock,
|
|
71
|
+
{
|
|
72
|
+
className: icon({ disabled }),
|
|
73
|
+
"data-testid": "time-picker-input-base-calendar-icon"
|
|
74
|
+
}
|
|
75
|
+
)
|
|
76
|
+
))
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export { TimeFieldInput };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import '@internationalized/date';
|
|
3
|
+
import 'react-aria';
|
|
4
|
+
import 'react-stately';
|
|
5
|
+
import '../Popover/Context.js';
|
|
6
|
+
import 'react-dropzone';
|
|
7
|
+
import 'uuid';
|
|
8
|
+
import '@floating-ui/react';
|
|
9
|
+
import 'currency.js';
|
|
10
|
+
import { useTimePickerInput } from '../../hooks/useTimePickerInput.js';
|
|
11
|
+
import { Popover } from '../Popover/index.js';
|
|
12
|
+
import { Content } from '../Content.js';
|
|
13
|
+
import { TimeFieldInput } from './TimeFieldInput.js';
|
|
14
|
+
import { TimePickerSelector } from './TimePickerSelector.js';
|
|
15
|
+
|
|
16
|
+
const TimePickerInputWithPopover = (props) => {
|
|
17
|
+
const {
|
|
18
|
+
onChange,
|
|
19
|
+
value,
|
|
20
|
+
label,
|
|
21
|
+
variants,
|
|
22
|
+
hourCycle = 24,
|
|
23
|
+
disabled = false,
|
|
24
|
+
granularity = "minute",
|
|
25
|
+
minuteInterval = 1,
|
|
26
|
+
hourLabel,
|
|
27
|
+
minuteLabel,
|
|
28
|
+
dayPeriodLabel
|
|
29
|
+
} = props;
|
|
30
|
+
const {
|
|
31
|
+
handleTogglePopover,
|
|
32
|
+
handleTimeFieldChange,
|
|
33
|
+
handleChangeTimeOnSelector,
|
|
34
|
+
popoverTime
|
|
35
|
+
} = useTimePickerInput({
|
|
36
|
+
value,
|
|
37
|
+
onChange,
|
|
38
|
+
minuteInterval
|
|
39
|
+
});
|
|
40
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
|
|
41
|
+
TimeFieldInput,
|
|
42
|
+
{
|
|
43
|
+
variants,
|
|
44
|
+
label,
|
|
45
|
+
disabled,
|
|
46
|
+
value,
|
|
47
|
+
onChange: handleTimeFieldChange,
|
|
48
|
+
onClean: () => handleTimeFieldChange(null),
|
|
49
|
+
onToggle: handleTogglePopover,
|
|
50
|
+
hourCycle,
|
|
51
|
+
granularity
|
|
52
|
+
}
|
|
53
|
+
)), /* @__PURE__ */ React__default.createElement(
|
|
54
|
+
Popover.Content,
|
|
55
|
+
{
|
|
56
|
+
className: "bg-white shadow-none border-none p-deca flex flex-col",
|
|
57
|
+
initialFocus: -1
|
|
58
|
+
},
|
|
59
|
+
/* @__PURE__ */ React__default.createElement(
|
|
60
|
+
TimePickerSelector,
|
|
61
|
+
{
|
|
62
|
+
onChangeTime: handleChangeTimeOnSelector,
|
|
63
|
+
value: popoverTime,
|
|
64
|
+
hourCycle,
|
|
65
|
+
minuteInterval,
|
|
66
|
+
onPressOkButton: handleTogglePopover,
|
|
67
|
+
hourLabel,
|
|
68
|
+
minuteLabel,
|
|
69
|
+
dayPeriodLabel
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
));
|
|
73
|
+
};
|
|
74
|
+
const TimePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(TimePickerInputWithPopover, { ...props })));
|
|
75
|
+
|
|
76
|
+
export { TimePickerInput };
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { Time } from '@internationalized/date';
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
3
|
+
import { ScrollableDigitSelector } from '../ScrollableDigitSelector.js';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { Button } from '../Button.js';
|
|
6
|
+
import { MdClose } from 'react-icons/md';
|
|
7
|
+
|
|
8
|
+
const dayPeriodStyle = "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer";
|
|
9
|
+
const TimePickerSelector = ({
|
|
10
|
+
value,
|
|
11
|
+
hourCycle,
|
|
12
|
+
minuteInterval,
|
|
13
|
+
onPressOkButton,
|
|
14
|
+
onChangeTime,
|
|
15
|
+
hourLabel = "Hour",
|
|
16
|
+
minuteLabel = "Minute",
|
|
17
|
+
dayPeriodLabel = "Day Period"
|
|
18
|
+
}) => {
|
|
19
|
+
const handleHourChange = (hour) => {
|
|
20
|
+
let newHour = hour;
|
|
21
|
+
if (hourCycle === 12) {
|
|
22
|
+
if (isPM && newHour < 12) {
|
|
23
|
+
newHour += 12;
|
|
24
|
+
} else if (!isPM && newHour >= 12) {
|
|
25
|
+
newHour -= 12;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const newTime = new Time(newHour, value.minute, value.second);
|
|
29
|
+
onChangeTime(newTime);
|
|
30
|
+
};
|
|
31
|
+
const handleMinuteChange = (minute) => {
|
|
32
|
+
const newTime = new Time(value.hour, minute, value.second);
|
|
33
|
+
onChangeTime(newTime);
|
|
34
|
+
};
|
|
35
|
+
const handlePeriodChange = (isPM2) => {
|
|
36
|
+
if (value === void 0) return;
|
|
37
|
+
let newHour = value.hour;
|
|
38
|
+
if (hourCycle === 12) {
|
|
39
|
+
if (isPM2 && newHour < 12) {
|
|
40
|
+
newHour += 12;
|
|
41
|
+
} else if (!isPM2 && newHour >= 12) {
|
|
42
|
+
newHour -= 12;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
const newTime = new Time(newHour, value.minute, value.second);
|
|
46
|
+
onChangeTime(newTime);
|
|
47
|
+
};
|
|
48
|
+
const isPM = value && value?.hour >= 12;
|
|
49
|
+
const displayHour = useMemo(() => {
|
|
50
|
+
if (value === void 0) return 0;
|
|
51
|
+
return hourCycle === 12 ? value.hour === 0 ? 12 : value.hour > 12 ? value.hour - 12 : value.hour : value.hour;
|
|
52
|
+
}, [value, hourCycle]);
|
|
53
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React__default.createElement(
|
|
54
|
+
Button,
|
|
55
|
+
{
|
|
56
|
+
className: "p-micro",
|
|
57
|
+
variants: {
|
|
58
|
+
size: "circle",
|
|
59
|
+
variant: "outline"
|
|
60
|
+
},
|
|
61
|
+
onClick: onPressOkButton
|
|
62
|
+
},
|
|
63
|
+
/* @__PURE__ */ React__default.createElement(MdClose, null)
|
|
64
|
+
)), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-deca max-h-[300px] overflow-hidden" }, /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, hourLabel), /* @__PURE__ */ React__default.createElement(
|
|
65
|
+
ScrollableDigitSelector,
|
|
66
|
+
{
|
|
67
|
+
value: displayHour,
|
|
68
|
+
onChange: handleHourChange,
|
|
69
|
+
min: hourCycle === 12 ? 1 : 0,
|
|
70
|
+
max: hourCycle === 12 ? 12 : 23
|
|
71
|
+
}
|
|
72
|
+
)), /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, minuteLabel), /* @__PURE__ */ React__default.createElement(
|
|
73
|
+
ScrollableDigitSelector,
|
|
74
|
+
{
|
|
75
|
+
value: value?.minute ?? 0,
|
|
76
|
+
onChange: handleMinuteChange,
|
|
77
|
+
min: 0,
|
|
78
|
+
max: 59,
|
|
79
|
+
step: minuteInterval
|
|
80
|
+
}
|
|
81
|
+
)), hourCycle === 12 && /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, dayPeriodLabel), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-y-micro p-micro overflow-auto" }, /* @__PURE__ */ React__default.createElement(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
onClick: () => handlePeriodChange(false),
|
|
85
|
+
className: "flex justify-center"
|
|
86
|
+
},
|
|
87
|
+
/* @__PURE__ */ React__default.createElement(
|
|
88
|
+
"span",
|
|
89
|
+
{
|
|
90
|
+
className: clsx(
|
|
91
|
+
dayPeriodStyle,
|
|
92
|
+
!isPM && "bg-primary-medium text-white"
|
|
93
|
+
)
|
|
94
|
+
},
|
|
95
|
+
"AM"
|
|
96
|
+
)
|
|
97
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
onClick: () => handlePeriodChange(true),
|
|
101
|
+
className: "flex justify-center"
|
|
102
|
+
},
|
|
103
|
+
/* @__PURE__ */ React__default.createElement(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
className: clsx(
|
|
107
|
+
dayPeriodStyle,
|
|
108
|
+
isPM && "bg-primary-medium text-white"
|
|
109
|
+
)
|
|
110
|
+
},
|
|
111
|
+
"PM"
|
|
112
|
+
)
|
|
113
|
+
)))));
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
export { TimePickerSelector };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
import { usePopoverContext } from '../components/Popover/Context.js';
|
|
3
|
+
import { Time } from '@internationalized/date';
|
|
4
|
+
|
|
5
|
+
const useTimePickerInput = ({
|
|
6
|
+
value,
|
|
7
|
+
onChange,
|
|
8
|
+
minuteInterval
|
|
9
|
+
}) => {
|
|
10
|
+
const { setIsOpen } = usePopoverContext();
|
|
11
|
+
const [popoverTime, setPopoverTime] = useState(value ?? new Time(0, 0));
|
|
12
|
+
const handleTimeFieldChange = (newValue) => {
|
|
13
|
+
if (newValue && minuteInterval > 1) {
|
|
14
|
+
const time = newValue;
|
|
15
|
+
const adjustedMinute = Math.round(time.minute / minuteInterval) * minuteInterval % 60;
|
|
16
|
+
const adjustedTime = time.set({ minute: adjustedMinute });
|
|
17
|
+
onChange?.(adjustedTime);
|
|
18
|
+
setPopoverTime(adjustedTime);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const newTime = newValue ? new Time(newValue.hour, newValue.minute, newValue.second) : void 0;
|
|
22
|
+
onChange?.(newTime);
|
|
23
|
+
setPopoverTime(newTime ?? new Time(0, 0));
|
|
24
|
+
};
|
|
25
|
+
const handleTogglePopover = useCallback(() => {
|
|
26
|
+
setIsOpen((open) => !open);
|
|
27
|
+
}, []);
|
|
28
|
+
const handleChangeTimeOnSelector = useCallback(
|
|
29
|
+
(time) => {
|
|
30
|
+
setPopoverTime(time);
|
|
31
|
+
handleTimeFieldChange(time);
|
|
32
|
+
},
|
|
33
|
+
[handleTimeFieldChange]
|
|
34
|
+
);
|
|
35
|
+
return {
|
|
36
|
+
handleTogglePopover,
|
|
37
|
+
handleTimeFieldChange,
|
|
38
|
+
handleChangeTimeOnSelector,
|
|
39
|
+
popoverTime
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export { useTimePickerInput };
|
package/dist/esm/index.js
CHANGED
|
@@ -35,8 +35,10 @@ export { Stepper } from './components/Stepper/index.js';
|
|
|
35
35
|
export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
|
|
36
36
|
export { Tag } from './components/Tag.js';
|
|
37
37
|
export { TextArea } from './components/TextArea/index.js';
|
|
38
|
-
export { TimeField } from './components/
|
|
39
|
-
export {
|
|
38
|
+
export { TimeField } from './components/TimePicker/TimeField.js';
|
|
39
|
+
export { TimePickerInput } from './components/TimePicker/TimePickerInput.js';
|
|
40
|
+
export { TimePickerSelector } from './components/TimePicker/TimePickerSelector.js';
|
|
41
|
+
export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
|
|
40
42
|
export { Toggle } from './components/Toggle.js';
|
|
41
43
|
export { Tooltip } from './components/Tooltip.js';
|
|
42
44
|
export { Uploader } from './components/Uploader/index.js';
|
|
@@ -56,6 +58,7 @@ export { useRangeCalendar } from './hooks/useRangeCalendar.js';
|
|
|
56
58
|
export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
|
|
57
59
|
export { useSelectOptions } from './hooks/useSelectOptions.js';
|
|
58
60
|
export { applyStringMask, getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
|
|
61
|
+
export { useTimePickerInput } from './hooks/useTimePickerInput.js';
|
|
59
62
|
export { SnackbarSonner } from './service/SnackbarSonner.js';
|
|
60
63
|
export { MenubarProvider } from './provider/MenubarProvider.js';
|
|
61
64
|
export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
const timePickerInputBase = tv({
|
|
4
|
+
slots: {
|
|
5
|
+
icon: "cursor-pointer text-deca"
|
|
6
|
+
},
|
|
7
|
+
variants: {
|
|
8
|
+
disabled: {
|
|
9
|
+
true: {
|
|
10
|
+
icon: "text-secondary-light cursor-default"
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export { timePickerInputBase };
|
package/dist/esm/utils/date.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CalendarDateTime, getLocalTimeZone
|
|
1
|
+
import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
|
|
2
2
|
|
|
3
3
|
const dateToCalendarDateTime = (value) => {
|
|
4
4
|
return new CalendarDateTime(
|
|
@@ -14,9 +14,5 @@ const calendarDateToDate = (value) => {
|
|
|
14
14
|
if (!value) return void 0;
|
|
15
15
|
return value.toDate(getLocalTimeZone());
|
|
16
16
|
};
|
|
17
|
-
const timeFromTimeValue = (value) => {
|
|
18
|
-
if (!value) return void 0;
|
|
19
|
-
return new Time(value.hour, value.minute, value.second, value.millisecond);
|
|
20
|
-
};
|
|
21
17
|
|
|
22
|
-
export { calendarDateToDate, dateToCalendarDateTime
|
|
18
|
+
export { calendarDateToDate, dateToCalendarDateTime };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ScrollableDigitSelectorProps {
|
|
3
|
+
value: number;
|
|
4
|
+
onChange: (value: number) => void;
|
|
5
|
+
min: number;
|
|
6
|
+
max: number;
|
|
7
|
+
step?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare const ScrollableDigitSelector: ({ value, onChange, min, max, step, }: ScrollableDigitSelectorProps) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -2,5 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { AriaTimeFieldProps, TimeValue } from 'react-aria';
|
|
3
3
|
export interface TimeFieldProps extends AriaTimeFieldProps<TimeValue> {
|
|
4
4
|
disabled?: boolean;
|
|
5
|
+
onClickTime?: () => void;
|
|
5
6
|
}
|
|
6
|
-
export declare const TimeField: ({
|
|
7
|
+
export declare const TimeField: ({ onClickTime, ...props }: TimeFieldProps) => React.JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { InputProps } from '../Input';
|
|
3
|
+
import { TimeValue } from 'react-aria';
|
|
4
|
+
interface TimePickerInputBaseProps extends Omit<InputProps, 'value' | 'onChange'> {
|
|
5
|
+
value?: TimeValue;
|
|
6
|
+
onChange: (value: TimeValue | null) => void;
|
|
7
|
+
onClean?: () => void;
|
|
8
|
+
onToggle?: () => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
hourCycle?: 12 | 24;
|
|
11
|
+
granularity?: 'hour' | 'minute' | 'second';
|
|
12
|
+
}
|
|
13
|
+
export declare const TimeFieldInput: ({ variants, label, disabled, value, onChange, onToggle, onClean, hourCycle, granularity, }: TimePickerInputBaseProps) => React.JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Time } from '@internationalized/date';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { InputProps } from '../Input';
|
|
4
|
+
export interface TimePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
|
|
5
|
+
value?: Time;
|
|
6
|
+
onChange: (value?: Time) => void;
|
|
7
|
+
hourCycle?: 12 | 24;
|
|
8
|
+
granularity?: 'hour' | 'minute' | 'second';
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
minuteInterval?: number;
|
|
11
|
+
hourLabel?: string;
|
|
12
|
+
minuteLabel?: string;
|
|
13
|
+
dayPeriodLabel?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare const TimePickerInput: (props: TimePickerInputProps) => React.JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Time } from '@internationalized/date';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface TimePickerSelectorProps {
|
|
4
|
+
value: Time;
|
|
5
|
+
hourCycle: 12 | 24;
|
|
6
|
+
minuteInterval: number;
|
|
7
|
+
onPressOkButton: () => void;
|
|
8
|
+
onChangeTime: (time: Time) => void;
|
|
9
|
+
hourLabel?: string;
|
|
10
|
+
minuteLabel?: string;
|
|
11
|
+
dayPeriodLabel?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const TimePickerSelector: ({ value, hourCycle, minuteInterval, onPressOkButton, onChangeTime, hourLabel, minuteLabel, dayPeriodLabel, }: TimePickerSelectorProps) => React.JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -28,7 +28,7 @@ export * from './Stepper';
|
|
|
28
28
|
export * from './Table';
|
|
29
29
|
export * from './Tag';
|
|
30
30
|
export * from './TextArea';
|
|
31
|
-
export * from './
|
|
31
|
+
export * from './TimePicker';
|
|
32
32
|
export * from './Toggle';
|
|
33
33
|
export * from './Tooltip';
|
|
34
34
|
export * from './Uploader';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Time } from '@internationalized/date';
|
|
2
|
+
import { TimeValue } from 'react-aria';
|
|
3
|
+
interface useTimePickerInputProps {
|
|
4
|
+
value?: Time;
|
|
5
|
+
onChange?: (value?: Time) => void;
|
|
6
|
+
minuteInterval: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const useTimePickerInput: ({ value, onChange, minuteInterval, }: useTimePickerInputProps) => {
|
|
9
|
+
handleTogglePopover: () => void;
|
|
10
|
+
handleTimeFieldChange: (newValue: TimeValue | null) => void;
|
|
11
|
+
handleChangeTimeOnSelector: (time: Time) => void;
|
|
12
|
+
popoverTime: Time;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export declare const timePickerInputBase: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
disabled: {
|
|
3
|
+
true: {
|
|
4
|
+
icon: string;
|
|
5
|
+
};
|
|
6
|
+
};
|
|
7
|
+
}, {
|
|
8
|
+
icon: string;
|
|
9
|
+
}, undefined, {
|
|
10
|
+
disabled: {
|
|
11
|
+
true: {
|
|
12
|
+
icon: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
}, {
|
|
16
|
+
icon: string;
|
|
17
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
18
|
+
disabled: {
|
|
19
|
+
true: {
|
|
20
|
+
icon: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
}, {
|
|
24
|
+
icon: string;
|
|
25
|
+
}, undefined, unknown, unknown, undefined>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.1-beta.0",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"react-icons": ">=5.2.0",
|
|
48
48
|
"tailwind": ">=3.3.0"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "e12748793a11f711d948001e01958219ef5a9d80"
|
|
51
51
|
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var reactAria = require('react-aria');
|
|
5
|
-
var reactStately = require('react-stately');
|
|
6
|
-
var DateSegment = require('../DatePicker/DateSegment.js');
|
|
7
|
-
|
|
8
|
-
const TimeField = ({ disabled, ...props }) => {
|
|
9
|
-
const { locale } = reactAria.useLocale();
|
|
10
|
-
const state = reactStately.useTimeFieldState({
|
|
11
|
-
...props,
|
|
12
|
-
locale,
|
|
13
|
-
isDisabled: disabled
|
|
14
|
-
});
|
|
15
|
-
const ref = React.useRef(null);
|
|
16
|
-
const { fieldProps } = reactAria.useTimeField(
|
|
17
|
-
{ "aria-label": "time-field" },
|
|
18
|
-
state,
|
|
19
|
-
ref
|
|
20
|
-
);
|
|
21
|
-
return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
exports.TimeField = TimeField;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var cortexCore = require('@tecsinapse/cortex-core');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var date = require('../../utils/date.js');
|
|
6
|
-
var index = require('../Input/index.js');
|
|
7
|
-
var TimeField = require('./TimeField.js');
|
|
8
|
-
|
|
9
|
-
const TimeFieldInput = (props) => {
|
|
10
|
-
const {
|
|
11
|
-
onChange,
|
|
12
|
-
value,
|
|
13
|
-
label,
|
|
14
|
-
variants,
|
|
15
|
-
hourCycle = 24,
|
|
16
|
-
granularity = "minute",
|
|
17
|
-
disabled = false
|
|
18
|
-
} = props;
|
|
19
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
20
|
-
index.Input.Face,
|
|
21
|
-
{
|
|
22
|
-
variants,
|
|
23
|
-
className: "flex flex-row",
|
|
24
|
-
"data-testid": "time-field-input"
|
|
25
|
-
},
|
|
26
|
-
/* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label),
|
|
27
|
-
/* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(
|
|
28
|
-
TimeField.TimeField,
|
|
29
|
-
{
|
|
30
|
-
onChange: (value2) => {
|
|
31
|
-
onChange(date.timeFromTimeValue(value2));
|
|
32
|
-
},
|
|
33
|
-
value,
|
|
34
|
-
hourCycle,
|
|
35
|
-
granularity,
|
|
36
|
-
isDisabled: disabled
|
|
37
|
-
}
|
|
38
|
-
))
|
|
39
|
-
));
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
exports.TimeFieldInput = TimeFieldInput;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { useLocale, useTimeField } from 'react-aria';
|
|
3
|
-
import { useTimeFieldState } from 'react-stately';
|
|
4
|
-
import { DateSegment } from '../DatePicker/DateSegment.js';
|
|
5
|
-
|
|
6
|
-
const TimeField = ({ disabled, ...props }) => {
|
|
7
|
-
const { locale } = useLocale();
|
|
8
|
-
const state = useTimeFieldState({
|
|
9
|
-
...props,
|
|
10
|
-
locale,
|
|
11
|
-
isDisabled: disabled
|
|
12
|
-
});
|
|
13
|
-
const ref = React__default.useRef(null);
|
|
14
|
-
const { fieldProps } = useTimeField(
|
|
15
|
-
{ "aria-label": "time-field" },
|
|
16
|
-
state,
|
|
17
|
-
ref
|
|
18
|
-
);
|
|
19
|
-
return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state })));
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export { TimeField };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
|
|
2
|
-
import React__default from 'react';
|
|
3
|
-
import { timeFromTimeValue } from '../../utils/date.js';
|
|
4
|
-
import { Input } from '../Input/index.js';
|
|
5
|
-
import { TimeField } from './TimeField.js';
|
|
6
|
-
|
|
7
|
-
const TimeFieldInput = (props) => {
|
|
8
|
-
const {
|
|
9
|
-
onChange,
|
|
10
|
-
value,
|
|
11
|
-
label,
|
|
12
|
-
variants,
|
|
13
|
-
hourCycle = 24,
|
|
14
|
-
granularity = "minute",
|
|
15
|
-
disabled = false
|
|
16
|
-
} = props;
|
|
17
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
|
|
18
|
-
Input.Face,
|
|
19
|
-
{
|
|
20
|
-
variants,
|
|
21
|
-
className: "flex flex-row",
|
|
22
|
-
"data-testid": "time-field-input"
|
|
23
|
-
},
|
|
24
|
-
/* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label),
|
|
25
|
-
/* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React__default.createElement(
|
|
26
|
-
TimeField,
|
|
27
|
-
{
|
|
28
|
-
onChange: (value2) => {
|
|
29
|
-
onChange(timeFromTimeValue(value2));
|
|
30
|
-
},
|
|
31
|
-
value,
|
|
32
|
-
hourCycle,
|
|
33
|
-
granularity,
|
|
34
|
-
isDisabled: disabled
|
|
35
|
-
}
|
|
36
|
-
))
|
|
37
|
-
));
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export { TimeFieldInput };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Time } from '@internationalized/date';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { InputPropsBase } from '../Input';
|
|
4
|
-
export interface TimeFieldInputProps extends InputPropsBase {
|
|
5
|
-
value?: Time;
|
|
6
|
-
onChange: (value?: Time) => void;
|
|
7
|
-
hourCycle?: 12 | 24;
|
|
8
|
-
granularity?: 'hour' | 'minute' | 'second';
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export declare const TimeFieldInput: (props: TimeFieldInputProps) => React.JSX.Element;
|