groovinads-ui 1.2.63 → 1.2.65
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 +76 -79
- package/dist/index.es.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/components/Dropdowns/DropdownComponent.jsx +17 -17
- package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +22 -5
- package/src/components/Inputs/InputEmail.jsx +7 -2
- package/src/stories/DropdownSimpleDatePicker.stories.jsx +17 -12
- package/src/stories/InputEmail.stories.jsx +3 -2
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
|
|
@@ -526,7 +520,8 @@ export default InputComponent;
|
|
|
526
520
|
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
527
521
|
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
528
522
|
|
|
529
|
-
|
|
523
|
+
### InputChip
|
|
524
|
+
|
|
530
525
|
```jsx
|
|
531
526
|
import React, { useState } from 'react';
|
|
532
527
|
import { InputChip } from 'groovinads-ui';
|
|
@@ -566,20 +561,22 @@ const ExampleIputChip = () => (
|
|
|
566
561
|
export default ExampleInputChip;
|
|
567
562
|
|
|
568
563
|
```
|
|
569
|
-
|
|
570
|
-
|
|
|
571
|
-
|
|
|
572
|
-
|
|
573
|
-
| `
|
|
574
|
-
| `
|
|
575
|
-
| `
|
|
576
|
-
| `
|
|
577
|
-
| `
|
|
578
|
-
| `
|
|
579
|
-
| `
|
|
564
|
+
|
|
565
|
+
| Property | Type | Required | Options | Default | Description |
|
|
566
|
+
| ----------------------- | ------- | -------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
567
|
+
| `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the inputChip. |
|
|
568
|
+
| `placeholder` | String | Yes | n/a | n/a | Displays a suggested or descriptive text inside the input field before the user types. |
|
|
569
|
+
| `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. |
|
|
570
|
+
| `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. |
|
|
571
|
+
| `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. |
|
|
572
|
+
| `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. |
|
|
573
|
+
| `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. |
|
|
574
|
+
| `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. |
|
|
575
|
+
| `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
576
|
|
|
581
577
|
### InputEmail
|
|
582
|
-
|
|
578
|
+
|
|
579
|
+
```jsx
|
|
583
580
|
// Example Usage
|
|
584
581
|
import React, { useState } from 'react';
|
|
585
582
|
import { InputEmail } from '../components/Inputs';
|
|
@@ -597,23 +594,23 @@ const ExampleInputEmail = () => {
|
|
|
597
594
|
apiGetEmail='incert/your/endpoint'
|
|
598
595
|
apiPostEmail='incert/your/endpoint'
|
|
599
596
|
apiDeleteEmail='incert/your/endpoint'
|
|
600
|
-
showModal={showModal}
|
|
597
|
+
showModal={showModal} // showModal indicates the visibility of the parent component of InputEmail.
|
|
601
598
|
/>
|
|
602
599
|
);
|
|
603
600
|
};
|
|
604
601
|
export default ExampleInputChip;
|
|
605
|
-
|
|
606
602
|
```
|
|
607
|
-
|
|
608
|
-
|
|
|
609
|
-
|
|
|
610
|
-
| `
|
|
611
|
-
| `
|
|
612
|
-
| `
|
|
613
|
-
| `
|
|
614
|
-
| `
|
|
615
|
-
| `
|
|
616
|
-
| `
|
|
603
|
+
|
|
604
|
+
| Property | Type | Required | Options | Default | Description |
|
|
605
|
+
| ---------------- | ------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
606
|
+
| `apiDeleteEmail` | String | Yes | n/a | n/a | Endpoint required to remove emails from the list of added emails. |
|
|
607
|
+
| `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`. |
|
|
608
|
+
| `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. |
|
|
609
|
+
| `label` | String | No | n/a | '' | Allows adding custom text as the input label. |
|
|
610
|
+
| `showModal` | Boolean | No | `true` `false` | `true` | If true, the email list received from apiGetEmail will be shown when rendering InputEmail. |
|
|
611
|
+
| `textButton` | String | No | n/a | '' | Allows adding custom text to the button for adding emails. |
|
|
612
|
+
| `textError` | String | No | n/a | '' | Allows adding custom error text when entering an invalid email address. |
|
|
613
|
+
| `titleList` | String | No | n/a | '' | Allows adding a custom text that will be shown as the title of the email list. |
|
|
617
614
|
|
|
618
615
|
### Radio
|
|
619
616
|
|
|
@@ -658,7 +655,7 @@ import { Switch } from 'groovinads-ui';
|
|
|
658
655
|
|
|
659
656
|
| Property | Type | Required | Options | Default | Description |
|
|
660
657
|
| ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
661
|
-
| `className` | String | No | n/a |
|
|
658
|
+
| `className` | String | No | n/a | ' ' | Additional CSS class names that can be applied to the switch. |
|
|
662
659
|
| `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
|
|
663
660
|
| `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
661
|
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|