groovinads-ui 1.2.44 → 1.2.46
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 +545 -516
- package/dist/index.es.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownComponent.jsx +7 -4
- package/src/components/Dropdowns/DropdownMultiSelect.jsx +5 -1
- package/src/components/Navigation/Dropdowns/DropdownClient.jsx +172 -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/DropdownComponent.stories.jsx +17 -2
- 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` | `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.
|
|
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` | Funtion | No | n/a
|
|
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` | Funtion | 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,61 @@ 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
|
-
| `name`
|
|
421
|
-
| `onChange`
|
|
422
|
-
| `prefix`
|
|
423
|
-
| `requiredText`
|
|
424
|
-
| `setShowError`
|
|
425
|
-
| `size`
|
|
426
|
-
| `suffix ` | String
|
|
427
|
-
| `showError`
|
|
428
|
-
| `type`
|
|
429
|
-
| `value`
|
|
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
|
+
| `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
|
|
455
|
+
| `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. |
|
|
456
|
+
| `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
|
|
457
|
+
| `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
|
|
458
|
+
| `setShowError` | Function | No | n/a | n/a | Function used to change the state of `showError`. |
|
|
459
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the input field. |
|
|
460
|
+
| `suffix ` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
|
|
461
|
+
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
|
|
462
|
+
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
463
|
+
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
430
464
|
|
|
431
465
|
### Radio
|
|
432
466
|
|
|
@@ -435,23 +469,23 @@ import React from 'react';
|
|
|
435
469
|
import { Radio } from 'groovinads-ui';
|
|
436
470
|
|
|
437
471
|
<Radio
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
472
|
+
className={'m-5'}
|
|
473
|
+
id={'radio'}
|
|
474
|
+
name={'radio'}
|
|
475
|
+
setStatus={(status) => console.log(status)}
|
|
476
|
+
status={true}
|
|
443
477
|
>
|
|
444
|
-
|
|
478
|
+
Click me
|
|
445
479
|
</Radio>;
|
|
446
480
|
```
|
|
447
481
|
|
|
448
|
-
| Property | Type
|
|
449
|
-
| ----------- |
|
|
450
|
-
| `className` | String
|
|
451
|
-
| `id` | String
|
|
452
|
-
| `name` | String
|
|
453
|
-
| `setStatus` | Function
|
|
454
|
-
| `status` | Boolean
|
|
482
|
+
| Property | Type | Required | Options | Default | Description |
|
|
483
|
+
| ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
484
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. |
|
|
485
|
+
| `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. |
|
|
486
|
+
| `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
|
|
487
|
+
| `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
|
|
488
|
+
| `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
489
|
|
|
456
490
|
### Switch
|
|
457
491
|
|
|
@@ -460,25 +494,24 @@ import React from 'react';
|
|
|
460
494
|
import { Switch } from 'groovinads-ui';
|
|
461
495
|
|
|
462
496
|
<Switch
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
497
|
+
className={'mb-5'}
|
|
498
|
+
name={'switch'}
|
|
499
|
+
setStatus={(status) => console.log(status)}
|
|
500
|
+
status={0}
|
|
467
501
|
>
|
|
468
|
-
|
|
502
|
+
This is a switch
|
|
469
503
|
</Switch>;
|
|
470
504
|
```
|
|
471
505
|
|
|
472
|
-
| Property
|
|
473
|
-
|
|
|
474
|
-
| `className`
|
|
475
|
-
| `icon`
|
|
476
|
-
| `id`
|
|
477
|
-
| `name`
|
|
478
|
-
| `setStatus`
|
|
479
|
-
| `status`
|
|
480
|
-
| `switchPosition`
|
|
481
|
-
|
|
506
|
+
| Property | Type | Required | Options | Default | Description |
|
|
507
|
+
| ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
508
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the switch. |
|
|
509
|
+
| `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
|
|
510
|
+
| `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. |
|
|
511
|
+
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|
|
512
|
+
| `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. |
|
|
513
|
+
| `status` | Number / Boolean | No | `0` `1` | `0` | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). |
|
|
514
|
+
| `switchPosition` | String | No | `start` `end` | `start` | Determines the position of the switch relative to the label. |
|
|
482
515
|
|
|
483
516
|
### Textarea
|
|
484
517
|
|
|
@@ -487,30 +520,30 @@ import React from 'react';
|
|
|
487
520
|
import { Textarea } from 'groovinads-ui';
|
|
488
521
|
|
|
489
522
|
<Textarea
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
523
|
+
className={'mt-2'}
|
|
524
|
+
helpText={'This is a help text'}
|
|
525
|
+
label={'label'}
|
|
526
|
+
name={'textarea'}
|
|
527
|
+
requiredText={'This field is required'}
|
|
528
|
+
setShowError={(showError) => console.log(showError)}
|
|
529
|
+
/>;
|
|
497
530
|
```
|
|
498
531
|
|
|
499
|
-
| Property
|
|
500
|
-
|
|
|
501
|
-
| `className`
|
|
502
|
-
| `helpText`
|
|
503
|
-
| `label`
|
|
504
|
-
| `name`
|
|
505
|
-
| `onChange`
|
|
506
|
-
| `requiredText`
|
|
507
|
-
| `setShowError`
|
|
508
|
-
| `showError`
|
|
509
|
-
| `size`
|
|
510
|
-
| `value`
|
|
511
|
-
|
|
532
|
+
| Property | Type | Required | Options | Default | Description |
|
|
533
|
+
| -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------ |
|
|
534
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the textarea. |
|
|
535
|
+
| `helpText` | String | No | n/a | n/a | Optional text under the textarea to guide the user or provide additional help information. |
|
|
536
|
+
| `label` | String | No | n/a | 'Label' | Text label for the textarea field. |
|
|
537
|
+
| `name` | String | No | n/a | n/a | Attribute of the textarea. Used to identify the form data after it's submitted. |
|
|
538
|
+
| `onChange` | Function | No | n/a | n/a | Function to handle changes to the textarea's value. Typically used to update state. |
|
|
539
|
+
| `requiredText` | String | No | n/a | n/a | Text displayed when textarea validation fails, used to indicate an error. |
|
|
540
|
+
| `setShowError` | Function | No | n/a | n/a | Function to set the visibility of the error message. |
|
|
541
|
+
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed controlled by `setShowError`. |
|
|
542
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the textarea field. |
|
|
543
|
+
| `value` | String | No | n/a | n/a | The value of the textarea. |
|
|
512
544
|
|
|
513
545
|
## Labels
|
|
546
|
+
|
|
514
547
|
### Alert
|
|
515
548
|
|
|
516
549
|
```jsx
|
|
@@ -518,38 +551,35 @@ import React from 'react';
|
|
|
518
551
|
import { Alert } from 'groovinads-ui';
|
|
519
552
|
|
|
520
553
|
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>
|
|
554
|
+
<div>
|
|
555
|
+
<Alert
|
|
556
|
+
icon={true}
|
|
557
|
+
animation={false}
|
|
558
|
+
type='info'
|
|
559
|
+
size='md'
|
|
560
|
+
onClose={null}
|
|
561
|
+
className='mt-4'
|
|
562
|
+
>
|
|
563
|
+
{/* Children content goes here */}
|
|
564
|
+
This is an alert component
|
|
565
|
+
</Alert>
|
|
566
|
+
|
|
567
|
+
<Alert type='info' onClose={() => console.log('Alert closed')} />
|
|
568
|
+
</div>
|
|
539
569
|
);
|
|
540
570
|
|
|
541
571
|
export default ExampleAlert;
|
|
542
572
|
```
|
|
543
573
|
|
|
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
|
|
574
|
+
| Property | Type | Required | Options | Default | Description |
|
|
575
|
+
| ----------- | -------- | -------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
576
|
+
| `animation` | Boolean | No | `true` `false` | `false` | If true, adds animation effects to the alert. If false, does not add any effects. |
|
|
577
|
+
| `children` | Node | Yes | n/a | n/a | Content inside the alert. |
|
|
578
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the alert. |
|
|
579
|
+
| `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. |
|
|
580
|
+
| `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. |
|
|
581
|
+
| `size` | String | No | `xs` `md` `lg` `md` | `info` | Size of the alert. |
|
|
582
|
+
| `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
|
|
553
583
|
|
|
554
584
|
### Icon
|
|
555
585
|
|
|
@@ -558,22 +588,21 @@ import React from 'react';
|
|
|
558
588
|
import { Icon } from 'groovinads-ui';
|
|
559
589
|
|
|
560
590
|
<Icon
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
591
|
+
style='solid'
|
|
592
|
+
scale={1}
|
|
593
|
+
iconName='location-dot'
|
|
594
|
+
className=''
|
|
595
|
+
animation=''
|
|
596
|
+
/>;
|
|
567
597
|
```
|
|
568
598
|
|
|
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
|
-
|
|
599
|
+
| Property | Type | Required | Options | Default | Description |
|
|
600
|
+
| ----------- | ------ | -------- | ----------------------------------------------------------------------- | -------------------- | ---------------------------------- |
|
|
601
|
+
| `animation` | String | No | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` | String | Animation for the icon. |
|
|
602
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the icon. |
|
|
603
|
+
| `iconName` | String | No | n/a | `user-bounty-hunter` | Name of the icon. |
|
|
604
|
+
| `scale` | Number | No | `0.7`, `1`, `2`, `3`, `4` | `1` | Scale of the icon. |
|
|
605
|
+
| `style` | String | No | `light` `solid` `regular` `thin` `duotone` `sharp` | `solid` | Style of the icon. |
|
|
577
606
|
|
|
578
607
|
### LoginSource
|
|
579
608
|
|
|
@@ -584,10 +613,9 @@ import { LoginSource } from 'groovinads-ui';
|
|
|
584
613
|
<LoginSource logo={'groovinads'} />;
|
|
585
614
|
```
|
|
586
615
|
|
|
587
|
-
| Property
|
|
588
|
-
|
|
|
589
|
-
| `logo`
|
|
590
|
-
|
|
616
|
+
| Property | Type | Required | Options | Default | Description |
|
|
617
|
+
| -------- | ------ | -------- | -------------------------------------------- | ------------ | -------------------------------------------------------------- |
|
|
618
|
+
| `logo` | String | No | `groovinads` `google` `microsoft` `linkedin` | `groovinads` | Specifies the logo to be displayed on the login source button. |
|
|
591
619
|
|
|
592
620
|
### PillComponent
|
|
593
621
|
|
|
@@ -596,43 +624,40 @@ import React, { useState } from 'react';
|
|
|
596
624
|
import { PillComponent } from 'groovinads-ui';
|
|
597
625
|
|
|
598
626
|
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
|
-
);
|
|
627
|
+
const [showPill, setShowPill] = useState(true);
|
|
628
|
+
|
|
629
|
+
const handleClosePill = () => {
|
|
630
|
+
setShowPill(false);
|
|
631
|
+
};
|
|
632
|
+
|
|
633
|
+
return (
|
|
634
|
+
<div>
|
|
635
|
+
<PillComponent className='mt-3' color='blue'>
|
|
636
|
+
Blue normal Pill
|
|
637
|
+
</PillComponent>
|
|
638
|
+
|
|
639
|
+
<PillComponent
|
|
640
|
+
classNeme='mt-3'
|
|
641
|
+
color='red'
|
|
642
|
+
closeButton={true}
|
|
643
|
+
onClick={handleClosePill}
|
|
644
|
+
>
|
|
645
|
+
Red Pill with Close Button
|
|
646
|
+
</PillComponent>
|
|
647
|
+
</div>
|
|
648
|
+
);
|
|
624
649
|
};
|
|
625
650
|
|
|
626
651
|
export default PillComponentExample;
|
|
627
652
|
```
|
|
628
653
|
|
|
629
|
-
| Property | Type
|
|
630
|
-
| ------------- |
|
|
631
|
-
| `children` | Node
|
|
632
|
-
| `className` | String
|
|
633
|
-
| `closeButton` | Boolean
|
|
634
|
-
| `color` | String
|
|
635
|
-
| `onClick` | Function
|
|
654
|
+
| Property | Type | Required | Options | Default | Description |
|
|
655
|
+
| ------------- | -------- | -------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
656
|
+
| `children` | Node | No | n/a | n/a | Content to be displayed inside the pill component. |
|
|
657
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the pill. Defaults to an empty string. |
|
|
658
|
+
| `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. |
|
|
659
|
+
| `color` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Specifies the background color of the pill. |
|
|
660
|
+
| `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
661
|
|
|
637
662
|
### Spinner
|
|
638
663
|
|
|
@@ -641,13 +666,13 @@ import React from 'react';
|
|
|
641
666
|
import { Spinner } from 'groovinads-ui';
|
|
642
667
|
|
|
643
668
|
<Spinner scale={1} className='mt-3' />;
|
|
644
|
-
<Spinner scale={4} className='m-5'
|
|
669
|
+
<Spinner scale={4} className='m-5' />;
|
|
645
670
|
```
|
|
646
671
|
|
|
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
|
|
672
|
+
| Property | Type | Required | Options | Default | Description |
|
|
673
|
+
| ----------- | ------ | -------- | ------------------------- | ------- | ------------------------------------- |
|
|
674
|
+
| `scale` | Number | No | `0.7` `1` `2` `3` `4` `1` | `1` | Scale (size) of the spinner. |
|
|
675
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the spinner. |
|
|
651
676
|
|
|
652
677
|
### StatusIcon
|
|
653
678
|
|
|
@@ -656,27 +681,28 @@ import React from 'react';
|
|
|
656
681
|
import { StatusIcon } from 'groovinads-ui';
|
|
657
682
|
|
|
658
683
|
const StatusIconExamples = () => {
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
}
|
|
684
|
+
return (
|
|
685
|
+
<div>
|
|
686
|
+
<StatusIcon animated={false} className='' status={0} />
|
|
687
|
+
<StatusIcon animated={true} className='mt-2' status={1} />
|
|
688
|
+
<StatusIcon animated={false} className='mt-2' status={3} />
|
|
689
|
+
<StatusIcon animated={false} className='mt-2' status={4} />
|
|
690
|
+
<StatusIcon animated={false} className='mt-2' status={5} />
|
|
691
|
+
</div>
|
|
692
|
+
);
|
|
693
|
+
};
|
|
669
694
|
|
|
670
695
|
export default StatusIconExamples;
|
|
671
696
|
```
|
|
672
697
|
|
|
673
|
-
| Property | Type | Required | Options | Default | Description
|
|
674
|
-
| ----------- | ------- | -------- | ------------------- | ------- |
|
|
675
|
-
| `animated` |
|
|
676
|
-
| `className` |
|
|
677
|
-
| `status` |
|
|
698
|
+
| Property | Type | Required | Options | Default | Description |
|
|
699
|
+
| ----------- | ------- | -------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
700
|
+
| `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. |
|
|
701
|
+
| `className` | String | No | n/a | n/a | Add additional CSS class names for custom styling. |
|
|
702
|
+
| `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
703
|
|
|
679
704
|
## Navigation
|
|
705
|
+
|
|
680
706
|
### Navbar
|
|
681
707
|
|
|
682
708
|
```jsx
|
|
@@ -684,39 +710,35 @@ import React from 'react';
|
|
|
684
710
|
import { Navbar } from 'groovinads-ui';
|
|
685
711
|
|
|
686
712
|
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
|
-
);
|
|
713
|
+
const [show, setShow] = useState(false);
|
|
714
|
+
|
|
715
|
+
return (
|
|
716
|
+
<div>
|
|
717
|
+
<Button onClick={() => setShow((prev) => !prev)}>Toggle Sidebar</Button>
|
|
718
|
+
<Navbar
|
|
719
|
+
logoUrl='https://ui.groovinads.com/assets/groovinads-logo.svg' // custom url
|
|
720
|
+
showDeckMenu={true}
|
|
721
|
+
showUserMenu={true}
|
|
722
|
+
show={show}
|
|
723
|
+
setShow={setShow}
|
|
724
|
+
>
|
|
725
|
+
<div>Custom Content</div>
|
|
726
|
+
</Navbar>
|
|
727
|
+
</div>
|
|
728
|
+
);
|
|
707
729
|
};
|
|
708
730
|
|
|
709
731
|
export default NavbarComponent;
|
|
710
732
|
```
|
|
711
733
|
|
|
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
|
|
734
|
+
| Property | Type | Required | Options | Default | Description |
|
|
735
|
+
| -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
|
|
736
|
+
| `children` | Node | No | n/a | n/a | Allows inserting custom content within the Navbar. |
|
|
737
|
+
| `logoUrl` | String | No | n/a | n/a | Accepts a URL to customize the logo image. If empty, show the Groovinads logo. |
|
|
738
|
+
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
739
|
+
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the sidebar. If `true`, the sidebar is displayed; if `false`, it is hidden. |
|
|
740
|
+
| `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. |
|
|
741
|
+
| `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
742
|
|
|
721
743
|
### Sidebar
|
|
722
744
|
|
|
@@ -732,6 +754,7 @@ const SidebarComponent = () => {
|
|
|
732
754
|
|
|
733
755
|
const handleNavigation = (url) => {
|
|
734
756
|
navigate(url);
|
|
757
|
+
console.log("Cliente seleccionado:", client);
|
|
735
758
|
};
|
|
736
759
|
|
|
737
760
|
return (
|
|
@@ -764,6 +787,10 @@ const SidebarComponent = () => {
|
|
|
764
787
|
show={show}
|
|
765
788
|
setShow={setShow}
|
|
766
789
|
onNavigate={handleNavigation}
|
|
790
|
+
dropdownVisible={true}
|
|
791
|
+
setGroovinProfile={setGroovinProfile}
|
|
792
|
+
selectedClient={selectedClient}
|
|
793
|
+
|
|
767
794
|
/>
|
|
768
795
|
</div>
|
|
769
796
|
);
|
|
@@ -771,15 +798,18 @@ const SidebarComponent = () => {
|
|
|
771
798
|
|
|
772
799
|
export default SidebarComponent;
|
|
773
800
|
```
|
|
801
|
+
| Property | Type | Required | Options | Default | Description |
|
|
802
|
+
| --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
803
|
+
| `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. |
|
|
804
|
+
| `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}`.|
|
|
805
|
+
| `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
|
|
806
|
+
| `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. |
|
|
807
|
+
| `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
808
|
+
| `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. |
|
|
809
|
+
| `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. |
|
|
810
|
+
| `setGroovinProfile` | Function | No | n/a | n/a |Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
|
|
811
|
+
| `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
|
|
774
812
|
|
|
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
813
|
|
|
784
814
|
### Stepper
|
|
785
815
|
|
|
@@ -790,21 +820,16 @@ import { Stepper } from 'groovinads-ui';
|
|
|
790
820
|
const steps = ['Step 1', 'Step 2', 'Step 3'];
|
|
791
821
|
|
|
792
822
|
const StepperComponent = () => {
|
|
793
|
-
|
|
794
|
-
<Stepper
|
|
795
|
-
list={steps}
|
|
796
|
-
current={1}
|
|
797
|
-
/>
|
|
798
|
-
);
|
|
823
|
+
return <Stepper list={steps} current={1} />;
|
|
799
824
|
};
|
|
800
825
|
|
|
801
826
|
export default StepperComponent;
|
|
802
827
|
```
|
|
803
828
|
|
|
804
|
-
| Property | Type
|
|
805
|
-
| --------- |
|
|
806
|
-
| `current` | Number
|
|
807
|
-
| `list` | Array
|
|
829
|
+
| Property | Type | Required | Options | Default | Description |
|
|
830
|
+
| --------- | ------ | -------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
831
|
+
| `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. |
|
|
832
|
+
| `list` | Array | Yes | n/a | n/a | Array of steps to be displayed in the stepper. Each item represents a step. |
|
|
808
833
|
|
|
809
834
|
### Tabnav
|
|
810
835
|
|
|
@@ -812,53 +837,50 @@ export default StepperComponent;
|
|
|
812
837
|
import React, { useState } from 'react';
|
|
813
838
|
import { Tabnav } from 'groovinads-ui';
|
|
814
839
|
|
|
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
|
-
}
|
|
840
|
+
const tabs = [
|
|
841
|
+
{
|
|
842
|
+
tab: 'Tab Name', // Required, name of the tab to display.
|
|
843
|
+
badgeNumber: 'Badge', // Badge number to display on the tab.
|
|
844
|
+
url: '/url', // Navigation.
|
|
845
|
+
warningIcon: false, // Boolean to display a warning icon.
|
|
846
|
+
},
|
|
847
|
+
//Other tabs...
|
|
848
|
+
];
|
|
849
|
+
|
|
850
|
+
const TabnavComponent = (
|
|
851
|
+
tabs = [],
|
|
852
|
+
activeTab = 1,
|
|
853
|
+
navigateTab = false,
|
|
854
|
+
setActiveTab,
|
|
855
|
+
) => {
|
|
856
|
+
const [activeTab, setActiveTab] = useState(2);
|
|
857
|
+
|
|
858
|
+
return (
|
|
859
|
+
<div>
|
|
860
|
+
{/* Usage with internally managed state */}
|
|
861
|
+
<Tabnav tabs={tabs} />
|
|
862
|
+
|
|
863
|
+
{/* External state to manage the active tab */}
|
|
864
|
+
<Tabnav tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
|
|
865
|
+
|
|
866
|
+
{/* Usage with navigation enabled */}
|
|
867
|
+
<Tabnav tabs={tabs} navigateTab={true} />
|
|
868
|
+
</div>
|
|
869
|
+
);
|
|
870
|
+
};
|
|
850
871
|
|
|
851
872
|
export default TabnavComponent;
|
|
852
873
|
```
|
|
853
874
|
|
|
854
|
-
| Property
|
|
855
|
-
|
|
|
856
|
-
| `activeTab`
|
|
857
|
-
| `navigateTab`
|
|
858
|
-
| `setActiveTab`
|
|
859
|
-
| `tabs`
|
|
875
|
+
| Property | Type | Required | Options | Default | Description |
|
|
876
|
+
| -------------- | -------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
877
|
+
| `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. |
|
|
878
|
+
| `navigateTab` | Boolean | No | `true` `false` | `true` | If `true`, it enables navigation to the specified URL when the tab is selected. |
|
|
879
|
+
| `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. |
|
|
880
|
+
| `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
881
|
|
|
861
882
|
## Toasts
|
|
883
|
+
|
|
862
884
|
### ToastComponent
|
|
863
885
|
|
|
864
886
|
```jsx
|
|
@@ -866,38 +888,34 @@ import React from 'react';
|
|
|
866
888
|
import { ToastComponent } from 'groovinads-ui';
|
|
867
889
|
|
|
868
890
|
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
|
-
);
|
|
891
|
+
return (
|
|
892
|
+
<div>
|
|
893
|
+
<ToastComponent
|
|
894
|
+
variant='success'
|
|
895
|
+
autoClose={false}
|
|
896
|
+
position='top-end'
|
|
897
|
+
className='custom-class-toast'
|
|
898
|
+
>
|
|
899
|
+
Information saved successfully!
|
|
900
|
+
</ToastComponent>
|
|
901
|
+
|
|
902
|
+
<ToastComponent variant='info' autoClose={true} position='bottom-start'>
|
|
903
|
+
Operation completed successfully!
|
|
904
|
+
</ToastComponent>
|
|
905
|
+
</div>
|
|
906
|
+
);
|
|
889
907
|
};
|
|
890
908
|
|
|
891
909
|
export default ToastExample;
|
|
892
910
|
```
|
|
893
911
|
|
|
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`
|
|
912
|
+
| Property | Type | Required | Options | Default | Description |
|
|
913
|
+
| ----------- | ------- | -------- | ------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
914
|
+
| `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. |
|
|
915
|
+
| `children` | Node | No | n/a | n/a | Custom content inside the toast. |
|
|
916
|
+
| `className` | String | No | n/a | n/a | Custom class name for the toast. |
|
|
917
|
+
| `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. |
|
|
918
|
+
| `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
919
|
|
|
902
920
|
### ToastProgress
|
|
903
921
|
|
|
@@ -906,34 +924,34 @@ import React from 'react';
|
|
|
906
924
|
import ToastProgress from './ToastProgress';
|
|
907
925
|
|
|
908
926
|
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
|
-
|
|
927
|
+
return (
|
|
928
|
+
<div>
|
|
929
|
+
{/* display in-progress */}
|
|
930
|
+
<ToastProgress
|
|
931
|
+
variant='upload'
|
|
932
|
+
status='in-progress'
|
|
933
|
+
currentProgress={75}
|
|
934
|
+
position='top-end'
|
|
935
|
+
cancelButton={true}
|
|
936
|
+
onCancel={() => alert('Upload canceled')}
|
|
937
|
+
/>
|
|
938
|
+
|
|
939
|
+
{/* Display processing in-progress */}
|
|
940
|
+
<ToastProgress
|
|
941
|
+
variant='processing'
|
|
942
|
+
status='in-progress'
|
|
943
|
+
position='bottom-start'
|
|
944
|
+
/>
|
|
945
|
+
|
|
946
|
+
{/* Display error during upload */}
|
|
947
|
+
<ToastProgress
|
|
948
|
+
variant='upload'
|
|
949
|
+
status='error'
|
|
950
|
+
currentProgress={0}
|
|
951
|
+
position='bottom-end'
|
|
952
|
+
/>
|
|
953
|
+
</div>
|
|
954
|
+
);
|
|
937
955
|
};
|
|
938
956
|
|
|
939
957
|
export default MyToastExamples;
|
|
@@ -941,12 +959,23 @@ export default MyToastExamples;
|
|
|
941
959
|
|
|
942
960
|
| Property | Type | Required | Options | Default | Description |
|
|
943
961
|
| ----------------- | --------- | -------- | ------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
944
|
-
| `cancelButton`
|
|
945
|
-
| `currentProgress`
|
|
946
|
-
| `onCancel`
|
|
947
|
-
| `position`
|
|
948
|
-
| `status`
|
|
949
|
-
| `variant`
|
|
962
|
+
| `cancelButton` | Boolean | No | `true` `false` | `false` | Determines whether to show a cancel button. |
|
|
963
|
+
| `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` |
|
|
964
|
+
| `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. |
|
|
965
|
+
| `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. |
|
|
966
|
+
| `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. |
|
|
967
|
+
| `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. |
|
|
968
|
+
|
|
969
|
+
|
|
970
|
+
|
|
971
|
+
| Property | Type | Required | Options | Default | Description |
|
|
972
|
+
| ----------------- | -------- | -------- | ------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
973
|
+
| `cancelButton` | Boolean | No | `true` `false` | `false` | Determines whether to show a cancel button. |
|
|
974
|
+
| `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` |
|
|
975
|
+
| `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. |
|
|
976
|
+
| `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. |
|
|
977
|
+
| `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. |
|
|
978
|
+
| `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
979
|
|
|
951
980
|
# Customization
|
|
952
981
|
|