Skip to content

Commit 3e11727

Browse files
ivansfdcivansfdc
committed
Merge pull request #42 from salesforce-ux/lookups-refactor
Lookups refactor
2 parents d8a44ee + 02420cb commit 3e11727

File tree

5 files changed

+128
-75
lines changed

5 files changed

+128
-75
lines changed

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

Lines changed: 0 additions & 53 deletions
This file was deleted.

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
6+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
7+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8+
*/
9+
10+
import React, { Component } from 'react';
11+
import {Icon} from "../../../SLDSIcons";
12+
13+
class DefaultFooter extends React.Component {
14+
constructor(props) {
15+
super(props);
16+
}
17+
18+
componentWillReceiveProps(nextProps){
19+
if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
20+
}
21+
22+
footerClick(){
23+
console.log('=====> Lookup Footer Clicked');
24+
}
25+
26+
render(){
27+
let className = 'slds-button';
28+
if(this.props.isActive) className += ' slds-theme--shade'
29+
30+
return (
31+
<div className="slds-lookup__item" onClick={this.footerClick}>
32+
<button id='newItem' tabIndex="-1" className={className}>
33+
<Icon name='add' category="utility" size="x-small" className="slds-icon-text-default" />
34+
{'New ' + this.props.type}
35+
</button>
36+
</div>
37+
)
38+
}
39+
}
40+
41+
DefaultFooter.propTypes = {
42+
};
43+
44+
DefaultFooter.defaultProps = {
45+
};
46+
47+
module.exports = DefaultFooter;

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
6+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
7+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8+
*/
9+
10+
import React, { Component } from 'react';
11+
import {Icon} from "../../../SLDSIcons";
12+
13+
class DefaultHeader extends React.Component {
14+
constructor(props) {
15+
super(props);
16+
}
17+
18+
componentWillReceiveProps(nextProps){
19+
if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) this.props.setFocus(this.props.id);
20+
}
21+
22+
headerClick(){
23+
console.log('=====> Lookup Header Clicked');
24+
}
25+
26+
render(){
27+
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+
)
38+
}
39+
}
40+
41+
DefaultHeader.propTypes = {
42+
};
43+
44+
DefaultHeader.defaultProps = {
45+
};
46+
47+
module.exports = DefaultHeader;

‎demo/pages/HomePage/LookupBaseSection.jsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1212
import React from 'react';
1313
import SLDSLookup from '../../../components/SLDSLookup';
1414
import {default as PrismCode} from 'react-prism/lib/PrismCode';
15-
import ActionItem from '../../../components/SLDSLookup/Menu/ActionItem';
15+
import DefaultHeader from '../../../components/SLDSLookup/Menu/DefaultHeader';
16+
import DefaultFooter from '../../../components/SLDSLookup/Menu/DefaultFooter';
1617

1718
const items = [
1819
{label:'Paddy\'s Pub'},
@@ -44,28 +45,13 @@ module.exports = React.createClass( {
4445
console.log(item , ' Selected');
4546
},
4647

47-
headerClick(){
48-
console.log('=====> Lookup Header Clicked');
49-
},
50-
51-
footerClick(){
52-
console.log('=====> Lookup Footer Clicked');
53-
},
5448

5549
getHeader(){
56-
return (
57-
<div className="slds-lookup__item" onClick={this.headerClick} onMouseDown={this.headerClick}>
58-
<ActionItem item='search' type='account' searchTerm={this.state.searchVal} />
59-
</div>
60-
)
50+
return <DefaultHeader searchTerm={this.state.searchVal} type='account' />;
6151
},
6252

6353
getFooter(){
64-
return (
65-
<div className="slds-lookup__item" onClick={this.footerClick} onMouseDown={this.footerClick}>
66-
<ActionItem item='newItem' type='account' />
67-
</div>
68-
)
54+
return <DefaultFooter type='account' />;
6955
},
7056

7157
render() {

‎tests/SLDSLookup/lookup.test.jsx‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const React = require('react/addons');
22
const TestUtils = React.addons.TestUtils;
33
import {SLDSLookup} from '../../components';
4-
import ActionItem from '../../components/SLDSLookup/Menu/ActionItem';
54

65
describe('SLDSLookup: ', function(){
76

@@ -89,17 +88,44 @@ describe('SLDSLookup: ', function(){
8988
});
9089

9190
it('selects correct item', function() {
91+
let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
92+
let input = lookup.getElementsByTagName("input")[0];
93+
TestUtils.Simulate.click(input);
94+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
95+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
96+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
97+
TestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
98+
let selected = lookup.getElementsByTagName("span")[0].getElementsByTagName('span')[0].innerText;
99+
expect(selected).to.equal('Paper St. Soap Company');
92100
});
93101

94-
it('closes lookup menu', function() {
102+
it('closes lookup menu on esc', function() {
103+
let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
104+
let input = lookup.getElementsByTagName("input")[0];
105+
TestUtils.Simulate.click(input);
106+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
107+
TestUtils.Simulate.keyDown(input, {key: "Esc", keyCode: 27, which: 27});
108+
let ariaExpanded = input.getAttribute("aria-expanded");
109+
expect(ariaExpanded).to.equal('false');
95110
});
96111

97112
it('aria-expanded is false after selecting item', function() {
113+
let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
114+
let input = lookup.getElementsByTagName("input")[0];
115+
TestUtils.Simulate.click(input);
116+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
117+
TestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
118+
expect(input.className).to.have.string('slds-hide');
98119
});
99120

100-
it('focuses on selected item', function() {
121+
it('aria-expanded is false after selecting item', function() {
122+
let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
123+
let input = lookup.getElementsByTagName("input")[0];
124+
TestUtils.Simulate.click(input);
125+
TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
126+
let focusedItem = lookup.getElementsByTagName("ul")[0].getElementsByTagName('li')[0];
127+
expect(focusedItem.className).to.have.string('slds-theme--shade');
101128
});
102-
103129
});
104130

105131
});

0 commit comments

Comments
 (0)