Merge pull request #498 from ONLYOFFICE/feature/accessRightSelect

Feature/access right select

packages/asc-web-components/access-right-select/README.md

@@ -0,0 +1,52 @@
+# AccessRightSelect
+
+### Usage
+
+```js
+import AccessRightSelect from "@appserver/components/AccessRightSelect";
+```
+
+```jsx
+<AccessRightSelect
+  options={options}
+  onSelect={(option) => console.log("selected", option)}
+  selectedOption={{
+    key: "key1",
+    title: "Room administrator",
+    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
+    icon: CrownIcon,
+    quota: "free",
+    color: "#20D21F",
+  }}
+/>
+```
+
+#### Options is an array of objects that contains the following fields:
+
+- key
+- title
+- description
+- icon
+- quota
+- color
+
+##### Example:
+
+```js
+  {
+    key: "key1",
+    title: "Room administrator",
+    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
+    icon: CrownIcon,
+    quota: "free",
+    color: "#20D21F",
+  }
+```
+
+### Properties
+
+| Props            |      Type      | Required | Values | Default | Description                                                        |
+| ---------------- | :------------: | :------: | :----: | :-----: | ------------------------------------------------------------------ |
+| `options`        | `obj`, `array` |    ✅    |   -    |    -    | List of options                                                    |
+| `onSelect`       | `obj`, `array` |    -     |   -    |    -    | Will be triggered whenever an AccessRightSelect is selected option |
+| `selectedOption` |     `obj`      |    -     |   -    |    -    | The option that is selected by default                             |

packages/asc-web-components/access-right-select/access-right-select.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import AccessRightSelect from "./";
+import { data } from "./data";
+
+const Wrapper = (props) => (
+  <div
+    style={{
+      height: "420px",
+    }}
+  >
+    {props.children}
+  </div>
+);
+
+const Template = (args) => (
+  <Wrapper>
+    <AccessRightSelect {...args} />
+  </Wrapper>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  options: data,
+  selectedOption: data[0],
+};

packages/asc-web-components/access-right-select/access-right-select.stories.mdx

@@ -0,0 +1,55 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+
+import AccessRightSelect from "./";
+import * as stories from "./access-right-select.stories.js";
+
+<Meta
+  title="Components/AccessRightSelect"
+  component={AccessRightSelect}
+  argTypes={{
+    onSelect: {
+      action: "onSelect",
+    },
+    options: { required: true },
+  }}
+/>
+
+# AccessRightSelect
+
+Custom access-right-select
+
+<Canvas>
+  <Story story={stories.Default} name="Default" />
+</Canvas>
+
+### Properties
+
+<ArgsTable story="Default" />
+
+### Import
+
+```js
+import AccessRightSelect from "@appserver/components/access-right-secelt";
+```
+
+#### Options is an array of objects that contains the following fields:
+
+- key
+- title
+- description
+- icon
+- quota
+- color
+
+##### Example:
+
+```js
+  {
+    key: "key1",
+    title: "Room administrator",
+    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
+    icon: CrownIcon,
+    quota: "free",
+    color: "#20D21F",
+  }
+```

packages/asc-web-components/access-right-select/data.js

@@ -0,0 +1,60 @@
+import {
+  AccessNoneIcon,
+  CheckRoundIcon,
+  CommentIcon,
+  CrownIcon,
+  EyeIcon,
+  PencilIcon,
+  ReviewIcon,
+} from "./svg";
+
+export const data = [
+  {
+    key: "key1",
+    title: "Room administrator",
+    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
+    icon: CrownIcon,
+    quota: "free",
+    color: "#20D21F",
+  },
+  {
+    key: "key2",
+    title: "Full access",
+    description: `Edit, upload, create, view, download, delete files and folders.`,
+    icon: CheckRoundIcon,
+    quota: "paid",
+    color: "#EDC409",
+  },
+
+  { key: "key3", isSeparator: true },
+  {
+    key: "key4",
+    title: "Editing",
+    description: `Editing, viewing, downloading files and folders, filling out forms.`,
+    icon: PencilIcon,
+  },
+  {
+    key: "key5",
+    title: "Review",
+    description: `Reviewing, viewing, downloading files and folders, filling out forms.`,
+    icon: ReviewIcon,
+  },
+  {
+    key: "key6",
+    title: "Comment",
+    description: `Commenting on files, viewing, downloading files and folders, filling out forms.`,
+    icon: CommentIcon,
+  },
+  {
+    key: "key7",
+    title: "Read only",
+    description: `Viewing, downloading files and folders, filling out forms.`,
+    icon: EyeIcon,
+  },
+  {
+    key: "key8",
+    title: "Deny access",
+    description: "",
+    icon: AccessNoneIcon,
+  },
+];

packages/asc-web-components/access-right-select/index.js

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import ComboBox from "../combobox/index.js";
+import DropDownItem from "../drop-down-item/index.js";
+import Badge from "../badge/index.js";
+
+import {
+  StyledAccessRightWrapper,
+  StyledAccessRightIcon,
+  StyledAccessRightDescriptionItem,
+  StyledAccessRightItem,
+  StyledAccessRightItemIcon,
+  StyledAccessRightItemContent,
+  StyledAccessRightItemTitleAndBadge,
+} from "./styled-accessright.js";
+
+const AccessRightSelect = ({ options, onSelect, selectedOption, ...props }) => {
+  const [currentItem, setCurrentItem] = useState(selectedOption);
+
+  function onSelectCurrentItem(e) {
+    const key = e.currentTarget.dataset.key;
+    const item = options.find((el) => {
+      return el.key === key;
+    });
+    if (item) {
+      setCurrentItem(item);
+      onSelect && onSelect(item);
+    }
+  }
+
+  const formatToAccessRightItem = (data) => {
+    return (
+      <>
+        {data.map((it) => {
+          return it.isSeparator ? (
+            <DropDownItem isSeparator />
+          ) : (
+            <DropDownItem
+              key={it.key}
+              data-key={it.key}
+              onClick={onSelectCurrentItem}
+            >
+              <StyledAccessRightItem>
+                <StyledAccessRightItemIcon src={it.icon} />
+                <StyledAccessRightItemContent>
+                  <StyledAccessRightItemTitleAndBadge>
+                    {it.title}
+                    {it.quota && (
+                      <Badge
+                        label={it.quota}
+                        backgroundColor={it.color}
+                        fontSize="8px"
+                      />
+                    )}
+                  </StyledAccessRightItemTitleAndBadge>
+                  <StyledAccessRightDescriptionItem>
+                    {it.description}
+                  </StyledAccessRightDescriptionItem>
+                </StyledAccessRightItemContent>
+              </StyledAccessRightItem>
+            </DropDownItem>
+          );
+        })}
+      </>
+    );
+  };
+
+  return (
+    <StyledAccessRightWrapper>
+      <StyledAccessRightIcon src={currentItem?.icon} />
+      <ComboBox
+        advancedOptions={formatToAccessRightItem(options)}
+        directionX="left"
+        directionY="bottom"
+        opened
+        noBorder
+        options={[]}
+        scaled={false}
+        selectedOption={{
+          default: true,
+          key: currentItem?.key,
+          label: currentItem?.title,
+        }}
+        size="content"
+      />
+    </StyledAccessRightWrapper>
+  );
+};
+
+AccessRightSelect.propTypes = {
+  /** List of rights */
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /** Will be triggered whenever an AccessRightSelect is selected option */
+  onSelect: PropTypes.func,
+  /** The option that is selected by default */
+  selectedOption: PropTypes.object,
+};
+
+export default AccessRightSelect;

packages/asc-web-components/access-right-select/styled-accessright.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import Base from "../themes/base";
+
+const StyledAccessRightWrapper = styled.div`
+  display: flex;
+`;
+
+const StyledAccessRightIcon = styled.img`
+  margin-right: 4.18px;
+`;
+
+const StyledAccessRightItem = styled.div`
+  width: 424px;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-content: center;
+
+  padding: 7px 0px;
+
+  line-height: 16px;
+  font-style: normal;
+`;
+
+const StyledAccessRightDescriptionItem = styled.div`
+  margin: 1px 0px;
+
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #a3a9ae;
+`;
+
+const StyledAccessRightItemIcon = styled.img`
+  margin-right: 8px;
+`;
+
+const StyledAccessRightItemContent = styled.div`
+  width: 100%;
+  white-space: normal;
+`;
+
+const StyledAccessRightItemTitleAndBadge = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+StyledAccessRightItem.defaultProps = { theme: Base };
+export {
+  StyledAccessRightItem,
+  StyledAccessRightDescriptionItem,
+  StyledAccessRightItemIcon,
+  StyledAccessRightItemContent,
+  StyledAccessRightItemTitleAndBadge,
+  StyledAccessRightWrapper,
+  StyledAccessRightIcon,
+};