Skip to content

Commit 51fdd9b

Browse files
donniebergdonnieberg
committed
Merge branch 'master' into lookups-refactor
2 parents 31183d3 + e3c8688 commit 51fdd9b

File tree

18 files changed

+456
-1030
lines changed

18 files changed

+456
-1030
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ design-system-react
33

44
Future home of SLDS-React components
55

6-
### Usage
6+
## Usage
77

88
```
99
npm install
@@ -47,6 +47,14 @@ import {SLDSPicklistBase} from 'design-system-react';
4747
[![browser support](/readme-assets/SLDSDatePickerBase.gif)](/readme-assets/SLDSDatePickerBase.gif)
4848

4949

50+
51+
## Tests
52+
53+
```
54+
npm test
55+
```
56+
57+
5058
### Future Pipeline
5159
* Lookups
5260
* Modals

‎components/SLDSModal/index.jsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ module.exports = React.createClass( {
5757
},
5858

5959
componentDidMount () {
60+
console.log('!!! window.activeElement !!! ',document.activeElement);
61+
this.setState({returnFocusTo:document.activeElement})
6062
if(!this.state.revealed){
6163
setTimeout(()=>{
6264
this.setState({revealed:true});
@@ -65,9 +67,14 @@ module.exports = React.createClass( {
6567
this.updateBodyScroll();
6668
},
6769

68-
6970
closeModal () {
7071
this.setState({isClosing: true});
72+
if(this.state.returnFocusTo && this.state.returnFocusTo.focus){
73+
this.state.returnFocusTo.focus();
74+
}
75+
if(this.props.onRequestClose){
76+
this.props.onRequestClose();
77+
}
7178
},
7279

7380
handleSubmitModal () {
@@ -88,7 +95,10 @@ module.exports = React.createClass( {
8895
getModal() {
8996
return <div className={'slds-modal' +(this.state.revealed?' slds-fade-in-open':'')}
9097
onClick={this.closeModal}>
91-
<div className='slds-modal__container' onClick={(e)=>{EventUtil.trap(e);}}>
98+
<div
99+
role='dialog'
100+
className='slds-modal__container'
101+
onClick={(e)=>{EventUtil.trap(e);}}>
92102
<div className='slds-modal__header'>
93103
<h2 className='slds-text-heading--medium'>{this.props.title}</h2>
94104
<SLDSButton className='slds-button slds-modal__close' onClick={this.closeModal}>
@@ -131,9 +141,8 @@ module.exports = React.createClass( {
131141

132142

133143
if(this.state.isClosing){
134-
if(this.props.returnFocusTo && this.props.returnFocusTo.focus){
135-
this.props.returnFocusTo.focus();
136-
}
144+
console.log('CLOSING: ');
145+
137146
if(this.isMounted()){
138147
const el = this.getDOMNode().parentNode;
139148
if(el && el.getAttribute('data-slds-modal')){

‎components/SLDSModal/trigger.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const SLDSModalTrigger = {
2121
const comp = <SLDSModal
2222
title={cfg.title}
2323
footer={cfg.footer}
24-
returnFocusTo={cfg.returnFocusTo}
2524
isOpen={true}>
2625
{cfg.content}
2726
</SLDSModal>

‎components/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1212
import SLDSPicklistBase from './SLDSPicklistBase';
1313
import SLDSSettings from './SLDSSettings';
1414
import SLDSButton from './SLDSButton';
15-
import SLDSModal from './SLDSModal';
16-
import SLDSModalTrigger from './SLDSModal/trigger';
15+
//import SLDSModal from './SLDSModal';
16+
//import SLDSModalTrigger from './SLDSModal/trigger';
1717

1818
module.exports = {
1919
SLDSPicklistBase: SLDSPicklistBase,
2020
SLDSSettings: SLDSSettings,
2121
SLDSButton: SLDSButton,
22-
SLDSModal: SLDSModal,
23-
SLDSModalTrigger: SLDSModalTrigger
22+
// SLDSModal: SLDSModal,
23+
// SLDSModalTrigger: SLDSModalTrigger
2424
};

‎demo/pages/HomePage/ModalSection.jsx‎

Lines changed: 16 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +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';
18-
19-
import SLDSModal from '../../../components/SLDSModal';
20-
import {SLDSModalTrigger, SLDSPicklistBase} from '../../../components';
21-
22-
23-
24-
2514

15+
import {SLDSButton, SLDSPicklistBase} from '../../../components';
2616

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-
};
17+
import SLDSModal from '../../../components/SLDSModal';
4618

4719
module.exports = React.createClass( {
4820

@@ -56,13 +28,8 @@ module.exports = React.createClass( {
5628
};
5729
},
5830

59-
handleOpenModalClick (event) {
60-
SLDSModalTrigger.open(this.getModalConfig(event.target));
61-
},
62-
6331
openModal () {
6432
this.setState({modalIsOpen: true});
65-
SLDSModalTrigger.open(this.getModalConfig());
6633
},
6734

6835
closeModal () {
@@ -73,7 +40,6 @@ module.exports = React.createClass( {
7340
this.closeModal();
7441
},
7542

76-
7743
getModalContent () {
7844
return <div>
7945
<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
@@ -86,7 +52,7 @@ module.exports = React.createClass( {
8652
<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
8753
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
8854

89-
55+
{/*
9056
<SLDSPicklistBase
9157
options={[
9258
{label:'A Option Option Super Super Long',value:'A0'},
@@ -106,6 +72,8 @@ module.exports = React.createClass( {
10672
modal={true}
10773
placeholder = "Select a contact"
10874
onSelect={(value)=>{console.log('selected: ',value);}} />
75+
76+
*/}
10977
<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
11078
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
11179
<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
@@ -124,22 +92,6 @@ module.exports = React.createClass( {
12492
</div>;
12593
},
12694

127-
getModalConfig (returnFocusToElement) {
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-
returnFocusTo: returnFocusToElement
140-
});
141-
},
142-
14395
render() {
14496
return (
14597

@@ -156,11 +108,19 @@ module.exports = React.createClass( {
156108
*/}
157109

158110
<div className='slds-p-vertical--large'>
159-
<SLDSButton flavor='brand' onClick={this.handleOpenModalClick}>
111+
<SLDSButton flavor='brand' onClick={this.openModal}>
160112
Open Modal
161113
</SLDSButton>
162-
163-
114+
<SLDSModal
115+
isOpen={this.state.modalIsOpen}
116+
title={<span>Super Stuff</span>}
117+
footer={[
118+
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
119+
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
120+
]}
121+
onRequestClose={this.closeModal}>
122+
{this.getModalContent()}
123+
</SLDSModal>
164124
</div>
165125
</div>
166126

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ module.exports = React.createClass( {
5757
},
5858

5959
handleOpenModalClick (event) {
60-
SLDSModalTrigger.open(this.getModalConfig(event.target));
60+
SLDSModalTrigger.open(this.getModalConfig());
6161
},
6262

6363
openModal () {
@@ -73,9 +73,6 @@ module.exports = React.createClass( {
7373
this.closeModal();
7474
},
7575

76-
handleModalCancel () {
77-
console.log('!!! handleModalCancel !!!');
78-
},
7976

8077
getModalContent () {
8178
return <div>
@@ -127,7 +124,7 @@ module.exports = React.createClass( {
127124
</div>;
128125
},
129126

130-
getModalConfig (returnFocusToElement) {
127+
getModalConfig () {
131128
return ({
132129
title:<span>Super Stuff</span>,
133130
content: <div>
@@ -136,10 +133,9 @@ module.exports = React.createClass( {
136133

137134
</div>,
138135
footer:[
139-
<button className='slds-button slds-button--neutral' onClick={this.handleModalCancel}>Cancel</button>,
136+
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
140137
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
141-
],
142-
returnFocusTo: returnFocusToElement
138+
]
143139
});
144140
},
145141

0 commit comments

Comments
 (0)