docs: Add comment && modify README.md

react-component · Sep 18, 2017 · d5ea7d5 · d5ea7d5
1 parent 2d7f515
commit d5ea7d5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,12 @@ React.render(<Mention />, container);
           <td></td>
           <td>additional css class of root dom node</td>
         </tr>
+        <tr>
+          <td>placement</td>
+          <td>String</td>
+          <td>"bottom"</td>
+          <td>suggestion placement, available values: "top", "bottom"</td>
+        </tr>
     </tbody>
 </table>
 

diff --git a/examples/controlled.js b/examples/controlled.js
@@ -46,6 +46,7 @@ class MentionEditor extends React.Component {
           value={editorState}
           onChange={this.onChange}
           suggestions={suggestions} prefix="@"
+          // placement="top"
         />
       </div>
     );

diff --git a/src/component/Suggestions.react.jsx b/src/component/Suggestions.react.jsx
@@ -223,14 +223,19 @@ export default class Suggestions extends React.Component {
     if (active && dropDownPosition) {
       const placement = this.props.placement;
       const dropDownStyle = this.getPositionStyle(true, dropDownPosition.position());
+
+      // Check if the above space is crowded
       const isTopCrowded = parseFloat(dropDownStyle.top) - window.scrollY - container.offsetHeight < 0;
+      // Check if the under space is crowded
       const isBottomCrowded = (parseFloat(dropDownStyle.top) + container.offsetHeight) - (window.innerHeight || document.documentElement.clientHeight) > 0;
 
       if (placement === 'top' && !isTopCrowded) {
+        // The above space isn't crowded
         dropDownStyle.top = `${parseFloat(dropDownStyle.top) - container.offsetHeight || 0}px`;
       }
 
       if (placement === 'bottom' && isBottomCrowded && !isTopCrowded) {
+        // The above space isn't crowded and the under space is crowded.
         dropDownStyle.top = `${parseFloat(dropDownStyle.top) - container.offsetHeight || 0}px`;
       }
 
@@ -274,9 +279,9 @@ export default class Suggestions extends React.Component {
         </Nav>
       );
     }, this) :
-      <div className={`${prefixCls}-dropdown-notfound ${prefixCls}-dropdown-item`}>
-        {this.props.notFoundContent}
-      </div>;
+    <div className={`${prefixCls}-dropdown-notfound ${prefixCls}-dropdown-item`}>
+      {this.props.notFoundContent}
+    </div>;
   }
   render() {
     const { prefixCls, className } = this.props;