ehscan-react-components 0.1.48 → 0.1.49
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/README.md +28 -85
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -98,6 +98,30 @@ const ButtonPage = () => {
|
|
|
98
98
|
|
|
99
99
|
## Drag And Drop
|
|
100
100
|
|
|
101
|
+
A fully interactive drag-and-drop list component built with React that allows users to reorder items, select items, and handle autosave or custom callbacks.
|
|
102
|
+
|
|
103
|
+
Features:
|
|
104
|
+
|
|
105
|
+
- **Drag & drop reordering**
|
|
106
|
+
- Users can click and drag any item in the list to reorder it.
|
|
107
|
+
- A “ghost” of the dragged item follows the cursor while dragging.
|
|
108
|
+
- Items swap positions when dropped, and the updated order is saved.
|
|
109
|
+
- **Selection support**
|
|
110
|
+
- Clicking an item toggles its selected state.
|
|
111
|
+
- Selected items can be highlighted using a CSS class (styles.selected).
|
|
112
|
+
- **Custom callbacks & autosave**
|
|
113
|
+
- setItems: Updates the parent state with the new item order.
|
|
114
|
+
- changeItemsAction: A callback fired whenever items are reordered or clicked.
|
|
115
|
+
- Debounced autosave: Changes are automatically saved with a delay (debounce) to reduce rapid API calls.
|
|
116
|
+
- **Pop effect on drop**
|
|
117
|
+
- When an item is dropped into a new position, it briefly triggers a “pop” animation to indicate the change.
|
|
118
|
+
- **Accessibility & flexibility**
|
|
119
|
+
- Works with any list of objects that have an id and label.
|
|
120
|
+
- Each item can optionally have a selected property.
|
|
121
|
+
- The component is fully type-safe with TypeScript.
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
101
125
|
```jsx
|
|
102
126
|
import { DragAndDrop } from 'ehscan-react-components';
|
|
103
127
|
|
|
@@ -234,91 +258,6 @@ CSS Variables for AddBox
|
|
|
234
258
|
| `--ext-addbox-textarea-tag-erase-hover-bck-clr` | `darkgray` | Background color of the delete button on hover |
|
|
235
259
|
| `--ext-addbox-input-focus-border` | `1px dashed darkgrey` | Border of the input on focus |
|
|
236
260
|
|
|
237
|
-
|
|
238
|
-
# Styling
|
|
239
|
-
|
|
240
|
-
- TextAreaDropDown
|
|
241
|
-
|
|
242
|
-
| Variable | Fallback / Default |
|
|
243
|
-
| ---------------------------------- | ----------------------------------- |
|
|
244
|
-
| `--ext-textarea-box-bck-clr` | `lightgray` |
|
|
245
|
-
| `--ext-textarea-box-border-radius` | `10px` |
|
|
246
|
-
| `--ext-dropdown-border-radius` | `20px` |
|
|
247
|
-
| `--input-txt-size` | *(not explicitly set, optional)* |
|
|
248
|
-
| `--d-font-weight` | *(not explicitly set, optional)* |
|
|
249
|
-
| `--input-clr` | `black` |
|
|
250
|
-
| `--textarea-tag-bck-clr` | `white` (some places `transparent`) |
|
|
251
|
-
| `--textarea-tag-clr` | `darkblue` (some places `white`) |
|
|
252
|
-
| `--d-input-placeholder-clr` | `black` |
|
|
253
|
-
| `--d-input-bck-clr` | `transparent` |
|
|
254
|
-
| `--dropdown-item-bck-clr` | `wheat` |
|
|
255
|
-
| `--dropdown-amount-row-bck-clr` | `yellow` |
|
|
256
|
-
| `--animate-s` | `.5s` |
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
## Base Button Variables
|
|
260
|
-
|
|
261
|
-
| Variable | Default/Fallback |
|
|
262
|
-
| --------------------- | ----------------------------------------- |
|
|
263
|
-
| `--btn-bg` | `#007aff` |
|
|
264
|
-
| `--btn-color` | `#fff` |
|
|
265
|
-
| `--btn-radius` | `18px` |
|
|
266
|
-
| `--btn-padding-y` | `0.5rem` |
|
|
267
|
-
| `--btn-padding-x` | `1rem` |
|
|
268
|
-
| `--btn-width` | `fit-content` |
|
|
269
|
-
| `--btn-height` | `auto` |
|
|
270
|
-
| `--btn-font-size` | `1rem` |
|
|
271
|
-
| `--btn-font-weight` | `500` |
|
|
272
|
-
| `--btn-transition` | `all 0.2s ease` |
|
|
273
|
-
| `--btn-line-height` | `1.5` |
|
|
274
|
-
| `--ripple-box-shadow` | `rgb(100 100 111 / 20%) 0px 7px 29px 0px` |
|
|
275
|
-
| `--ripple-effect-bck` | `rgb(0 0 0 / 15%)` |
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
### Size-specific overrides
|
|
279
|
-
|
|
280
|
-
| Variable | Size | Default/Fallback |
|
|
281
|
-
| -------------------- | ---- | ---------------- |
|
|
282
|
-
| `--btn-padding-y-sm` | sm | `0.25rem` |
|
|
283
|
-
| `--btn-padding-x-sm` | sm | `0.75rem` |
|
|
284
|
-
| `--btn-font-size-sm` | sm | `0.85rem` |
|
|
285
|
-
| `--btn-padding-y-md` | md | `0.5rem` |
|
|
286
|
-
| `--btn-padding-x-md` | md | `1rem` |
|
|
287
|
-
| `--btn-font-size-md` | md | `1rem` |
|
|
288
|
-
| `--btn-padding-y-lg` | lg | `0.75rem` |
|
|
289
|
-
| `--btn-padding-x-lg` | lg | `1.5rem` |
|
|
290
|
-
| `--btn-font-size-lg` | lg | `1.1rem` |
|
|
291
|
-
|
|
292
|
-
### Variant-specific variables
|
|
293
|
-
|
|
294
|
-
| Variable | Variant | Default/Fallback |
|
|
295
|
-
| ----------------------- | --------- | ---------------- |
|
|
296
|
-
| `--btn-bg-primary` | primary | `#007aff` |
|
|
297
|
-
| `--btn-color-primary` | primary | `#fff` |
|
|
298
|
-
| `--btn-bg-secondary` | secondary | `#e5e5ea` |
|
|
299
|
-
| `--btn-color-secondary` | secondary | `#111` |
|
|
300
|
-
| `--btn-bg-outline` | outline | `transparent` |
|
|
301
|
-
| `--btn-color-outline` | outline | `#007aff` |
|
|
302
|
-
| `--btn-bg-ghost` | ghost | `transparent` |
|
|
303
|
-
| `--btn-color-ghost` | ghost | `#007aff` |
|
|
304
|
-
| `--btn-bg-danger` | danger | `#ff3b30` |
|
|
305
|
-
| `--btn-color-danger` | danger | `#fff` |
|
|
306
|
-
|
|
307
|
-
### Specific Button Types
|
|
308
|
-
|
|
309
|
-
| Variable | Type | Default/Fallback |
|
|
310
|
-
| ----------------------- | -------- | ---------------- |
|
|
311
|
-
| `--btn-width-close` | closeBtn | `35px` |
|
|
312
|
-
| `--btn-height-close` | closeBtn | `35px` |
|
|
313
|
-
| `--btn-bg-close` | closeBtn | `lightgray` |
|
|
314
|
-
| `--btn-height-save` | saveBtn | `35px` |
|
|
315
|
-
| `--btn-padding-x-save` | saveBtn | `30px` |
|
|
316
|
-
| `--btn-bg-save` | saveBtn | `#007aff` |
|
|
317
|
-
| `--btn-height-trash` | trashBtn | `35px` |
|
|
318
|
-
| `--btn-padding-x-trash` | trashBtn | `10px` |
|
|
319
|
-
| `--btn-radius-trash` | trashBtn | `4px` |
|
|
320
|
-
| `--btn-bg-trash` | trashBtn | `lightgray` |
|
|
321
|
-
|
|
322
261
|
## Window
|
|
323
262
|
```jsx
|
|
324
263
|
import { useEffect, useState } from "react";
|
|
@@ -382,6 +321,10 @@ const WindowWrapper = ({ windowOpen, setWindowOpen }) => {
|
|
|
382
321
|
```
|
|
383
322
|
----
|
|
384
323
|
# Changelog
|
|
324
|
+
|
|
325
|
+
## [0.1.49] - 2025-12-12
|
|
326
|
+
- Image and docu for Drag and Drop
|
|
327
|
+
|
|
385
328
|
## [0.1.48] - 2025-12-12
|
|
386
329
|
- Improved Button, module styling and docu, mobile usage (type: "pop")
|
|
387
330
|
- Ripple module styling
|