73 lines
1.8 KiB
Plaintext
73 lines
1.8 KiB
Plaintext
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";
|
|
import EmailChips from "./";
|
|
import * as stories from "./email-chips.stories.js";
|
|
|
|
<Meta
|
|
title="Components/EmailChips"
|
|
component={EmailChips}
|
|
argTypes={{
|
|
onChange: { required: true },
|
|
}}
|
|
/>
|
|
|
|
# EmailChips
|
|
|
|
Custom email-chips
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import EmailChips from "@docspace/components/email-chips";
|
|
```
|
|
|
|
### EmailChips - Default
|
|
|
|
<Canvas>
|
|
<Story story={stories.Default} name="Default" />
|
|
</Canvas>
|
|
|
|
#### Properties
|
|
|
|
<ArgsTable story="Default" />
|
|
|
|
#### Options - an array of objects that contains the following fields:
|
|
|
|
```js
|
|
const options = [
|
|
{
|
|
name: "Ivan Petrov",
|
|
email: "myname@gmul.com",
|
|
isValid: true,
|
|
},
|
|
];
|
|
```
|
|
|
|
Options have options:
|
|
|
|
- name - Display text
|
|
- email - Email address
|
|
- isValid - Displays whether the email is valid
|
|
|
|
### EmailChips - Empty
|
|
|
|
<Canvas>
|
|
<Story story={stories.Empty} name="Empty" />
|
|
</Canvas>
|
|
|
|
#### Properties
|
|
|
|
<ArgsTable story="Empty" />
|
|
|
|
#### 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.
|
|
- By double-clicking on the mouse button or pressing enter on a specific selected chip, you can switch to the chip editing mode.
|
|
- You can exit the editing mode by pressing Escape, Enter, NumpadEnter or by clicking ouside.
|
|
- 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.
|
|
- The highlighted chip(s) can be removed by clicking on the button Backspace or Delete.
|
|
- The selected chip(s) can be copied to the clipboard by pressing "ctrl + c".
|
|
- You can remove all chips by clicking on the button "Clear list".
|