Merge pull request #377 from ONLYOFFICE/bugfix/dropdown-correct-display

Bugfix/dropdown correct display
ONLYOFFICE · Dec 3, 2021 · 293fd37 · 293fd37
2 parents 4c78667 + e60c082
commit 293fd37
Show file tree

Hide file tree

Showing 37 changed files with 276 additions and 48 deletions.
diff --git a/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js b/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js
@@ -17,7 +17,6 @@ class AdvancedSelector extends React.Component {
     super(props);
 
     this.ref = React.createRef();
-
     this.state = {
       displayType: this.getTypeByWidth(),
     };
@@ -87,16 +86,28 @@ class AdvancedSelector extends React.Component {
 
   render() {
     const { displayType } = this.state;
-    const { isOpen, id, className, style, withoutAside } = this.props;
+    const {
+      isOpen,
+      id,
+      className,
+      style,
+      withoutAside,
+      isDefaultDisplayDropDown,
+      smallSectionWidth,
+    } = this.props;
 
     //console.log(`AdvancedSelector render() isOpen=${isOpen} displayType=${displayType}`);
 
     return (
-      <div ref={this.ref} id={id} className={className} style={style}>
+      <div id={id} className={className} style={style}>
         {displayType === "dropdown" ? (
           <DropDown
+            forwardedRef={this.ref}
             open={isOpen}
             className="selector_dropdown-container"
+            smallSectionWidth={smallSectionWidth}
+            isDefaultMode={isDefaultDisplayDropDown}
+            className="dropdown-container"
             clickOutsideAction={this.onClose}
           >
             <Selector {...this.props} displayType={displayType} />
@@ -157,6 +168,7 @@ AdvancedSelector.propTypes = {
   onCancel: PropTypes.func,
   onAddNewClick: PropTypes.func,
   loadNextPage: PropTypes.func,
+  isDefaultDisplayDropDown: PropTypes.bool,
 };
 
 AdvancedSelector.defaultProps = {
@@ -168,6 +180,7 @@ AdvancedSelector.defaultProps = {
   allowAnyClickClose: true,
   displayType: "auto",
   options: [],
+  isDefaultDisplayDropDown: true,
 };
 
 export default AdvancedSelector;
diff --git a/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js b/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js
@@ -604,6 +604,7 @@ const Selector = (props) => {
                 scaled={true}
                 scaledOptions={true}
                 size="content"
+                isDefaultMode={false}
                 onSelect={onGroupSelect}
               />
               {isMultiSelect &&

diff --git a/packages/asc-web-common/components/FilterInput/FilterInput.js b/packages/asc-web-common/components/FilterInput/FilterInput.js
@@ -895,6 +895,8 @@ class FilterInput extends React.Component {
                 openFilterItems={openFilterItems}
                 hiddenFilterItems={hiddenFilterItems}
                 iconSize={iconSize}
+                smallSectionWidth={smallSectionWidth}
+                sectionWidth={sectionWidth}
                 getFilterData={getFilterData}
                 onClickFilterItem={this.onClickFilterItem}
                 onDeleteFilterItem={this.onDeleteFilterItem}

diff --git a/packages/asc-web-common/components/FilterInput/StyledFilterInput.js b/packages/asc-web-common/components/FilterInput/StyledFilterInput.js
@@ -70,9 +70,6 @@ const StyledFilterInput = styled.div`
       width: auto;
       padding-left: 4px;
     }
-    > div:last-child {
-      max-width: 220px;
-    }
     .combo-button-label {
       color: #333;
     }

diff --git a/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js b/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
@@ -160,7 +160,16 @@ class FilterItem extends React.Component {
       groupsCaption,
       defaultOption,
       asideView,
+      smallSectionWidth,
+      openItems,
+      sectionWidth,
     } = this.props;
+
+    const openInAside =
+      ((window.innerWidth < 1360 || sectionWidth < 1080) && openItems >= 3) ||
+      ((window.innerWidth < 1170 || sectionWidth < 1000) && openItems >= 2) ||
+      sectionWidth < 780;
+
     return (
       <StyledFilterItem key={id} id={id} block={block} opened={opened}>
         <StyledFilterItemContent isDisabled={isDisabled} isOpen={isOpen}>
@@ -186,6 +195,7 @@ class FilterItem extends React.Component {
                 isMultiSelect={false}
                 onCancel={this.onCancelSelector}
                 onSelect={this.onSelectGroup}
+                smallSectionWidth={smallSectionWidth}
                 displayType={asideView ? "aside" : "auto"}
               />
             </>
@@ -213,8 +223,9 @@ class FilterItem extends React.Component {
                 defaultOption={defaultOption}
                 defaultOptionLabel={defaultOptionLabel}
                 onCancel={this.onCancelSelector}
+                smallSectionWidth={smallSectionWidth}
                 onSelect={this.onSelectGroup}
-                displayType={asideView ? "aside" : "auto"}
+                displayType={asideView || openInAside ? "aside" : "auto"}
               />
             </>
           )}
@@ -234,7 +245,9 @@ class FilterItem extends React.Component {
                   size="content"
                   scaled={false}
                   noBorder={true}
+                  isDefaultMode={false}
                   opened={opened}
+                  textOverflow={true}
                   directionX="left"
                   toggleAction={this.toggleCombobox}
                   dropDownMaxHeight={300}
@@ -317,7 +330,12 @@ class FilterBlock extends React.Component {
     });
   };
   getFilterItems = () => {
-    const { openFilterItems, hiddenFilterItems } = this.props;
+    const {
+      openFilterItems,
+      hiddenFilterItems,
+      smallSectionWidth,
+      sectionWidth,
+    } = this.props;
     const { asideView } = this.props;
     const _this = this;
     let result = [];
@@ -341,6 +359,8 @@ class FilterBlock extends React.Component {
           <FilterItem
             block={false}
             isDisabled={_this.props.isDisabled}
+            sectionWidth={sectionWidth}
+            smallSectionWidth={smallSectionWidth}
             key={key}
             groupItems={_this.props.getFilterData().filter(function (t) {
               return t.group == group && t.group != t.key;
@@ -359,6 +379,7 @@ class FilterBlock extends React.Component {
             selectedItem={selectedItem}
             onFilterRender={_this.props.onFilterRender}
             asideView={asideView}
+            openItems={openFilterItems.length}
           ></FilterItem>
         );
       });
@@ -388,11 +409,13 @@ class FilterBlock extends React.Component {
               return t.group == group && t.group != t.key;
             })}
             onSelectFilterItem={_this.props.onClickFilterItem}
+            sectionWidth={sectionWidth}
             id={key}
             groupLabel={groupLabel}
             opened={key.indexOf("_-1") == -1 ? false : true}
             label={label}
             onClose={_this.onDeleteFilterItem}
+            smallSectionWidth={smallSectionWidth}
             typeSelector={typeSelector}
             groupsCaption={groupsCaption}
             defaultOptionLabel={defaultOptionLabel}

diff --git a/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js b/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js
@@ -26,7 +26,7 @@ class HideFilter extends React.Component {
   }
 
   onClick = (state, e) => {
-    if (!state && e && this.dropDownRef.current.contains(e.target)) {
+    if (!state && e && this.ref.current.contains(e.target)) {
       return;
     }
     if (!this.props.isDisabled) {
@@ -58,11 +58,12 @@ class HideFilter extends React.Component {
             <StyledExpanderDownIcon size="scale" />
           </Caret>
         </StyledHideFilterButton>
-
         <div className="dropdown-style" ref={this.dropDownRef}>
           <DropDown
+            forwardedRef={this.ref}
             className="drop-down hide-filter-drop-down"
             clickOutsideAction={this.handleClickOutside}
+            isDefaultMode={false}
             manualY="8px"
             open={popoverOpen}
           >

diff --git a/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js b/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js
@@ -155,6 +155,7 @@ class SortComboBox extends React.Component {
         ref={this.combobox}
         scaled={true}
         selectedOption={selectedOption}
+        scaledOptions={true}
         size="content"
       >
         <StyledIconButton sortDirection={!!sortDirection}>

diff --git a/packages/asc-web-common/custom.scss b/packages/asc-web-common/custom.scss
@@ -19,6 +19,24 @@ body {
   }
 }
 
+.table-container_settings-checkbox {
+  padding: 8px 16px;
+}
+
+.hide-filter-drop-down {
+  padding: 16px !important;
+  margin-top: 2px;
+}
+
+.styled-close-button {
+  margin-left: 7px;
+  margin-top: -1px;
+}
+
+.styled-combobox {
+  margin-top: -2px;
+}
+
 body {
   margin: 0;
 }

diff --git a/packages/asc-web-components/calendar/index.js b/packages/asc-web-components/calendar/index.js
@@ -493,6 +493,7 @@ class Calendar extends Component {
           <ComboBoxStyle>
             <ComboBoxMonthStyle size={size}>
               <ComboBox
+                isDefaultMode={false}
                 scaled={true}
                 scaledOptions={true}
                 dropDownMaxHeight={dropDownSizeMonth}
@@ -504,6 +505,7 @@ class Calendar extends Component {
             </ComboBoxMonthStyle>
             <ComboBoxDateStyle>
               <ComboBox
+                isDefaultMode={false}
                 scaled={true}
                 scaledOptions={true}
                 dropDownMaxHeight={dropDownSizeYear}

diff --git a/packages/asc-web-components/combobox/index.js b/packages/asc-web-components/combobox/index.js
@@ -90,15 +90,20 @@ class ComboBox extends React.Component {
       textOverflow,
       showDisabledItems,
       offsetDropDownY,
+      isDefaultMode,
     } = this.props;
     const { isOpen, selectedOption } = this.state;
 
     const dropDownMaxHeightProp = dropDownMaxHeight
       ? { maxHeight: dropDownMaxHeight }
       : {};
-    const dropDownManualWidthProp = scaledOptions
-      ? { manualWidth: "100%" }
-      : {};
+
+    const dropDownManualWidthProp =
+      scaledOptions && !isDefaultMode
+        ? { manualWidth: "100%" }
+        : scaledOptions && this.ref.current
+        ? { manualWidth: this.ref.current.clientWidth + "px" }
+        : { manualWidth: "200px" };
 
     const optionsLength = options.length
       ? options.length
@@ -141,10 +146,13 @@ class ComboBox extends React.Component {
             directionY={directionY}
             manualY={offsetDropDownY}
             open={isOpen}
+            forwardedRef={this.ref}
             clickOutsideAction={this.handleClickOutside}
+            style={advancedOptions && { padding: "6px 0px" }}
             {...dropDownMaxHeightProp}
             {...dropDownManualWidthProp}
             showDisabledItems={showDisabledItems}
+            isDefaultMode={isDefaultMode}
           >
             {advancedOptions
               ? advancedOptions
@@ -176,7 +184,7 @@ ComboBox.propTypes = {
   /** X direction selection */
   directionX: PropTypes.oneOf(["left", "right"]),
   /** Y direction selection */
-  directionY: PropTypes.oneOf(["bottom", "top"]),
+  directionY: PropTypes.oneOf(["bottom", "top", "both"]),
   /** Component Display Type */
   displayType: PropTypes.oneOf(["default", "toggle"]),
   /** Height of Dropdown */
@@ -211,6 +219,8 @@ ComboBox.propTypes = {
   textOverflow: PropTypes.bool,
   /** Disables clicking on the icon */
   disableIconClick: PropTypes.bool,
+  /** Defines the operation mode of the component, by default with the portal */
+  isDefaultMode: PropTypes.bool,
   /** Y offset */
   offsetDropDownY: PropTypes.string,
 };
@@ -225,6 +235,7 @@ ComboBox.defaultProps = {
   disableIconClick: true,
   showDisabledItems: false,
   offsetDropDownY: "102%",
+  isDefaultMode: true,
 };
 
 export default ComboBox;
diff --git a/packages/asc-web-components/context-menu-button/index.js b/packages/asc-web-components/context-menu-button/index.js
@@ -196,6 +196,7 @@ class ContextMenuButton extends React.Component {
             directionX={directionX}
             directionY={directionY}
             open={isOpen}
+            forwardedRef={this.ref}
             clickOutsideAction={this.clickOutsideAction}
             columnCount={columnCount}
             withBackdrop={!!isMobile}

diff --git a/packages/asc-web-components/date-picker/index.js b/packages/asc-web-components/date-picker/index.js
@@ -349,9 +349,11 @@ class DatePicker extends Component {
           displayType === "dropdown" ? (
             <DropDownStyle>
               <DropDown
+                forwardedRef={this.ref}
                 className="drop-down"
                 open={isOpen}
                 clickOutsideAction={this.onClose}
+                isDefaultMode={false}
               >
                 {this.renderBody()}
               </DropDown>