groovinads-ui 1.2.64 → 1.2.66
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
CHANGED
|
@@ -30,7 +30,7 @@ The library includes the following components:
|
|
|
30
30
|
- [Checkbox](#checkbox): For multiple option selections.
|
|
31
31
|
- [Input](#input): For user data entry.
|
|
32
32
|
- [InputChip](#inputChip): For dynamically managing and displaying keywords.
|
|
33
|
-
- [InputEmail]
|
|
33
|
+
- [InputEmail](#inputEmail): For managing email lists, including adding, displaying, and deleting email addresses.
|
|
34
34
|
- [Radio](#radio): For exclusive selections.
|
|
35
35
|
- [Switch](#switch): For toggle states.
|
|
36
36
|
- [Textarea](#textarea): For multiline text input.
|
|
@@ -131,41 +131,41 @@ import { Button } from 'groovinads-ui';
|
|
|
131
131
|
|
|
132
132
|
```jsx
|
|
133
133
|
import React, { useState } from 'react';
|
|
134
|
-
import { DropdownComponent, Button,
|
|
135
|
-
import {
|
|
134
|
+
import { DropdownComponent, Button, Icon } from 'groovinads-ui';
|
|
135
|
+
import { DropdownMenu, DropdownItem } from 'react-bootstrap';
|
|
136
136
|
|
|
137
137
|
const DropdownComponentExample = () => {
|
|
138
|
-
|
|
138
|
+
const [show, setShow] = useState(false);
|
|
139
139
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
const handleToggle = () => {
|
|
141
|
+
setShow((prevShow) => !prevShow);
|
|
142
|
+
};
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
144
|
+
return (
|
|
145
|
+
<DropdownComponent
|
|
146
|
+
show={show}
|
|
147
|
+
setShow={setShow}
|
|
148
|
+
onToggle={handleToggle}
|
|
149
|
+
align='start'
|
|
150
|
+
fullWidth={true}
|
|
151
|
+
>
|
|
152
|
+
<Button
|
|
153
|
+
variant='outline'
|
|
154
|
+
icon='plus'
|
|
155
|
+
className='dropdown-toggle'
|
|
156
|
+
onClick={handleToggle}
|
|
157
|
+
>
|
|
158
|
+
<span>Add filter</span>
|
|
159
|
+
<Icon iconName='chevron-down' className='ms-2' />
|
|
160
|
+
</Button>
|
|
161
|
+
|
|
162
|
+
<DropdownMenu>
|
|
163
|
+
<DropdownItem onClick={() => console.log('Item 1 clicked')}>
|
|
164
|
+
Item 1
|
|
165
|
+
</DropdownItem>
|
|
166
|
+
</DropdownMenu>
|
|
167
|
+
</DropdownComponent>
|
|
168
|
+
);
|
|
169
169
|
};
|
|
170
170
|
|
|
171
171
|
export default DropdownComponentExample;
|
|
@@ -174,27 +174,22 @@ export default DropdownComponentExample;
|
|
|
174
174
|
##### Dropdown width submenu
|
|
175
175
|
|
|
176
176
|
```jsx
|
|
177
|
-
<DropdownComponent
|
|
178
|
-
{
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
>
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
<DropdownMenu>
|
|
189
|
-
<DropdownItem>Item 1</DropdownItem>
|
|
190
|
-
<DropdownItem>Item 2</DropdownItem>
|
|
191
|
-
<DropdownItem>Item 3</DropdownItem>
|
|
192
|
-
</DropdownMenu>
|
|
177
|
+
<DropdownComponent autoClose='outside' show={show} setShow={setShow}>
|
|
178
|
+
<Dropdown.Toggle onClick={() => handleToggle()}>Toggle</Dropdown.Toggle>
|
|
179
|
+
<Dropdown.Menu>
|
|
180
|
+
<Dropdown.Item>
|
|
181
|
+
<DropdownComponent autoClose='outside' drop='end'>
|
|
182
|
+
<Dropdown.Toggle as='div'>Submenu</Dropdown.Toggle>
|
|
183
|
+
<Dropdown.Menu>
|
|
184
|
+
<Dropdown.Item>Item 1</Dropdown.Item>
|
|
185
|
+
<Dropdown.Item>Item 2</Dropdown.Item>
|
|
186
|
+
<Dropdown.Item>Item 3</Dropdown.Item>
|
|
187
|
+
</Dropdown.Menu>
|
|
193
188
|
</DropdownComponent>
|
|
194
|
-
</
|
|
195
|
-
<
|
|
196
|
-
<
|
|
197
|
-
</
|
|
189
|
+
</Dropdown.Item>
|
|
190
|
+
<Dropdown.Item>Item 2</Dropdown.Item>
|
|
191
|
+
<Dropdown.Item>Item 3</Dropdown.Item>
|
|
192
|
+
</Dropdown.Menu>
|
|
198
193
|
</DropdownComponent>
|
|
199
194
|
```
|
|
200
195
|
|
|
@@ -272,7 +267,6 @@ export default DropdownDatePickerExample;
|
|
|
272
267
|
| `minDate` | Object | No | n/a | n/a | Min date filter. |
|
|
273
268
|
| `maxDate` | Object | No | n/a | n/a | Max date filter. |
|
|
274
269
|
|
|
275
|
-
|
|
276
270
|
### DropdownFilter
|
|
277
271
|
|
|
278
272
|
```jsx
|
|
@@ -514,6 +508,7 @@ export default InputComponent;
|
|
|
514
508
|
| `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
|
|
515
509
|
| `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. |
|
|
516
510
|
| `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
|
|
511
|
+
| `maxLength` | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept. |
|
|
517
512
|
| `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
|
|
518
513
|
| `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
|
|
519
514
|
| `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. |
|
|
@@ -526,7 +521,8 @@ export default InputComponent;
|
|
|
526
521
|
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
527
522
|
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
528
523
|
|
|
529
|
-
|
|
524
|
+
### InputChip
|
|
525
|
+
|
|
530
526
|
```jsx
|
|
531
527
|
import React, { useState } from 'react';
|
|
532
528
|
import { InputChip } from 'groovinads-ui';
|
|
@@ -566,20 +562,22 @@ const ExampleIputChip = () => (
|
|
|
566
562
|
export default ExampleInputChip;
|
|
567
563
|
|
|
568
564
|
```
|
|
569
|
-
|
|
570
|
-
|
|
|
571
|
-
|
|
|
572
|
-
|
|
573
|
-
| `
|
|
574
|
-
| `
|
|
575
|
-
| `
|
|
576
|
-
| `
|
|
577
|
-
| `
|
|
578
|
-
| `
|
|
579
|
-
| `
|
|
565
|
+
|
|
566
|
+
| Property | Type | Required | Options | Default | Description |
|
|
567
|
+
| ----------------------- | ------- | -------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
568
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the inputChip. |
|
|
569
|
+
| `placeholder` | String | Yes | n/a | n/a | Displays a suggested or descriptive text inside the input field before the user types. |
|
|
570
|
+
| `keywordsList` | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. |
|
|
571
|
+
| `setKeywordsList` | String | Yes | n/a | n/a | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop. |
|
|
572
|
+
| `counter` | Boolean | No | n/a | false | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it. |
|
|
573
|
+
| `nonRecomendedKeywords` | Number | No | n/a | n/a | This property expects an array of non-recommended keywords. When the user enters a word from this array in the input field, the pill for that keyword will appear in 'danger' color. |
|
|
574
|
+
| `recomendedKeywords` | Number | No | n/a | n/a | Specifies the recommended number of keywords. When the keywords list (`keywordsList`) reaches the recommended number, the counter's status will change to the 'warning' color. |
|
|
575
|
+
| `maxKeywords` | Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
|
|
576
|
+
| `requiredText` | String | Yes | n/a | n/a | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords. |
|
|
580
577
|
|
|
581
578
|
### InputEmail
|
|
582
|
-
|
|
579
|
+
|
|
580
|
+
```jsx
|
|
583
581
|
// Example Usage
|
|
584
582
|
import React, { useState } from 'react';
|
|
585
583
|
import { InputEmail } from '../components/Inputs';
|
|
@@ -597,23 +595,23 @@ const ExampleInputEmail = () => {
|
|
|
597
595
|
apiGetEmail='incert/your/endpoint'
|
|
598
596
|
apiPostEmail='incert/your/endpoint'
|
|
599
597
|
apiDeleteEmail='incert/your/endpoint'
|
|
600
|
-
showModal={showModal}
|
|
598
|
+
showModal={showModal} // showModal indicates the visibility of the parent component of InputEmail.
|
|
601
599
|
/>
|
|
602
600
|
);
|
|
603
601
|
};
|
|
604
602
|
export default ExampleInputChip;
|
|
605
|
-
|
|
606
603
|
```
|
|
607
|
-
|
|
608
|
-
|
|
|
609
|
-
|
|
|
610
|
-
| `
|
|
611
|
-
| `
|
|
612
|
-
| `
|
|
613
|
-
| `
|
|
614
|
-
| `
|
|
615
|
-
| `
|
|
616
|
-
| `
|
|
604
|
+
|
|
605
|
+
| Property | Type | Required | Options | Default | Description |
|
|
606
|
+
| ---------------- | ------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
607
|
+
| `apiDeleteEmail` | String | Yes | n/a | n/a | Endpoint required to remove emails from the list of added emails. |
|
|
608
|
+
| `apiGetEmail` | Array | Yes | n/a | n/a | Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`. |
|
|
609
|
+
| `apiPostEmail` | String | Yes | n/a | n/a | Endpoint required to update the list of added emails. It is used to add emails to the existing list. |
|
|
610
|
+
| `label` | String | No | n/a | '' | Allows adding custom text as the input label. |
|
|
611
|
+
| `showModal` | Boolean | No | `true` `false` | `true` | If true, the email list received from apiGetEmail will be shown when rendering InputEmail. |
|
|
612
|
+
| `textButton` | String | No | n/a | '' | Allows adding custom text to the button for adding emails. |
|
|
613
|
+
| `textError` | String | No | n/a | '' | Allows adding custom error text when entering an invalid email address. |
|
|
614
|
+
| `titleList` | String | No | n/a | '' | Allows adding a custom text that will be shown as the title of the email list. |
|
|
617
615
|
|
|
618
616
|
### Radio
|
|
619
617
|
|
|
@@ -658,7 +656,7 @@ import { Switch } from 'groovinads-ui';
|
|
|
658
656
|
|
|
659
657
|
| Property | Type | Required | Options | Default | Description |
|
|
660
658
|
| ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
661
|
-
| `className` | String | No | n/a |
|
|
659
|
+
| `className` | String | No | n/a | ' ' | Additional CSS class names that can be applied to the switch. |
|
|
662
660
|
| `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
|
|
663
661
|
| `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. |
|
|
664
662
|
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|