timtinkers.online
this repo has no description
Added default value to LocalStorageInput
+109
-5
+1
islands/EventFormatter.tsx
+1
islands/EventFormatter.tsx
+108
-5
islands/LocalStorageInput.tsx
+108
-5
islands/LocalStorageInput.tsx
···
13
13
maxHistoryItems?: number;
14
14
helpText?: string;
15
15
className?: string;
16
+
defaultValue?: string; // Optional default value
16
17
}
17
18
18
19
export default function LocalStorageInput({
···
27
28
maxHistoryItems = 10,
28
29
helpText,
29
30
className = "",
31
+
defaultValue,
30
32
}: LocalStorageInputProps) {
31
33
const [history, setHistory] = useState<string[]>([]);
32
34
const [showHistory, setShowHistory] = useState<boolean>(false);
···
126
128
}
127
129
};
128
130
131
+
// Delete item from history
132
+
const deleteItem = (itemToDelete: string, e: Event) => {
133
+
e.stopPropagation(); // Prevent click from bubbling to parent (which would select the item)
134
+
135
+
const newHistory = history.filter((item) => item !== itemToDelete);
136
+
setHistory(newHistory);
137
+
138
+
// Save updated history to localStorage
139
+
if (IS_BROWSER) {
140
+
localStorage.setItem(historyStorageKey, JSON.stringify(newHistory));
141
+
}
142
+
};
143
+
144
+
// Reset to default value
145
+
const resetToDefault = () => {
146
+
if (!defaultValue) return;
147
+
148
+
// Set input value to default
149
+
onChange(defaultValue);
150
+
151
+
// Remove saved value from localStorage to ensure default is used on next load
152
+
if (IS_BROWSER) {
153
+
localStorage.removeItem(storageKey);
154
+
}
155
+
156
+
// Focus the input after reset
157
+
if (inputRef.current) {
158
+
inputRef.current.focus();
159
+
}
160
+
};
161
+
129
162
return (
130
163
<div className={`local-storage-input-container ${className}`}>
131
164
<form onSubmit={handleSubmit}>
132
-
<label htmlFor={id}>{label}</label>
165
+
<div className="label-with-reset">
166
+
<label htmlFor={id}>{label}</label>
167
+
{defaultValue && (
168
+
<button
169
+
type="button"
170
+
className="reset-button"
171
+
onClick={resetToDefault}
172
+
title="Reset to default value"
173
+
>
174
+
Reset to Default
175
+
</button>
176
+
)}
177
+
</div>
178
+
133
179
<div className="input-with-button">
134
180
<input
135
181
id={id}
···
152
198
<div
153
199
key={index}
154
200
className="history-item"
155
-
onClick={() => selectItem(historyItem)}
156
201
>
157
-
{historyItem}
202
+
<span
203
+
className="history-item-text"
204
+
onClick={() => selectItem(historyItem)}
205
+
>
206
+
{historyItem}
207
+
</span>
208
+
<button
209
+
type="button"
210
+
className="delete-button"
211
+
onClick={(e) =>
212
+
deleteItem(historyItem, e)}
213
+
aria-label={`Delete ${historyItem}`}
214
+
title="Delete from history"
215
+
>
216
+
🗑️
217
+
</button>
158
218
</div>
159
219
))}
160
220
</div>
···
168
228
margin-bottom: 10px;
169
229
}
170
230
231
+
.label-with-reset {
232
+
display: flex;
233
+
justify-content: space-between;
234
+
align-items: center;
235
+
margin-bottom: 5px;
236
+
}
237
+
238
+
.reset-button {
239
+
background: none;
240
+
border: none;
241
+
color: #1976d2;
242
+
font-size: 14px;
243
+
cursor: pointer;
244
+
padding: 0;
245
+
text-decoration: underline;
246
+
}
247
+
248
+
.reset-button:hover {
249
+
color: #1565c0;
250
+
}
251
+
171
252
.input-with-button {
172
253
display: flex;
173
254
gap: 8px;
···
218
299
}
219
300
220
301
.history-item {
302
+
display: flex;
303
+
justify-content: space-between;
304
+
align-items: center;
221
305
padding: 8px 12px;
222
306
cursor: pointer;
307
+
}
308
+
309
+
.history-item:hover {
310
+
background-color: #f5f5f5;
311
+
}
312
+
313
+
.history-item-text {
314
+
flex: 1;
223
315
white-space: nowrap;
224
316
overflow: hidden;
225
317
text-overflow: ellipsis;
226
318
}
227
319
228
-
.history-item:hover {
229
-
background-color: #f5f5f5;
320
+
.delete-button {
321
+
background: none;
322
+
border: none;
323
+
cursor: pointer;
324
+
font-size: 16px;
325
+
padding: 0 0 0 8px;
326
+
opacity: 0.7;
327
+
transition: opacity 0.2s;
328
+
line-height: 1;
329
+
}
330
+
331
+
.delete-button:hover {
332
+
opacity: 1;
230
333
}
231
334
`}
232
335
</style>