groovinads-ui 1.2.69 → 1.2.71
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 +127 -68
- package/dist/index.es.js +3 -3
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownMultiSelect.jsx +54 -14
- package/src/components/Navigation/Sidebar.jsx +48 -22
- package/src/index.js +2 -1
- package/src/stories/DropdownMultiSelect.stories.jsx +17 -27
- package/src/stories/Sidebar.stories.jsx +31 -6
- package/version.js +8 -0
package/README.md
CHANGED
|
@@ -147,7 +147,6 @@ const DropdownComponentExample = () => {
|
|
|
147
147
|
setShow={setShow}
|
|
148
148
|
onToggle={handleToggle}
|
|
149
149
|
align='start'
|
|
150
|
-
fullWidth={true}
|
|
151
150
|
>
|
|
152
151
|
<Button
|
|
153
152
|
variant='outline'
|
|
@@ -200,7 +199,6 @@ export default DropdownComponentExample;
|
|
|
200
199
|
| `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
|
|
201
200
|
| `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
|
|
202
201
|
| `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
|
|
203
|
-
| `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. |
|
|
204
202
|
| `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations. |
|
|
205
203
|
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
|
|
206
204
|
|
|
@@ -310,9 +308,16 @@ import { DropdownMultiSelect } from 'groovinads-ui';
|
|
|
310
308
|
|
|
311
309
|
const MultiSelectComponent = () => {
|
|
312
310
|
const [selectedValues, setSelectedValues] = useState([]);
|
|
311
|
+
const [selectedValues1, setSelectedValues1] = useState([]);
|
|
312
|
+
|
|
313
313
|
const [show, setShow] = useState(false);
|
|
314
|
+
const [show1, setShow1] = useState(false);
|
|
315
|
+
|
|
316
|
+
const [errorRequired, setErrorRequired] = useState(false);
|
|
317
|
+
const [errorRequired1, setErrorRequired1] = useState(false);
|
|
314
318
|
|
|
315
319
|
const handleToggle = () => setShow((prevShow) => !prevShow);
|
|
320
|
+
const handleToggle1 = () => setShow((prevShow) => !prevShow);
|
|
316
321
|
|
|
317
322
|
const [filters] = useState([
|
|
318
323
|
{ id: 1, name: 'Filter 1', showStatus: '1' },
|
|
@@ -322,58 +327,89 @@ const MultiSelectComponent = () => {
|
|
|
322
327
|
{ id: 5, name: 'Filter 5', showStatus: '0' },
|
|
323
328
|
{ id: 6, name: 'Filter 6', showStatus: '2' },
|
|
324
329
|
]);
|
|
330
|
+
CUSTOM; /* */
|
|
331
|
+
const filters2 = [
|
|
332
|
+
{ id: 1, name: 'Filter 1', showStatus: '1', name1: 'loreal' },
|
|
333
|
+
{ id: 2, name: 'Filter 2', showStatus: '0', name1: 'jabon' },
|
|
334
|
+
{ id: 3, name: 'Filter 3', showStatus: '1', name1: 'blue' },
|
|
335
|
+
{ id: 4, name: 'Filter 4', showStatus: '0', name1: 'name' },
|
|
336
|
+
{ id: 5, name: 'Filter 5', showStatus: '0', name1: 'name' },
|
|
337
|
+
{ id: 6, name: 'Filter 6', showStatus: '2', name1: 'name' },
|
|
338
|
+
];
|
|
325
339
|
|
|
326
340
|
return (
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
341
|
+
<>
|
|
342
|
+
<DropdownMultiSelect
|
|
343
|
+
valuesSelected={selectedValues}
|
|
344
|
+
setValuesSelected={setSelectedValues}
|
|
345
|
+
values={filters}
|
|
346
|
+
show={show}
|
|
347
|
+
onToggle={handleToggle}
|
|
348
|
+
object={true}
|
|
349
|
+
nameKey='name'
|
|
350
|
+
idKey='id'
|
|
351
|
+
inputLabel='Filters'
|
|
352
|
+
focus={show}
|
|
353
|
+
buttonVariant='primary'
|
|
354
|
+
nowrap={true}
|
|
355
|
+
errorRequired={errorRequired}
|
|
356
|
+
setErrorRequiered={setErrorRequired}
|
|
357
|
+
validate={true}
|
|
358
|
+
requiredText='customizable text'
|
|
359
|
+
/>
|
|
360
|
+
{/* OPCION 1 */}
|
|
361
|
+
<DropdownMultiSelect
|
|
362
|
+
{...args}
|
|
363
|
+
values={filters1}
|
|
364
|
+
valuesSelected={selectedValues1}
|
|
365
|
+
setValuesSelected={setSelectedValues1}
|
|
366
|
+
show={show1}
|
|
367
|
+
onToggle={handleToggle1}
|
|
368
|
+
object={true}
|
|
369
|
+
nameKey='name'
|
|
370
|
+
nameKey1='name1'
|
|
371
|
+
idKey={'id'}
|
|
372
|
+
inputLabel={'Filters (array de objetos)'}
|
|
373
|
+
focus={show}
|
|
374
|
+
hasId={false}
|
|
375
|
+
errorRequired={errorRequired1}
|
|
376
|
+
setErrorRequiered={setErrorRequired1}
|
|
377
|
+
validate={true}
|
|
378
|
+
disableHash={true}
|
|
379
|
+
/>
|
|
380
|
+
</>
|
|
345
381
|
);
|
|
346
382
|
};
|
|
347
383
|
|
|
348
384
|
export default MultiSelectComponent;
|
|
349
385
|
```
|
|
350
386
|
|
|
351
|
-
| Property
|
|
352
|
-
|
|
|
387
|
+
| Property | Type | Required | Options | Default | Description |
|
|
388
|
+
| ------------------ | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
353
389
|
| `autoClose` | Boolean / String | No | `true` `false` `inside` `outside` | `false` | Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If inside, it closes when clicking an item in the list but not when clicking outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. |
|
|
354
390
|
| `buttonVariant` | String | No | `input` | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu. |
|
|
355
391
|
| `className` | String | No | n/a | n/a | Adds custom CSS properties to style the component. |
|
|
356
392
|
| `drop` | String | No | `up` `down` | n/a | Specifies the direction in which the dropdown should open. |
|
|
357
393
|
| `focus` | Boolean | No | `true` `false` | `false` | If true, the search input will be focused when the dropdown is shown. |
|
|
358
394
|
| `idInPill` | Boolean | No | `true` `false` | `false` | If true, ID will be shown in the pill component. |
|
|
359
|
-
| `idKey`
|
|
360
|
-
| `inputLabel`
|
|
361
|
-
| `nameKey`
|
|
362
|
-
| `
|
|
363
|
-
| `
|
|
364
|
-
| `
|
|
365
|
-
| `
|
|
366
|
-
| `
|
|
367
|
-
| `
|
|
368
|
-
| `
|
|
369
|
-
| `
|
|
370
|
-
| `
|
|
371
|
-
| `
|
|
372
|
-
| `
|
|
373
|
-
| `
|
|
374
|
-
| `
|
|
375
|
-
| `
|
|
376
|
-
|
|
395
|
+
| `idKey` | String | No | n/a | n/a | Defines the key used in the object to find the item’s ID, allowing for the identification and handling of selected items and other operations within the component. |
|
|
396
|
+
| `inputLabel` | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. |
|
|
397
|
+
| `nameKey` | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. |
|
|
398
|
+
| `nameKey1` | String | No | n/a | n/a | You must provide the name of a key within an object. It will allow customization of the displayed value by internally concatenating and displaying "`nameKey` - `nameKey1 ` " |
|
|
399
|
+
| `nowrap` | Boolean | No | `true` `false` | `false` | If `true`, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If `false`, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines. |
|
|
400
|
+
| `object` | Boolean | No | `true` `false` | `false` | `object` determines whether the values in values are objects (with properties `nameKey` and `idKey`) or simple values (strings or numbers). |
|
|
401
|
+
| `onToggle` | Function | No | n/a | n/a | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu. |
|
|
402
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Whether to enable overflow strategy for the dropdown. |
|
|
403
|
+
| `searchLabel` | String | No | n/a | 'Search' | Label for the search input field. |
|
|
404
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
|
|
405
|
+
| `showStatus` | String | No | n/a | String | Filter items by status if applicable. |
|
|
406
|
+
| `values` | Array | No | n/a | [ ] | Available values for selection. |
|
|
407
|
+
| `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
|
|
408
|
+
| `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
|
|
409
|
+
| `validate` | Boolean | No | `true` `false` | `false` | Enables validation (error). If true, it checks whether items have been selected from the dropdown. If false, no validation is performed. |
|
|
410
|
+
| `requiredText` | String | No | n/a | `'requiered'` | Text displayed when the field is required and triggers an error (`validate`). It can be customized. |
|
|
411
|
+
| `errorRequired` | Boolean | No | `false` `true` | `false` | Determines when the error message is displayed. Defaults to false. |
|
|
412
|
+
| `setErrorRequired ` | Function | No | n/a | n/a | Allows users to control when the error is displayed and update its state (`errorRequired`). |
|
|
377
413
|
|
|
378
414
|
### DropdownSimpleDatePicker
|
|
379
415
|
|
|
@@ -517,7 +553,7 @@ export default InputComponent;
|
|
|
517
553
|
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
|
|
518
554
|
| `label` | String | No | n/a | 'Label' | Input field that handles different `type` of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities. |
|
|
519
555
|
| `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
|
|
520
|
-
| `maxLength` | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept.
|
|
556
|
+
| `maxLength` | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept. |
|
|
521
557
|
| `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
|
|
522
558
|
| `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
|
|
523
559
|
| `onChange` | Function | No | n/a | n/a | Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state. |
|
|
@@ -610,15 +646,15 @@ const ExampleInputEmail = () => {
|
|
|
610
646
|
export default ExampleInputChip;
|
|
611
647
|
```
|
|
612
648
|
|
|
613
|
-
| Property
|
|
614
|
-
|
|
|
615
|
-
| `apiGetEmail`
|
|
616
|
-
| `apiPostEmail`
|
|
617
|
-
| `label`
|
|
618
|
-
| `showModal`
|
|
619
|
-
| `textButton`
|
|
620
|
-
| `textError`
|
|
621
|
-
| `titleList`
|
|
649
|
+
| Property | Type | Required | Options | Default | Description |
|
|
650
|
+
| -------------- | ------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
651
|
+
| `apiGetEmail` | Array | Yes | n/a | n/a | Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`. |
|
|
652
|
+
| `apiPostEmail` | String | Yes | n/a | n/a | An endpoint is required to add or remove emails from the existing email list. |
|
|
653
|
+
| `label` | String | No | n/a | '' | Allows adding custom text as the input label. |
|
|
654
|
+
| `showModal` | Boolean | No | `true` `false` | `true` | If true, the email list received from apiGetEmail will be shown when rendering InputEmail. |
|
|
655
|
+
| `textButton` | String | No | n/a | '' | Allows adding custom text to the button for adding emails. |
|
|
656
|
+
| `textError` | String | No | n/a | '' | Allows adding custom error text when entering an invalid email address. |
|
|
657
|
+
| `titleList` | String | No | n/a | '' | Allows adding a custom text that will be shown as the title of the email list. |
|
|
622
658
|
|
|
623
659
|
### Radio
|
|
624
660
|
|
|
@@ -824,13 +860,13 @@ import React from 'react';
|
|
|
824
860
|
import { Spinner } from 'groovinads-ui';
|
|
825
861
|
|
|
826
862
|
<Spinner scale={1} className='mt-3' />;
|
|
827
|
-
<Spinner scale={
|
|
863
|
+
<Spinner scale={3} className='m-5' />;
|
|
828
864
|
```
|
|
829
865
|
|
|
830
|
-
| Property | Type | Required | Options
|
|
831
|
-
| ----------- | ------ | -------- |
|
|
832
|
-
| `scale` | Number | No | `0.7` `1` `2` `3`
|
|
833
|
-
| `className` | String | No | n/a
|
|
866
|
+
| Property | Type | Required | Options | Default | Description |
|
|
867
|
+
| ----------- | ------ | -------- | ----------------- | ------- | ------------------------------------- |
|
|
868
|
+
| `scale` | Number | No | `0.7` `1` `2` `3` | `1` | Scale (size) of the spinner. |
|
|
869
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the spinner. |
|
|
834
870
|
|
|
835
871
|
### StatusIcon
|
|
836
872
|
|
|
@@ -934,6 +970,28 @@ const SidebarComponent = () => {
|
|
|
934
970
|
name: 'Nested Link Name',
|
|
935
971
|
url: '/nested-link-url',
|
|
936
972
|
],
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
name: 'Campaigns',
|
|
976
|
+
icon: 'home',
|
|
977
|
+
url: '/example-url',
|
|
978
|
+
children: [ // the section link item will be an item with expansion
|
|
979
|
+
name: 'Nested Link Name',
|
|
980
|
+
url: '/nested-link-url',
|
|
981
|
+
],
|
|
982
|
+
pendingILength: 15, // pass a number representing the length of the 'pending' ( data api)
|
|
983
|
+
pendingType: 'warning' // If pendingLength is greater than 1, the 'triangle-exclamation' icon will be displayed.
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
name: 'Reports',
|
|
987
|
+
icon: 'home',
|
|
988
|
+
url: '/example-url',
|
|
989
|
+
children: [ // the section link item will be an item with expansion
|
|
990
|
+
name: 'Nested Link Name',
|
|
991
|
+
url: '/nested-link-url',
|
|
992
|
+
],
|
|
993
|
+
pendingLength: 5,
|
|
994
|
+
pendingType: 'badge' // If pendingLength is greater than 1, a badge will be displayed indicating the number (length) of pending .
|
|
937
995
|
},
|
|
938
996
|
],
|
|
939
997
|
},
|
|
@@ -948,7 +1006,7 @@ const SidebarComponent = () => {
|
|
|
948
1006
|
onNavigate={handleNavigation}
|
|
949
1007
|
dropdownVisible={true}
|
|
950
1008
|
setGroovinProfile={setGroovinProfile}
|
|
951
|
-
selectedClient={selectedClient}
|
|
1009
|
+
selectedClient={selectedClient}Dro
|
|
952
1010
|
/>
|
|
953
1011
|
|
|
954
1012
|
{/* Example, if inModal={true} */}
|
|
@@ -999,18 +1057,19 @@ export default SidebarComponent;
|
|
|
999
1057
|
|
|
1000
1058
|
```
|
|
1001
1059
|
|
|
1002
|
-
| Property
|
|
1003
|
-
|
|
|
1004
|
-
| `api`
|
|
1005
|
-
| `customLinks`
|
|
1006
|
-
| `defaultOpened`
|
|
1007
|
-
| `onNavigate`
|
|
1008
|
-
| `show`
|
|
1009
|
-
| `showClients`
|
|
1010
|
-
| `setGroovinProfile`
|
|
1011
|
-
| `selectedClient`
|
|
1012
|
-
| `inModal`
|
|
1013
|
-
| `customURL`
|
|
1060
|
+
| Property | Type | Required | Options | Default | Description |
|
|
1061
|
+
| ---------------------- | -------------------- | -------- | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1062
|
+
| `api` | String | No | n/a | n/a | It is the `url` corresponding to your `api`. From which you will receive the data, which will be used in the non-custom section. |
|
|
1063
|
+
| `customLinks` | Array | Yes | n/a | n/a | Creates the sections of the component based on the array of objects it receives. `title` names each section, and `links` is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the `api` property, the object must contain the property `backData={true}`. |
|
|
1064
|
+
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
1065
|
+
| `onNavigate` | Function | Yes | n/a | n/a | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation. |
|
|
1066
|
+
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden. |
|
|
1067
|
+
| `showClients` | Boolean String | No | `true` `false` `single` | `false` | Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client. |
|
|
1068
|
+
| `setGroovinProfile` | Function | No | n/a | n/a | Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
|
|
1069
|
+
| `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
|
|
1070
|
+
| `inModal` | Boolean | No | `true` `false` | `false` | If inModal is true, it will adjust the Sidebar based on the size of its parent container, allowing flexibility in a specific context, for example, a modal or a different layout. If false, its behavior will depend on the screen size. |
|
|
1071
|
+
| `customURL` | `string` `undefined` | No | `string` `undefined` | `undefined` | Allows you to define a custom URL. You can provide a specific URL or a value representing a selected item in the Sidebar. If not defined, its value will be `undefined` (and window.location.pathname will be used as the default). |
|
|
1072
|
+
| `pendingIndicatorType` | `string` | No | `warning` `badge` | n/a | If the value is 'warning', an icon (triangle-exclamation) will be displayed. If the value is 'badge', a number (badge) will be shown. For this functionality, you need to add a key in `customLinks.links` named `pendingIndicatorNumber`, which expects a number representing the length (if greater than `1`, the warning icon or badge will be shown; otherwise, nothing will be displayed). |
|
|
1014
1073
|
|
|
1015
1074
|
### Stepper
|
|
1016
1075
|
|