Skip to content

Commit 2b987c8

Browse files
donniebergdonnieberg
committed
Merge branch 'master' into button
2 parents 8d4a8bc + 12fb822 commit 2b987c8

File tree

22 files changed

+858
-391
lines changed

22 files changed

+858
-391
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99

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

1315
class DefaultFooter extends React.Component {
1416
constructor(props) {
@@ -19,16 +21,20 @@ class DefaultFooter extends React.Component {
1921
if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
2022
}
2123

22-
footerClick(){
24+
handleClick(){
2325
console.log('=====> Lookup Footer Clicked');
2426
}
2527

28+
handleMouseDown(event) {
29+
EventUtil.trapImmediate(event);
30+
}
31+
2632
render(){
2733
let className = 'slds-button';
2834
if(this.props.isActive) className += ' slds-theme--shade'
2935

3036
return (
31-
<div className="slds-lookup__item" onClick={this.footerClick}>
37+
<div className="slds-lookup__item" onClick={this.handleClick.bind(this)} onMouseDown={this.handleMouseDown.bind(this)}>
3238
<button id='newItem' tabIndex="-1" className={className}>
3339
<Icon name='add' category="utility" size="x-small" className="slds-icon-text-default" />
3440
{'New ' + this.props.type}

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

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

1314
class DefaultHeader extends React.Component {
1415
constructor(props) {
@@ -19,22 +20,29 @@ class DefaultHeader extends React.Component {
1920
if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
2021
}
2122

22-
headerClick(){
23+
handleClick(){
2324
console.log('=====> Lookup Header Clicked');
25+
if(this.props.onClose){
26+
this.props.onClose();
27+
}
28+
}
29+
30+
handleMouseDown(event) {
31+
EventUtil.trapImmediate(event);
2432
}
2533

2634
render(){
2735
let className = 'slds-button';
28-
if(this.props.isActive) className += ' slds-theme--shade'
29-
30-
return (
31-
<div className="slds-lookup__item" onClick={this.headerClick}>
32-
<button id='searchRecords' tabIndex="-1" className={className}>
33-
<Icon name='search' category="utility" size="x-small" className="slds-icon-text-default" />
34-
{this.props.searchTerm ? '"' + this.props.searchTerm + '"' + ' in ' + this.props.type + 's': ' in ' + this.props.type + 's'}
35-
</button>
36-
</div>
37-
)
36+
if(this.props.isActive) className += ' slds-theme--shade aaa'
37+
38+
return (
39+
<div className="slds-lookup__item" onMouseDown={this.handleMouseDown} onClick={this.handleClick.bind(this)}>
40+
<button id='searchRecords' tabIndex="-1" className={className}>
41+
<Icon name='search' category="utility" size="x-small" className="slds-icon-text-default" />
42+
{this.props.searchTerm ? '"' + this.props.searchTerm + '"' + ' in ' + this.props.type + 's': ' in ' + this.props.type + 's'}
43+
</button>
44+
</div>
45+
)
3846
}
3947
}
4048

‎components/SLDSLookup/Menu/index.js

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,7 @@ class Menu extends React.Component {
3535
}
3636

3737
renderHeader(){
38-
if(this.props.header){
39-
let headerActive = false;
40-
let isActiveClass = null;
41-
if(this.props.focusIndex === 0){
42-
headerActive = true;
43-
isActiveClass = 'slds-theme--shade';
44-
}else{
45-
headerActive = false;
46-
isActiveClass = '';
47-
}
48-
49-
return <div className={isActiveClass}>{this.props.header}</div>;
50-
}
38+
return this.props.header;
5139
}
5240

5341
renderFooter(){

‎components/SLDSLookup/index.jsx

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -154,12 +154,14 @@ class SLDSLookup extends React.Component {
154154
else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.focusIndex !== null){
155155
EventUtil.trapImmediate(event);
156156
//If the focus is on the first fixed Action Item in Menu, click it
157-
if(this.props.header && this.state.focusIndex === 0){
158-
document.getElementById('menuContainer').firstChild.children[0].click();
157+
if(this.refs.header && this.state.focusIndex === 0){
158+
// document.getElementById('menuContainer').firstChild.children[0].click();
159+
React.findDOMNode(this.refs.header).click();
159160
}
160161
//If the focus is on the last fixed Action Item in Menu, click it
161-
else if(this.props.footer && this.state.focusIndex === (this.state.listLength + 1)){
162-
document.getElementById('menuContainer').lastChild.children[0].click();
162+
else if(this.refs.footer && this.state.focusIndex === (this.state.listLength + 1)){
163+
React.findDOMNode(this.refs.footer).click();
164+
// document.getElementById('menuContainer').lastChild.children[0].click();
163165
}
164166
//If not, then select menu item
165167
else{
@@ -178,6 +180,40 @@ class SLDSLookup extends React.Component {
178180
}
179181
}
180182

183+
getHeader(){
184+
if(this.props.headerRenderer){
185+
let headerActive = false;
186+
let isActiveClass = null;
187+
if(this.state.focusIndex === 0){
188+
headerActive = true;
189+
isActiveClass = 'slds-theme--shade';
190+
}else{
191+
headerActive = false;
192+
isActiveClass = '';
193+
}
194+
const Header = this.props.headerRenderer;
195+
return <div className={isActiveClass}>
196+
<Header ref='header' {... this.props}
197+
searchTerm={this.state.searchTerm}
198+
focusIndex={this.state.focusIndex}
199+
listLength={this.state.listLength}
200+
onClose={this.handleClose.bind(this)}
201+
/>
202+
</div>;
203+
}
204+
}
205+
206+
getFooter () {
207+
if(this.props.footerRenderer){
208+
const Footer = this.props.footerRenderer;
209+
return <Footer ref='footer' {... this.props}
210+
focusIndex={this.state.focusIndex}
211+
listLength={this.state.listLength}
212+
onClose={this.handleClose.bind(this)}
213+
/>;
214+
}
215+
}
216+
181217
//=================================================
182218
// Rendering Things
183219
renderMenuContent(){
@@ -193,8 +229,8 @@ class SLDSLookup extends React.Component {
193229
getListLength={this.getListLength.bind(this)}
194230
setFocus={this.setFocus.bind(this)}
195231
onSelect={this.selectItem.bind(this)}
196-
header={this.props.header}
197-
footer={this.props.footer}
232+
header={this.getHeader()}
233+
footer={this.getFooter()}
198234
/>;
199235
}
200236
}

‎components/SLDSPicklistBase/index.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,10 @@ module.exports = React.createClass( {
7777
},
7878

7979
getValueByIndex(index){
80-
return this.props.options[index].value;
80+
const option = this.props.options[index];
81+
if(option){
82+
return this.props.options[index].value;
83+
}
8184
},
8285

8386
handleSelect(index) {

‎demo/pages/HomePage/LookupBaseDynamicSection.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,15 @@ module.exports = React.createClass( {
5959
<div className="slds-p-around--medium">
6060
Dynamic list
6161
<div className="slds-p-vertical--large">
62+
6263
<SLDSLookup
6364
items={this.state.items}
6465
label="Accounts"
6566
type="account"
6667
onChange={this.onChange}
67-
onItemSelect={this.selectItem}
6868
onItemSelect={this.handleItemSelect}
6969
/>
70+
7071
</div>
7172

7273
</div>

‎demo/pages/HomePage/LookupBaseSection.jsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,6 @@ module.exports = React.createClass( {
4545
console.log(item , ' Selected');
4646
},
4747

48-
49-
getHeader(){
50-
return <SLDSLookup.DefaultHeader searchTerm={this.state.searchVal} type='account' />;
51-
},
52-
5348
getFooter(){
5449
return <SLDSLookup.DefaultFooter type='account' />;
5550
},
@@ -74,8 +69,8 @@ module.exports = React.createClass( {
7469
items={items}
7570
label="Account"
7671
type="account"
77-
header={this.getHeader()}
78-
footer={this.getFooter()}
72+
headerRenderer={SLDSLookup.DefaultHeader}
73+
footerRenderer={SLDSLookup.DefaultFooter}
7974
onChange={this.onChange}
8075
onItemSelect={this.selectItem}
8176
/>

‎demo/static/bundle.js

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

0 commit comments

Comments
 (0)