FIX (dropdownPosition): support dropdown position 'auto', 'top' and '…

…bottom'
sanusart · Jan 26, 2019 · 9fc4980 · 9fc4980
1 parent 5f87e82
commit 9fc4980
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 126 deletions.
diff --git a/README.md b/README.md
diff --git a/docs/src/examples/OpenOnTop.js b/docs/src/examples/OpenOnTop.js
@@ -13,7 +13,7 @@ const OpenOnTop = ({ options, title }) => (
     </Title>
     <Select
       multi
-      openOnTop
+      dropdownPosition="top"
       options={options}
       values={[]}
       onChange={(value) =>

diff --git a/docs/src/pages/api.md b/docs/src/pages/api.md
diff --git a/docs/src/pages/demo.js b/docs/src/pages/demo.js
@@ -36,7 +36,7 @@ export class Demo extends React.Component {
       color: '#0074D9',
       keepSelectedInList: true,
       closeOnSelect: false,
-      openOnTop: false,
+      dropdownPosition: 'auto',
       dropdownHeight: '300px'
     };
   }
@@ -168,7 +168,7 @@ export class Demo extends React.Component {
               noDataLabel="No matches found"
               closeOnSelect={this.state.closeOnSelect}
               noDataRenderer={this.state.noDataRenderer ? () => this.noDataRenderer() : undefined}
-              openOnTop={this.state.openOnTop}
+              dropdownPosition={this.state.dropdownPosition}
               itemRenderer={
                 this.state.itemRenderer
                   ? (item, itemIndex, props, state, methods) =>
@@ -224,16 +224,14 @@ export class Demo extends React.Component {
           />{' '}
           Disabled
           <br />
-          <input
-            type="checkbox"
-            checked={this.state.openOnTop}
-            onChange={() =>
-              this.setState({
-                openOnTop: !this.state.openOnTop
-              })
-            }
-          />{' '}
-          Open on top of select
+          Dropdown position
+          <StyledHtmlSelect
+            defaultValue={this.state.dropdownPosition}
+            onChange={(event) => this.setState({ dropdownPosition: event.target.value })}>
+              <option value="auto">auto</option>
+              <option value="top">top</option>
+              <option value="bottom">bottom</option>
+          </StyledHtmlSelect>
           <br />
           <input
             type="checkbox"
@@ -369,18 +367,18 @@ export class Demo extends React.Component {
           Custom color
           <br />
           Search by field:{' '}
-          <select
+          <StyledHtmlSelect
             defaultValue={this.state.searchBy}
             onChange={(event) => this.setState({ searchBy: event.target.value })}>
             {Object.keys(options[0]).map((f) => (
               <option key={f} value={f}>
                 {f}
               </option>
             ))}
-          </select>
+          </StyledHtmlSelect>
           <br />
           Label field:{' '}
-          <select
+          <StyledHtmlSelect
             defaultValue={this.state.labelField}
             onChange={(event) =>
               this.setState({
@@ -393,18 +391,18 @@ export class Demo extends React.Component {
                 {f}
               </option>
             ))}
-          </select>
+          </StyledHtmlSelect>
           <br />
           Value field:{' '}
-          <select
+          <StyledHtmlSelect
             defaultValue={this.state.valueField}
             onChange={(event) => this.setState({ valueField: event.target.value })}>
             {Object.keys(options[0]).map((f) => (
               <option key={f} value={f}>
                 {f}
               </option>
             ))}
-          </select>
+          </StyledHtmlSelect>
         </p>
 
         <details>
@@ -512,4 +510,13 @@ const Button = styled.button`
   }
 `;
 
+const StyledHtmlSelect = styled.select`
+  padding: 0;
+  margin: 0 0 0 10px;
+  height: 23px !important;
+  color: #0071dc;
+  background: #fff;
+  border: 1px solid #0071dc;
+`;
+
 export default Demo;
diff --git a/docs/src/pages/demos/open-on-top.md b/docs/src/pages/demos/open-on-top.md
@@ -1,7 +1,7 @@
 ---
-path: '/prop/open-on-top'
+path: '/prop/dropdown-position'
 date: '2017-11-07'
-title: 'openOnTop'
+title: 'dropdownPosition'
 demo: 8z0mw4z4j0
 ---
 
@@ -12,7 +12,7 @@ Open dropdown above the select
 ```
 <Select
 	multi
-	openOnTop
+	dropdownPosition="top"
 	options={options}
 	onChange={(values) => this.onChange(values)}
 	/>

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
@@ -6,17 +6,36 @@ import Item from '../components/Item';
 
 import { valueExistInSelected, hexToRGBA } from '../util';
 
+const dropdownPosition = (props, methods) => {
+  const DropdownBoundingClientRect = methods.getSelectRef().getBoundingClientRect();
+  const dropdownHeight =
+    DropdownBoundingClientRect.bottom + parseInt(props.dropdownHeight) + props.dropdownGap;
+
+  if (props.dropdownPosition !== 'auto') {
+    return props.dropdownPosition;
+  }
+
+  if (dropdownHeight > window.innerHeight && dropdownHeight > DropdownBoundingClientRect.top) {
+    return 'top';
+  }
+
+  return 'bottom';
+};
+
 const Dropdown = ({ props, state, methods }) => (
   <DropDown
     tabIndex="-1"
     aria-expanded="true"
     role="list"
-    openOnTop={props.openOnTop}
+    dropdownPosition={dropdownPosition(props, methods)}
     selectBounds={state.selectBounds}
     portal={props.portal}
     dropdownGap={props.dropdownGap}
     dropdownHeight={props.dropdownHeight}
-    className="react-dropdown-select-dropdown">
+    className={`react-dropdown-select-dropdown react-dropdown-select-dropdown-position-${dropdownPosition(
+      props,
+      methods
+    )}`}>
     {props.dropdownRenderer ? (
       props.dropdownRenderer(props, state, methods)
     ) : (
@@ -54,8 +73,8 @@ const Dropdown = ({ props, state, methods }) => (
 
 const DropDown = styled.div`
   position: absolute;
-  ${({ selectBounds, dropdownGap, openOnTop }) =>
-    openOnTop
+  ${({ selectBounds, dropdownGap, dropdownPosition }) =>
+    dropdownPosition === 'top'
       ? `bottom: ${selectBounds.height + 2 + dropdownGap}px`
       : `top: ${selectBounds.height + 2 + dropdownGap}px`};
   

diff --git a/src/index.js b/src/index.js
@@ -454,7 +454,7 @@ Select.defaultProps = {
   color: '#0074D9',
   keepSelectedInList: true,
   closeOnSelect: false,
-  openOnTop: false,
+  dropdownPosition: 'auto',
   dropdownHeight: '300px',
   autoFocus: true,
   portal: null,