web: Components: Init Aside inside AdvancedSelector

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

@@ -1,12 +1,11 @@
 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 { withKnobs, text, number, boolean, select } 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, select } from "@storybook/addon-knobs/dist/deprecated";
 import { ArrayValue, BooleanValue } from "react-values";
 import Button from "../button";
 
@@ -78,6 +77,7 @@ const groups = [
 ];
 
 const sizes = ["compact", "full"];
+const displayTypes = ['dropdown', 'aside'];
 
 storiesOf("Components|AdvancedSelector", module)
   .addDecorator(withKnobs)
@@ -95,65 +95,6 @@ storiesOf("Components|AdvancedSelector", module)
       };
     });
 
-    return (
-      <Section>
-        <ArrayValue
-          defaultValue={options}
-          onChange={() => action("options onChange")}
-        >
-          {({ value, set }) => (
-            <AdvancedSelector
-              size={select("size", sizes, "full")}
-              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); 
-              }}
-              onChangeGroup={group => {
-                set(
-                  options.filter(option => {
-                    return (
-                      option.groups &&
-                      option.groups.length > 0 &&
-                      option.groups.indexOf(group.key) > -1
-                    );
-                  })
-                );
-              }}
-              allowCreation={boolean("allowCreation", false)}
-              onAddNewClick={() => action("onSelect") }
-            />
-          )}
-        </ArrayValue>
-      </Section>
-    );
-  })
-  .add("drop down", () => {
-    const optionsCount = number("Users count", 1000);
-    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
@@ -170,8 +111,6 @@ storiesOf("Components|AdvancedSelector", module)
                   {({ value, set }) => (
                     <AdvancedSelector
                       size={select("size", sizes, "full")}
-                      isDropDown={true}
-                      isOpen={isOpen}
                       placeholder={text("placeholder", "Search users")}
                       onSearchChanged={value => {
                         action("onSearchChanged")(value);
@@ -205,6 +144,8 @@ storiesOf("Components|AdvancedSelector", module)
                       }}
                       allowCreation={boolean("allowCreation", false)}
                       onAddNewClick={() => action("onSelect") }
+                      isOpen={isOpen}
+                      displayType={select("displayType", displayTypes, "dropdown")}
                     />
                   )}
                 </ArrayValue>

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

@@ -16,6 +16,9 @@ import isEqual from "lodash/isEqual";
 import DropDown from "../drop-down";
 import { handleAnyClick } from "../../utils/event";
 import isEmpty from "lodash/isEmpty";
+import Aside from "../layout/sub-components/aside";
+
+const displayTypes = ['dropdown', 'aside'];
 
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
@@ -37,7 +40,7 @@ const Container = ({
   selectedGroups,
   onChangeGroup,
   isOpen,
-  isDropDown,
+  displayType,
   containerWidth,
   containerHeight,
   allowCreation,
@@ -63,13 +66,13 @@ const StyledContainer = styled(Container)`
 
     .head_container {
       display: flex;
-      margin-bottom: ${props => props.isDropDown ? 8 : 16}px;
+      margin-bottom: ${props => props.displayType === "dropdown" ? 8 : 16}px;
 
       .options_searcher {
         display: inline-block;
         width: 100%;
 
-        ${props => props.isDropDown && props.size === "full" && css`
+        ${props => props.displayType === "dropdown" && props.size === "full" && css`
           margin-right: ${props =>
             props.allowCreation ?
             8 : 16
@@ -106,7 +109,7 @@ const StyledContainer = styled(Container)`
 
     .data_column_one {
       ${props =>
-        props.isDropDown && props.groups && props.groups.length > 0
+        props.displayType === "dropdown" && props.groups && props.groups.length > 0
           ? css`
               width: 50%;
               display: inline-block;
@@ -138,7 +141,7 @@ const StyledContainer = styled(Container)`
 
     .data_column_two {
       ${props =>
-        props.isDropDown && props.groups && props.groups.length > 0
+        props.displayType === "dropdown" && props.groups && props.groups.length > 0
           ? css`
               width: 50%;
               display: inline-block;
@@ -371,7 +374,7 @@ class AdvancedSelector extends React.Component {
       buttonLabel,
       selectAllLabel,
       size,
-      isDropDown,
+      displayType,
       onAddNewClick,
       allowCreation
     } = this.props;
@@ -408,14 +411,14 @@ class AdvancedSelector extends React.Component {
       case "compact":
           containerHeight = hasGroups ? "326px" : "100%";
           containerWidth = "379px";
-          listWidth = isDropDown ? 356 : 356;
+          listWidth = displayType === "dropdown" ? 356 : 356;
           listHeight = hasGroups ? 488 : isMultiSelect ? 176 : 226;
         break;
       case "full":
       default:
           containerHeight = "100%";
-          containerWidth = isDropDown ? "690px" : "326px";
+          containerWidth = displayType === "dropdown" ? "690px" : "326px";
-          listWidth = isDropDown ? 320 : 302;
+          listWidth = displayType === "dropdown" ? 320 : 302;
           listHeight = 488;
         break;
     }
@@ -458,7 +461,7 @@ class AdvancedSelector extends React.Component {
                 />
               )}
               </div>
-              {!isDropDown &&
+              {displayType === "aside" &&
                 groups &&
                 groups.length > 0 && (
                   <ComboBox
@@ -496,7 +499,7 @@ class AdvancedSelector extends React.Component {
                 {this.renderRow.bind(this)}
               </FixedSizeList>
             </div>
-            {isDropDown && size === "full" && groups && groups.length > 0 && (
+            {displayType === "dropdown" && size === "full" && groups && groups.length > 0 && (
               <div className="data_column_two">
                 <Text.Body
                   as="p"
@@ -541,13 +544,15 @@ class AdvancedSelector extends React.Component {
   };
 
   render() {
-    const { isDropDown, isOpen } = this.props;
+    const { displayType, isOpen } = this.props;
     //console.log("AdvancedSelector render()");
 
-    return isDropDown ? (
+    return displayType === "dropdown" ? (
       <DropDown opened={isOpen}>{this.renderBody()}</DropDown>
     ) : (
-      this.renderBody()
+      <Aside visible={isOpen} scale={false}>
+        {this.renderBody()}
+      </Aside>
     );
   }
 }
@@ -570,11 +575,11 @@ AdvancedSelector.propTypes = {
   onSelect: PropTypes.func,
   onChangeGroup: PropTypes.func,
   onCancel: PropTypes.func,
-  isDropDown: PropTypes.bool,
   isOpen: PropTypes.bool,
   allowCreation: PropTypes.bool,
   onAddNewClick: PropTypes.func,
-  allowAnyClickClose: PropTypes.bool
+  allowAnyClickClose: PropTypes.bool,
+  displayType: PropTypes.oneOf(displayTypes)
 };
 
 AdvancedSelector.defaultProps = {
@@ -582,7 +587,8 @@ AdvancedSelector.defaultProps = {
   size: "compact",
   buttonLabel: "Add members",
   selectAllLabel: "Select all",
-  allowAnyClickClose: true
+  allowAnyClickClose: true,
+  displayType: "dropdown"
 };
 
 export default AdvancedSelector;

web/ASC.Web.Components/src/components/examples/people.selectors.stories.js

@@ -100,7 +100,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
               >
                 {({ value, set }) => (
                   <AdvancedSelector
-                    isDropDown={true}
+                    displayType="dropdown"
                     isOpen={isOpen}
                     size="compact"
                     placeholder={text("placeholder", "Search")}
@@ -142,179 +142,6 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
         label: `User${index + 1} (All groups, ${additional_group.label})`
       };
     });
-    return (
-      <Section>
-        <BooleanValue
-          defaultValue={false}
-          onChange={() => action("modalVisible changed")}
-        >
-          {({ value: modalVisible, toggle: toggleModalVisible }) => (
-            <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}
-                          size="full"
-                          placeholder={text("placeholder", "Search")}
-                          onSearchChanged={value => {
-                            action("onSearchChanged")(value);
-                            set(
-                              options.filter(option => {
-                                return option.label.indexOf(value) > -1;
-                              })
-                            );
-                          }}
-                          options={value}
-                          groups={groups}
-                          isMultiSelect={boolean("isMultiSelect", true)}
-                          buttonLabel={text("buttonLabel", "Add departments")}
-                          selectAllLabel={text("selectAllLabel", "Select all")}
-                          onSelect={selectedOptions => {
-                            action("onSelect")(selectedOptions);
-                            toggle();
-                          }}
-                          onCancel={toggle}
-                          allowCreation={boolean("allowCreation", true)}
-                          onAddNewClick={toggleModalVisible}
-                          allowAnyClickClose={!modalVisible}
-                        />
-                        <ModalDialog
-                          zIndex={1001}
-                          visible={modalVisible}
-                          headerContent="New User"
-                          bodyContent={
-                            <div className="create_new_user_modal">
-                              <FieldContainer
-                                isVertical={true}
-                                isRequired={true}
-                                hasError={false}
-                                labelText={"First name:"}
-                              >
-                                <TextInput
-                                  value={""}
-                                  hasError={false}
-                                  className="firstName-input"
-                                  scale={true}
-                                  autoComplete="off"
-                                  onChange={e => {
-                                    //set(e.target.value);
-                                  }}
-                                />
-                              </FieldContainer>
-                              <FieldContainer
-                                isVertical={true}
-                                isRequired={true}
-                                hasError={false}
-                                labelText={"Last name:"}
-                              >
-                                <TextInput
-                                  value={""}
-                                  hasError={false}
-                                  className="lastName-input"
-                                  scale={true}
-                                  autoComplete="off"
-                                  onChange={e => {
-                                    //set(e.target.value);
-                                  }}
-                                />
-                              </FieldContainer>
-                              <FieldContainer
-                                isVertical={true}
-                                isRequired={true}
-                                hasError={false}
-                                labelText={"E-mail:"}
-                              >
-                                <TextInput
-                                  value={""}
-                                  hasError={false}
-                                  className="email-input"
-                                  scale={true}
-                                  autoComplete="off"
-                                  onChange={e => {
-                                    //set(e.target.value);
-                                  }}
-                                />
-                              </FieldContainer>
-                              <FieldContainer
-                                isVertical={true}
-                                isRequired={true}
-                                hasError={false}
-                                labelText={"Group:"}
-                              >
-                                <ComboBox
-                                  options={groups}
-                                  className="group-input"
-                                  onSelect={option =>
-                                    console.log("Selected option", option)
-                                  }
-                                  selectedOption={{
-                                    key: 0,
-                                    label: "Select"
-                                  }}
-                                  dropDownMaxHeight={200}
-                                  scaled={true}
-                                  scaledOptions={true}
-                                  size="content"
-                                />
-                              </FieldContainer>
-                            </div>
-                          }
-                          footerContent={[
-                            <Button
-                              key="CreateBtn"
-                              label="Create"
-                              primary={true}
-                              size="big"
-                              onClick={e => {
-                                console.log("CreateBtn click", e);
-                                toggleModalVisible();
-                              }}
-                            />
-                          ]}
-                          onClose={toggleModalVisible}
-                        />
-                      </>
-                    )}
-                  </ArrayValue>
-                </div>
-              )}
-            </BooleanValue>
-          )}
-        </BooleanValue>
-      </Section>
-    );
-  })
-  .add("people user selector as advanced ComboBox", () => {
-    const optionsCount = number("Users count", 1000);
-    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})`
-      };
-    });
-    let selectedOptionsHead = [];
-    const getSelectedOption = (count, maxCount) => {
-      return {
-        key: 0,
-        //icon: 'icon_name', //if you need insert ComboBox styled image 
-        label: `Selected (${count}/${maxCount})`
-      }
-    }
 
     return (
       <Section>
@@ -333,7 +160,11 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
                     label="Toggle dropdown"
                     options={options}
                     isOpen={isOpen}
-                    selectedOption={getSelectedOption(selectedOptionsHead.length, options.length)}
+                    selectedOption={{
+                      key: 0,
+                      //icon: 'icon_name', //if you need insert ComboBox styled image 
+                      label: "Add employee"
+                    }}
                     //innerContainer={react.node} // if you need insert custom node element inside ComboBox
                     onClick={toggle}
                   />
@@ -344,7 +175,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
                     {({ value, set }) => (
                       <>
                         <AdvancedSelector
-                          isDropDown={true}
+                          displayType="dropdown"
                           isOpen={isOpen}
                           size="full"
                           placeholder={text("placeholder", "Search")}