groovinads-ui 1.2.49 → 1.2.51
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 +32 -27
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +131 -112
- package/src/components/index.js +49 -0
- package/src/index.js +5 -22
- package/src/stories/DropdownComponent.stories.jsx +1 -1
- package/src/stories/DropdownSimpleDatePicker.stories.jsx +36 -12
package/README.md
CHANGED
|
@@ -124,7 +124,7 @@ import { Button } from 'groovinads-ui';
|
|
|
124
124
|
|
|
125
125
|
## Dropdowns
|
|
126
126
|
|
|
127
|
-
### DropdownComponent
|
|
127
|
+
### DropdownComponent
|
|
128
128
|
|
|
129
129
|
```jsx
|
|
130
130
|
import React, { useState } from 'react';
|
|
@@ -168,7 +168,7 @@ const DropdownComponentExample = () => {
|
|
|
168
168
|
export default DropdownComponentExample;
|
|
169
169
|
```
|
|
170
170
|
|
|
171
|
-
##### Dropdown
|
|
171
|
+
##### Dropdown width submenu
|
|
172
172
|
|
|
173
173
|
```jsx
|
|
174
174
|
<DropdownComponent
|
|
@@ -274,23 +274,30 @@ import React, { useState } from 'react';
|
|
|
274
274
|
const DropdownSimpleDatePickerExample = () => {
|
|
275
275
|
const [show, setShow] = useState(false);
|
|
276
276
|
|
|
277
|
-
const [
|
|
278
|
-
|
|
277
|
+
const [date, setDate] = useState('');
|
|
278
|
+
|
|
279
|
+
const clearStartDate = () => {
|
|
280
|
+
// Resets the date and updates the state as needed. Adjust as required.
|
|
281
|
+
setDate(null);
|
|
282
|
+
setShowDateDropdown(false);
|
|
283
|
+
closeDateDropdown();
|
|
284
|
+
markSelectedPlacements();
|
|
285
|
+
setKey((prevKey) => prevKey + 1);
|
|
286
|
+
};
|
|
279
287
|
|
|
280
288
|
|
|
281
289
|
return (
|
|
282
290
|
<>
|
|
283
|
-
<button onClick={() => setShow(!show)}>Toggle
|
|
291
|
+
<button onClick={() => setShow(!show)}>Toggle</button>
|
|
284
292
|
<div className='col-2'>
|
|
285
293
|
<DropdownSimpleDatePicker
|
|
286
294
|
{...args}
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
setDate={setDateTo}
|
|
295
|
+
date={date}
|
|
296
|
+
setDate={setDate}
|
|
297
|
+
handleClear={ExampleClearDate}
|
|
291
298
|
/>
|
|
292
299
|
</div>
|
|
293
|
-
|
|
300
|
+
</button>
|
|
294
301
|
);
|
|
295
302
|
};
|
|
296
303
|
|
|
@@ -299,14 +306,15 @@ export default DropdownSimpleDatePickerExample;
|
|
|
299
306
|
|
|
300
307
|
| Property | Type | Required | Option | Default | Description |
|
|
301
308
|
| ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
302
|
-
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component.
|
|
309
|
+
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
303
310
|
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
304
|
-
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown.
|
|
305
|
-
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled.
|
|
306
|
-
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button.
|
|
307
|
-
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations.
|
|
308
|
-
| `date` | String | No | n/a | `null` | Selected date.
|
|
309
|
-
| `setDate` | Function | No | n/a | n/a | Function that updates the start date.
|
|
311
|
+
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
312
|
+
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
|
|
313
|
+
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
|
|
314
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
|
|
315
|
+
| `date` | String | No | n/a | `null` | Selected date. |
|
|
316
|
+
| `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
|
|
317
|
+
| `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. |
|
|
310
318
|
|
|
311
319
|
### DropdownFilter
|
|
312
320
|
|
|
@@ -407,8 +415,6 @@ export default MultiSelectComponent;
|
|
|
407
415
|
| `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
|
|
408
416
|
| `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
|
|
409
417
|
|
|
410
|
-
## Inputs
|
|
411
|
-
|
|
412
418
|
### Checkbox
|
|
413
419
|
|
|
414
420
|
```jsx
|
|
@@ -525,14 +531,13 @@ import { Radio } from 'groovinads-ui';
|
|
|
525
531
|
</Radio>;
|
|
526
532
|
```
|
|
527
533
|
|
|
528
|
-
| Property | Type | Required | Options | Default | Description
|
|
529
|
-
| ----------- | -------- | -------- | -------------- | ------- |
|
|
530
|
-
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button.
|
|
531
|
-
| `id` | String | No | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button.
|
|
532
|
-
| `
|
|
533
|
-
| `
|
|
534
|
-
| `
|
|
535
|
-
| `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
|
|
534
|
+
| Property | Type | Required | Options | Default | Description |
|
|
535
|
+
| ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
536
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. |
|
|
537
|
+
| `id` | String | No | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button. |
|
|
538
|
+
| `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
|
|
539
|
+
| `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
|
|
540
|
+
| `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
|
|
536
541
|
|
|
537
542
|
### Switch
|
|
538
543
|
|