Skip to content

Commit 620ccf9

Browse files
donniebergdonnieberg
committed
Merge pull request #36 from salesforce-ux/lookups-refactor
Lookups refactor
2 parents 13ac35b + 0659e16 commit 620ccf9

File tree

6 files changed

+100
-49
lines changed

6 files changed

+100
-49
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,20 @@ class ActionItem extends React.Component {
1919
if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
2020
}
2121

22+
renderIcon(){
23+
if(this.props.icon){
24+
return <Icon name={this.props.icon} category="utility" size="x-small" className="slds-icon-text-default" />
25+
}
26+
}
27+
2228
render(){
2329
let className = 'slds-button';
2430
if(this.props.isActive) className += ' slds-theme--shade'
2531

2632
return (
2733
<button id={this.props.id} tabIndex="-1" className={className} onClick={this.props.onSelect} onMouseDown={this.props.onSelect}>
28-
<Icon name={this.props.icon} category="utility" size="x-small" className="slds-icon-text-default" />
29-
{this.props.children}
34+
{this.renderIcon()}
35+
{this.props.children}
3036
</button>
3137
)
3238
}

‎components/SLDSLookup/Menu/index.js‎

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,58 @@ class Menu extends React.Component {
3535
}
3636
}
3737

38+
getHeader(){
39+
if(this.props.header !== false && this.props.header !== undefined){
40+
41+
let content = (this.props.searchTerm ? '"' + this.props.searchTerm + '"' : "") + ' in ' + this.props.type + 's';
42+
if(this.props.header !== true) content = this.props.header;
43+
44+
let headerActive = false;
45+
this.props.focusIndex === 0 ? headerActive = true: headerActive = false;
46+
47+
return (
48+
<div className="slds-lookup__item">
49+
<ActionItem
50+
id='searchRecords'
51+
icon={this.props.header === true ? 'search' : false}
52+
type={this.props.type}
53+
isActive={headerActive}
54+
setFocus={this.props.setFocus}
55+
onSelect={this.props.headerClick}
56+
>
57+
{content}
58+
</ActionItem>
59+
</div>
60+
)
61+
}
62+
}
63+
64+
getFooter(){
65+
if(this.props.footer != false && this.props.footer !== undefined){
66+
67+
let content = 'New ' + this.props.type;
68+
if(this.props.footer !== true) content = this.props.footer;
69+
70+
let footerActive = false;
71+
this.props.focusIndex === this.props.listLength+1 ? footerActive = true: footerActive = false;
72+
73+
return (
74+
<div className="slds-lookup__item">
75+
<ActionItem
76+
id='addNewItem'
77+
icon={this.props.footer === true ? 'add' : false}
78+
type={this.props.type}
79+
isActive={footerActive}
80+
setFocus={this.props.setFocus}
81+
onSelect={this.props.footerClick}
82+
>
83+
{content}
84+
</ActionItem>
85+
</div>
86+
)
87+
}
88+
}
89+
3890
renderItems(){
3991
return this.props.items.filter(this.filter, this).map((c, i) => {
4092
//isActive means it is aria-activedescendant
@@ -65,35 +117,13 @@ class Menu extends React.Component {
65117

66118
return (
67119
<section>
68-
<div className="slds-lookup__item">
69-
<ActionItem
70-
id='searchRecords'
71-
icon='search'
72-
type={this.props.type}
73-
isActive={isSearchRecordsActive}
74-
setFocus={this.props.setFocus}
75-
onSelect={this.props.onSearchRecords}
76-
>
77-
{this.props.searchTerm ? '"' + this.props.searchTerm + '"' : ""} in {this.props.type + 's'}
78-
</ActionItem>
79-
</div>
120+
{this.getHeader()}
80121

81122
<ul id="list" className="slds-lookup__list" role="presentation" ref="list">
82123
{this.renderItems()}
83124
</ul>
84125

85-
<div className="slds-lookup__item">
86-
<ActionItem
87-
id='addNewItem'
88-
icon='add'
89-
type={this.props.type}
90-
isActive={isNewItemBtnActive}
91-
setFocus={this.props.setFocus}
92-
onSelect={this.props.onNewItem}
93-
>
94-
New {this.props.type}
95-
</ActionItem>
96-
</div>
126+
{this.getFooter()}
97127
</section>
98128
)
99129
}
@@ -109,8 +139,6 @@ Menu.propTypes = {
109139
filterWith: React.PropTypes.func,
110140
getListLength: React.PropTypes.func,
111141
setFocus: React.PropTypes.func,
112-
onSelect: React.PropTypes.func,
113-
addItem: React.PropTypes.func,
114142
};
115143

116144
Menu.defaultProps = {

‎components/SLDSLookup/index.jsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -93,14 +93,14 @@ class SLDSLookup extends React.Component {
9393
});
9494
}
9595

96-
newItem(){
96+
footerClick(){
9797
this.handleClose();
98-
if(this.props.onNewItem) this.props.onNewItem();
98+
if(this.props.onFooterClick) this.props.onFooterClick();
9999
}
100100

101-
searchRecords(){
101+
headerClick(){
102102
this.handleClose();
103-
if(this.props.onSearchRecords) this.props.onSearchRecords();
103+
if(this.props.onHeaderClick) this.props.onHeaderClick();
104104
}
105105

106106
//=================================================
@@ -159,11 +159,11 @@ class SLDSLookup extends React.Component {
159159
EventUtil.trapImmediate(event);
160160
//If the focus is on the first fixed Action Item in Menu
161161
if(this.state.focusIndex === 0){
162-
this.searchRecords();
162+
this.headerClick();
163163
}
164164
//If the focus is on the last fixed Action Item in Menu
165165
else if(this.state.focusIndex === (this.state.listLength + 1)){
166-
this.newItem();
166+
this.footerClick();
167167
}
168168
//If not, then select menu item
169169
else{
@@ -197,8 +197,10 @@ class SLDSLookup extends React.Component {
197197
getListLength={this.getListLength.bind(this)}
198198
setFocus={this.setFocus.bind(this)}
199199
onSelect={this.selectItem.bind(this)}
200-
onSearchRecords={this.searchRecords.bind(this)}
201-
onNewItem={this.newItem.bind(this)}
200+
header={this.props.header}
201+
headerClick={this.headerClick.bind(this)}
202+
footer={this.props.footer}
203+
footerClick={this.footerClick.bind(this)}
202204
/>;
203205
}
204206
}
@@ -310,16 +312,16 @@ SLDSLookup.propTypes = {
310312
filterWith: React.PropTypes.func,
311313
onItemSelect: React.PropTypes.func,
312314
onChange: React.PropTypes.func,
313-
onNewItem: React.PropTypes.func,
314-
onSearchRecords: React.PropTypes.func,
315-
modal: React.PropTypes["bool"],
316-
disabled: React.PropTypes["bool"],
315+
onFooterClick: React.PropTypes.func,
316+
onHeaderClick: React.PropTypes.func,
317+
modal: React.PropTypes.bool,
318+
disabled: React.PropTypes.bool,
317319
};
318320

319321
SLDSLookup.defaultProps = {
320322
filterWith: defaultFilter,
321323
modal: false,
322-
disabled: false
324+
disabled: false,
323325
};
324326

325327
module.exports = SLDSLookup;

‎demo/code-snippets/SLDSLookupPage.txt‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
Default Props Prop Values
2+
* header={false} [true, false, custom DOM node]
3+
* footer={false} [true, false, custom DOM node]
4+
5+
true renders default header or footer
6+
false does not render header or footer
7+
pass in custom DOM node to render in header or footer
18

29
const items = [
310
{label:'Paddy\'s Pub'},
@@ -12,9 +19,11 @@ const items = [
1219
items={items}
1320
label="Accounts"
1421
type="account"
22+
header={this.getHeader()}
23+
footer={true}
1524
onChange={this.onChange}
1625
onItemSelect={this.onItemSelect}
17-
onNewItem={this.newItem}
18-
onSearchRecords={this.searchRecords} />
26+
onHeaderClick={this.searchRecords}
27+
onFooterClick={this.newItem} />
1928

2029

‎demo/pages/HomePage/LookupBaseDynamicSection.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,7 @@ module.exports = React.createClass( {
6565
type="account"
6666
onChange={this.onChange}
6767
onItemSelect={this.selectItem}
68-
onNewItem={this.newItem}
6968
onItemSelect={this.handleItemSelect}
70-
onSearchRecords={this.searchRecords}
7169
/>
7270
</div>
7371

‎demo/pages/HomePage/LookupBaseSection.jsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ module.exports = React.createClass( {
4040
alert('New Item Clicked');
4141
},
4242

43-
searchRecords(){
44-
alert('Search Records Clicked');
43+
customHeaderClick(){
44+
alert('custom header clicked');
4545
},
4646

4747
onChange(newValue){
@@ -52,6 +52,12 @@ module.exports = React.createClass( {
5252
console.log(item , ' Selected');
5353
},
5454

55+
getHeader(){
56+
return(
57+
<div>MY CUSTOM HEADER</div>
58+
)
59+
},
60+
5561
render() {
5662
return (
5763

@@ -72,10 +78,12 @@ module.exports = React.createClass( {
7278
items={items}
7379
label="Accounts"
7480
type="account"
81+
header={this.getHeader()}
82+
onHeaderClick={this.customHeaderClick}
83+
footer={true}
84+
onFooterClick={this.newItem}
7585
onChange={this.onChange}
7686
onItemSelect={this.selectItem}
77-
onNewItem={this.newItem}
78-
onSearchRecords={this.searchRecords}
7987
/>
8088
</div>
8189

0 commit comments

Comments
 (0)