groovinads-ui 1.2.48 → 1.2.50

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.
Files changed (8) hide show
  1. package/README.md +30 -25
  2. package/dist/index.es.js +4 -4
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +99 -102
  6. package/src/components/index.js +49 -0
  7. package/src/index.js +7 -21
  8. package/src/stories/DropdownSimpleDatePicker.stories.jsx +9 -8
package/README.md CHANGED
@@ -124,7 +124,7 @@ import { Button } from 'groovinads-ui';
124
124
 
125
125
  ## Dropdowns
126
126
 
127
- ### DropdownComponent (*Deprecated*)
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 with submenu
171
+ ##### Dropdown width submenu
172
172
 
173
173
  ```jsx
174
174
  <DropdownComponent
@@ -274,9 +274,17 @@ import React, { useState } from 'react';
274
274
  const DropdownSimpleDatePickerExample = () => {
275
275
  const [show, setShow] = useState(false);
276
276
 
277
- const [dateFrom, setDateFrom] = useState('');
278
- const [dateTo, setDateTo] = useState('');
277
+ const [date, setDate] = useState('');
279
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
+ };
287
+
280
288
 
281
289
  return (
282
290
  <>
@@ -284,10 +292,9 @@ const DropdownSimpleDatePickerExample = () => {
284
292
  <div className='col-2'>
285
293
  <DropdownSimpleDatePicker
286
294
  {...args}
287
- dateFrom={dateFrom}
288
- setDateFrom={setDateFrom}
289
- date={dateTo}
290
- setDate={setDateTo}
295
+ date={date}
296
+ setDate={setDate}
297
+ handleClear={ExampleClearDate}
291
298
  />
292
299
  </div>
293
300
  </>
@@ -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
- | `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). |
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