Skip to content

Commit 18e0fed

Browse files
ivansfdcivansfdc
committed
modal cleanup
1 parent 63db87b commit 18e0fed

File tree

2 files changed

+181
-9
lines changed

2 files changed

+181
-9
lines changed

‎components/SLDSModal/index.jsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ module.exports = React.createClass( {
5151

5252
getInitialState () {
5353
return {
54-
isOpen: this.props.isOpen,
54+
isClosing: false,
5555
revealed: false
5656
};
5757
},
@@ -65,12 +65,9 @@ module.exports = React.createClass( {
6565
this.updateBodyScroll();
6666
},
6767

68-
openModal () {
69-
this.setState({isOpen: true});
70-
},
7168

7269
closeModal () {
73-
this.setState({isOpen: false});
70+
this.setState({isClosing: true});
7471
},
7572

7673
handleSubmitModal () {
@@ -79,7 +76,7 @@ module.exports = React.createClass( {
7976

8077
updateBodyScroll () {
8178
if(window && document && document.body){
82-
if(this.state.isOpen){
79+
if(!this.state.isClosing){
8380
document.body.style.overflow = 'hidden';
8481
}
8582
else{
@@ -117,7 +114,7 @@ module.exports = React.createClass( {
117114
render() {
118115
return (
119116
<Modal
120-
isOpen={this.state.isOpen}
117+
isOpen={this.props.isOpen}
121118
onRequestClose={this.closeModal}
122119
style={customStyles}
123120
overlayClassName={'slds-modal-backdrop'+ (this.state.revealed?' slds-modal-backdrop--open':'')} >
@@ -128,12 +125,12 @@ module.exports = React.createClass( {
128125

129126
componentDidUpdate (prevProps, prevState) {
130127

131-
if(this.state.isOpen !== prevState.isOpen){
128+
if(this.state.isClosing !== prevState.isClosing){
132129

133130
this.updateBodyScroll();
134131

135132

136-
if(!this.state.isOpen){
133+
if(this.state.isClosing){
137134
if(this.props.returnFocusTo && this.props.returnFocusTo.focus){
138135
this.props.returnFocusTo.focus();
139136
}

‎demo/pages/HomePage/ModalSection2.jsx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
6+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
7+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8+
*/
9+
10+
'use strict';
11+
12+
import React from 'react';
13+
import SLDSButton from '../../../components/SLDSButton';
14+
import {ButtonIcon, Icon} from './../../../components/SLDSIcons';
15+
import {default as PrismCode} from 'react-prism/lib/PrismCode';
16+
import {EventUtil} from '../../../components/utils';
17+
import SLDSDateInput from '../../../components/SLDSDateInput';
18+
19+
import SLDSModal from '../../../components/SLDSModal';
20+
import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
21+
22+
23+
24+
25+
26+
27+
const customStyles = {
28+
content : {
29+
position : 'default',
30+
top : 'default',
31+
left : 'default',
32+
right : 'default',
33+
bottom : 'default',
34+
border : 'default',
35+
background : 'default',
36+
overflow : 'default',
37+
WebkitOverflowScrolling : 'default',
38+
borderRadius : 'default',
39+
outline : 'default',
40+
padding : 'default'
41+
},
42+
overlay : {
43+
backgroundColor: 'default'
44+
}
45+
};
46+
47+
module.exports = React.createClass( {
48+
49+
getDefaultProps () {
50+
return {};
51+
},
52+
53+
getInitialState () {
54+
return {
55+
modalIsOpen: false
56+
};
57+
},
58+
59+
handleOpenModalClick (event) {
60+
SLDSModalTrigger.open(this.getModalConfig(event.target));
61+
},
62+
63+
openModal () {
64+
this.setState({modalIsOpen: true});
65+
SLDSModalTrigger.open(this.getModalConfig());
66+
},
67+
68+
closeModal () {
69+
this.setState({modalIsOpen: false});
70+
},
71+
72+
handleSubmitModal () {
73+
this.closeModal();
74+
},
75+
76+
handleModalCancel () {
77+
console.log('!!! handleModalCancel !!!');
78+
},
79+
80+
getModalContent () {
81+
return <div>
82+
<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
83+
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
84+
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
85+
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
86+
87+
<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
88+
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
89+
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
90+
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
91+
92+
93+
<SLDSPicklistBase
94+
options={[
95+
{label:'A Option Option Super Super Long',value:'A0'},
96+
{label:'B Option',value:'B0'},
97+
{label:'C Option',value:'C0'},
98+
{label:'D Option',value:'D0'},
99+
{label:'E Option',value:'E0'},
100+
{label:'A1 Option',value:'A1'},
101+
{label:'B2 Option',value:'B1'},
102+
{label:'C2 Option',value:'C1'},
103+
{label:'D2 Option',value:'D1'},
104+
{label:'E2 Option Super Super Long',value:'E1'},
105+
106+
]}
107+
value='C0'
108+
label="Contacts"
109+
modal={true}
110+
placeholder = "Select a contact"
111+
onSelect={(value)=>{console.log('selected: ',value);}} />
112+
<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
113+
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
114+
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
115+
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
116+
117+
<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
118+
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
119+
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
120+
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
121+
122+
<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
123+
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
124+
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
125+
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
126+
127+
</div>;
128+
},
129+
130+
getModalConfig (returnFocusToElement) {
131+
return ({
132+
title:<span>Super Stuff</span>,
133+
content: <div>
134+
{this.getModalContent()}
135+
136+
137+
</div>,
138+
footer:[
139+
<button className='slds-button slds-button--neutral' onClick={this.handleModalCancel}>Cancel</button>,
140+
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
141+
],
142+
returnFocusTo: returnFocusToElement
143+
});
144+
},
145+
146+
render() {
147+
return (
148+
149+
150+
<div className='slds-p-around--medium'>
151+
152+
<h3 className='slds-text-heading--medium slds-truncate'>
153+
Modal (Work in progress)
154+
</h3>
155+
{/*
156+
<PrismCode className='language-markup'>
157+
{require("raw-loader!../../code-snippets/SLDSLookupPage.txt")}
158+
</PrismCode>
159+
*/}
160+
161+
<div className='slds-p-vertical--large'>
162+
<SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
163+
Open Modal
164+
</SLDSButton>
165+
166+
167+
</div>
168+
</div>
169+
170+
171+
);
172+
},
173+
174+
175+
});

0 commit comments

Comments
 (0)