groovinads-ui 1.2.45 → 1.2.47
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 +538 -518
- package/dist/index.es.js +4 -4
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownMultiSelect.jsx +5 -1
- package/src/components/Inputs/Input.jsx +8 -0
- package/src/components/Navigation/Dropdowns/DeckDropdown.jsx +2 -2
- package/src/components/Navigation/Dropdowns/DropdownClient.jsx +171 -0
- package/src/components/Navigation/Dropdowns/index.js +2 -1
- package/src/components/Navigation/Sidebar.jsx +16 -0
- package/src/index.js +0 -1
- package/src/services/components.services.js +4 -0
- package/src/services/url.path.js +2 -1
- package/src/stories/DropdownMultiSelect.stories.jsx +54 -24
- package/src/stories/Sidebar.stories.jsx +42 -1
package/README.md
CHANGED
|
@@ -14,15 +14,18 @@
|
|
|
14
14
|
The library includes the following components:
|
|
15
15
|
|
|
16
16
|
- [Buttons](#buttons):
|
|
17
|
+
|
|
17
18
|
- [Button](#button): For user actions.
|
|
18
19
|
|
|
19
20
|
- [Dropdowns](#dropdowns):
|
|
21
|
+
|
|
20
22
|
- [DropdownComponent](#dropdowncomponent): For dropdown menus.
|
|
21
23
|
- [DropdownDatePicker](#dropdowndatepicker): For filter dropdowns.
|
|
22
24
|
- [DropdownFilter](#dropdownfilter): For filter dropdowns.
|
|
23
25
|
- [DropdownMultiSelect](#dropdownmultiselect): For multi-select dropdowns.
|
|
24
26
|
|
|
25
27
|
- [Inputs](#inputs):
|
|
28
|
+
|
|
26
29
|
- [Checkbox](#checkbox): For multiple option selections.
|
|
27
30
|
- [Input](#input): For user data entry.
|
|
28
31
|
- [Radio](#radio): For exclusive selections.
|
|
@@ -30,6 +33,7 @@ The library includes the following components:
|
|
|
30
33
|
- [Textarea](#textarea): For multiline text input.
|
|
31
34
|
|
|
32
35
|
- [Labels](#labels):
|
|
36
|
+
|
|
33
37
|
- [Alert](#alert): For displaying alerts.
|
|
34
38
|
- [Icon](#icon): For displaying icons.
|
|
35
39
|
- [LoginSource](#loginsource): For show icons of login sources.
|
|
@@ -38,6 +42,7 @@ The library includes the following components:
|
|
|
38
42
|
- [StatusIcon](#statusicon): For displaying status icons.
|
|
39
43
|
|
|
40
44
|
- [Navigation](#navigation):
|
|
45
|
+
|
|
41
46
|
- [Navbar](#navbar): For top navigation bars.
|
|
42
47
|
- [Sidebar](#sidebar): For side navigation bars.
|
|
43
48
|
- [Stepper](#stepper): For step-by-step navigation.
|
|
@@ -47,7 +52,6 @@ The library includes the following components:
|
|
|
47
52
|
- [ToastComponent](#toastcomponent): For displaying notifications.
|
|
48
53
|
- [ToastProgress](#toastprogress): For displaying progress notifications.
|
|
49
54
|
|
|
50
|
-
|
|
51
55
|
# Requirements
|
|
52
56
|
|
|
53
57
|
- The component styles must be included from: `https://ui.groovinads.com/styles.min.css`.
|
|
@@ -62,10 +66,10 @@ Instead, they should be included in the `index.html` file of your project. This
|
|
|
62
66
|
```html
|
|
63
67
|
<!-- Example of how to include additional CSS styles in index.html -->
|
|
64
68
|
<head>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
<!-- Other CSS files -->
|
|
70
|
+
<link rel="stylesheet" href="https://example.com/external-library.css" />
|
|
71
|
+
<!-- Groovinads CSS file, ensure it is the last to be loaded -->
|
|
72
|
+
<link rel="stylesheet" href="https://ui.groovinads.com/styles.min.css" />
|
|
69
73
|
</head>
|
|
70
74
|
```
|
|
71
75
|
|
|
@@ -82,6 +86,7 @@ yarn add groovinads-ui
|
|
|
82
86
|
Here are examples of how to use the components included in the Groovinads UI library:
|
|
83
87
|
|
|
84
88
|
## Buttons
|
|
89
|
+
|
|
85
90
|
### Button
|
|
86
91
|
|
|
87
92
|
```jsx
|
|
@@ -89,34 +94,35 @@ import React from 'react';
|
|
|
89
94
|
import { Button } from 'groovinads-ui';
|
|
90
95
|
|
|
91
96
|
<Button
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
variant={'outline'}
|
|
98
|
+
size={'xs'}
|
|
99
|
+
onClick={() => {
|
|
100
|
+
console.log('Button clicked');
|
|
101
|
+
}}
|
|
102
|
+
icon={'plus'}
|
|
103
|
+
iconPosition={'end'}
|
|
104
|
+
style={'warning'}
|
|
105
|
+
className={'mb-5'}
|
|
106
|
+
processing={true}
|
|
102
107
|
>
|
|
103
|
-
|
|
104
|
-
</Button
|
|
108
|
+
Let's groove!
|
|
109
|
+
</Button>;
|
|
105
110
|
```
|
|
106
111
|
|
|
107
|
-
| Property
|
|
108
|
-
|
|
|
109
|
-
| `children`
|
|
110
|
-
| `className`
|
|
111
|
-
| `icon`
|
|
112
|
-
| `iconPosition`
|
|
113
|
-
| `onClick`
|
|
114
|
-
| `processing`
|
|
115
|
-
| `size`
|
|
116
|
-
| `style`
|
|
117
|
-
| `variant`
|
|
112
|
+
| Property | Type | Required | Options | Default | Description |
|
|
113
|
+
| -------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
114
|
+
| `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. |
|
|
115
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
|
|
116
|
+
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the button. |
|
|
117
|
+
| `iconPosition` | String | No | `start` `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
|
|
118
|
+
| `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
|
|
119
|
+
| `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (...) with a spinner. If false, it will not be displayed. |
|
|
120
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
|
|
121
|
+
| `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. |
|
|
122
|
+
| `variant` | String | No | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
|
|
118
123
|
|
|
119
124
|
## Dropdowns
|
|
125
|
+
|
|
120
126
|
### DropdownComponent
|
|
121
127
|
|
|
122
128
|
```jsx
|
|
@@ -161,75 +167,102 @@ const DropdownComponentExample = () => {
|
|
|
161
167
|
export default DropdownComponentExample;
|
|
162
168
|
```
|
|
163
169
|
|
|
164
|
-
|
|
165
|
-
|
|
170
|
+
##### Dropdown width submenu
|
|
171
|
+
|
|
172
|
+
```jsx
|
|
173
|
+
<DropdownComponent
|
|
174
|
+
{...args}
|
|
175
|
+
show={show}
|
|
176
|
+
setShow={setShow}
|
|
177
|
+
autoClose={'outside'}
|
|
178
|
+
>
|
|
179
|
+
<DropdownToggle onClick={() => handleToggle()}>Toggle</DropdownToggle>
|
|
180
|
+
<DropdownMenu>
|
|
181
|
+
<DropdownItem>
|
|
182
|
+
<DropdownComponent {...args} autoClose={'outside'} drop={'end'}>
|
|
183
|
+
<DropdownToggle as={'div'}>Toggle</DropdownToggle>
|
|
184
|
+
<DropdownMenu>
|
|
185
|
+
<DropdownItem>Item 1</DropdownItem>
|
|
186
|
+
<DropdownItem>Item 2</DropdownItem>
|
|
187
|
+
<DropdownItem>Item 3</DropdownItem>
|
|
188
|
+
</DropdownMenu>
|
|
189
|
+
</DropdownComponent>
|
|
190
|
+
</DropdownItem>
|
|
191
|
+
<DropdownItem>Item 2</DropdownItem>
|
|
192
|
+
<DropdownItem>Item 3</DropdownItem>
|
|
193
|
+
</DropdownMenu>
|
|
194
|
+
</DropdownComponent>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
| Property | Type | Required | Options | Default | Description |
|
|
198
|
+
| ----------- | ------------------ | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
166
199
|
| `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. |
|
|
167
|
-
| `autoClose` |
|
|
168
|
-
| `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown.
|
|
169
|
-
| `className` | String | No | n/a | string | Adds a custom CSS class to the component.names.
|
|
170
|
-
| `drop` | String | No | `up` `down`
|
|
171
|
-
| `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container.
|
|
172
|
-
| `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations.
|
|
173
|
-
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden.
|
|
200
|
+
| `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. |
|
|
201
|
+
| `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
|
|
202
|
+
| `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
|
|
203
|
+
| `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
|
|
204
|
+
| `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. |
|
|
205
|
+
| `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations. |
|
|
206
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
|
|
174
207
|
|
|
175
208
|
### DropdownDatePicker
|
|
176
209
|
|
|
177
210
|
```jsx
|
|
178
|
-
import {DropdownDatePicker} from 'groovinads-ui';
|
|
211
|
+
import { DropdownDatePicker } from 'groovinads-ui';
|
|
179
212
|
import React, { useState } from 'react';
|
|
180
213
|
|
|
181
|
-
const DropdownDatePickerExample= () => {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
214
|
+
const DropdownDatePickerExample = () => {
|
|
215
|
+
const [show, setShow] = useState(false);
|
|
216
|
+
const [dateFrom, setDateFrom] = useState(null);
|
|
217
|
+
const [dateTo, setDateTo] = useState(null);
|
|
218
|
+
|
|
219
|
+
const handleToggle = () => {
|
|
220
|
+
setShow((prevShow) => !prevShow);
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const handleRemoveFilter = () => {
|
|
224
|
+
setDateFrom(null);
|
|
225
|
+
setDateTo(null);
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
return (
|
|
229
|
+
<div>
|
|
230
|
+
<DropdownFilter
|
|
231
|
+
variant='filter'
|
|
232
|
+
show={show}
|
|
233
|
+
setShow={setShow}
|
|
234
|
+
onToggle={handleToggle}
|
|
235
|
+
inputLabel='Select Period'
|
|
236
|
+
locked={false}
|
|
237
|
+
overflow={true}
|
|
238
|
+
onRemoveFilter={handleRemoveFilter}
|
|
239
|
+
dateFrom={dateFrom}
|
|
240
|
+
setDateFrom={setDateFrom}
|
|
241
|
+
dateTo={dateTo}
|
|
242
|
+
setDateTo={setDateTo}
|
|
243
|
+
/>
|
|
244
|
+
</div>
|
|
245
|
+
);
|
|
213
246
|
};
|
|
214
247
|
|
|
215
248
|
export default ExampleUsage;
|
|
216
249
|
```
|
|
217
250
|
|
|
218
|
-
| Property
|
|
219
|
-
|
|
|
220
|
-
| `className`
|
|
221
|
-
| `dateFrom`
|
|
222
|
-
| `dateTo`
|
|
223
|
-
| `inputLabel`
|
|
224
|
-
| `locked`
|
|
225
|
-
| `onToggle`
|
|
226
|
-
| `onRemoveFilter`
|
|
227
|
-
| `overflow`
|
|
228
|
-
| `setDateFrom`
|
|
229
|
-
| `setDateTo`
|
|
230
|
-
| `setShow`
|
|
231
|
-
| `show`
|
|
232
|
-
| `variant`
|
|
251
|
+
| Property | Type | Required | Option | Default | Description |
|
|
252
|
+
| ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
253
|
+
| `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
|
|
254
|
+
| `dateFrom` | String | No | n/a | `null` | Start date. |
|
|
255
|
+
| `dateTo` | String | No | n/a | `null` | End date. |
|
|
256
|
+
| `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
|
|
257
|
+
| `locked` | Boolean | No | `true` `false` | `false` | Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive. |
|
|
258
|
+
| `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
|
|
259
|
+
| `onRemoveFilter` | Function | No | n/a | n/a | Remove the filter when the remove filter button is clicked. |
|
|
260
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
|
|
261
|
+
| `setDateFrom` | Function | No | n/a | n/a | Allows updating the start date of the date range. Function to update the start date of the range to be selected. |
|
|
262
|
+
| `setDateTo` | Function | No | n/a | n/a | Allows you to update the end date of the selection range. |
|
|
263
|
+
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
264
|
+
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
265
|
+
| `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. |
|
|
233
266
|
|
|
234
267
|
### DropdownFilter
|
|
235
268
|
|
|
@@ -238,33 +271,33 @@ import React from 'react';
|
|
|
238
271
|
import { DropdownFilter } from 'groovinads-ui';
|
|
239
272
|
|
|
240
273
|
<DropdownFilter
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
274
|
+
title='Filter'
|
|
275
|
+
valuesSelected={['Value1', 'Value2']}
|
|
276
|
+
setValuesSelected={(newValues) => console.log(newValues)}
|
|
277
|
+
values={['Value1', 'Value2', 'Value3']}
|
|
278
|
+
menuType='simple'
|
|
279
|
+
locked={false}
|
|
280
|
+
onRemoveFilter={() => console.log('Filter removed')}
|
|
281
|
+
show={true}
|
|
282
|
+
onToggle={(isOpen) => console.log(isOpen)}
|
|
283
|
+
overflow={false}
|
|
284
|
+
className='custom-class'
|
|
252
285
|
/>;
|
|
253
286
|
```
|
|
254
287
|
|
|
255
|
-
| Property | Type | Required | Options
|
|
256
|
-
| ------------------- | -------- | -------- |
|
|
257
|
-
| `className` | String | No | n/a
|
|
258
|
-
| `locked` | Boolean | No | `true` `false`
|
|
259
|
-
| `menuType` | String | No | `simple` `selection
|
|
260
|
-
| `onRemoveFilter` | Function | No | n/a
|
|
261
|
-
| `onToggle` |
|
|
262
|
-
| `overflow` | Boolean | No | `true` `false`
|
|
263
|
-
| `setValuesSelected` | Function | No | n/a
|
|
264
|
-
| `show` | Boolean | No | `true` `false`
|
|
265
|
-
| `title` | String | No | n/a
|
|
266
|
-
| `values` | Array | No | n/a
|
|
267
|
-
| `valuesSelected` | Array | No | n/a
|
|
288
|
+
| Property | Type | Required | Options | Default | Description |
|
|
289
|
+
| ------------------- | -------- | -------- | -------------------- | -------- | ----------------------------------------------------- |
|
|
290
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names. |
|
|
291
|
+
| `locked` | Boolean | No | `true` `false` | `false` | If true, the filter cannot be removed. |
|
|
292
|
+
| `menuType` | String | No | `simple` `selection` | `simple` | Type of dropdown menu. |
|
|
293
|
+
| `onRemoveFilter` | Function | No | n/a | n/a | Function to handle filter removal. |
|
|
294
|
+
| `onToggle` | Function | No | n/a | n/a | Function to handle toggle state changes. |
|
|
295
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Whether to enable overflow strategy for the dropdown. |
|
|
296
|
+
| `setValuesSelected` | Function | No | n/a | n/a | Function to set the selected values. |
|
|
297
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
|
|
298
|
+
| `title` | String | No | n/a | n/a | Title of the dropdown filter. |
|
|
299
|
+
| `values` | Array | No | n/a | [ ] | Available values for selection. |
|
|
300
|
+
| `valuesSelected` | Array | No | n/a | [ ] | Available values for selection. |
|
|
268
301
|
|
|
269
302
|
### DropdownMultiSelect
|
|
270
303
|
|
|
@@ -273,64 +306,65 @@ import React, { useState } from 'react';
|
|
|
273
306
|
import { DropdownMultiSelect } from 'groovinads-ui';
|
|
274
307
|
|
|
275
308
|
const MultiSelectComponent = () => {
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
309
|
+
const [selectedValues, setSelectedValues] = useState([]);
|
|
310
|
+
const [show, setShow] = useState(false);
|
|
311
|
+
|
|
312
|
+
const handleToggle = () => setShow((prevShow) => !prevShow);
|
|
313
|
+
|
|
314
|
+
const [filters] = useState([
|
|
315
|
+
{ id: 1, name: 'Filter 1', showStatus: '1' },
|
|
316
|
+
{ id: 2, name: 'Filter 2', showStatus: '0' },
|
|
317
|
+
{ id: 3, name: 'Filter 3', showStatus: '1' },
|
|
318
|
+
{ id: 4, name: 'Filter 4', showStatus: '0' },
|
|
319
|
+
{ id: 5, name: 'Filter 5', showStatus: '0' },
|
|
320
|
+
{ id: 6, name: 'Filter 6', showStatus: '2' },
|
|
321
|
+
]);
|
|
322
|
+
|
|
323
|
+
return (
|
|
324
|
+
<DropdownMultiSelect
|
|
325
|
+
valuesSelected={selectedValues}
|
|
326
|
+
setValuesSelected={setSelectedValues}
|
|
327
|
+
values={filters}
|
|
328
|
+
show={show}
|
|
329
|
+
onToggle={handleToggle}
|
|
330
|
+
object={true}
|
|
331
|
+
nameKey='name'
|
|
332
|
+
idKey='id'
|
|
333
|
+
inputLabel='Filters'
|
|
334
|
+
focus={show}
|
|
335
|
+
buttonVariant='primary'
|
|
336
|
+
nowrap={true}
|
|
337
|
+
/>
|
|
338
|
+
);
|
|
306
339
|
};
|
|
307
340
|
|
|
308
341
|
export default MultiSelectComponent;
|
|
309
342
|
```
|
|
310
343
|
|
|
311
|
-
| Property
|
|
312
|
-
|
|
|
313
|
-
| `autoClose`
|
|
314
|
-
| `buttonVariant`
|
|
315
|
-
| `className`
|
|
316
|
-
| `drop`
|
|
317
|
-
| `focus`
|
|
318
|
-
| `idInPill`
|
|
319
|
-
| `idKey`
|
|
320
|
-
| `inputLabel`
|
|
321
|
-
| `nameKey`
|
|
322
|
-
|
|
323
|
-
| `object`
|
|
324
|
-
| `onToggle`
|
|
325
|
-
| `overflow`
|
|
326
|
-
| `searchLabel`
|
|
327
|
-
| `show`
|
|
328
|
-
| `showStatus`
|
|
329
|
-
| `values`
|
|
330
|
-
| `valuesSelected`
|
|
331
|
-
|
|
344
|
+
| Property | Type | Required | Options | Default | Description |
|
|
345
|
+
| ---------------- | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
346
|
+
| `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. |
|
|
347
|
+
| `buttonVariant` | String | No | `input` | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu. |
|
|
348
|
+
| `className` | String | No | n/a | n/a | Adds custom CSS properties to style the component. |
|
|
349
|
+
| `drop` | String | No | `up` `down` | n/a | Specifies the direction in which the dropdown should open. |
|
|
350
|
+
| `focus` | Boolean | No | `true` `false` | `false` | If true, the search input will be focused when the dropdown is shown. |
|
|
351
|
+
| `idInPill` | Boolean | No | `true` `false` | `false` | If true, ID will be shown in the pill component. |
|
|
352
|
+
| `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. |
|
|
353
|
+
| `inputLabel` | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. |
|
|
354
|
+
| `nameKey` | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. |
|
|
355
|
+
| `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. |
|
|
356
|
+
| `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). |
|
|
357
|
+
| `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. |
|
|
358
|
+
| `overflow` | Boolean | No | `true` `false` | `false` | Whether to enable overflow strategy for the dropdown. |
|
|
359
|
+
| `searchLabel` | String | No | n/a | 'Search' | Label for the search input field. |
|
|
360
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
|
|
361
|
+
| `showStatus` | String | No | n/a | String | Filter items by status if applicable. |
|
|
362
|
+
| `values` | Array | No | n/a | [ ] | Available values for selection. |
|
|
363
|
+
| `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
|
|
364
|
+
| `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
|
|
332
365
|
|
|
333
366
|
## Inputs
|
|
367
|
+
|
|
334
368
|
### Checkbox
|
|
335
369
|
|
|
336
370
|
```jsx
|
|
@@ -338,19 +372,19 @@ import React, { useState } from 'react';
|
|
|
338
372
|
import { Checkbox } from 'groovinads-ui';
|
|
339
373
|
|
|
340
374
|
const CheckboxComponent = () => {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
375
|
+
const [accepted, setAccepted] = useState(false);
|
|
376
|
+
|
|
377
|
+
return (
|
|
378
|
+
<Checkbox
|
|
379
|
+
className=''
|
|
380
|
+
id='acceptTerms'
|
|
381
|
+
name='terms'
|
|
382
|
+
status={accepted}
|
|
383
|
+
setStatus={setAccepted}
|
|
384
|
+
>
|
|
385
|
+
{children}
|
|
386
|
+
</Checkbox>
|
|
387
|
+
);
|
|
354
388
|
};
|
|
355
389
|
|
|
356
390
|
export default CheckboxComponent;
|
|
@@ -372,61 +406,63 @@ import React from 'react';
|
|
|
372
406
|
import { Input } from 'groovinads-ui';
|
|
373
407
|
|
|
374
408
|
const InputComponent = () => {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
409
|
+
const handleInputChange = () => {
|
|
410
|
+
console.log('Input changed');
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
const handleShowError = (showError) => {
|
|
414
|
+
console.log(showError);
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
return (
|
|
418
|
+
<div>
|
|
419
|
+
<Input
|
|
420
|
+
className={'mb-5'}
|
|
421
|
+
helpText={'This is a text'}
|
|
422
|
+
label={'Input label'}
|
|
423
|
+
name={'input'}
|
|
424
|
+
onChange={handleInputChange}
|
|
425
|
+
requiredText={'This field is required'}
|
|
426
|
+
showError={false}
|
|
427
|
+
setShowError={handleShowError}
|
|
428
|
+
type={'text'}
|
|
429
|
+
disabled={false}
|
|
430
|
+
icon={'user'}
|
|
431
|
+
prefix={'DD/MM/YYYY'}
|
|
432
|
+
suffix={'GMT'}
|
|
433
|
+
size={'md'}
|
|
434
|
+
value={''}
|
|
435
|
+
autoFocus={false}
|
|
436
|
+
customRef={null}
|
|
437
|
+
/>
|
|
438
|
+
</div>
|
|
439
|
+
);
|
|
406
440
|
};
|
|
407
441
|
|
|
408
442
|
export default InputComponent;
|
|
409
443
|
```
|
|
410
444
|
|
|
411
|
-
| Property
|
|
412
|
-
| --------------- |
|
|
413
|
-
| `autoFocus`
|
|
414
|
-
| `className`
|
|
415
|
-
| `disabled`
|
|
416
|
-
| `focus`
|
|
417
|
-
| `helpText`
|
|
418
|
-
| `icon`
|
|
419
|
-
| `label`
|
|
420
|
-
| `
|
|
421
|
-
| `
|
|
422
|
-
| `
|
|
423
|
-
| `
|
|
424
|
-
| `
|
|
425
|
-
| `
|
|
426
|
-
| `
|
|
427
|
-
| `
|
|
428
|
-
| `
|
|
429
|
-
| `
|
|
445
|
+
| Property | Type | Required | Options | Default | Description |
|
|
446
|
+
| -------------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
447
|
+
| `autoFocus` | Boolean | No | `true` `false` | `false` | If true, automatically focuses the input when the component mounts. |
|
|
448
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the input. |
|
|
449
|
+
| `disabled` | Boolean | No | `true` `false` | `false` | If true, disables the input field. |
|
|
450
|
+
| `focus` | Boolean | No | `true` `false` | `false` | Controls whether the input field should automatically receive focus when the component is rendered. |
|
|
451
|
+
| `helpText` | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
|
|
452
|
+
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
|
|
453
|
+
| `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. |
|
|
454
|
+
| `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
|
|
455
|
+
| `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
|
|
456
|
+
| `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
|
|
457
|
+
| `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. |
|
|
458
|
+
| `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
|
|
459
|
+
| `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
|
|
460
|
+
| `setShowError` | Function | No | n/a | n/a | Function used to change the state of `showError`. |
|
|
461
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the input field. |
|
|
462
|
+
| `suffix` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
|
|
463
|
+
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
|
|
464
|
+
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
465
|
+
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
430
466
|
|
|
431
467
|
### Radio
|
|
432
468
|
|
|
@@ -435,23 +471,23 @@ import React from 'react';
|
|
|
435
471
|
import { Radio } from 'groovinads-ui';
|
|
436
472
|
|
|
437
473
|
<Radio
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
474
|
+
className={'m-5'}
|
|
475
|
+
id={'radio'}
|
|
476
|
+
name={'radio'}
|
|
477
|
+
setStatus={(status) => console.log(status)}
|
|
478
|
+
status={true}
|
|
443
479
|
>
|
|
444
|
-
|
|
480
|
+
Click me
|
|
445
481
|
</Radio>;
|
|
446
482
|
```
|
|
447
483
|
|
|
448
|
-
| Property | Type
|
|
449
|
-
| ----------- |
|
|
450
|
-
| `className` | String
|
|
451
|
-
| `id` | String
|
|
452
|
-
| `name` | String
|
|
453
|
-
| `setStatus` | Function
|
|
454
|
-
| `status` | Boolean
|
|
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
|
+
| `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
|
|
489
|
+
| `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
|
|
490
|
+
| `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). |
|
|
455
491
|
|
|
456
492
|
### Switch
|
|
457
493
|
|
|
@@ -460,25 +496,24 @@ import React from 'react';
|
|
|
460
496
|
import { Switch } from 'groovinads-ui';
|
|
461
497
|
|
|
462
498
|
<Switch
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
499
|
+
className={'mb-5'}
|
|
500
|
+
name={'switch'}
|
|
501
|
+
setStatus={(status) => console.log(status)}
|
|
502
|
+
status={0}
|
|
467
503
|
>
|
|
468
|
-
|
|
504
|
+
This is a switch
|
|
469
505
|
</Switch>;
|
|
470
506
|
```
|
|
471
507
|
|
|
472
|
-
| Property
|
|
473
|
-
|
|
|
474
|
-
| `className`
|
|
475
|
-
| `icon`
|
|
476
|
-
| `id`
|
|
477
|
-
| `name`
|
|
478
|
-
| `setStatus`
|
|
479
|
-
| `status`
|
|
480
|
-
| `switchPosition`
|
|
481
|
-
|
|
508
|
+
| Property | Type | Required | Options | Default | Description |
|
|
509
|
+
| ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
510
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the switch. |
|
|
511
|
+
| `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
|
|
512
|
+
| `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. |
|
|
513
|
+
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|
|
514
|
+
| `setStatus` | Function | No | n/a | n/a | Function to set the `status` of the switch. This is a handler function typically used for state management. |
|
|
515
|
+
| `status` | Number / Boolean | No | `0` `1` | `0` | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). |
|
|
516
|
+
| `switchPosition` | String | No | `start` `end` | `start` | Determines the position of the switch relative to the label. |
|
|
482
517
|
|
|
483
518
|
### Textarea
|
|
484
519
|
|
|
@@ -487,30 +522,30 @@ import React from 'react';
|
|
|
487
522
|
import { Textarea } from 'groovinads-ui';
|
|
488
523
|
|
|
489
524
|
<Textarea
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
525
|
+
className={'mt-2'}
|
|
526
|
+
helpText={'This is a help text'}
|
|
527
|
+
label={'label'}
|
|
528
|
+
name={'textarea'}
|
|
529
|
+
requiredText={'This field is required'}
|
|
530
|
+
setShowError={(showError) => console.log(showError)}
|
|
531
|
+
/>;
|
|
497
532
|
```
|
|
498
533
|
|
|
499
|
-
| Property
|
|
500
|
-
|
|
|
501
|
-
| `className`
|
|
502
|
-
| `helpText`
|
|
503
|
-
| `label`
|
|
504
|
-
| `name`
|
|
505
|
-
| `onChange`
|
|
506
|
-
| `requiredText`
|
|
507
|
-
| `setShowError`
|
|
508
|
-
| `showError`
|
|
509
|
-
| `size`
|
|
510
|
-
| `value`
|
|
511
|
-
|
|
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 textarea. |
|
|
537
|
+
| `helpText` | String | No | n/a | n/a | Optional text under the textarea to guide the user or provide additional help information. |
|
|
538
|
+
| `label` | String | No | n/a | 'Label' | Text label for the textarea field. |
|
|
539
|
+
| `name` | String | No | n/a | n/a | Attribute of the textarea. Used to identify the form data after it's submitted. |
|
|
540
|
+
| `onChange` | Function | No | n/a | n/a | Function to handle changes to the textarea's value. Typically used to update state. |
|
|
541
|
+
| `requiredText` | String | No | n/a | n/a | Text displayed when textarea validation fails, used to indicate an error. |
|
|
542
|
+
| `setShowError` | Function | No | n/a | n/a | Function to set the visibility of the error message. |
|
|
543
|
+
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed controlled by `setShowError`. |
|
|
544
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the textarea field. |
|
|
545
|
+
| `value` | String | No | n/a | n/a | The value of the textarea. |
|
|
512
546
|
|
|
513
547
|
## Labels
|
|
548
|
+
|
|
514
549
|
### Alert
|
|
515
550
|
|
|
516
551
|
```jsx
|
|
@@ -518,38 +553,35 @@ import React from 'react';
|
|
|
518
553
|
import { Alert } from 'groovinads-ui';
|
|
519
554
|
|
|
520
555
|
const ExampleAlert = () => (
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
onClose={() => console.log('Alert closed')}
|
|
537
|
-
/>
|
|
538
|
-
</div>
|
|
556
|
+
<div>
|
|
557
|
+
<Alert
|
|
558
|
+
icon={true}
|
|
559
|
+
animation={false}
|
|
560
|
+
type='info'
|
|
561
|
+
size='md'
|
|
562
|
+
onClose={null}
|
|
563
|
+
className='mt-4'
|
|
564
|
+
>
|
|
565
|
+
{/* Children content goes here */}
|
|
566
|
+
This is an alert component
|
|
567
|
+
</Alert>
|
|
568
|
+
|
|
569
|
+
<Alert type='info' onClose={() => console.log('Alert closed')} />
|
|
570
|
+
</div>
|
|
539
571
|
);
|
|
540
572
|
|
|
541
573
|
export default ExampleAlert;
|
|
542
574
|
```
|
|
543
575
|
|
|
544
|
-
| Property | Type
|
|
545
|
-
| ----------- |
|
|
546
|
-
| `animation` | Boolean
|
|
547
|
-
| `children` | Node
|
|
548
|
-
| `className` | String
|
|
549
|
-
| `icon` | Boolean
|
|
550
|
-
| `onClose` | Function
|
|
551
|
-
| `size` | String
|
|
552
|
-
| `type` | String
|
|
576
|
+
| Property | Type | Required | Options | Default | Description |
|
|
577
|
+
| ----------- | -------- | -------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
578
|
+
| `animation` | Boolean | No | `true` `false` | `false` | If true, adds animation effects to the alert. If false, does not add any effects. |
|
|
579
|
+
| `children` | Node | Yes | n/a | n/a | Content inside the alert. |
|
|
580
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the alert. |
|
|
581
|
+
| `icon` | Boolean | No | `true` `false` | `true` | If true, displays an icon in the alert. The icon can vary depending on the alert `type` and settings. If false, no icon is displayed in the alert. |
|
|
582
|
+
| `onClose` | Function | No | n/a | `null` | By default, `onClose` is `null`. You can provide a function for this property, which allows you to perform additional actions when the alert is closed. |
|
|
583
|
+
| `size` | String | No | `xs` `md` `lg` `md` | `info` | Size of the alert. |
|
|
584
|
+
| `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
|
|
553
585
|
|
|
554
586
|
### Icon
|
|
555
587
|
|
|
@@ -558,22 +590,21 @@ import React from 'react';
|
|
|
558
590
|
import { Icon } from 'groovinads-ui';
|
|
559
591
|
|
|
560
592
|
<Icon
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
593
|
+
style='solid'
|
|
594
|
+
scale={1}
|
|
595
|
+
iconName='location-dot'
|
|
596
|
+
className=''
|
|
597
|
+
animation=''
|
|
598
|
+
/>;
|
|
567
599
|
```
|
|
568
600
|
|
|
569
|
-
| Property | Type | Required | Options
|
|
570
|
-
| ----------- | ------ | -------- |
|
|
571
|
-
| `animation` | String | No | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse`
|
|
572
|
-
| `className` | String | No | n/a
|
|
573
|
-
| `iconName` | String | No | n/a
|
|
574
|
-
| `scale` | Number | No | `0.7`, `1`, `2`, `3`, `4`
|
|
575
|
-
| `style` | String | No | `light` `solid` `regular` `thin` `duotone` `sharp`
|
|
576
|
-
|
|
601
|
+
| Property | Type | Required | Options | Default | Description |
|
|
602
|
+
| ----------- | ------ | -------- | ----------------------------------------------------------------------- | -------------------- | ---------------------------------- |
|
|
603
|
+
| `animation` | String | No | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` | String | Animation for the icon. |
|
|
604
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the icon. |
|
|
605
|
+
| `iconName` | String | No | n/a | `user-bounty-hunter` | Name of the icon. |
|
|
606
|
+
| `scale` | Number | No | `0.7`, `1`, `2`, `3`, `4` | `1` | Scale of the icon. |
|
|
607
|
+
| `style` | String | No | `light` `solid` `regular` `thin` `duotone` `sharp` | `solid` | Style of the icon. |
|
|
577
608
|
|
|
578
609
|
### LoginSource
|
|
579
610
|
|
|
@@ -584,10 +615,9 @@ import { LoginSource } from 'groovinads-ui';
|
|
|
584
615
|
<LoginSource logo={'groovinads'} />;
|
|
585
616
|
```
|
|
586
617
|
|
|
587
|
-
| Property
|
|
588
|
-
|
|
|
589
|
-
| `logo`
|
|
590
|
-
|
|
618
|
+
| Property | Type | Required | Options | Default | Description |
|
|
619
|
+
| -------- | ------ | -------- | -------------------------------------------- | ------------ | -------------------------------------------------------------- |
|
|
620
|
+
| `logo` | String | No | `groovinads` `google` `microsoft` `linkedin` | `groovinads` | Specifies the logo to be displayed on the login source button. |
|
|
591
621
|
|
|
592
622
|
### PillComponent
|
|
593
623
|
|
|
@@ -596,43 +626,40 @@ import React, { useState } from 'react';
|
|
|
596
626
|
import { PillComponent } from 'groovinads-ui';
|
|
597
627
|
|
|
598
628
|
const PillComponentExample = () => {
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
</PillComponent>
|
|
622
|
-
</div>
|
|
623
|
-
);
|
|
629
|
+
const [showPill, setShowPill] = useState(true);
|
|
630
|
+
|
|
631
|
+
const handleClosePill = () => {
|
|
632
|
+
setShowPill(false);
|
|
633
|
+
};
|
|
634
|
+
|
|
635
|
+
return (
|
|
636
|
+
<div>
|
|
637
|
+
<PillComponent className='mt-3' color='blue'>
|
|
638
|
+
Blue normal Pill
|
|
639
|
+
</PillComponent>
|
|
640
|
+
|
|
641
|
+
<PillComponent
|
|
642
|
+
classNeme='mt-3'
|
|
643
|
+
color='red'
|
|
644
|
+
closeButton={true}
|
|
645
|
+
onClick={handleClosePill}
|
|
646
|
+
>
|
|
647
|
+
Red Pill with Close Button
|
|
648
|
+
</PillComponent>
|
|
649
|
+
</div>
|
|
650
|
+
);
|
|
624
651
|
};
|
|
625
652
|
|
|
626
653
|
export default PillComponentExample;
|
|
627
654
|
```
|
|
628
655
|
|
|
629
|
-
| Property | Type
|
|
630
|
-
| ------------- |
|
|
631
|
-
| `children` | Node
|
|
632
|
-
| `className` | String
|
|
633
|
-
| `closeButton` | Boolean
|
|
634
|
-
| `color` | String
|
|
635
|
-
| `onClick` | Function
|
|
656
|
+
| Property | Type | Required | Options | Default | Description |
|
|
657
|
+
| ------------- | -------- | -------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
658
|
+
| `children` | Node | No | n/a | n/a | Content to be displayed inside the pill component. |
|
|
659
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the pill. Defaults to an empty string. |
|
|
660
|
+
| `closeButton` | Boolean | No | `true` `false` | `false` | If true, a close button is displayed on the pill, allowing it to be dismissed. If false, no close button is shown. |
|
|
661
|
+
| `color` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Specifies the background color of the pill. |
|
|
662
|
+
| `onClick` | Function | No | n/a | n/a | Handles the click event to close the pill. This property is only relevant if closeButton is set to true. |
|
|
636
663
|
|
|
637
664
|
### Spinner
|
|
638
665
|
|
|
@@ -641,13 +668,13 @@ import React from 'react';
|
|
|
641
668
|
import { Spinner } from 'groovinads-ui';
|
|
642
669
|
|
|
643
670
|
<Spinner scale={1} className='mt-3' />;
|
|
644
|
-
<Spinner scale={4} className='m-5'
|
|
671
|
+
<Spinner scale={4} className='m-5' />;
|
|
645
672
|
```
|
|
646
673
|
|
|
647
|
-
| Property | Type | Required | Options | Default
|
|
648
|
-
| ----------- | ------ | -------- | ------------------------- |
|
|
649
|
-
| `scale` | Number | No | `0.7` `1` `2` `3` `4` `1` | `1`
|
|
650
|
-
| `className` | String | No | n/a | n/a
|
|
674
|
+
| Property | Type | Required | Options | Default | Description |
|
|
675
|
+
| ----------- | ------ | -------- | ------------------------- | ------- | ------------------------------------- |
|
|
676
|
+
| `scale` | Number | No | `0.7` `1` `2` `3` `4` `1` | `1` | Scale (size) of the spinner. |
|
|
677
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the spinner. |
|
|
651
678
|
|
|
652
679
|
### StatusIcon
|
|
653
680
|
|
|
@@ -656,27 +683,28 @@ import React from 'react';
|
|
|
656
683
|
import { StatusIcon } from 'groovinads-ui';
|
|
657
684
|
|
|
658
685
|
const StatusIconExamples = () => {
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
}
|
|
686
|
+
return (
|
|
687
|
+
<div>
|
|
688
|
+
<StatusIcon animated={false} className='' status={0} />
|
|
689
|
+
<StatusIcon animated={true} className='mt-2' status={1} />
|
|
690
|
+
<StatusIcon animated={false} className='mt-2' status={3} />
|
|
691
|
+
<StatusIcon animated={false} className='mt-2' status={4} />
|
|
692
|
+
<StatusIcon animated={false} className='mt-2' status={5} />
|
|
693
|
+
</div>
|
|
694
|
+
);
|
|
695
|
+
};
|
|
669
696
|
|
|
670
697
|
export default StatusIconExamples;
|
|
671
698
|
```
|
|
672
699
|
|
|
673
|
-
| Property | Type | Required | Options | Default | Description
|
|
674
|
-
| ----------- | ------- | -------- | ------------------- | ------- |
|
|
675
|
-
| `animated` |
|
|
676
|
-
| `className` |
|
|
677
|
-
| `status` |
|
|
700
|
+
| Property | Type | Required | Options | Default | Description |
|
|
701
|
+
| ----------- | ------- | -------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
702
|
+
| `animated` | Boolean | No | `true` `false` | `false` | If true, the icon will include animation effects, applied only to the active state (`status={1}`). If false, no animations will be applied. |
|
|
703
|
+
| `className` | String | No | n/a | n/a | Add additional CSS class names for custom styling. |
|
|
704
|
+
| `status` | Number | Yes | `0` `1` `3` `4` `5` | `0` | Specifies the visual state of the icon: Inactive (`0`), active (`1`), active-warning (`3`), warning (`4`), and danger (`5`). Each state reflects a specific condition of the system or interface. |
|
|
678
705
|
|
|
679
706
|
## Navigation
|
|
707
|
+
|
|
680
708
|
### Navbar
|
|
681
709
|
|
|
682
710
|
```jsx
|
|
@@ -684,39 +712,35 @@ import React from 'react';
|
|
|
684
712
|
import { Navbar } from 'groovinads-ui';
|
|
685
713
|
|
|
686
714
|
const NavbarComponent = () => {
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
<div>Custom Content</div>
|
|
704
|
-
</Navbar>
|
|
705
|
-
</div>
|
|
706
|
-
);
|
|
715
|
+
const [show, setShow] = useState(false);
|
|
716
|
+
|
|
717
|
+
return (
|
|
718
|
+
<div>
|
|
719
|
+
<Button onClick={() => setShow((prev) => !prev)}>Toggle Sidebar</Button>
|
|
720
|
+
<Navbar
|
|
721
|
+
logoUrl='https://ui.groovinads.com/assets/groovinads-logo.svg' // custom url
|
|
722
|
+
showDeckMenu={true}
|
|
723
|
+
showUserMenu={true}
|
|
724
|
+
show={show}
|
|
725
|
+
setShow={setShow}
|
|
726
|
+
>
|
|
727
|
+
<div>Custom Content</div>
|
|
728
|
+
</Navbar>
|
|
729
|
+
</div>
|
|
730
|
+
);
|
|
707
731
|
};
|
|
708
732
|
|
|
709
733
|
export default NavbarComponent;
|
|
710
734
|
```
|
|
711
735
|
|
|
712
|
-
| Property | Type
|
|
713
|
-
| -------------- |
|
|
714
|
-
| `children` | Node
|
|
715
|
-
| `logoUrl` | String
|
|
716
|
-
| `setShow` | Function| No | n/a | n/a
|
|
717
|
-
| `show` | Boolean
|
|
718
|
-
| `showDeckMenu` | Boolean
|
|
719
|
-
| `showUserMenu` | Boolean
|
|
736
|
+
| Property | Type | Required | Options | Default | Description |
|
|
737
|
+
| -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
|
|
738
|
+
| `children` | Node | No | n/a | n/a | Allows inserting custom content within the Navbar. |
|
|
739
|
+
| `logoUrl` | String | No | n/a | n/a | Accepts a URL to customize the logo image. If empty, show the Groovinads logo. |
|
|
740
|
+
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
741
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the sidebar. If `true`, the sidebar is displayed; if `false`, it is hidden. |
|
|
742
|
+
| `showDeckMenu` | Boolean | No | `true` `false` | `false` | Controls the visibility of the deck menu in the navbar. If `true`, it is displayed; if `false`, it is hidden. |
|
|
743
|
+
| `showUserMenu` | Boolean | No | `true` `false` | `false` | Controls the visibility of the user menu. If `true`, the user menu is shown; if `false`, it is hidden. |
|
|
720
744
|
|
|
721
745
|
### Sidebar
|
|
722
746
|
|
|
@@ -732,6 +756,7 @@ const SidebarComponent = () => {
|
|
|
732
756
|
|
|
733
757
|
const handleNavigation = (url) => {
|
|
734
758
|
navigate(url);
|
|
759
|
+
console.log("Cliente seleccionado:", client);
|
|
735
760
|
};
|
|
736
761
|
|
|
737
762
|
return (
|
|
@@ -764,6 +789,10 @@ const SidebarComponent = () => {
|
|
|
764
789
|
show={show}
|
|
765
790
|
setShow={setShow}
|
|
766
791
|
onNavigate={handleNavigation}
|
|
792
|
+
dropdownVisible={true}
|
|
793
|
+
setGroovinProfile={setGroovinProfile}
|
|
794
|
+
selectedClient={selectedClient}
|
|
795
|
+
|
|
767
796
|
/>
|
|
768
797
|
</div>
|
|
769
798
|
);
|
|
@@ -771,15 +800,18 @@ const SidebarComponent = () => {
|
|
|
771
800
|
|
|
772
801
|
export default SidebarComponent;
|
|
773
802
|
```
|
|
803
|
+
| Property | Type | Required | Options | Default | Description |
|
|
804
|
+
| --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
805
|
+
| `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. |
|
|
806
|
+
| `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}`.|
|
|
807
|
+
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
808
|
+
| `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. |
|
|
809
|
+
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
810
|
+
| `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. |
|
|
811
|
+
| `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. |
|
|
812
|
+
| `setGroovinProfile` | Function | No | n/a | n/a |Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
|
|
813
|
+
| `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
|
|
774
814
|
|
|
775
|
-
| Property | Type | Required | Options | Default | Description |
|
|
776
|
-
| --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
777
|
-
| `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. |
|
|
778
|
-
| `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}`. |
|
|
779
|
-
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
780
|
-
| `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. |
|
|
781
|
-
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
782
|
-
| `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. |
|
|
783
815
|
|
|
784
816
|
### Stepper
|
|
785
817
|
|
|
@@ -790,21 +822,16 @@ import { Stepper } from 'groovinads-ui';
|
|
|
790
822
|
const steps = ['Step 1', 'Step 2', 'Step 3'];
|
|
791
823
|
|
|
792
824
|
const StepperComponent = () => {
|
|
793
|
-
|
|
794
|
-
<Stepper
|
|
795
|
-
list={steps}
|
|
796
|
-
current={1}
|
|
797
|
-
/>
|
|
798
|
-
);
|
|
825
|
+
return <Stepper list={steps} current={1} />;
|
|
799
826
|
};
|
|
800
827
|
|
|
801
828
|
export default StepperComponent;
|
|
802
829
|
```
|
|
803
830
|
|
|
804
|
-
| Property | Type
|
|
805
|
-
| --------- |
|
|
806
|
-
| `current` | Number
|
|
807
|
-
| `list` | Array
|
|
831
|
+
| Property | Type | Required | Options | Default | Description |
|
|
832
|
+
| --------- | ------ | -------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
833
|
+
| `current` | Number | Yes | n/a | n/a | Uses a number to specify the index in the list array, determining which step is highlighted as the current one and applying a specific style. |
|
|
834
|
+
| `list` | Array | Yes | n/a | n/a | Array of steps to be displayed in the stepper. Each item represents a step. |
|
|
808
835
|
|
|
809
836
|
### Tabnav
|
|
810
837
|
|
|
@@ -812,53 +839,50 @@ export default StepperComponent;
|
|
|
812
839
|
import React, { useState } from 'react';
|
|
813
840
|
import { Tabnav } from 'groovinads-ui';
|
|
814
841
|
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
/>
|
|
847
|
-
</div>
|
|
848
|
-
);
|
|
849
|
-
}
|
|
842
|
+
const tabs = [
|
|
843
|
+
{
|
|
844
|
+
tab: 'Tab Name', // Required, name of the tab to display.
|
|
845
|
+
badgeNumber: 'Badge', // Badge number to display on the tab.
|
|
846
|
+
url: '/url', // Navigation.
|
|
847
|
+
warningIcon: false, // Boolean to display a warning icon.
|
|
848
|
+
},
|
|
849
|
+
//Other tabs...
|
|
850
|
+
];
|
|
851
|
+
|
|
852
|
+
const TabnavComponent = (
|
|
853
|
+
tabs = [],
|
|
854
|
+
activeTab = 1,
|
|
855
|
+
navigateTab = false,
|
|
856
|
+
setActiveTab,
|
|
857
|
+
) => {
|
|
858
|
+
const [activeTab, setActiveTab] = useState(2);
|
|
859
|
+
|
|
860
|
+
return (
|
|
861
|
+
<div>
|
|
862
|
+
{/* Usage with internally managed state */}
|
|
863
|
+
<Tabnav tabs={tabs} />
|
|
864
|
+
|
|
865
|
+
{/* External state to manage the active tab */}
|
|
866
|
+
<Tabnav tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
|
|
867
|
+
|
|
868
|
+
{/* Usage with navigation enabled */}
|
|
869
|
+
<Tabnav tabs={tabs} navigateTab={true} />
|
|
870
|
+
</div>
|
|
871
|
+
);
|
|
872
|
+
};
|
|
850
873
|
|
|
851
874
|
export default TabnavComponent;
|
|
852
875
|
```
|
|
853
876
|
|
|
854
|
-
| Property
|
|
855
|
-
|
|
|
856
|
-
| `activeTab`
|
|
857
|
-
| `navigateTab`
|
|
858
|
-
| `setActiveTab`
|
|
859
|
-
| `tabs`
|
|
877
|
+
| Property | Type | Required | Options | Default | Description |
|
|
878
|
+
| -------------- | -------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
879
|
+
| `activeTab` | Number | No | n/a | `1` | Displays the active tab. By default, it is set to 1. You can use it alone to define the active tab or in combination with `setActiveTab` to manage external state and customize the initial active tab by providing a number. |
|
|
880
|
+
| `navigateTab` | Boolean | No | `true` `false` | `true` | If `true`, it enables navigation to the specified URL when the tab is selected. |
|
|
881
|
+
| `setActiveTab` | Function | No | n/a | n/a | Allows the component to be managed through external state. If provided, Tabnav will update the active tab using this property. |
|
|
882
|
+
| `tabs` | Array | Yes | n/a | [ ] | Each array of objects represents tabs. Each object must have a `tab` key and may have `badgeNumber`, `url`, and `warningIcon` keys. |
|
|
860
883
|
|
|
861
884
|
## Toasts
|
|
885
|
+
|
|
862
886
|
### ToastComponent
|
|
863
887
|
|
|
864
888
|
```jsx
|
|
@@ -866,38 +890,34 @@ import React from 'react';
|
|
|
866
890
|
import { ToastComponent } from 'groovinads-ui';
|
|
867
891
|
|
|
868
892
|
const ToastExample = () => {
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
Operation completed successfully!
|
|
886
|
-
</ToastComponent>
|
|
887
|
-
</div>
|
|
888
|
-
);
|
|
893
|
+
return (
|
|
894
|
+
<div>
|
|
895
|
+
<ToastComponent
|
|
896
|
+
variant='success'
|
|
897
|
+
autoClose={false}
|
|
898
|
+
position='top-end'
|
|
899
|
+
className='custom-class-toast'
|
|
900
|
+
>
|
|
901
|
+
Information saved successfully!
|
|
902
|
+
</ToastComponent>
|
|
903
|
+
|
|
904
|
+
<ToastComponent variant='info' autoClose={true} position='bottom-start'>
|
|
905
|
+
Operation completed successfully!
|
|
906
|
+
</ToastComponent>
|
|
907
|
+
</div>
|
|
908
|
+
);
|
|
889
909
|
};
|
|
890
910
|
|
|
891
911
|
export default ToastExample;
|
|
892
912
|
```
|
|
893
913
|
|
|
894
|
-
| Property | Type | Required | Options | Default
|
|
895
|
-
| ----------- | ------- | -------- | ------------------------------------------------- |
|
|
896
|
-
| `autoClose` | Boolean | No | `true` `false` | `true`
|
|
897
|
-
| `children` | Node | No | n/a | n/a
|
|
898
|
-
| `className` | String | No | n/a | n/a
|
|
899
|
-
| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-start`
|
|
900
|
-
| `variant` | String | No | `info` `success` `warning` `error` | `info`
|
|
914
|
+
| Property | Type | Required | Options | Default | Description |
|
|
915
|
+
| ----------- | ------- | -------- | ------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
916
|
+
| `autoClose` | Boolean | No | `true` `false` | `true` | If true, it closes automatically after a certain time. If false, it remains on the screen until the user closes it manually. |
|
|
917
|
+
| `children` | Node | No | n/a | n/a | Custom content inside the toast. |
|
|
918
|
+
| `className` | String | No | n/a | n/a | Custom class name for the toast. |
|
|
919
|
+
| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-start` | Defines the position on the screen where the toast will be displayed. |
|
|
920
|
+
| `variant` | String | No | `info` `success` `warning` `error` | `info` | Defines the type of message to be displayed. Depending on the value, a different icon associated with each message type is shown. |
|
|
901
921
|
|
|
902
922
|
### ToastProgress
|
|
903
923
|
|
|
@@ -906,47 +926,47 @@ import React from 'react';
|
|
|
906
926
|
import ToastProgress from './ToastProgress';
|
|
907
927
|
|
|
908
928
|
const MyToastExamples = () => {
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
929
|
+
return (
|
|
930
|
+
<div>
|
|
931
|
+
{/* display in-progress */}
|
|
932
|
+
<ToastProgress
|
|
933
|
+
variant='upload'
|
|
934
|
+
status='in-progress'
|
|
935
|
+
currentProgress={75}
|
|
936
|
+
position='top-end'
|
|
937
|
+
cancelButton={true}
|
|
938
|
+
onCancel={() => alert('Upload canceled')}
|
|
939
|
+
/>
|
|
940
|
+
|
|
941
|
+
{/* Display processing in-progress */}
|
|
942
|
+
<ToastProgress
|
|
943
|
+
variant='processing'
|
|
944
|
+
status='in-progress'
|
|
945
|
+
position='bottom-start'
|
|
946
|
+
/>
|
|
947
|
+
|
|
948
|
+
{/* Display error during upload */}
|
|
949
|
+
<ToastProgress
|
|
950
|
+
variant='upload'
|
|
951
|
+
status='error'
|
|
952
|
+
currentProgress={0}
|
|
953
|
+
position='bottom-end'
|
|
954
|
+
/>
|
|
955
|
+
</div>
|
|
956
|
+
);
|
|
937
957
|
};
|
|
938
958
|
|
|
939
959
|
export default MyToastExamples;
|
|
940
960
|
```
|
|
941
961
|
|
|
942
|
-
| Property | Type
|
|
943
|
-
| ----------------- |
|
|
944
|
-
| `cancelButton` | Boolean
|
|
945
|
-
| `currentProgress` | Number
|
|
946
|
-
| `onCancel` | Function
|
|
947
|
-
| `position` | String
|
|
948
|
-
| `status` | String
|
|
949
|
-
| `variant` | String
|
|
962
|
+
| Property | Type | Required | Options | Default | Description |
|
|
963
|
+
| ----------------- | -------- | -------- | ------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
964
|
+
| `cancelButton` | Boolean | No | `true` `false` | `false` | Determines whether to show a cancel button. |
|
|
965
|
+
| `currentProgress` | Number | No | n/a | n/a | Indicates the current progress of the task as a percentage with a number from 1 to 100. Used only when `variant` is set to `upload` |
|
|
966
|
+
| `onCancel` | Function | No | n/a | n/a | If `cancelButton` is true, it will display a cancel button that will execute the function provided in the `onCancel` prop when clicked. |
|
|
967
|
+
| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-start` | Defines the position on the screen where the toast will be displayed. |
|
|
968
|
+
| `status` | String | No | `in-progress` `error` | `in-progress` | Define the current state of the task. If `in-progress`, shows the ongoing progress, reflected in the progress bar. If `error`, indicates that the upload or processing has failed. |
|
|
969
|
+
| `variant` | String | Yes | `upload` `processing` | n/a | Define the type of process being performed. If `upload`, displays a progress bar and a loading status indicator. If `upload`, displays a progress bar and a loading status indicator. |
|
|
950
970
|
|
|
951
971
|
# Customization
|
|
952
972
|
|