Add adjustFrame API

Author: sohobloo

components/ModalDropdown.js

@@ -44,6 +44,7 @@ export default class ModalDropdown extends Component {
     textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
     dropdownStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
 
+    adjustFrame: PropTypes.func,
     renderRow: PropTypes.func,
     renderSeparator: PropTypes.func,
 
@@ -170,7 +171,6 @@ export default class ModalDropdown extends Component {
   _renderModal() {
     if (this.state.showDropdown && this._buttonFrame) {
       let frameStyle = this._calcPosition();
-      console.log(`frameStyle={width:${frameStyle.width}, height:${frameStyle.height}, top:${frameStyle.top}, left:${frameStyle.left}}`);
       return (
         <Modal animationType='fade'
                transparent={true}
@@ -216,6 +216,10 @@ export default class ModalDropdown extends Component {
       style.right = rightSpace - this._buttonFrame.w;
     }
 
+    if (this.props.adjustFrame) {
+      style = this.props.adjustFrame(style) || style;
+    }
+
     return style;
   }
 

example/index.js

@@ -70,6 +70,7 @@ class Demo extends Component {
             <ModalDropdown ref={el => this._dropdown_3 = el}
                            style={styles.dropdown_3}
                            options={DEMO_OPTIONS_1}
+                           adjustFrame={style => this._dropdown_3_adjustFrame(style)}
             />
           </ScrollView>
         </View>
@@ -141,6 +142,13 @@ class Demo extends Component {
     />);
   }
 
+  _dropdown_3_adjustFrame(style) {
+    console.log(`frameStyle={width:${style.width}, height:${style.height}, top:${style.top}, left:${style.left}}`);
+    style.top -= 15;
+    style.left += 150;
+    return style;
+  }
+
   _dropdown_4_willShow() {
     setTimeout(() => this.setState({
       dropdown_4_options: DEMO_OPTIONS_1,
@@ -156,6 +164,7 @@ class Demo extends Component {
   }
 
   _dropdown_4_onSelect(idx, value) {
+    // BUG: alert in a modal will auto dismiss and causes crash after reload and touch. @sohobloo 2016-12-1
     alert(`idx=${idx}, value='${value}'`);
   }