modal progress

Author: ivansfdc

components/SLDSModal/index.jsx

@@ -57,6 +57,8 @@ module.exports = React.createClass( {
   },
 
   componentDidMount () {
+    console.log('!!! window.activeElement !!! ',document.activeElement);
+    this.setState({returnFocusTo:document.activeElement})
     if(!this.state.revealed){
       setTimeout(()=>{
         this.setState({revealed:true});
@@ -65,9 +67,14 @@ module.exports = React.createClass( {
     this.updateBodyScroll();
   },
 
-
   closeModal () {
     this.setState({isClosing: true});
+    if(this.state.returnFocusTo && this.state.returnFocusTo.focus){
+      this.state.returnFocusTo.focus();
+    }
+    if(this.props.onRequestClose){
+      this.props.onRequestClose();
+    }
   },
 
   handleSubmitModal () {
@@ -131,9 +138,8 @@ module.exports = React.createClass( {
 
 
       if(this.state.isClosing){
-        if(this.props.returnFocusTo && this.props.returnFocusTo.focus){
-          this.props.returnFocusTo.focus();
-        }
+        console.log('CLOSING: ');
+
         if(this.isMounted()){
           const el = this.getDOMNode().parentNode;
           if(el && el.getAttribute('data-slds-modal')){

components/SLDSModal/trigger.jsx

@@ -21,7 +21,6 @@ const SLDSModalTrigger = {
     const comp = <SLDSModal 
               title={cfg.title}
               footer={cfg.footer}
-              returnFocusTo={cfg.returnFocusTo}
               isOpen={true}>
               {cfg.content}
             </SLDSModal>

demo/pages/HomePage/ModalSection.jsx

@@ -57,7 +57,7 @@ module.exports = React.createClass( {
   },
 
   handleOpenModalClick (event) {
-    SLDSModalTrigger.open(this.getModalConfig(event.target));
+    SLDSModalTrigger.open(this.getModalConfig());
   },
 
   openModal () {
@@ -124,7 +124,7 @@ module.exports = React.createClass( {
                       </div>;
   },
 
-  getModalConfig (returnFocusToElement) {
+  getModalConfig () {
     return ({
       title:<span>Super Stuff</span>,
       content:  <div>
@@ -135,8 +135,7 @@ module.exports = React.createClass( {
       footer:[
         <button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
         <button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
-      ],
-      returnFocusTo: returnFocusToElement
+      ]
     });
   },
 

demo/pages/HomePage/ModalSection2.jsx

@@ -62,7 +62,7 @@ module.exports = React.createClass( {
 
   openModal () {
     this.setState({modalIsOpen: true});
-    SLDSModalTrigger.open(this.getModalConfig());
+//    SLDSModalTrigger.open(this.getModalConfig());
   },
 
   closeModal () {
@@ -73,10 +73,6 @@ module.exports = React.createClass( {
     this.closeModal();
   },
 
-  handleModalCancel () {
-    console.log('!!! handleModalCancel !!!');
-  },
-
   getModalContent () {
     return  <div>
                       <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
@@ -127,20 +123,18 @@ module.exports = React.createClass( {
                       </div>;
   },
 
-  getModalConfig (returnFocusToElement) {
-    return ({
-      title:<span>Super Stuff</span>,
-      content:  <div>
-                    {this.getModalContent()}
-
 
-                </div>,
-      footer:[
-        <button className='slds-button slds-button--neutral' onClick={this.handleModalCancel}>Cancel</button>,
-        <button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
-      ],
-      returnFocusTo: returnFocusToElement
-    });
+  renderModal () {
+    return <SLDSModal 
+                  isOpen={this.state.modalIsOpen}
+                  title={<span>Super Stuff</span>}
+                  footer={[
+                    <button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
+                    <button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
+                  ]}
+                  onRequestClose={this.closeModal}>
+                  {this.getModalContent()}
+                </SLDSModal>;
   },
 
   render() {
@@ -159,11 +153,10 @@ module.exports = React.createClass( {
 */}
 
               <div className='slds-p-vertical--large'>
-                <SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
+                <SLDSButton flavor='brand' onClick={this.openModal}>
                   Open Modal
                 </SLDSButton>
-
-
+                {this.renderModal()}
               </div>
             </div>
 

demo/pages/HomePage/index.jsx

@@ -17,6 +17,7 @@ import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
 import ButtonSection from './ButtonSection';
 import PicklistBaseSection from './PicklistBaseSection';
 import ModalSection from './ModalSection';
+import ModalSection2 from './ModalSection2';
 import DatePickerSingleSelectSection from './DatePickerSingleSelectSection';
 import LookupBaseSection from './LookupBaseSection';
 
@@ -64,6 +65,8 @@ module.exports = React.createClass( {
 
             <PicklistBaseSection />
 
+            <ModalSection2 />
+
             <ModalSection />
 
             <DatePickerSingleSelectSection />