groovinads-ui 1.2.55 → 1.2.58
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 +179 -76
- package/dist/index.es.js +3 -3
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/components/Button/Button.jsx +13 -25
- package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +135 -137
- package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx +6 -6
- package/src/components/Inputs/InputChip.jsx +149 -0
- package/src/components/Inputs/index.js +2 -1
- package/src/stories/Button.stories.jsx +16 -4
- package/src/stories/DropdownDatePicker.stories.jsx +19 -2
- package/src/stories/DropdownSimpleDatePicker.stories.jsx +22 -19
- package/src/stories/InputChip.stories.jsx +46 -0
- package/src/stories/PillComponent.stories.jsx +4 -1
package/README.md
CHANGED
|
@@ -23,7 +23,7 @@ The library includes the following components:
|
|
|
23
23
|
- [DropdownDatePicker](#dropdowndatepicker): For filter dropdowns.
|
|
24
24
|
- [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
|
|
25
25
|
- [DropdownFilter](#dropdownfilter): For filter dropdowns.
|
|
26
|
-
- [DropdownMultiSelect](#dropdownmultiselect): For
|
|
26
|
+
- [DropdownMultiSelect](#dropdownmultiselect): For dynamically managing and displaying keywords.
|
|
27
27
|
|
|
28
28
|
- [Inputs](#inputs):
|
|
29
29
|
|
|
@@ -32,6 +32,7 @@ The library includes the following components:
|
|
|
32
32
|
- [Radio](#radio): For exclusive selections.
|
|
33
33
|
- [Switch](#switch): For toggle states.
|
|
34
34
|
- [Textarea](#textarea): For multiline text input.
|
|
35
|
+
- [InputChip](#inputChip): For dynamically managing and displaying keywords.
|
|
35
36
|
|
|
36
37
|
- [Labels](#labels):
|
|
37
38
|
|
|
@@ -115,12 +116,13 @@ import { Button } from 'groovinads-ui';
|
|
|
115
116
|
| `children` | Node | No | n/a | n/a | If true, children will be displayed alongside the spinner with '...' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components. |
|
|
116
117
|
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
|
|
117
118
|
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the button. |
|
|
118
|
-
| `iconPosition` | String | No | `start` `end`
|
|
119
|
+
| `iconPosition` | String | No | `start` `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
|
|
119
120
|
| `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
|
|
120
121
|
| `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (...) with a spinner. If false, it will not be displayed. |
|
|
121
122
|
| `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
|
|
122
123
|
| `style` | String | No | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. |
|
|
123
124
|
| `variant` | String | No | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
|
|
125
|
+
| `disabled` | Boolean | No | `true` `false` | `false` | If true, disables the button. If false, the button is enabled. |
|
|
124
126
|
|
|
125
127
|
## Dropdowns
|
|
126
128
|
|
|
@@ -195,16 +197,16 @@ export default DropdownComponentExample;
|
|
|
195
197
|
</DropdownComponent>
|
|
196
198
|
```
|
|
197
199
|
|
|
198
|
-
| Property | Type
|
|
199
|
-
| ----------- |
|
|
200
|
-
| `align` | String
|
|
201
|
-
| `autoClose` | Boolean / String
|
|
202
|
-
| `children` | Node
|
|
203
|
-
| `className` | String
|
|
204
|
-
| `drop` | String
|
|
205
|
-
| `fullWidth` | Boolean
|
|
206
|
-
| `overflow` | Boolean
|
|
207
|
-
| `show` | Boolean
|
|
200
|
+
| Property | Type | Required | Options | Default | Description |
|
|
201
|
+
| ----------- | ---------------- | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
202
|
+
| `align` | String | No | `start` `end` | `start` | Determines the alignment of the dropdown menu relative to the toggle. If `start`, the dropdown menu will align with the start of the toggle. If `end`, the dropdown menu will align with the end of the toggle. |
|
|
203
|
+
| `autoClose` | Boolean / String | No | `true` `false` `outside` `inside` | false | Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on the outside click. |
|
|
204
|
+
| `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
|
|
205
|
+
| `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
|
|
206
|
+
| `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
|
|
207
|
+
| `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. |
|
|
208
|
+
| `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations. |
|
|
209
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
|
|
208
210
|
|
|
209
211
|
### DropdownDatePicker
|
|
210
212
|
|
|
@@ -241,6 +243,8 @@ const DropdownDatePickerExample = () => {
|
|
|
241
243
|
setDateFrom={setDateFrom}
|
|
242
244
|
dateTo={dateTo}
|
|
243
245
|
setDateTo={setDateTo}
|
|
246
|
+
minDate={new Date('2025-01-01')}
|
|
247
|
+
maxDate={new Date('2025-01-31')}
|
|
244
248
|
/>
|
|
245
249
|
</div>
|
|
246
250
|
);
|
|
@@ -264,6 +268,8 @@ export default DropdownDatePickerExample;
|
|
|
264
268
|
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
265
269
|
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
266
270
|
| `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. |
|
|
271
|
+
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
272
|
+
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
267
273
|
|
|
268
274
|
### DropdownSimpleDatePicker
|
|
269
275
|
|
|
@@ -295,6 +301,8 @@ const DropdownSimpleDatePickerExample = () => {
|
|
|
295
301
|
date={date}
|
|
296
302
|
setDate={setDate}
|
|
297
303
|
handleClear={ExampleClearDate}
|
|
304
|
+
minDate={new Date('2025-01-01')}
|
|
305
|
+
maxDate={new Date('2025-01-31')}
|
|
298
306
|
/>
|
|
299
307
|
</div>
|
|
300
308
|
</button>
|
|
@@ -304,17 +312,19 @@ const DropdownSimpleDatePickerExample = () => {
|
|
|
304
312
|
export default DropdownSimpleDatePickerExample;
|
|
305
313
|
```
|
|
306
314
|
|
|
307
|
-
| Property
|
|
308
|
-
|
|
|
309
|
-
| `className`
|
|
310
|
-
| `show`
|
|
311
|
-
| `setShow`
|
|
312
|
-
| `onToggle`
|
|
313
|
-
| `inputLabel`
|
|
314
|
-
| `overflow`
|
|
315
|
-
| `date`
|
|
316
|
-
| `setDate`
|
|
317
|
-
| `handleClear`
|
|
315
|
+
| Property | Type | Required | Option | Default | Description |
|
|
316
|
+
| ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
317
|
+
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
318
|
+
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
319
|
+
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
320
|
+
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
|
|
321
|
+
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
|
|
322
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
|
|
323
|
+
| `date` | String | No | n/a | `null` | Selected date. |
|
|
324
|
+
| `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
|
|
325
|
+
| `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. |
|
|
326
|
+
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
327
|
+
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
318
328
|
|
|
319
329
|
### DropdownFilter
|
|
320
330
|
|
|
@@ -501,8 +511,8 @@ export default InputComponent;
|
|
|
501
511
|
| `helpText` | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
|
|
502
512
|
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
|
|
503
513
|
| `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. |
|
|
504
|
-
| `max`
|
|
505
|
-
| `min`
|
|
514
|
+
| `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
|
|
515
|
+
| `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
|
|
506
516
|
| `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
|
|
507
517
|
| `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. |
|
|
508
518
|
| `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
|
|
@@ -514,6 +524,58 @@ export default InputComponent;
|
|
|
514
524
|
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
515
525
|
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
516
526
|
|
|
527
|
+
### inputChip
|
|
528
|
+
```jsx
|
|
529
|
+
import React, { useState } from 'react';
|
|
530
|
+
import { InputChip } from 'groovinads-ui';
|
|
531
|
+
|
|
532
|
+
const ExampleIputChip = () => (
|
|
533
|
+
const [ keywordsList, setKeywordsList] = useState(['keyword1', 'keyword2', 'keyword3']);
|
|
534
|
+
const nonRecomendedKeywords = ['keyword4', 'keyword5'];
|
|
535
|
+
<>
|
|
536
|
+
{/* RECEIVES KEYWORDS INITIALLY */}
|
|
537
|
+
<InputChip
|
|
538
|
+
className={'mb-3'}
|
|
539
|
+
placeholder={'Add keywords…'}
|
|
540
|
+
keywordsList={keywordsList}
|
|
541
|
+
setKeywordsList={setKeywordsList}
|
|
542
|
+
nonRecomendedKeywords={nonRecomendedKeywords}
|
|
543
|
+
counter={true}
|
|
544
|
+
maxKeywordLength={10}
|
|
545
|
+
recomendedKeywords={5}
|
|
546
|
+
maxKeywords={15}
|
|
547
|
+
requiredText='You can only add up to 15 keywords.'
|
|
548
|
+
/>
|
|
549
|
+
|
|
550
|
+
{/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
|
|
551
|
+
<InputChip
|
|
552
|
+
placeholder={'Add keywords…'}
|
|
553
|
+
keywordsList={keywordList2}
|
|
554
|
+
setKeywordsList={setKeywordsList2}
|
|
555
|
+
nonRecomendedKeywords={nonRecomendedKeywords}
|
|
556
|
+
maxKeywordLength={10}
|
|
557
|
+
maxKeywords={15}
|
|
558
|
+
requiredText='You can only add up to 15 keywords.'
|
|
559
|
+
counter={true}
|
|
560
|
+
/>
|
|
561
|
+
</>
|
|
562
|
+
);
|
|
563
|
+
|
|
564
|
+
export default ExampleInputChip;
|
|
565
|
+
|
|
566
|
+
```
|
|
567
|
+
Property | Type | Required | Options | Default | Description |
|
|
568
|
+
| ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
569
|
+
| ` className ` | String | No | n/a | n/a | Additional CSS class names that can be applied to the inputChip. |
|
|
570
|
+
|` placeholder ` | String | Yes | n/a | n/a | Displays a suggested or descriptive text inside the input field before the user types. |
|
|
571
|
+
| ` keywordsList ` | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. |
|
|
572
|
+
| ` setKeywordsList `| String | Yes | n/a | n/a | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop. |
|
|
573
|
+
| ` counter ` | Boolean | No | n/a | false | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it. |
|
|
574
|
+
| ` nonRecomendedKeywords `| Number | No | n/a | n/a | This property expects an array of non-recommended keywords. When the user enters a word from this array in the input field, the pill for that keyword will appear in 'danger' color. |
|
|
575
|
+
| ` recomendedKeywords `| Number | No | n/a | n/a | Specifies the recommended number of keywords. When the keywords list (` keywordsList `) reaches the recommended number, the counter's status will change to the 'warning' color. |
|
|
576
|
+
| ` maxKeywords ` | Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
|
|
577
|
+
| `requiredText` | String | Yes | n/a | n/a | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords. |
|
|
578
|
+
|
|
517
579
|
### Radio
|
|
518
580
|
|
|
519
581
|
```jsx
|
|
@@ -557,7 +619,7 @@ import { Switch } from 'groovinads-ui';
|
|
|
557
619
|
|
|
558
620
|
| Property | Type | Required | Options | Default | Description |
|
|
559
621
|
| ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
560
|
-
| `className` | String | No | n/a |
|
|
622
|
+
| `className` | String | No | n/a | ' ' | Additional CSS class names that can be applied to the switch. |
|
|
561
623
|
| `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
|
|
562
624
|
| `id` | String | No | n/a | n/a | It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children. |
|
|
563
625
|
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|
|
@@ -801,67 +863,110 @@ import { useNavigate } from 'react-router-dom';
|
|
|
801
863
|
|
|
802
864
|
const SidebarComponent = () => {
|
|
803
865
|
const [show, setShow] = useState(false);
|
|
866
|
+
const [selectedIndex, setSelectedIndex] = useState('0'); // use for change the customUrl value
|
|
804
867
|
|
|
805
868
|
const navigate = useNavigate();
|
|
806
869
|
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
870
|
+
const handleNavigation = (url) => {
|
|
871
|
+
navigate(url);
|
|
872
|
+
console.log("Cliente seleccionado:", client);
|
|
873
|
+
};
|
|
811
874
|
|
|
812
875
|
return (
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
876
|
+
<div>
|
|
877
|
+
<button onClick={() => setShowSidebar(prev => !prev)}>
|
|
878
|
+
Toggle Sidebar
|
|
879
|
+
</button>
|
|
880
|
+
<Sidebar
|
|
881
|
+
customLinks={[
|
|
882
|
+
{
|
|
883
|
+
title: 'sectionTitle',
|
|
884
|
+
links: [
|
|
885
|
+
{
|
|
886
|
+
name: 'Home',
|
|
887
|
+
icon: 'home',
|
|
888
|
+
url: '/example-url',
|
|
889
|
+
children: [ // the section link item will be an item with expansion
|
|
890
|
+
name: 'Nested Link Name',
|
|
891
|
+
url: '/nested-link-url',
|
|
892
|
+
],
|
|
893
|
+
},
|
|
894
|
+
],
|
|
895
|
+
},
|
|
896
|
+
{
|
|
897
|
+
title: 'sectionCustom2', // non-custom
|
|
898
|
+
backData: true,
|
|
899
|
+
},
|
|
900
|
+
]}
|
|
901
|
+
defaultOpened={false}
|
|
902
|
+
show={show}
|
|
903
|
+
setShow={setShow}
|
|
904
|
+
onNavigate={handleNavigation}
|
|
905
|
+
dropdownVisible={true}
|
|
906
|
+
setGroovinProfile={setGroovinProfile}
|
|
907
|
+
selectedClient={selectedClient}
|
|
908
|
+
/>
|
|
909
|
+
|
|
910
|
+
{/* Example, if inModal={true} */}
|
|
911
|
+
<Modal>
|
|
817
912
|
<Sidebar
|
|
818
913
|
customLinks={[
|
|
819
914
|
{
|
|
820
|
-
title: 'sectionTitle',
|
|
821
915
|
links: [
|
|
822
916
|
{
|
|
823
|
-
name: '
|
|
824
|
-
icon: '
|
|
825
|
-
url: '
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
917
|
+
name: 'Notifications',
|
|
918
|
+
icon: 'bell',
|
|
919
|
+
url: '0',
|
|
920
|
+
},
|
|
921
|
+
{
|
|
922
|
+
name: 'Logo',
|
|
923
|
+
icon: 'bell',
|
|
924
|
+
url: '1',
|
|
830
925
|
},
|
|
831
926
|
],
|
|
832
927
|
},
|
|
833
|
-
{
|
|
834
|
-
title: 'sectionCustom2', // non-custom
|
|
835
|
-
backData: true,
|
|
836
|
-
},
|
|
837
928
|
]}
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
929
|
+
customLinks={customLinks}
|
|
930
|
+
defaultOpened={true}
|
|
931
|
+
showClients={false}
|
|
932
|
+
inModal={true}
|
|
933
|
+
customUrl={selectedIndex}
|
|
934
|
+
onNavigate={(url) => setSelectedIndex(url)}
|
|
935
|
+
/>
|
|
936
|
+
|
|
937
|
+
{/* RENDER CONTENT */}
|
|
938
|
+
<div className="main-content px-5">
|
|
939
|
+
{selectedIndex === '0' ? (
|
|
940
|
+
<div>
|
|
941
|
+
<h2>lorem 1</h2>
|
|
942
|
+
</div>
|
|
943
|
+
) : (
|
|
944
|
+
<div>
|
|
945
|
+
<h2>lorem 2</h2>
|
|
946
|
+
</div>
|
|
947
|
+
)}
|
|
948
|
+
</div>
|
|
949
|
+
</Modal>
|
|
847
950
|
</div>
|
|
848
951
|
);
|
|
849
952
|
};
|
|
850
953
|
|
|
851
954
|
export default SidebarComponent;
|
|
955
|
+
|
|
852
956
|
```
|
|
853
|
-
| Property | Type | Required | Options | Default | Description |
|
|
854
|
-
| --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
855
|
-
| `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. |
|
|
856
|
-
| `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}`.|
|
|
857
|
-
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
858
|
-
| `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. |
|
|
859
|
-
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
860
|
-
| `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. |
|
|
861
|
-
| `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. |
|
|
862
|
-
| `setGroovinProfile` | Function | No | n/a | n/a |Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
|
|
863
|
-
| `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
|
|
864
957
|
|
|
958
|
+
| Property | Type | Required | Options | Default | Description |
|
|
959
|
+
| ------------------- | -------------------- | -------- | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
960
|
+
| `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. |
|
|
961
|
+
| `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}`. |
|
|
962
|
+
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
963
|
+
| `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. |
|
|
964
|
+
| `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. |
|
|
965
|
+
| `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. |
|
|
966
|
+
| `setGroovinProfile` | Function | No | n/a | n/a | Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
|
|
967
|
+
| `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
|
|
968
|
+
| `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. |
|
|
969
|
+
| `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). |
|
|
865
970
|
|
|
866
971
|
### Stepper
|
|
867
972
|
|
|
@@ -943,7 +1048,6 @@ const ToastExample = () => {
|
|
|
943
1048
|
const [selected, setSelected] = useState(null);
|
|
944
1049
|
|
|
945
1050
|
const pushToast = () => {
|
|
946
|
-
|
|
947
1051
|
const toast = {
|
|
948
1052
|
variant: 'info',
|
|
949
1053
|
autoClose: true,
|
|
@@ -964,16 +1068,15 @@ const ToastExample = () => {
|
|
|
964
1068
|
export default ToastExample;
|
|
965
1069
|
```
|
|
966
1070
|
|
|
967
|
-
| Property
|
|
968
|
-
| Propiedad
|
|
1071
|
+
| Property | Type | Required | Options | Default | Description |
|
|
1072
|
+
| Propiedad | Tipo | Requerido | Valores Permitidos | Valor Predeterminado | Descripción |
|
|
969
1073
|
| ----------- | ------- | --------- | ------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
970
|
-
| `position`
|
|
971
|
-
| `toast`
|
|
972
|
-
| `toast.autoClose` | Boolean | No
|
|
973
|
-
| `toast.children`
|
|
974
|
-
| `toast.className` | String
|
|
975
|
-
| `toast.variant`
|
|
976
|
-
|
|
1074
|
+
| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` | Define la posición en la pantalla donde se mostrará el toast. |
|
|
1075
|
+
| `toast` | Object | No | n/a | n/a | Objeto que contiene las propiedades del toast. |
|
|
1076
|
+
| `toast.autoClose` | Boolean | No | `true` `false` | `true` | Si es `true`, se cierra automáticamente después de un cierto tiempo. Si es `false`, permanece en la pantalla hasta que el usuario lo cierre manualmente. |
|
|
1077
|
+
| `toast.children` | Node | No | n/a | n/a | Contenido personalizado dentro del toast. |
|
|
1078
|
+
| `toast.className` | String | No | n/a | n/a | Nombre de clase personalizado para el toast. |
|
|
1079
|
+
| `toast.variant` | String | No | `info` `success` `warning` `error` | `info` | Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje. |
|
|
977
1080
|
|
|
978
1081
|
### ToastProgress
|
|
979
1082
|
|