Merge pull request #534 from ONLYOFFICE/feature/inputWithChips

Feature/input with chips

packages/asc-web-components/email-chips/README.md

@@ -0,0 +1,70 @@
+# EmailChips
+
+Custom email-chips
+
+### Usage
+
+```js
+import EmailChips from "@appserver/components/email-chips";
+```
+
+```jsx
+<EmailChips
+  options={[]}
+  onChange={(selected) => console.log(selected)}
+  placeholder="Invite people by name or email"
+  clearButtonLabel="Clear list"
+  existEmailText="This email address has already been entered"
+  invalidEmailText="Invalid email address"
+  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,
+/>
+```
+
+#### Options - an array of objects that contains the following fields:
+
+```js
+const options = [
+  {
+    name: "Ivan Petrov",
+    email: "[email protected]",
+    isValid: true,
+  },
+];
+```
+
+Options have options:
+
+- name - Display text
+- email - Email address
+- isValid - Displays whether the email is valid
+
+#### 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".
+
+### Properties
+
+| Props                    |      Type      | Required | Values |                                     Default                                     | Description                                                                      |
+| ------------------------ | :------------: | :------: | :----: | :-----------------------------------------------------------------------------: | -------------------------------------------------------------------------------- |
+| `options`                | `obj`, `array` |    -     |   -    |                                        -                                        | Array of objects with chips                                                      |
+| `onChange`               |     `func`     |    ✅    |   -    |                                        -                                        | displays valid email addresses. Called when changing chips                       |
+| `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    |

packages/asc-web-components/email-chips/email-chips.stories.js

@@ -0,0 +1,75 @@
+import React from "react";
+import EmailChips from ".";
+
+const Options = [
+  { name: "Ivan Petrov", email: "[email protected]", isValid: true },
+  { name: "Donna Cross", email: "[email protected]", isValid: true },
+  { name: "[email protected]", email: "[email protected]", isValid: false },
+  { name: "Lisa Cooper", email: "[email protected]", isValid: true },
+  { name: "[email protected]", email: "[email protected]", isValid: true },
+  { name: "[email protected]", email: "[email protected]", isValid: true },
+  {
+    name: "[email protected]",
+    email: "[email protected]",
+    isValid: true,
+  },
+  {
+    name: "[email protected]",
+    email: "[email protected]",
+    isValid: true,
+  },
+  {
+    name: "[email protected]",
+    email: "[email protected]",
+    isValid: true,
+  },
+];
+
+const Wrapper = (props) => (
+  <div
+    style={{
+      height: "220px",
+    }}
+  >
+    {props.children}
+  </div>
+);
+
+const Template = (args) => (
+  <Wrapper>
+    <EmailChips {...args} />
+  </Wrapper>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  options: Options,
+  onChange: (selected) => console.log(selected),
+  placeholder: "Invite people by name or email",
+  clearButtonLabel: "Clear list",
+  existEmailText: "This email address has already been entered",
+  invalidEmailText: "Invalid email address",
+  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,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  options: [],
+  placeholder: "Type your chips...",
+  clearButtonLabel: "Clear list",
+  existEmailText: "This email address has already been entered",
+  invalidEmailText: "Invalid email address",
+  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,
+};

packages/asc-web-components/email-chips/email-chips.stories.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/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 "@appserver/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: "[email protected]",
+    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".

packages/asc-web-components/email-chips/email-chips.test.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { mount } from "enzyme";
+import EmailChips from ".";
+
+const baseProps = {
+  placeholder: "Placeholder",
+  clearButtonLabel: "Clear list ",
+  existEmailText: "This email address has already been entered",
+  invalidEmailText: "Invalid email",
+};
+
+describe("<InputWithChips />", () => {
+  it("accepts id", () => {
+    const wrapper = mount(<EmailChips {...baseProps} id="testId" />);
+
+    expect(wrapper.prop("id")).toEqual("testId");
+  });
+
+  it("accepts className", () => {
+    const wrapper = mount(<EmailChips {...baseProps} className="test" />);
+
+    expect(wrapper.prop("className")).toEqual("test");
+  });
+
+  it("accepts style", () => {
+    const wrapper = mount(
+      <EmailChips {...baseProps} style={{ color: "red" }} />
+    );
+
+    expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
+  });
+});