groovinads-ui 1.2.47 → 1.2.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 +57 -12
- package/dist/index.es.js +4 -4
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +136 -0
- package/src/components/Dropdowns/index.js +2 -1
- package/src/components/Inputs/Radio.jsx +4 -2
- package/src/index.js +3 -0
- package/src/stories/DropdownDatePicker.stories.jsx +2 -2
- package/src/stories/DropdownSimpleDatePicker.stories.jsx +32 -0
package/README.md
CHANGED
|
@@ -21,6 +21,7 @@ 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.
|
|
24
25
|
- [DropdownFilter](#dropdownfilter): For filter dropdowns.
|
|
25
26
|
- [DropdownMultiSelect](#dropdownmultiselect): For multi-select dropdowns.
|
|
26
27
|
|
|
@@ -123,7 +124,7 @@ import { Button } from 'groovinads-ui';
|
|
|
123
124
|
|
|
124
125
|
## Dropdowns
|
|
125
126
|
|
|
126
|
-
### DropdownComponent
|
|
127
|
+
### DropdownComponent (*Deprecated*)
|
|
127
128
|
|
|
128
129
|
```jsx
|
|
129
130
|
import React, { useState } from 'react';
|
|
@@ -155,11 +156,11 @@ const DropdownComponentExample = () => {
|
|
|
155
156
|
<Icon iconName='chevron-down' className='ms-2' />
|
|
156
157
|
</Button>
|
|
157
158
|
|
|
158
|
-
<
|
|
159
|
+
<DropdownComponentMenu>
|
|
159
160
|
<DropdownComponent.Item onClick={() => console.log('Item 1 clicked')}>
|
|
160
161
|
Item 1
|
|
161
162
|
</DropdownComponent.Item>
|
|
162
|
-
</
|
|
163
|
+
</DropdownComponentMenu>
|
|
163
164
|
</DropdownComponent>
|
|
164
165
|
);
|
|
165
166
|
};
|
|
@@ -167,7 +168,7 @@ const DropdownComponentExample = () => {
|
|
|
167
168
|
export default DropdownComponentExample;
|
|
168
169
|
```
|
|
169
170
|
|
|
170
|
-
##### Dropdown
|
|
171
|
+
##### Dropdown with submenu
|
|
171
172
|
|
|
172
173
|
```jsx
|
|
173
174
|
<DropdownComponent
|
|
@@ -245,7 +246,7 @@ const DropdownDatePickerExample = () => {
|
|
|
245
246
|
);
|
|
246
247
|
};
|
|
247
248
|
|
|
248
|
-
export default
|
|
249
|
+
export default DropdownDatePickerExample;
|
|
249
250
|
```
|
|
250
251
|
|
|
251
252
|
| Property | Type | Required | Option | Default | Description |
|
|
@@ -264,6 +265,49 @@ export default ExampleUsage;
|
|
|
264
265
|
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
265
266
|
| `variant` | String | No | `input` `filter` | `input` | Determines the type of dropdown. If 'input', it will be displayed as a button. If 'filter', it will be displayed as a filter dropdown. |
|
|
266
267
|
|
|
268
|
+
### DropdownSimpleDatePicker
|
|
269
|
+
|
|
270
|
+
```jsx
|
|
271
|
+
import { DropdownDatePicker } from 'groovinads-ui';
|
|
272
|
+
import React, { useState } from 'react';
|
|
273
|
+
|
|
274
|
+
const DropdownSimpleDatePickerExample = () => {
|
|
275
|
+
const [show, setShow] = useState(false);
|
|
276
|
+
|
|
277
|
+
const [dateFrom, setDateFrom] = useState('');
|
|
278
|
+
const [dateTo, setDateTo] = useState('');
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
return (
|
|
282
|
+
<>
|
|
283
|
+
<button onClick={() => setShow(!show)}>Toggle< button>
|
|
284
|
+
<div className='col-2'>
|
|
285
|
+
<DropdownSimpleDatePicker
|
|
286
|
+
{...args}
|
|
287
|
+
dateFrom={dateFrom}
|
|
288
|
+
setDateFrom={setDateFrom}
|
|
289
|
+
date={dateTo}
|
|
290
|
+
setDate={setDateTo}
|
|
291
|
+
/>
|
|
292
|
+
</div>
|
|
293
|
+
</>
|
|
294
|
+
);
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
export default DropdownSimpleDatePickerExample;
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
| Property | Type | Required | Option | Default | Description |
|
|
301
|
+
| ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
302
|
+
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
303
|
+
| `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. |
|
|
310
|
+
|
|
267
311
|
### DropdownFilter
|
|
268
312
|
|
|
269
313
|
```jsx
|
|
@@ -481,13 +525,14 @@ import { Radio } from 'groovinads-ui';
|
|
|
481
525
|
</Radio>;
|
|
482
526
|
```
|
|
483
527
|
|
|
484
|
-
| Property | Type | Required | Options | Default | Description
|
|
485
|
-
| ----------- | -------- | -------- | -------------- | ------- |
|
|
486
|
-
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button.
|
|
487
|
-
| `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.
|
|
488
|
-
| `
|
|
489
|
-
| `
|
|
490
|
-
| `
|
|
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
|
+
| `fullWidth` | Boolean | No | n/a | `false` | If `true`, the input will take the full width of its container by adding the `w-100` class to both the container `div` and the `label`. |
|
|
533
|
+
| `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
|
|
534
|
+
| `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
|
|
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). |
|
|
491
536
|
|
|
492
537
|
### Switch
|
|
493
538
|
|