Skip to content

Commit 15e3adc

Browse files
ivansfdcivansfdc
committed
modal demo cleanup
1 parent c4cdbb0 commit 15e3adc

3 files changed

Lines changed: 66 additions & 69 deletions

File tree

‎demo/pages/HomePage/ModalSection.jsx‎

Lines changed: 12 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1010
'use strict';
1111

1212
import React from 'react';
13-
import SLDSButton from '../../../components/SLDSButton';
14-
import {ButtonIcon, Icon} from './../../../components/SLDSIcons';
1513
import {default as PrismCode} from 'react-prism/lib/PrismCode';
16-
import {EventUtil} from '../../../components/utils';
17-
import SLDSDateInput from '../../../components/SLDSDateInput';
1814

19-
import SLDSModal from '../../../components/SLDSModal';
20-
import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
15+
import {SLDSModal, SLDSButton, SLDSPicklistBase} from '../../../components';
2116

2217

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-
4718
module.exports = React.createClass( {
4819

4920
getDefaultProps () {
@@ -56,13 +27,8 @@ module.exports = React.createClass( {
5627
};
5728
},
5829

59-
handleOpenModalClick (event) {
60-
SLDSModalTrigger.open(this.getModalConfig());
61-
},
62-
6330
openModal () {
6431
this.setState({modalIsOpen: true});
65-
SLDSModalTrigger.open(this.getModalConfig());
6632
},
6733

6834
closeModal () {
@@ -73,7 +39,6 @@ module.exports = React.createClass( {
7339
this.closeModal();
7440
},
7541

76-
7742
getModalContent () {
7843
return <div>
7944
<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( {
12489
</div>;
12590
},
12691

127-
getModalConfig () {
128-
return ({
129-
title:<span>Super Stuff</span>,
130-
content: <div>
131-
{this.getModalContent()}
132-
133-
134-
</div>,
135-
footer:[
136-
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
137-
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
138-
]
139-
});
140-
},
141-
14292
render() {
14393
return (
14494

@@ -155,11 +105,19 @@ module.exports = React.createClass( {
155105
*/}
156106

157107
<div className='slds-p-vertical--large'>
158-
<SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
108+
<SLDSButton flavor='brand' onClick={this.openModal}>
159109
Open Modal
160110
</SLDSButton>
161-
162-
111+
<SLDSModal
112+
isOpen={this.state.modalIsOpen}
113+
title={<span>Super Stuff</span>}
114+
footer={[
115+
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
116+
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
117+
]}
118+
onRequestClose={this.closeModal}>
119+
{this.getModalContent()}
120+
</SLDSModal>
163121
</div>
164122
</div>
165123

demo/pages/HomePage/ModalSection2.jsx renamed to demo/pages/HomePage/ModalSection_.jsx

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,40 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1010
'use strict';
1111

1212
import React from 'react';
13+
import SLDSButton from '../../../components/SLDSButton';
14+
import {ButtonIcon, Icon} from './../../../components/SLDSIcons';
1315
import {default as PrismCode} from 'react-prism/lib/PrismCode';
16+
import {EventUtil} from '../../../components/utils';
17+
import SLDSDateInput from '../../../components/SLDSDateInput';
1418

15-
import {SLDSModal, SLDSButton, SLDSPicklistBase} from '../../../components';
19+
import SLDSModal from '../../../components/SLDSModal';
20+
import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
1621

1722

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+
1847
module.exports = React.createClass( {
1948

2049
getDefaultProps () {
@@ -27,8 +56,13 @@ module.exports = React.createClass( {
2756
};
2857
},
2958

59+
handleOpenModalClick (event) {
60+
SLDSModalTrigger.open(this.getModalConfig());
61+
},
62+
3063
openModal () {
3164
this.setState({modalIsOpen: true});
65+
SLDSModalTrigger.open(this.getModalConfig());
3266
},
3367

3468
closeModal () {
@@ -39,6 +73,7 @@ module.exports = React.createClass( {
3973
this.closeModal();
4074
},
4175

76+
4277
getModalContent () {
4378
return <div>
4479
<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( {
89124
</div>;
90125
},
91126

127+
getModalConfig () {
128+
return ({
129+
title:<span>Super Stuff</span>,
130+
content: <div>
131+
{this.getModalContent()}
132+
133+
134+
</div>,
135+
footer:[
136+
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
137+
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
138+
]
139+
});
140+
},
141+
92142
render() {
93143
return (
94144

@@ -105,19 +155,11 @@ module.exports = React.createClass( {
105155
*/}
106156

107157
<div className='slds-p-vertical--large'>
108-
<SLDSButton flavor='brand' onClick={this.openModal}>
158+
<SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
109159
Open Modal
110160
</SLDSButton>
111-
<SLDSModal
112-
isOpen={this.state.modalIsOpen}
113-
title={<span>Super Stuff</span>}
114-
footer={[
115-
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
116-
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
117-
]}
118-
onRequestClose={this.closeModal}>
119-
{this.getModalContent()}
120-
</SLDSModal>
161+
162+
121163
</div>
122164
</div>
123165

‎demo/pages/HomePage/index.jsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
1717
import ButtonSection from './ButtonSection';
1818
import PicklistBaseSection from './PicklistBaseSection';
1919
import ModalSection from './ModalSection';
20-
import ModalSection2 from './ModalSection2';
2120
import DatePickerSingleSelectSection from './DatePickerSingleSelectSection';
2221
import LookupBaseSection from './LookupBaseSection';
2322

@@ -65,8 +64,6 @@ module.exports = React.createClass( {
6564

6665
<PicklistBaseSection />
6766

68-
<ModalSection2 />
69-
7067
<ModalSection />
7168

7269
<DatePickerSingleSelectSection />

0 commit comments

Comments
 (0)