Skip to content

Commit 3d793d3

Browse files
donniebergdonnieberg
committed
Merge branch 'master' into gh-pages
2 parents 32f9b91 + ff7d9bf commit 3d793d3

File tree

14 files changed

+211
-356
lines changed

14 files changed

+211
-356
lines changed

‎components/SLDSDropdownBase/index.jsx

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = React.createClass( {
3030
propTypes : {
3131
onClick: PropTypes.func,
3232
onSelect: PropTypes.func.isRequired,
33-
onUpdateHighlighted: PropTypes.func
33+
onUpdateHighlighted: PropTypes.func,
3434
},
3535

3636
getDefaultProps(){
@@ -54,6 +54,7 @@ module.exports = React.createClass( {
5454

5555
getInitialState(){
5656
return {
57+
triggerId:null,
5758
isOpen:false,
5859
isFocused:false,
5960
isClosing:false,
@@ -66,6 +67,8 @@ module.exports = React.createClass( {
6667
},
6768

6869
componentDidMount () {
70+
const id = React.findDOMNode(this.refs.button).getAttribute("data-reactid");
71+
this.setState({triggerId:id});
6972
if(this.props.initialFocus){
7073
this.setFocus();
7174
}
@@ -74,6 +77,48 @@ module.exports = React.createClass( {
7477
}
7578
},
7679

80+
componentDidUpdate( prevProps, prevState) {
81+
82+
if(this.state.lastBlurredTimeStamp !== prevState.lastBlurredTimeStamp){
83+
if(this.state.lastBlurredIndex === this.state.highlightedIndex){
84+
this.handleClose();
85+
}
86+
}
87+
88+
if(this.state.isOpen && !prevState.isOpen){
89+
this.state.isClosing = false;
90+
}
91+
92+
if(this.state.selectedIndex !== prevState.selectedIndex){
93+
this.handleClose();
94+
}
95+
else if(this.state.isFocused && !prevState.isFocused){
96+
this.setState({isOpen:false});
97+
}
98+
else if(!this.state.isFocused && prevState.isFocused){
99+
if(this.refs.list){
100+
if(this.isMounted() && this.refs.list){
101+
if(this.refs.list.getDOMNode().contains(document.activeElement)){
102+
return;
103+
}
104+
this.setState({isOpen:false})
105+
}
106+
}
107+
}
108+
else if(this.state.isClosing && !prevState.isClosing){
109+
setTimeout(()=>{
110+
if(this.state.isClosing){
111+
this.setState({isOpen:false});
112+
}
113+
},this.props.hoverCloseDelay);
114+
}
115+
116+
if(this.props.value !== prevProps.value){
117+
this.handleSelect(this.getIndexByValue(this.props.value));
118+
}
119+
120+
},
121+
77122
getIndexByValue(value){
78123
let foundIndex = -1;
79124
if(this.props.options && this.props.options.length){
@@ -163,9 +208,6 @@ module.exports = React.createClass( {
163208
return React.findDOMNode(this.refs.button);
164209
},
165210

166-
moveHighlight(delta) {
167-
},
168-
169211
handleKeyDown(event) {
170212
if (event.keyCode){
171213
if (event.keyCode === KEYS.ENTER ||
@@ -199,6 +241,7 @@ module.exports = React.createClass( {
199241

200242
getPopoverContent() {
201243
return <List
244+
triggerId={this.state.triggerId}
202245
ref='list'
203246
options={this.props.options}
204247
className={this.props.listClassName}
@@ -274,8 +317,10 @@ module.exports = React.createClass( {
274317
]);
275318
return (
276319

320+
277321
<SLDSButton
278322
ref='button'
323+
id={this.state.triggerId}
279324
aria-haspopup='true'
280325
label={this.props.label}
281326
className={this.props.className}
@@ -297,49 +342,7 @@ module.exports = React.createClass( {
297342
</SLDSButton>
298343

299344
);
300-
},
301-
302-
componentDidUpdate( prevProps, prevState) {
303-
304-
if(this.state.lastBlurredTimeStamp !== prevState.lastBlurredTimeStamp){
305-
if(this.state.lastBlurredIndex === this.state.highlightedIndex){
306-
this.handleClose();
307-
}
308-
}
309-
310-
if(this.state.isOpen && !prevState.isOpen){
311-
this.state.isClosing = false;
312-
}
313-
314-
if(this.state.selectedIndex !== prevState.selectedIndex){
315-
this.handleClose();
316-
}
317-
else if(this.state.isFocused && !prevState.isFocused){
318-
this.setState({isOpen:false});
319-
}
320-
else if(!this.state.isFocused && prevState.isFocused){
321-
if(this.refs.list){
322-
if(this.isMounted() && this.refs.list){
323-
if(this.refs.list.getDOMNode().contains(document.activeElement)){
324-
return;
325-
}
326-
this.setState({isOpen:false})
327-
}
328-
}
329-
}
330-
else if(this.state.isClosing && !prevState.isClosing){
331-
setTimeout(()=>{
332-
if(this.state.isClosing){
333-
this.setState({isOpen:false});
334-
}
335-
},this.props.hoverCloseDelay);
336-
}
337-
338-
if(this.props.value !== prevProps.value){
339-
this.handleSelect(this.getIndexByValue(this.props.value));
340-
}
341-
342-
},
345+
}
343346

344347
});
345348

‎components/SLDSDropdownBase/list.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ module.exports = React.createClass({
163163
ref="scroll"
164164
className={"slds-dropdown__list slds-theme--"+this.props.theme}
165165
role="menu"
166-
aria-labelledby={this.props.label}>
166+
aria-labelledby={this.props.triggerId}>
167167
{ this.getItems() }
168168
</ul>
169169
</div>

‎components/SLDSLookup/Menu/Item/index.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
99

1010
import React, { Component } from 'react';
1111
import {Icon} from "../../../SLDSIcons";
12-
import {KEYS,EventUtil} from '../../../utils';
12+
import {EventUtil} from '../../../utils';
1313

1414
class Item extends React.Component {
1515
constructor(props) {
@@ -33,10 +33,13 @@ class Item extends React.Component {
3333
}
3434

3535
handleClick(e){
36-
EventUtil.trapImmediate(e);
3736
return this.props.onSelect(this.props.id, this.props.data);
3837
}
3938

39+
handleMouseDown(e){
40+
EventUtil.trapImmediate(e);
41+
}
42+
4043
//Scroll menu item based on up/down mouse keys (assumes all items are the same height)
4144
scrollFocus(){
4245
const height = React.findDOMNode(this).offsetHeight;
@@ -59,7 +62,7 @@ class Item extends React.Component {
5962
aria-disabled={this.props.isDisabled}
6063
role="option"
6164
onClick={this.handleClick.bind(this)}
62-
onMouseDown={this.handleClick.bind(this)}>
65+
onMouseDown={this.handleMouseDown.bind(this)}>
6366
<Icon name={this.props.type} />
6467
{ this.boldSearchText(this.props.children.label) }
6568
</a>

‎components/SLDSLookup/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,13 @@ class SLDSLookup extends React.Component {
7878

7979
//=================================================
8080
// Select menu item (onClick or on key enter/space)
81-
selectItem(itemId,data){
81+
selectItem(itemId){
8282
const index = itemId.replace('item-', '');
8383
this.setState({
8484
selectedIndex: index,
8585
searchTerm: null
8686
});
87+
const data = this.state.items[index].data;
8788
if(this.props.onItemSelect) this.props.onItemSelect(data);
8889
}
8990

‎demo/pages/HomePage/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ module.exports = React.createClass( {
8989

9090
<DropdownBaseSection />
9191

92+
9293
</div>
9394
</main>
9495
</SLDSGrid>

‎demo/static/bundle.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)