groovinads-ui 1.2.58 → 1.2.60
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
CHANGED
|
@@ -21,18 +21,18 @@ The library includes the following components:
|
|
|
21
21
|
|
|
22
22
|
- [DropdownComponent](#dropdowncomponent): For dropdown menus.
|
|
23
23
|
- [DropdownDatePicker](#dropdowndatepicker): For filter dropdowns.
|
|
24
|
-
- [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
|
|
25
24
|
- [DropdownFilter](#dropdownfilter): For filter dropdowns.
|
|
26
25
|
- [DropdownMultiSelect](#dropdownmultiselect): For dynamically managing and displaying keywords.
|
|
26
|
+
- [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
|
|
27
27
|
|
|
28
28
|
- [Inputs](#inputs):
|
|
29
29
|
|
|
30
30
|
- [Checkbox](#checkbox): For multiple option selections.
|
|
31
31
|
- [Input](#input): For user data entry.
|
|
32
|
+
- [InputChip](#inputChip): For dynamically managing and displaying keywords.
|
|
32
33
|
- [Radio](#radio): For exclusive selections.
|
|
33
34
|
- [Switch](#switch): For toggle states.
|
|
34
35
|
- [Textarea](#textarea): For multiline text input.
|
|
35
|
-
- [InputChip](#inputChip): For dynamically managing and displaying keywords.
|
|
36
36
|
|
|
37
37
|
- [Labels](#labels):
|
|
38
38
|
|
|
@@ -271,60 +271,6 @@ export default DropdownDatePickerExample;
|
|
|
271
271
|
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
272
272
|
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
273
273
|
|
|
274
|
-
### DropdownSimpleDatePicker
|
|
275
|
-
|
|
276
|
-
```jsx
|
|
277
|
-
import { DropdownDatePicker } from 'groovinads-ui';
|
|
278
|
-
import React, { useState } from 'react';
|
|
279
|
-
|
|
280
|
-
const DropdownSimpleDatePickerExample = () => {
|
|
281
|
-
const [show, setShow] = useState(false);
|
|
282
|
-
|
|
283
|
-
const [date, setDate] = useState('');
|
|
284
|
-
|
|
285
|
-
const clearStartDate = () => {
|
|
286
|
-
// Resets the date and updates the state as needed. Adjust as required.
|
|
287
|
-
setDate(null);
|
|
288
|
-
setShowDateDropdown(false);
|
|
289
|
-
closeDateDropdown();
|
|
290
|
-
markSelectedPlacements();
|
|
291
|
-
setKey((prevKey) => prevKey + 1);
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
return (
|
|
296
|
-
<>
|
|
297
|
-
<button onClick={() => setShow(!show)}>Toggle</button>
|
|
298
|
-
<div className='col-2'>
|
|
299
|
-
<DropdownSimpleDatePicker
|
|
300
|
-
{...args}
|
|
301
|
-
date={date}
|
|
302
|
-
setDate={setDate}
|
|
303
|
-
handleClear={ExampleClearDate}
|
|
304
|
-
minDate={new Date('2025-01-01')}
|
|
305
|
-
maxDate={new Date('2025-01-31')}
|
|
306
|
-
/>
|
|
307
|
-
</div>
|
|
308
|
-
</button>
|
|
309
|
-
);
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
export default DropdownSimpleDatePickerExample;
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
| Property | Type | Required | Option | Default | Description |
|
|
316
|
-
| ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
317
|
-
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
318
|
-
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
319
|
-
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
320
|
-
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
|
|
321
|
-
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
|
|
322
|
-
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
|
|
323
|
-
| `date` | String | No | n/a | `null` | Selected date. |
|
|
324
|
-
| `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
|
|
325
|
-
| `handleClear` | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
|
|
326
|
-
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
327
|
-
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
328
274
|
|
|
329
275
|
### DropdownFilter
|
|
330
276
|
|
|
@@ -425,6 +371,61 @@ export default MultiSelectComponent;
|
|
|
425
371
|
| `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
|
|
426
372
|
| `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
|
|
427
373
|
|
|
374
|
+
### DropdownSimpleDatePicker
|
|
375
|
+
|
|
376
|
+
```jsx
|
|
377
|
+
import { DropdownDatePicker } from 'groovinads-ui';
|
|
378
|
+
import React, { useState } from 'react';
|
|
379
|
+
|
|
380
|
+
const DropdownSimpleDatePickerExample = () => {
|
|
381
|
+
const [show, setShow] = useState(false);
|
|
382
|
+
|
|
383
|
+
const [date, setDate] = useState('');
|
|
384
|
+
|
|
385
|
+
const clearStartDate = () => {
|
|
386
|
+
// Resets the date and updates the state as needed. Adjust as required.
|
|
387
|
+
setDate(null);
|
|
388
|
+
setShowDateDropdown(false);
|
|
389
|
+
closeDateDropdown();
|
|
390
|
+
markSelectedPlacements();
|
|
391
|
+
setKey((prevKey) => prevKey + 1);
|
|
392
|
+
};
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
return (
|
|
396
|
+
<>
|
|
397
|
+
<button onClick={() => setShow(!show)}>Toggle</button>
|
|
398
|
+
<div className='col-2'>
|
|
399
|
+
<DropdownSimpleDatePicker
|
|
400
|
+
{...args}
|
|
401
|
+
date={date}
|
|
402
|
+
setDate={setDate}
|
|
403
|
+
handleClear={ExampleClearDate}
|
|
404
|
+
minDate={new Date('2025-01-01')}
|
|
405
|
+
maxDate={new Date('2025-01-31')}
|
|
406
|
+
/>
|
|
407
|
+
</div>
|
|
408
|
+
</button>
|
|
409
|
+
);
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
export default DropdownSimpleDatePickerExample;
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
| Property | Type | Required | Option | Default | Description |
|
|
416
|
+
| ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
417
|
+
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
418
|
+
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
419
|
+
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
420
|
+
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
|
|
421
|
+
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
|
|
422
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
|
|
423
|
+
| `date` | String | No | n/a | `null` | Selected date. |
|
|
424
|
+
| `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
|
|
425
|
+
| `handleClear` | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
|
|
426
|
+
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
427
|
+
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
428
|
+
|
|
428
429
|
### Checkbox
|
|
429
430
|
|
|
430
431
|
```jsx
|