upd

ONLYOFFICE · Jan 27, 2022 · 73c6bcb · 73c6bcb
1 parent bb6c826
commit 73c6bcb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/packages/asc-web-components/access-right-select/README.md b/packages/asc-web-components/access-right-select/README.md
@@ -8,8 +8,16 @@ import AccessRightSelect from "@appserver/components/AccessRightSelect";
 
 ```jsx
 <AccessRightSelect
-  accessRightsList=[{...}, {...}, {...}]
-  quotaList=[{...}, {...}, {...}]
+  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",
+  }}
 />
 ```
 
@@ -26,7 +34,7 @@ import AccessRightSelect from "@appserver/components/AccessRightSelect";
   {
     key: "key1",
     title: "Room administrator",
-    description: "Администрирование комнат, архивирование комнат, приглашение и управление пользователями в комнатах.",
+    description: "Administration of rooms, archiving of rooms, inviting and managing users in rooms.",
     icon: CrownIcon,
   }
 ```

diff --git a/packages/asc-web-components/access-right-select/index.js b/packages/asc-web-components/access-right-select/index.js
@@ -17,9 +17,15 @@ import {
 const AccessRightSelect = ({ options, onSelect, selectedOption, ...props }) => {
   const [currentItem, setCurrentItem] = useState(selectedOption);
 
-  function onSelectCurrentItem() {
-    setCurrentItem(this);
-    onSelect && onSelect(this);
+  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) => {
@@ -29,7 +35,11 @@ const AccessRightSelect = ({ options, onSelect, selectedOption, ...props }) => {
           return it.isSeparator ? (
             <DropDownItem isSeparator />
           ) : (
-            <DropDownItem key={it.key} onClick={onSelectCurrentItem.bind(it)}>
+            <DropDownItem
+              key={it.key}
+              data-key={it.key}
+              onClick={onSelectCurrentItem}
+            >
               <StyledAccessRightItem>
                 <StyledAccessRightItemIcon src={it.icon} />
                 <StyledAccessRightItemContent>
@@ -68,7 +78,7 @@ const AccessRightSelect = ({ options, onSelect, selectedOption, ...props }) => {
         scaled={false}
         selectedOption={{
           default: true,
-          key: 0,
+          key: currentItem?.key,
           label: currentItem?.title,
         }}
         size="content"