2022-03-06 19:35:31 +00:00
# EmailChips
2022-02-03 12:37:10 +00:00
2022-03-06 19:35:31 +00:00
Custom email-chips
2022-02-03 12:37:10 +00:00
### Usage
```js
2022-03-06 19:35:31 +00:00
import EmailChips from "@appserver/components/email-chips";
2022-02-03 12:37:10 +00:00
```
```jsx
2022-03-06 19:35:31 +00:00
< EmailChips
2022-02-17 11:37:44 +00:00
options={[]}
onChange={(selected) => console.log(selected)}
placeholder="Invite people by name or email"
2022-02-28 19:37:10 +00:00
clearButtonLabel="Clear list"
2022-02-17 11:37:44 +00:00
existEmailText="This email address has already been entered"
invalidEmailText="Invalid email address"
2022-02-28 19:37:10 +00:00
exceededLimitText="The limit on the number of emails has reached the maximum"
exceededLimitInputText="The limit on the number of characters has reached the maximum value"
chipOverLimitText="The limit on the number of characters has reached the maximum value"
exceededLimit=500,
2022-02-17 11:37:44 +00:00
/>
2022-02-03 12:37:10 +00:00
```
#### Options - an array of objects that contains the following fields:
```js
const options = [
{
2022-03-06 19:35:31 +00:00
name: "Ivan Petrov",
email: "myname@gmul.com",
isValid: true,
2022-02-03 12:37:10 +00:00
},
];
```
Options have options:
2022-03-06 19:35:31 +00:00
- name - Display text
- email - Email address
- isValid - Displays whether the email is valid
2022-02-03 12:37:10 +00:00
#### Actions that can be performed on chips and input:
- Enter a chip into the input (chips are checked for a valid email, and the same chips).
- Add chips by pressing Enter or NumpadEnter.
2022-02-18 10:27:07 +00:00
- By double-clicking on the mouse button or pressing enter on a specific selected chip, you can switch to the chip editing mode.
2022-03-06 19:35:31 +00:00
- You can exit the editing mode by pressing Escape, Enter, NumpadEnter or by clicking ouside.
2022-02-03 12:37:10 +00:00
- Remove the chips by clicking on the button in the form of a cross.
- Click on the chip once, thereby highlighting it.
- Hold down the shift button by moving the arrows to the left, right or clicking the mouse on the chips, thereby highlighting several chips.
2022-02-18 10:27:07 +00:00
- The highlighted chip(s) can be removed by clicking on the button Backspace or Delete.
2022-02-03 12:37:10 +00:00
- The selected chip(s) can be copied to the clipboard by pressing "ctrl + c".
2022-02-08 13:41:29 +00:00
- You can remove all chips by clicking on the button "Clear list".
2022-02-03 12:37:10 +00:00
### Properties
2022-02-28 19:37:10 +00:00
| Props | Type | Required | Values | Default | Description |
| ------------------------ | :------------: | :------: | :----: | :-----------------------------------------------------------------------------: | -------------------------------------------------------------------------------- |
| `options` | `obj` , `array` | - | - | - | Array of objects with chips |
2022-03-06 19:35:31 +00:00
| `onChange` | `func` | ✅ | - | - | displays valid email addresses. Called when changing chips |
2022-02-28 19:37:10 +00:00
| `placeholder` | `string` | - | - | Invite people by name or email | Placeholder text for the input |
| `clearButtonLabel` | `string` | - | - | Clear list | The text of the button for cleaning all chips |
| `existEmailText` | `string` | - | - | This email address has already been entered | Warning text when entering an existing email |
| `invalidEmailText` | `string` | - | - | Invalid email address | Warning text when entering an invalid email |
| `exceededLimit` | `number` | - | - | 500 | Limit of chips (number) |
| `exceededLimitText` | `string` | - | - | The limit on the number of emails has reached the maximum | Warning text when exceeding the limit of the number of chips |
| `exceededLimitInputText` | `string` | - | - | The limit on the number of characters has reached the maximum value | Warning text when entering the number of characters in input exceeding the limit |
| `chipOverLimitText` | `string` | - | - | The limit on the number of characters in an email has reached its maximum value | Warning text when entering the number of email characters exceeding the limit |