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