modal demo cleanup

salesforce · Oct 1, 2015 · 15e3adc · 15e3adc
1 parent c4cdbb0
commit 15e3adc
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 69 deletions.
diff --git a/demo/pages/HomePage/ModalSection.jsx b/demo/pages/HomePage/ModalSection.jsx
@@ -10,40 +10,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 'use strict';
 
 import React from 'react';
-import SLDSButton from '../../../components/SLDSButton';
-import {ButtonIcon, Icon} from './../../../components/SLDSIcons';
 import {default as PrismCode} from 'react-prism/lib/PrismCode';
-import {EventUtil} from '../../../components/utils';
-import SLDSDateInput from '../../../components/SLDSDateInput';
 
-import SLDSModal from '../../../components/SLDSModal';
-import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
+import {SLDSModal, SLDSButton, SLDSPicklistBase} from '../../../components';
 
 
-
-
-
-
-const customStyles = {
-  content : {
-    position                : 'default',
-    top                     : 'default',
-    left                    : 'default',
-    right                   : 'default',
-    bottom                  : 'default',
-    border                  : 'default',
-    background              : 'default',
-    overflow                : 'default',
-    WebkitOverflowScrolling : 'default',
-    borderRadius            : 'default',
-    outline                 : 'default',
-    padding                 : 'default'
-  },
-  overlay : {
-    backgroundColor: 'default'
-  }
-};
-
 module.exports = React.createClass( {
 
   getDefaultProps () {
@@ -56,13 +27,8 @@ module.exports = React.createClass( {
     };
   },
 
-  handleOpenModalClick (event) {
-    SLDSModalTrigger.open(this.getModalConfig());
-  },
-
   openModal () {
     this.setState({modalIsOpen: true});
-    SLDSModalTrigger.open(this.getModalConfig());
   },
 
   closeModal () {
@@ -73,7 +39,6 @@ module.exports = React.createClass( {
     this.closeModal();
   },
 
-
   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
@@ -124,21 +89,6 @@ module.exports = React.createClass( {
                       </div>;
   },
 
-  getModalConfig () {
-    return ({
-      title:<span>Super Stuff</span>,
-      content:  <div>
-                    {this.getModalContent()}
-
-
-                </div>,
-      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>
-      ]
-    });
-  },
-
   render() {
     return (
 
@@ -155,11 +105,19 @@ 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>
-
-
+                <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>
               </div>
             </div>
 

diff --git a/demo/pages/HomePage/ModalSection2.jsx → demo/pages/HomePage/ModalSection_.jsx b/demo/pages/HomePage/ModalSection2.jsx → demo/pages/HomePage/ModalSection_.jsx
@@ -10,11 +10,40 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 'use strict';
 
 import React from 'react';
+import SLDSButton from '../../../components/SLDSButton';
+import {ButtonIcon, Icon} from './../../../components/SLDSIcons';
 import {default as PrismCode} from 'react-prism/lib/PrismCode';
+import {EventUtil} from '../../../components/utils';
+import SLDSDateInput from '../../../components/SLDSDateInput';
 
-import {SLDSModal, SLDSButton, SLDSPicklistBase} from '../../../components';
+import SLDSModal from '../../../components/SLDSModal';
+import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
 
 
+
+
+
+
+const customStyles = {
+  content : {
+    position                : 'default',
+    top                     : 'default',
+    left                    : 'default',
+    right                   : 'default',
+    bottom                  : 'default',
+    border                  : 'default',
+    background              : 'default',
+    overflow                : 'default',
+    WebkitOverflowScrolling : 'default',
+    borderRadius            : 'default',
+    outline                 : 'default',
+    padding                 : 'default'
+  },
+  overlay : {
+    backgroundColor: 'default'
+  }
+};
+
 module.exports = React.createClass( {
 
   getDefaultProps () {
@@ -27,8 +56,13 @@ module.exports = React.createClass( {
     };
   },
 
+  handleOpenModalClick (event) {
+    SLDSModalTrigger.open(this.getModalConfig());
+  },
+
   openModal () {
     this.setState({modalIsOpen: true});
+    SLDSModalTrigger.open(this.getModalConfig());
   },
 
   closeModal () {
@@ -39,6 +73,7 @@ module.exports = React.createClass( {
     this.closeModal();
   },
 
+
   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
@@ -89,6 +124,21 @@ module.exports = React.createClass( {
                       </div>;
   },
 
+  getModalConfig () {
+    return ({
+      title:<span>Super Stuff</span>,
+      content:  <div>
+                    {this.getModalContent()}
+
+
+                </div>,
+      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>
+      ]
+    });
+  },
+
   render() {
     return (
 
@@ -105,19 +155,11 @@ module.exports = React.createClass( {
 */}
 
               <div className='slds-p-vertical--large'>
-                <SLDSButton flavor='brand' onClick={this.openModal}>
+                <SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
                   Open Modal
                 </SLDSButton>
-                <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>
+
+
               </div>
             </div>
 

diff --git a/demo/pages/HomePage/index.jsx b/demo/pages/HomePage/index.jsx
@@ -17,7 +17,6 @@ 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';
 
@@ -65,8 +64,6 @@ module.exports = React.createClass( {
 
             <PicklistBaseSection />
 
-            <ModalSection2 />
-
             <ModalSection />
 
             <DatePickerSingleSelectSection />