@wandelbots/wandelbots-js-react-components 2.40.0-pr.feature-seperate-timer.383.0494cf4 → 2.41.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/components/CycleTimer/DefaultVariant.d.ts.map +1 -1
- package/dist/components/CycleTimer/SmallVariant.d.ts.map +1 -1
- package/dist/components/CycleTimer/index.d.ts +5 -4
- package/dist/components/CycleTimer/index.d.ts.map +1 -1
- package/dist/components/CycleTimer/types.d.ts +3 -2
- package/dist/components/CycleTimer/types.d.ts.map +1 -1
- package/dist/components/CycleTimer/useTimerLogic.d.ts +2 -1
- package/dist/components/CycleTimer/useTimerLogic.d.ts.map +1 -1
- package/dist/components/TabBar.d.ts +2 -0
- package/dist/components/TabBar.d.ts.map +1 -1
- package/dist/index.cjs +47 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4840 -5249
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CycleTimer/DefaultVariant.tsx +2 -0
- package/src/components/CycleTimer/SmallVariant.tsx +5 -2
- package/src/components/CycleTimer/index.tsx +5 -4
- package/src/components/CycleTimer/types.ts +3 -1
- package/src/components/CycleTimer/useTimerLogic.ts +96 -40
- package/src/components/CycleTimer/utils.ts +3 -3
- package/src/components/TabBar.tsx +35 -8
- package/src/i18n/locales/de/translations.json +0 -1
- package/src/i18n/locales/en/translations.json +0 -1
- package/src/index.ts +0 -1
- package/dist/components/Timer/Timer.d.ts +0 -3
- package/dist/components/Timer/Timer.d.ts.map +0 -1
- package/dist/components/Timer/TimerDefaultVariant.d.ts +0 -10
- package/dist/components/Timer/TimerDefaultVariant.d.ts.map +0 -1
- package/dist/components/Timer/TimerSmallVariant.d.ts +0 -11
- package/dist/components/Timer/TimerSmallVariant.d.ts.map +0 -1
- package/dist/components/Timer/index.d.ts +0 -19
- package/dist/components/Timer/index.d.ts.map +0 -1
- package/dist/components/Timer/types.d.ts +0 -36
- package/dist/components/Timer/types.d.ts.map +0 -1
- package/dist/components/Timer/useTimerAnimations.d.ts +0 -11
- package/dist/components/Timer/useTimerAnimations.d.ts.map +0 -1
- package/dist/components/Timer/useTimerLogic.d.ts +0 -20
- package/dist/components/Timer/useTimerLogic.d.ts.map +0 -1
- package/dist/components/Timer/utils.d.ts +0 -9
- package/dist/components/Timer/utils.d.ts.map +0 -1
- package/src/components/Timer/Timer.ts +0 -2
- package/src/components/Timer/TimerDefaultVariant.tsx +0 -140
- package/src/components/Timer/TimerSmallVariant.tsx +0 -140
- package/src/components/Timer/index.tsx +0 -101
- package/src/components/Timer/types.ts +0 -38
- package/src/components/Timer/useTimerAnimations.ts +0 -94
- package/src/components/Timer/useTimerLogic.ts +0 -214
- package/src/components/Timer/utils.ts +0 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wandelbots/wandelbots-js-react-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.41.0",
|
|
4
4
|
"description": "React UI toolkit for building applications on top of the Wandelbots platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -114,6 +114,7 @@ export const DefaultVariant = ({
|
|
|
114
114
|
showLabels &&
|
|
115
115
|
!hasError &&
|
|
116
116
|
currentState !== "idle" &&
|
|
117
|
+
currentState !== "countup" &&
|
|
117
118
|
currentState !== "success"
|
|
118
119
|
}
|
|
119
120
|
timeout={300}
|
|
@@ -276,6 +277,7 @@ export const DefaultVariant = ({
|
|
|
276
277
|
showLabels &&
|
|
277
278
|
!hasError &&
|
|
278
279
|
currentState !== "idle" &&
|
|
280
|
+
currentState !== "countup" &&
|
|
279
281
|
currentState !== "success"
|
|
280
282
|
}
|
|
281
283
|
timeout={300}
|
|
@@ -31,7 +31,7 @@ export const SmallVariant = ({
|
|
|
31
31
|
} = animationState
|
|
32
32
|
|
|
33
33
|
// Simple text-only mode for compact variant in certain states
|
|
34
|
-
if (compact && currentState === "idle") {
|
|
34
|
+
if (compact && (currentState === "countup" || currentState === "idle")) {
|
|
35
35
|
return (
|
|
36
36
|
<Box
|
|
37
37
|
className={className}
|
|
@@ -72,7 +72,10 @@ export const SmallVariant = ({
|
|
|
72
72
|
}}
|
|
73
73
|
>
|
|
74
74
|
{/* Animated progress ring icon */}
|
|
75
|
-
{!(
|
|
75
|
+
{!(
|
|
76
|
+
currentState === "countup" ||
|
|
77
|
+
(currentState === "idle" && compact)
|
|
78
|
+
) && (
|
|
76
79
|
<Box
|
|
77
80
|
sx={{
|
|
78
81
|
width: 20,
|
|
@@ -8,18 +8,19 @@ import { useAnimations } from "./useAnimations"
|
|
|
8
8
|
import { useTimerLogic } from "./useTimerLogic"
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* A circular gauge timer component
|
|
11
|
+
* A circular gauge timer component that shows the remaining time of a cycle or counts up
|
|
12
12
|
*
|
|
13
13
|
* Features:
|
|
14
14
|
* - Custom SVG circular gauge with 264px diameter and 40px thickness
|
|
15
|
-
* - Multiple states: idle, measuring, measured, countdown, success
|
|
15
|
+
* - Multiple states: idle, measuring, measured, countdown, countup, success
|
|
16
16
|
* - Idle state: shows "Waiting for program cycle" with transparent inner circle
|
|
17
17
|
* - Measuring state: counts up with "Cycle Time" / "measuring..." labels
|
|
18
18
|
* - Measured state: shows final time with "Cycle Time" / "determined" labels in pulsating green
|
|
19
19
|
* - Countdown mode: shows remaining time prominently, counts down to zero
|
|
20
|
+
* - Count-up mode: shows elapsed time without special labels
|
|
20
21
|
* - Success state: brief green flash after cycle completion
|
|
21
22
|
* - Displays appropriate labels based on state
|
|
22
|
-
* - Automatically counts down and triggers callback when reaching zero
|
|
23
|
+
* - Automatically counts down/up and triggers callback when reaching zero (countdown only)
|
|
23
24
|
* - Full timer control: start, pause, resume functionality
|
|
24
25
|
* - Support for starting with elapsed time (resume mid-cycle)
|
|
25
26
|
* - Error state support: pauses timer and shows error styling (red color)
|
|
@@ -27,7 +28,7 @@ import { useTimerLogic } from "./useTimerLogic"
|
|
|
27
28
|
* - Pulsating text animation for completed measuring state
|
|
28
29
|
* - Fully localized with i18next
|
|
29
30
|
* - Material-UI theming integration
|
|
30
|
-
* - Small variant with animated progress icon (gauge border only) next to text
|
|
31
|
+
* - Small variant with animated progress icon (gauge border only) next to text or simple text-only mode
|
|
31
32
|
*/
|
|
32
33
|
export const CycleTimer = externalizeComponent(
|
|
33
34
|
observer(
|
|
@@ -3,11 +3,13 @@ export type CycleTimerState =
|
|
|
3
3
|
| "measuring" // Counting up without max time, showing "Cycle Time" / "measuring..."
|
|
4
4
|
| "measured" // Completed measuring state showing "Cycle Time" / "determined" with pulsating green text
|
|
5
5
|
| "countdown" // Counting down with max time
|
|
6
|
+
| "countup" // Simple count up without special text
|
|
6
7
|
| "success" // Brief success state after cycle completion
|
|
7
8
|
|
|
8
9
|
export interface CycleTimerControls {
|
|
9
|
-
startNewCycle: (maxTimeSeconds
|
|
10
|
+
startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void
|
|
10
11
|
startMeasuring: (elapsedSeconds?: number) => void
|
|
12
|
+
startCountUp: (elapsedSeconds?: number) => void
|
|
11
13
|
setIdle: () => void
|
|
12
14
|
completeMeasuring: () => void
|
|
13
15
|
pause: () => void
|
|
@@ -88,66 +88,114 @@ export const useTimerLogic = ({
|
|
|
88
88
|
[autoStart, progressInterpolator],
|
|
89
89
|
)
|
|
90
90
|
|
|
91
|
-
const
|
|
92
|
-
(
|
|
93
|
-
|
|
94
|
-
setTimerState((prev) => ({ ...prev, isRunning: false }))
|
|
95
|
-
startTimeRef.current = null
|
|
96
|
-
|
|
91
|
+
const startCountUp = useCallback(
|
|
92
|
+
(elapsedSeconds: number = 0) => {
|
|
93
|
+
const initialProgress = ((elapsedSeconds / 60) % 1) * 100
|
|
97
94
|
setTimerState((prev) => ({
|
|
98
95
|
...prev,
|
|
99
|
-
currentState: "
|
|
100
|
-
maxTime:
|
|
96
|
+
currentState: "countup",
|
|
97
|
+
maxTime: null,
|
|
98
|
+
remainingTime: elapsedSeconds,
|
|
101
99
|
isPausedState: false,
|
|
100
|
+
currentProgress: initialProgress, // Immediately set progress
|
|
102
101
|
}))
|
|
103
102
|
pausedTimeRef.current = 0
|
|
104
103
|
|
|
105
|
-
//
|
|
106
|
-
const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
|
|
107
|
-
const initialProgress =
|
|
108
|
-
elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
|
|
104
|
+
progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
|
|
109
105
|
|
|
106
|
+
if (autoStart) {
|
|
107
|
+
startTimeRef.current = Date.now() - elapsedSeconds * 1000
|
|
108
|
+
setTimerState((prev) => ({ ...prev, isRunning: true }))
|
|
109
|
+
} else {
|
|
110
|
+
startTimeRef.current = null
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
[autoStart, progressInterpolator],
|
|
114
|
+
)
|
|
115
|
+
|
|
116
|
+
const startNewCycle = useCallback(
|
|
117
|
+
(maxTimeSeconds?: number, elapsedSeconds: number = 0) => {
|
|
118
|
+
// Stop any running timer first to prevent conflicts
|
|
119
|
+
setTimerState((prev) => ({ ...prev, isRunning: false }))
|
|
120
|
+
startTimeRef.current = null
|
|
121
|
+
|
|
122
|
+
const newState = maxTimeSeconds !== undefined ? "countdown" : "countup"
|
|
110
123
|
setTimerState((prev) => ({
|
|
111
124
|
...prev,
|
|
112
|
-
|
|
113
|
-
|
|
125
|
+
currentState: newState,
|
|
126
|
+
maxTime: maxTimeSeconds ?? null,
|
|
127
|
+
isPausedState: false,
|
|
114
128
|
}))
|
|
129
|
+
pausedTimeRef.current = 0
|
|
115
130
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
131
|
+
if (maxTimeSeconds !== undefined) {
|
|
132
|
+
// Count-down mode
|
|
133
|
+
const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
|
|
134
|
+
const initialProgress =
|
|
135
|
+
elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
|
|
136
|
+
|
|
137
|
+
setTimerState((prev) => ({
|
|
138
|
+
...prev,
|
|
139
|
+
remainingTime: remainingSeconds,
|
|
140
|
+
currentProgress: initialProgress, // Immediately set progress
|
|
141
|
+
}))
|
|
142
|
+
|
|
143
|
+
progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
|
|
144
|
+
|
|
145
|
+
if (remainingSeconds === 0) {
|
|
146
|
+
setTimerState((prev) => ({ ...prev, isRunning: false }))
|
|
147
|
+
startTimeRef.current = null
|
|
148
|
+
if (onCycleEnd) {
|
|
149
|
+
queueMicrotask(() => onCycleEnd())
|
|
150
|
+
}
|
|
151
|
+
} else if (autoStart) {
|
|
152
|
+
setTimeout(() => {
|
|
153
|
+
startTimeRef.current = Date.now() - elapsedSeconds * 1000
|
|
154
|
+
setTimerState((prev) => ({ ...prev, isRunning: true }))
|
|
155
|
+
}, 0)
|
|
156
|
+
} else {
|
|
157
|
+
startTimeRef.current = null
|
|
123
158
|
}
|
|
124
|
-
} else if (autoStart) {
|
|
125
|
-
setTimeout(() => {
|
|
126
|
-
startTimeRef.current = Date.now() - elapsedSeconds * 1000
|
|
127
|
-
setTimerState((prev) => ({ ...prev, isRunning: true }))
|
|
128
|
-
}, 0)
|
|
129
159
|
} else {
|
|
130
|
-
|
|
160
|
+
// Count-up mode
|
|
161
|
+
const initialProgress = ((elapsedSeconds / 60) % 1) * 100
|
|
162
|
+
setTimerState((prev) => ({
|
|
163
|
+
...prev,
|
|
164
|
+
remainingTime: elapsedSeconds,
|
|
165
|
+
currentProgress: initialProgress, // Immediately set progress
|
|
166
|
+
}))
|
|
167
|
+
|
|
168
|
+
progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
|
|
169
|
+
|
|
170
|
+
if (autoStart) {
|
|
171
|
+
setTimeout(() => {
|
|
172
|
+
startTimeRef.current = Date.now() - elapsedSeconds * 1000
|
|
173
|
+
setTimerState((prev) => ({ ...prev, isRunning: true }))
|
|
174
|
+
}, 0)
|
|
175
|
+
} else {
|
|
176
|
+
startTimeRef.current = null
|
|
177
|
+
}
|
|
131
178
|
}
|
|
132
179
|
},
|
|
133
180
|
[autoStart, onCycleEnd, progressInterpolator],
|
|
134
181
|
)
|
|
135
182
|
|
|
136
183
|
const completeMeasuring = useCallback(() => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
184
|
+
if (timerState.currentState === "measuring") {
|
|
185
|
+
setTimerState((prev) => ({
|
|
186
|
+
...prev,
|
|
187
|
+
isRunning: false,
|
|
188
|
+
currentState: "measured",
|
|
189
|
+
}))
|
|
190
|
+
startTimeRef.current = null
|
|
144
191
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
192
|
+
onStartPulsating(() => {
|
|
193
|
+
if (onMeasuringComplete) {
|
|
194
|
+
onMeasuringComplete()
|
|
195
|
+
}
|
|
196
|
+
})
|
|
197
|
+
}
|
|
198
|
+
}, [timerState.currentState, onStartPulsating, onMeasuringComplete])
|
|
151
199
|
|
|
152
200
|
const pause = useCallback(() => {
|
|
153
201
|
if (startTimeRef.current && timerState.isRunning) {
|
|
@@ -268,6 +316,13 @@ export const useTimerLogic = ({
|
|
|
268
316
|
}))
|
|
269
317
|
const progress = ((elapsed / 60) % 1) * 100
|
|
270
318
|
progressInterpolator.setTarget([progress])
|
|
319
|
+
} else if (timerState.currentState === "countup") {
|
|
320
|
+
setTimerState((prev) => ({
|
|
321
|
+
...prev,
|
|
322
|
+
remainingTime: Math.floor(elapsed),
|
|
323
|
+
}))
|
|
324
|
+
const progress = ((elapsed / 60) % 1) * 100
|
|
325
|
+
progressInterpolator.setTarget([progress])
|
|
271
326
|
}
|
|
272
327
|
|
|
273
328
|
if (timerState.isRunning) {
|
|
@@ -320,6 +375,7 @@ export const useTimerLogic = ({
|
|
|
320
375
|
controls: {
|
|
321
376
|
startNewCycle,
|
|
322
377
|
startMeasuring,
|
|
378
|
+
startCountUp,
|
|
323
379
|
setIdle,
|
|
324
380
|
completeMeasuring,
|
|
325
381
|
pause,
|
|
@@ -25,8 +25,8 @@ export const calculateProgress = (
|
|
|
25
25
|
return Math.min(100, (elapsed / maxTime) * 100)
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
if (currentState === "measuring") {
|
|
29
|
-
//
|
|
28
|
+
if (currentState === "measuring" || currentState === "countup") {
|
|
29
|
+
// Count-up modes: progress based on minute steps (0-100% per minute)
|
|
30
30
|
return ((remainingTime / 60) % 1) * 100
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -45,7 +45,7 @@ export const calculateExactProgress = (
|
|
|
45
45
|
return Math.min(100, (totalElapsed / maxTime) * 100)
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
if (currentState === "measuring") {
|
|
48
|
+
if (currentState === "measuring" || currentState === "countup") {
|
|
49
49
|
return ((totalElapsed / 60) % 1) * 100
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SxProps } from "@mui/material"
|
|
2
2
|
import { Box, Tab, Tabs } from "@mui/material"
|
|
3
3
|
import { observer } from "mobx-react-lite"
|
|
4
|
-
import { useState } from "react"
|
|
4
|
+
import { useEffect, useState } from "react"
|
|
5
5
|
import { externalizeComponent } from "../externalizeComponent"
|
|
6
6
|
|
|
7
7
|
export interface TabItem {
|
|
@@ -18,6 +18,8 @@ export interface TabItem {
|
|
|
18
18
|
export interface TabBarProps {
|
|
19
19
|
/** Array of tab items to display */
|
|
20
20
|
items: TabItem[]
|
|
21
|
+
/** Controlled active tab index */
|
|
22
|
+
activeTab?: number
|
|
21
23
|
/** Default active tab index */
|
|
22
24
|
defaultActiveTab?: number
|
|
23
25
|
/** Callback when tab changes */
|
|
@@ -57,14 +59,39 @@ function TabPanel(props: TabPanelProps) {
|
|
|
57
59
|
*/
|
|
58
60
|
export const TabBar = externalizeComponent(
|
|
59
61
|
observer((props: TabBarProps) => {
|
|
60
|
-
const {
|
|
61
|
-
|
|
62
|
+
const {
|
|
63
|
+
items,
|
|
64
|
+
activeTab,
|
|
65
|
+
defaultActiveTab = 0,
|
|
66
|
+
onTabChange,
|
|
67
|
+
sx,
|
|
68
|
+
ref,
|
|
69
|
+
} = props
|
|
70
|
+
const isControlled = activeTab !== undefined
|
|
71
|
+
const [uncontrolledActiveTab, setUncontrolledActiveTab] =
|
|
72
|
+
useState(defaultActiveTab)
|
|
73
|
+
|
|
74
|
+
// Keep uncontrolled state in range when items change
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
if (isControlled) return
|
|
77
|
+
if (items.length === 0) return
|
|
78
|
+
if (
|
|
79
|
+
uncontrolledActiveTab < 0 ||
|
|
80
|
+
uncontrolledActiveTab > items.length - 1
|
|
81
|
+
) {
|
|
82
|
+
setUncontrolledActiveTab(0)
|
|
83
|
+
}
|
|
84
|
+
}, [items.length, isControlled, uncontrolledActiveTab])
|
|
85
|
+
|
|
86
|
+
const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
|
|
62
87
|
|
|
63
88
|
const handleTabChange = (
|
|
64
89
|
_event: React.SyntheticEvent,
|
|
65
90
|
newValue: number,
|
|
66
91
|
) => {
|
|
67
|
-
|
|
92
|
+
if (!isControlled) {
|
|
93
|
+
setUncontrolledActiveTab(newValue)
|
|
94
|
+
}
|
|
68
95
|
onTabChange?.(newValue)
|
|
69
96
|
}
|
|
70
97
|
|
|
@@ -76,7 +103,7 @@ export const TabBar = externalizeComponent(
|
|
|
76
103
|
{/* Tabs */}
|
|
77
104
|
<Box sx={{ px: 0, py: 0 }}>
|
|
78
105
|
<Tabs
|
|
79
|
-
value={
|
|
106
|
+
value={currentValue}
|
|
80
107
|
onChange={handleTabChange}
|
|
81
108
|
sx={{
|
|
82
109
|
minHeight: "32px",
|
|
@@ -104,11 +131,11 @@ export const TabBar = externalizeComponent(
|
|
|
104
131
|
backgroundColor: (theme) =>
|
|
105
132
|
theme.palette.backgroundPaperElevation?.[11] || "#32344B",
|
|
106
133
|
color: "text.primary",
|
|
107
|
-
opacity:
|
|
134
|
+
opacity: currentValue === index ? 1 : 0.38,
|
|
108
135
|
fontSize: "13px",
|
|
109
136
|
transition: "all 0.2s ease-in-out",
|
|
110
137
|
"&:hover": {
|
|
111
|
-
opacity:
|
|
138
|
+
opacity: currentValue === index ? 1 : 0.6,
|
|
112
139
|
},
|
|
113
140
|
"&.Mui-selected": {
|
|
114
141
|
opacity: 1,
|
|
@@ -134,7 +161,7 @@ export const TabBar = externalizeComponent(
|
|
|
134
161
|
{/* Tab Content */}
|
|
135
162
|
<Box sx={{ flex: 1, overflow: "auto" }}>
|
|
136
163
|
{items.map((item, index) => (
|
|
137
|
-
<TabPanel key={item.id} value={
|
|
164
|
+
<TabPanel key={item.id} value={currentValue} index={index}>
|
|
138
165
|
{item.content}
|
|
139
166
|
</TabPanel>
|
|
140
167
|
))}
|
|
@@ -52,7 +52,6 @@
|
|
|
52
52
|
"CycleTimer.CycleTime.lb": "Zykluszeit",
|
|
53
53
|
"CycleTimer.Measuring.lb": "wird gemessen...",
|
|
54
54
|
"CycleTimer.Determined.lb": "bestimmt",
|
|
55
|
-
"Timer.error": "Fehler",
|
|
56
55
|
"ProgramControl.Start.bt": "Start",
|
|
57
56
|
"ProgramControl.Resume.bt": "Weiter",
|
|
58
57
|
"ProgramControl.Retry.bt": "Wiederholen",
|
|
@@ -53,7 +53,6 @@
|
|
|
53
53
|
"CycleTimer.CycleTime.lb": "Cycle Time",
|
|
54
54
|
"CycleTimer.Measuring.lb": "measuring...",
|
|
55
55
|
"CycleTimer.Determined.lb": "determined",
|
|
56
|
-
"Timer.error": "Error",
|
|
57
56
|
"ProgramControl.Start.bt": "Start",
|
|
58
57
|
"ProgramControl.Resume.bt": "Resume",
|
|
59
58
|
"ProgramControl.Retry.bt": "Retry",
|
package/src/index.ts
CHANGED
|
@@ -4,7 +4,6 @@ export * from "./components/3d-viewport/SafetyZonesRenderer"
|
|
|
4
4
|
export * from "./components/3d-viewport/TrajectoryRenderer"
|
|
5
5
|
export * from "./components/AppHeader"
|
|
6
6
|
export * from "./components/CycleTimer"
|
|
7
|
-
export * from "./components/Timer"
|
|
8
7
|
export * from "./components/DataGrid"
|
|
9
8
|
export * from "./components/jogging/JoggingCartesianAxisControl"
|
|
10
9
|
export * from "./components/jogging/JoggingJointRotationControl"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Timer.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/Timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { TimerState, TimerAnimationState } from "./types";
|
|
2
|
-
interface TimerDefaultVariantProps {
|
|
3
|
-
timerState: TimerState;
|
|
4
|
-
animationState: TimerAnimationState;
|
|
5
|
-
hasError: boolean;
|
|
6
|
-
className?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare const TimerDefaultVariant: ({ timerState, animationState, hasError, className, }: TimerDefaultVariantProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=TimerDefaultVariant.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimerDefaultVariant.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/TimerDefaultVariant.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG9D,UAAU,wBAAwB;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,mBAAmB,GAAI,sDAKjC,wBAAwB,4CAwH1B,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { TimerState, TimerAnimationState } from "./types";
|
|
2
|
-
interface TimerSmallVariantProps {
|
|
3
|
-
timerState: TimerState;
|
|
4
|
-
animationState: TimerAnimationState;
|
|
5
|
-
hasError: boolean;
|
|
6
|
-
compact: boolean;
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const TimerSmallVariant: ({ timerState, animationState, hasError, compact, className, }: TimerSmallVariantProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
11
|
-
//# sourceMappingURL=TimerSmallVariant.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimerSmallVariant.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/TimerSmallVariant.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG9D,UAAU,sBAAsB;IAC9B,UAAU,EAAE,UAAU,CAAA;IACtB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,iBAAiB,GAAI,+DAM/B,sBAAsB,4CAuHxB,CAAA"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { TimerProps } from "./types";
|
|
2
|
-
/**
|
|
3
|
-
* A simple count-up timer component with visual progress indication
|
|
4
|
-
*
|
|
5
|
-
* Features:
|
|
6
|
-
* - Count-up timer that tracks elapsed time
|
|
7
|
-
* - Visual progress gauge that cycles every minute
|
|
8
|
-
* - Two display variants: large circular gauge (default) or small icon with text
|
|
9
|
-
* - Full timer control: start, pause, resume, reset functionality
|
|
10
|
-
* - Support for starting with elapsed time (resume mid-session)
|
|
11
|
-
* - Error state support: pauses timer and shows error styling
|
|
12
|
-
* - Smooth progress animations with spring physics
|
|
13
|
-
* - Fully localized with i18next
|
|
14
|
-
* - Material-UI theming integration
|
|
15
|
-
*/
|
|
16
|
-
export declare const Timer: (({ onTimerReady, autoStart, variant, compact, className, hasError, }: TimerProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
17
|
-
displayName: string;
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAIzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,yEASX,UAAU;;CAoEhB,CAAA"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export interface TimerControls {
|
|
2
|
-
start: (elapsedSeconds?: number) => void;
|
|
3
|
-
pause: () => void;
|
|
4
|
-
resume: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
isPaused: () => boolean;
|
|
7
|
-
}
|
|
8
|
-
export interface TimerProps {
|
|
9
|
-
/**
|
|
10
|
-
* Callback that receives the timer control functions
|
|
11
|
-
*/
|
|
12
|
-
onTimerReady: (controls: TimerControls) => void;
|
|
13
|
-
/** Whether the timer should start automatically when initialized */
|
|
14
|
-
autoStart?: boolean;
|
|
15
|
-
/** Visual variant of the timer */
|
|
16
|
-
variant?: "default" | "small";
|
|
17
|
-
/** For small variant: whether to show compact display */
|
|
18
|
-
compact?: boolean;
|
|
19
|
-
/** Additional CSS classes */
|
|
20
|
-
className?: string;
|
|
21
|
-
/** Whether the timer is in an error state (pauses timer and shows error styling) */
|
|
22
|
-
hasError?: boolean;
|
|
23
|
-
}
|
|
24
|
-
export interface TimerState {
|
|
25
|
-
elapsedTime: number;
|
|
26
|
-
isRunning: boolean;
|
|
27
|
-
isPausedState: boolean;
|
|
28
|
-
currentProgress: number;
|
|
29
|
-
wasRunningBeforeError: boolean;
|
|
30
|
-
}
|
|
31
|
-
export interface TimerAnimationState {
|
|
32
|
-
showPauseAnimation: boolean;
|
|
33
|
-
showErrorAnimation: boolean;
|
|
34
|
-
showMainText: boolean;
|
|
35
|
-
}
|
|
36
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;IAC/C,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,YAAY,EAAE,OAAO,CAAA;CACtB"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { TimerAnimationState } from "./types";
|
|
2
|
-
export declare const useTimerAnimations: () => {
|
|
3
|
-
animationState: TimerAnimationState;
|
|
4
|
-
triggerPauseAnimation: () => void;
|
|
5
|
-
triggerErrorAnimation: () => void;
|
|
6
|
-
clearErrorAnimation: () => void;
|
|
7
|
-
triggerFadeTransition: () => void;
|
|
8
|
-
setInitialAnimationState: () => void;
|
|
9
|
-
cleanup: () => void;
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=useTimerAnimations.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTimerAnimations.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerAnimations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,eAAO,MAAM,kBAAkB;;;;;;;;CA0F9B,CAAA"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { TimerState } from "./types";
|
|
2
|
-
interface UseTimerLogicProps {
|
|
3
|
-
autoStart: boolean;
|
|
4
|
-
hasError: boolean;
|
|
5
|
-
onPauseAnimation: () => void;
|
|
6
|
-
onErrorAnimation: () => void;
|
|
7
|
-
onClearErrorAnimation: () => void;
|
|
8
|
-
}
|
|
9
|
-
export declare const useTimerLogic: ({ autoStart, hasError, onPauseAnimation, onErrorAnimation, onClearErrorAnimation, }: UseTimerLogicProps) => {
|
|
10
|
-
timerState: TimerState;
|
|
11
|
-
controls: {
|
|
12
|
-
start: (elapsedSeconds?: number) => void;
|
|
13
|
-
pause: () => void;
|
|
14
|
-
resume: () => void;
|
|
15
|
-
reset: () => void;
|
|
16
|
-
isPaused: () => boolean;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
20
|
-
//# sourceMappingURL=useTimerLogic.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTimerLogic.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerLogic.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,kBAAkB;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,qBAAqB,EAAE,MAAM,IAAI,CAAA;CAClC;AAED,eAAO,MAAM,aAAa,GAAI,qFAM3B,kBAAkB;;;iCAyBA,MAAM;;;;;;CA0K1B,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Formats time in seconds to MM:SS format
|
|
3
|
-
*/
|
|
4
|
-
export declare const formatTime: (seconds: number) => string;
|
|
5
|
-
/**
|
|
6
|
-
* Calculates progress percentage for timer (minute-based cycles)
|
|
7
|
-
*/
|
|
8
|
-
export declare const calculateTimerProgress: (elapsedTime: number) => number;
|
|
9
|
-
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,KAAG,MAI5C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM,KAAG,MAE5D,CAAA"}
|