Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

.gitignore

@@ -5,7 +5,6 @@
 .vs/
 .vscode/
 *-lock.json
-*.lock
 **/node_modules/
 **/storybook-static/
 /web/ASC.Web.Components/dist

build/publish.bat

@@ -1,5 +1,5 @@
 echo "Delete publish folder"
-del /s /q publish
+rmdir /s /q publish
 
 echo "Publish ASC.Notify.csproj project"
 dotnet publish ..\common\services\ASC.Notify\ASC.Notify.csproj -c Release -o publish/ASC.Notify/

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.61",
+  "version": "1.0.62",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",
@@ -111,5 +111,8 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "reactstrap": "^8.0.1"
+  },
+  "resolutions": {
+    "js-yaml": "3.13.1"
   }
 }

web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js

@@ -1,12 +1,14 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import { action } from '@storybook/addon-actions';
 import { withKnobs, text, number } from "@storybook/addon-knobs/react";
 import withReadme from "storybook-readme/with-readme";
 import Readme from "./README.md";
 import AdvancedSelector from "./";
 import Section from "../../../.storybook/decorators/section";
 import { boolean } from "@storybook/addon-knobs/dist/deprecated";
-import { ArrayValue } from "react-values";
+import { ArrayValue, BooleanValue } from "react-values";
+import Button from "../button";
 
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
@@ -71,17 +73,18 @@ storiesOf("Components|AdvancedSelector", module)
       <Section>
         <ArrayValue
           defaultValue={options}
-          onChange={() => console.log("ArrayValue onChange")}
+          onChange={() => action("options onChange")}
         >
           {({ value, set }) => (
             <AdvancedSelector
               placeholder={text("placeholder", "Search users")}
               onSearchChanged={value => {
-                set(options.filter(option => {
-                  return (
-                    option.label.indexOf(value) > -1
-                  );
-                }));
+                action("onSearchChanged")(value);
+                set(
+                  options.filter(option => {
+                    return option.label.indexOf(value) > -1;
+                  })
+                );
               }}
               options={value}
               groups={groups}
@@ -90,20 +93,130 @@ storiesOf("Components|AdvancedSelector", module)
               buttonLabel={text("buttonLabel", "Add members")}
               selectAllLabel={text("selectAllLabel", "Select all")}
               onSelect={selectedOptions => {
-                console.log("onSelect", selectedOptions);
+                action("onSelect")(selectedOptions); 
               }}
-              onChangeGroup={group => { 
-                set(options.filter(option => {
-                  return (
-                    option.groups &&
-                    option.groups.length > 0 &&
-                    option.groups.indexOf(group.key) > -1
-                  );
-                }));
+              onChangeGroup={group => {
+                set(
+                  options.filter(option => {
+                    return (
+                      option.groups &&
+                      option.groups.length > 0 &&
+                      option.groups.indexOf(group.key) > -1
+                    );
+                  })
+                );
               }}
             />
           )}
         </ArrayValue>
       </Section>
     );
+  })
+  .add("drop down", () => {
+    const optionsCount = number("Users count", 1000);
+
+    const groups = [
+      {
+        key: "group-all",
+        label: "All groups",
+        total: 0
+      },
+      {
+        key: "group-dev",
+        label: "Development",
+        total: 0
+      },
+      {
+        key: "group-management",
+        label: "Management",
+        total: 0
+      },
+      {
+        key: "group-marketing",
+        label: "Marketing",
+        total: 0
+      },
+      {
+        key: "group-mobile",
+        label: "Mobile",
+        total: 0
+      },
+      {
+        key: "group-support",
+        label: "Support",
+        total: 0
+      },
+      {
+        key: "group-web",
+        label: "Web",
+        total: 0
+      }
+    ];
+
+    const options = Array.from({ length: optionsCount }, (v, index) => {
+      const additional_group = groups[getRandomInt(1, 6)];
+      groups[0].total++;
+      additional_group.total++;
+      return {
+        key: `user${index}`,
+        groups: ["group-all", additional_group.key],
+        label: `User${index + 1} (All groups, ${additional_group.label})`
+      };
+    });
+
+    return (
+      <Section>
+        <BooleanValue
+          defaultValue={true}
+          onChange={() => action("isOpen changed")}
+        >
+          {({ value: isOpen, toggle }) => (
+            <div style={{position: "relative"}}>
+              <Button label="Toggle dropdown" onClick={toggle} />
+                <ArrayValue
+                  defaultValue={options}
+                  onChange={() => action("options onChange")}
+                >
+                  {({ value, set }) => (
+                    <AdvancedSelector
+                      isDropDown={true}
+                      isOpen={isOpen}
+                      placeholder={text("placeholder", "Search users")}
+                      onSearchChanged={value => {
+                        action("onSearchChanged")(value);
+                        set(
+                          options.filter(option => {
+                            return option.label.indexOf(value) > -1;
+                          })
+                        );
+                      }}
+                      options={value}
+                      groups={groups}
+                      selectedGroups={[groups[0]]}
+                      isMultiSelect={boolean("isMultiSelect", true)}
+                      buttonLabel={text("buttonLabel", "Add members")}
+                      selectAllLabel={text("selectAllLabel", "Select all")}
+                      onSelect={selectedOptions => {
+                        action("onSelect")(selectedOptions);
+                        toggle();
+                      }}
+                      onChangeGroup={group => {
+                        set(
+                          options.filter(option => {
+                            return (
+                              option.groups &&
+                              option.groups.length > 0 &&
+                              option.groups.indexOf(group.key) > -1
+                            );
+                          })
+                        );
+                      }}
+                    />
+                  )}
+                </ArrayValue>
+              </div>
+          )}
+        </BooleanValue>
+      </Section>
+    );
   });

web/ASC.Web.Components/src/components/advanced-selector/index.js

@@ -11,7 +11,10 @@ import ComboBox from "../combobox";
 import { isArrayEqual } from "../../utils/array";
 import findIndex from "lodash/findIndex";
 import filter from "lodash/filter";
+import DropDown from "../drop-down";
 
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 const Container = ({
   value,
   placeholder,
@@ -20,6 +23,7 @@ const Container = ({
   width,
   maxHeight,
   isDisabled,
+  onSelect,
   onSearchChanged,
   options,
   selectedOptions,
@@ -30,44 +34,54 @@ const Container = ({
   onChangeGroup,
   ...props
 }) => <div {...props} />;
+/* eslint-enable react/prop-types */
+/* eslint-enable no-unused-vars */
 
 const StyledContainer = styled(Container)`
   ${props => (props.width ? `width: ${props.width}px;` : "")}
 
-  .options_searcher {
-    margin-bottom: 12px;
-  }
+  .data_container {
+    margin: 16px;
 
-  .options_group_selector {
-    margin-bottom: 12px;
-  }
+    .options_searcher {
+      margin-bottom: 12px;
+    }
 
-  .option_select_all_checkbox {
-    margin-bottom: 12px;
-    margin-left: 8px;
-  }
+    .options_group_selector {
+      margin-bottom: 12px;
+    }
 
-  .options_list {
-    .option {
-      line-height: 32px;
-      cursor: pointer;
+    .option_select_all_checkbox {
+      margin-bottom: 12px;
+      margin-left: 8px;
+    }
 
-      .option_checkbox {
-        margin-left: 8px;
-      }
+    .options_list {
+      .option {
+        line-height: 32px;
+        cursor: pointer;
 
-      .option_link {
-        padding-left: 8px;
-      }
+        .option_checkbox {
+          margin-left: 8px;
+        }
 
-      &:hover {
-        background-color: #eceef1;
+        .option_link {
+          padding-left: 8px;
+        }
+
+        &:hover {
+          background-color: #eceef1;
+        }
       }
     }
   }
 
-  .add_members_btn {
-    margin: 16px 0;
+  .button_container {
+    border-top: 1px solid #eceef1;
+    .add_members_btn {
+      margin: 16px;
+      width: 293px;
+    }
   }
 `;
 
@@ -122,10 +136,10 @@ class AdvancedSelector extends React.Component {
     };
   };
 
-  getCurrentGroup = (groups) => {
+  getCurrentGroup = groups => {
     const currentGroup = groups.length > 0 ? groups[0] : "No groups";
     return currentGroup;
-  }
+  };
 
   onButtonClick = () => {
     this.props.onSelect &&
@@ -197,7 +211,7 @@ class AdvancedSelector extends React.Component {
     );
   };
 
-  render() {
+  renderBody = () => {
     const {
       value,
       placeholder,
@@ -211,68 +225,84 @@ class AdvancedSelector extends React.Component {
     } = this.props;
 
     const { selectedOptions, selectedAll, currentGroup, groups } = this.state;
-
-    console.log("AdvancedSelector render()", currentGroup, options);
-
     return (
       <StyledContainer {...this.props}>
-        <SearchInput
-          className="options_searcher"
-          isDisabled={isDisabled}
-          size="base"
-          scale={true}
-          isNeedFilter={false}
-          placeholder={placeholder}
-          value={value}
-          onChange={onSearchChanged}
-          onClearSearch={onSearchChanged.bind(this, "")}
-        />
-        {groups && groups.length > 0 && (
-          <ComboBox
-            className="options_group_selector"
+        <div className="data_container">
+          <SearchInput
+            className="options_searcher"
             isDisabled={isDisabled}
-            options={groups}
-            selectedOption={currentGroup}
-            dropDownMaxHeight={200}
-            scaled={true}
-            size="content"
-            onSelect={this.onCurrentGroupChange}
-          />
-        )}
-        {isMultiSelect && (
-          <Checkbox
-            label={selectAllLabel}
-            isChecked={selectedAll || selectedOptions.length === options.length}
-            isIndeterminate={!selectedAll && selectedOptions.length > 0}
-            className="option_select_all_checkbox"
-            onChange={this.onSelectedAllChange}
-          />
-        )}
-        <FixedSizeList
-          className="options_list"
-          height={maxHeight}
-          itemSize={32}
-          itemCount={options.length}
-          itemData={options}
-          outerElementType={CustomScrollbarsVirtualList}
-        >
-          {this.renderRow.bind(this)}
-        </FixedSizeList>
-        {isMultiSelect && (
-          <Button
-            className="add_members_btn"
-            primary={true}
-            size="big"
-            label={buttonLabel}
+            size="base"
             scale={true}
-            isDisabled={
-              !this.state.selectedOptions || !this.state.selectedOptions.length
-            }
-            onClick={this.onButtonClick}
+            isNeedFilter={false}
+            placeholder={placeholder}
+            value={value}
+            onChange={onSearchChanged}
+            onClearSearch={onSearchChanged.bind(this, "")}
           />
+          {groups && groups.length > 0 && (
+            <ComboBox
+              className="options_group_selector"
+              isDisabled={isDisabled}
+              options={groups}
+              selectedOption={currentGroup}
+              dropDownMaxHeight={200}
+              scaled={true}
+              size="content"
+              onSelect={this.onCurrentGroupChange}
+            />
+          )}
+          {isMultiSelect && (
+            <Checkbox
+              label={selectAllLabel}
+              isChecked={
+                selectedAll || selectedOptions.length === options.length
+              }
+              isIndeterminate={!selectedAll && selectedOptions.length > 0}
+              className="option_select_all_checkbox"
+              onChange={this.onSelectedAllChange}
+            />
+          )}
+          <FixedSizeList
+            className="options_list"
+            height={maxHeight}
+            itemSize={32}
+            itemCount={options.length}
+            itemData={options}
+            outerElementType={CustomScrollbarsVirtualList}
+          >
+            {this.renderRow.bind(this)}
+          </FixedSizeList>
+        </div>
+        {isMultiSelect && (
+          <div className="button_container">
+            <Button
+              className="add_members_btn"
+              primary={true}
+              size="big"
+              label={buttonLabel}
+              scale={true}
+              isDisabled={
+                !this.state.selectedOptions ||
+                !this.state.selectedOptions.length
+              }
+              onClick={this.onButtonClick}
+            />
+          </div>
         )}
       </StyledContainer>
     );
+  };
+
+  render() {
+    const { isDropDown, isOpen, options } = this.props;
+    const { currentGroup } = this.state;
+    console.log("AdvancedSelector render()", currentGroup, options);
+
+    return isDropDown ? (
+      <DropDown opened={isOpen}>{this.renderBody()}</DropDown>
+    ) : (
+      this.renderBody()
+    );
   }
 }
 
@@ -294,6 +324,8 @@ AdvancedSelector.propTypes = {
   buttonLabel: PropTypes.string,
   onSelect: PropTypes.func,
   onChangeGroup: PropTypes.func,
+  isDropDown: PropTypes.bool,
+  isOpen: PropTypes.bool
 };
 
 AdvancedSelector.defaultProps = {