groovinads-ui 1.2.68 → 1.2.70
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 +134 -66
- package/dist/index.es.js +3 -3
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownMultiSelect.jsx +74 -10
- package/src/components/Inputs/Input.jsx +1 -0
- package/src/components/Inputs/InputEmail.jsx +0 -1
- package/src/components/Navigation/Dropdowns/DeckDropdown.jsx +129 -129
- package/src/components/Navigation/Navbar.jsx +4 -0
- package/src/components/Navigation/Sidebar.jsx +48 -22
- package/src/stories/DropdownMultiSelect.stories.jsx +22 -25
- package/src/stories/Navbar.stories.jsx +12 -9
- package/src/stories/Sidebar.stories.jsx +31 -6
- package/version.js +8 -0
package/README.md
CHANGED
|
@@ -99,7 +99,7 @@ import { Button } from 'groovinads-ui';
|
|
|
99
99
|
<Button
|
|
100
100
|
variant={'outline'}
|
|
101
101
|
size={'xs'}
|
|
102
|
-
|
|
102
|
+
oonClick={() => {
|
|
103
103
|
console.log('Button clicked');
|
|
104
104
|
}}
|
|
105
105
|
icon={'plus'}
|
|
@@ -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,49 +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
|
+
<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
|
+
</>
|
|
341
381
|
);
|
|
342
382
|
};
|
|
343
383
|
|
|
344
384
|
export default MultiSelectComponent;
|
|
345
385
|
```
|
|
346
386
|
|
|
347
|
-
| Property
|
|
348
|
-
|
|
|
349
|
-
| `autoClose`
|
|
350
|
-
| `buttonVariant`
|
|
351
|
-
| `className`
|
|
352
|
-
| `drop`
|
|
353
|
-
| `focus`
|
|
354
|
-
| `idInPill`
|
|
355
|
-
| `idKey`
|
|
356
|
-
| `inputLabel`
|
|
357
|
-
| `nameKey`
|
|
358
|
-
| `
|
|
359
|
-
| `
|
|
360
|
-
| `
|
|
361
|
-
| `
|
|
362
|
-
| `
|
|
363
|
-
| `
|
|
364
|
-
| `
|
|
365
|
-
| `
|
|
366
|
-
| `
|
|
367
|
-
| `
|
|
387
|
+
| Property | Type | Required | Options | Default | Description |
|
|
388
|
+
| ------------------ | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
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. |
|
|
390
|
+
| `buttonVariant` | String | No | `input` | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu. |
|
|
391
|
+
| `className` | String | No | n/a | n/a | Adds custom CSS properties to style the component. |
|
|
392
|
+
| `drop` | String | No | `up` `down` | n/a | Specifies the direction in which the dropdown should open. |
|
|
393
|
+
| `focus` | Boolean | No | `true` `false` | `false` | If true, the search input will be focused when the dropdown is shown. |
|
|
394
|
+
| `idInPill` | Boolean | No | `true` `false` | `false` | If true, ID will be shown in the pill component. |
|
|
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`). |
|
|
368
413
|
|
|
369
414
|
### DropdownSimpleDatePicker
|
|
370
415
|
|
|
@@ -508,7 +553,7 @@ export default InputComponent;
|
|
|
508
553
|
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
|
|
509
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. |
|
|
510
555
|
| `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
|
|
511
|
-
| `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. |
|
|
512
557
|
| `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
|
|
513
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. |
|
|
514
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. |
|
|
@@ -601,15 +646,15 @@ const ExampleInputEmail = () => {
|
|
|
601
646
|
export default ExampleInputChip;
|
|
602
647
|
```
|
|
603
648
|
|
|
604
|
-
| Property
|
|
605
|
-
|
|
|
606
|
-
| `apiGetEmail`
|
|
607
|
-
| `apiPostEmail`
|
|
608
|
-
| `label`
|
|
609
|
-
| `showModal`
|
|
610
|
-
| `textButton`
|
|
611
|
-
| `textError`
|
|
612
|
-
| `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. |
|
|
613
658
|
|
|
614
659
|
### Radio
|
|
615
660
|
|
|
@@ -815,13 +860,13 @@ import React from 'react';
|
|
|
815
860
|
import { Spinner } from 'groovinads-ui';
|
|
816
861
|
|
|
817
862
|
<Spinner scale={1} className='mt-3' />;
|
|
818
|
-
<Spinner scale={
|
|
863
|
+
<Spinner scale={3} className='m-5' />;
|
|
819
864
|
```
|
|
820
865
|
|
|
821
|
-
| Property | Type | Required | Options
|
|
822
|
-
| ----------- | ------ | -------- |
|
|
823
|
-
| `scale` | Number | No | `0.7` `1` `2` `3`
|
|
824
|
-
| `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. |
|
|
825
870
|
|
|
826
871
|
### StatusIcon
|
|
827
872
|
|
|
@@ -925,6 +970,28 @@ const SidebarComponent = () => {
|
|
|
925
970
|
name: 'Nested Link Name',
|
|
926
971
|
url: '/nested-link-url',
|
|
927
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 .
|
|
928
995
|
},
|
|
929
996
|
],
|
|
930
997
|
},
|
|
@@ -939,7 +1006,7 @@ const SidebarComponent = () => {
|
|
|
939
1006
|
onNavigate={handleNavigation}
|
|
940
1007
|
dropdownVisible={true}
|
|
941
1008
|
setGroovinProfile={setGroovinProfile}
|
|
942
|
-
selectedClient={selectedClient}
|
|
1009
|
+
selectedClient={selectedClient}Dro
|
|
943
1010
|
/>
|
|
944
1011
|
|
|
945
1012
|
{/* Example, if inModal={true} */}
|
|
@@ -990,18 +1057,19 @@ export default SidebarComponent;
|
|
|
990
1057
|
|
|
991
1058
|
```
|
|
992
1059
|
|
|
993
|
-
| Property
|
|
994
|
-
|
|
|
995
|
-
| `api`
|
|
996
|
-
| `customLinks`
|
|
997
|
-
| `defaultOpened`
|
|
998
|
-
| `onNavigate`
|
|
999
|
-
| `show`
|
|
1000
|
-
| `showClients`
|
|
1001
|
-
| `setGroovinProfile`
|
|
1002
|
-
| `selectedClient`
|
|
1003
|
-
| `inModal`
|
|
1004
|
-
| `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). |
|
|
1005
1073
|
|
|
1006
1074
|
### Stepper
|
|
1007
1075
|
|