Skip to content

Commit c6d4081

Browse files
ivansfdcivansfdc
committed
Merge pull request #47 from salesforce-ux/gpinto_more_lookup_modifications
a few more tweaks to the lookup
2 parents e66b699 + e1fb828 commit c6d4081

File tree

3 files changed

+79
-50
lines changed

3 files changed

+79
-50
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ class Item extends React.Component {
6767
role="option"
6868
onClick={this.handleClick.bind(this)}
6969
onMouseDown={this.handleMouseDown.bind(this)}>
70-
<Icon name={this.props.type} />
70+
<Icon name={this.props.type} category={this.props.iconCategory}/>
7171
{ this.boldSearchText(this.props.children.label) }
7272
</a>
7373
</li>
@@ -80,6 +80,7 @@ Item.propTypes = {
8080
id: React.PropTypes.string,
8181
href: React.PropTypes.string,
8282
type: React.PropTypes.string,
83+
iconCategory: React.PropTypes.string,
8384
searchTerm: React.PropTypes.string,
8485
index: React.PropTypes.number,
8586
isActive: React.PropTypes.bool,

‎components/SLDSLookup/Menu/index.js

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ class Menu extends React.Component {
1919

2020
//Set filtered list length in parent to determine active indexes for aria-activedescendent
2121
componentDidUpdate(prevProps, prevState){
22-
let list = React.findDOMNode(this.refs.list).children.length;
22+
// make an array of the children of the list
23+
// but only count the actual items (ignore errors/messages)
24+
let list = [].slice.call(React.findDOMNode(this.refs.list).children)
25+
.filter((child) => child.className.indexOf("slds-lookup__item") > -1).length;
2326
this.props.getListLength(list);
2427
}
2528

@@ -28,8 +31,8 @@ class Menu extends React.Component {
2831
}
2932

3033
//Scroll menu up/down when using mouse keys
31-
handleItemFocus (itemIndex, itemHeight) {
32-
if(this.refs.list){
34+
handleItemFocus(itemIndex, itemHeight){
35+
if (this.refs.list) {
3336
React.findDOMNode(this.refs.list).scrollTop = itemIndex * itemHeight;
3437
}
3538
}
@@ -39,10 +42,10 @@ class Menu extends React.Component {
3942
}
4043

4144
renderFooter(){
42-
if(this.props.footer){
45+
if (this.props.footer) {
4346
let footerActive = false;
4447
let isActiveClass = null;
45-
if(this.props.focusIndex === this.props.listLength+1){
48+
if (this.props.focusIndex === this.props.listLength+1) {
4649
footerActive = true;
4750
isActiveClass = 'slds-theme--shade';
4851
}else{
@@ -53,15 +56,14 @@ class Menu extends React.Component {
5356
return <div className={isActiveClass}>{this.props.footer}</div>;
5457
}
5558
}
56-
renderMessages(){
57-
return this.props.messages.map((message) => {
58-
return <li className="slds-lookup__message" aria-live="polite">{message}</li>;
59-
});
60-
}
6159

6260
renderErrors(){
6361
return this.props.errors.map((error) => {
64-
return <li className="slds-lookup__error" aria-live="polite">{error}</li>;
62+
return (
63+
<li className="slds-lookup__error" aria-live="polite">
64+
<span>{error}</span>
65+
</li>
66+
);
6567
});
6668
}
6769

@@ -70,7 +72,7 @@ class Menu extends React.Component {
7072
//isActive means it is aria-activedescendant
7173
const id = c.id;
7274
let isActive = false;
73-
if(this.props.header){
75+
if (this.props.header) {
7476
isActive = this.props.focusIndex === i + 1 ? true : false;
7577
}else{
7678
isActive = this.props.focusIndex === i ? true : false;
@@ -79,6 +81,7 @@ class Menu extends React.Component {
7981
key={id}
8082
id={id}
8183
type={this.props.type}
84+
iconCategory={this.props.iconCategory}
8285
searchTerm={this.props.searchTerm}
8386
index={i}
8487
isActive={isActive}
@@ -93,18 +96,31 @@ class Menu extends React.Component {
9396
});
9497
}
9598

96-
renderContent() {
97-
if (this.props.errors.length)
98-
return this.renderErrors
99+
renderMessages(){
100+
return this.props.messages.map((message) => {
101+
return (
102+
<li className="slds-lookup__message" aria-live="polite">
103+
<span>{message}</span>
104+
</li>
105+
);
106+
});
107+
}
108+
109+
renderContent(){
110+
if (this.props.errors.length > 0)
111+
return this.renderErrors()
99112
else if (this.props.items.length === 0)
100-
return <li className="slds-lookup__message" aria-live="polite">{this.props.emptyMessage}</li>;
101-
102-
elements = this.renderItems()
103-
if (this.props.messages.length){
104-
return elements.concat(this.renderMessages());
113+
return (
114+
<li className="slds-lookup__message" aria-live="polite">
115+
<span>{this.props.emptyMessage}</span>
116+
</li>
117+
);
118+
119+
let elements = this.renderItems();
120+
if (this.props.messages.length > 0) {
121+
elements.concat(this.renderMessages());
105122
}
106123
return elements;
107-
108124
}
109125

110126
render(){
@@ -116,19 +132,19 @@ class Menu extends React.Component {
116132
</ul>
117133
{this.renderFooter()}
118134
</section>
119-
)
135+
);
120136
}
121137
}
122138

123139
Menu.propTypes = {
124140
searchTerm: React.PropTypes.string,
125141
label: React.PropTypes.string,
126142
type: React.PropTypes.string,
143+
iconCategory: React.PropTypes.string,
127144
focusIndex: React.PropTypes.number,
128145
listLength: React.PropTypes.number,
129146
items: React.PropTypes.array,
130147
emptyMessage: React.PropTypes.string,
131-
messages: React.PropTypes.arrayOf(React.PropTypes.string),
132148
errors: React.PropTypes.arrayOf(React.PropTypes.string),
133149
filterWith: React.PropTypes.func,
134150
getListLength: React.PropTypes.func,
@@ -137,6 +153,9 @@ Menu.propTypes = {
137153
};
138154

139155
Menu.defaultProps = {
156+
emptyMessage: "No matches found.",
157+
messages: [],
158+
errors: [],
140159
};
141160

142161
module.exports = Menu;

‎components/SLDSLookup/index.jsx

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,7 @@ class SLDSLookup extends React.Component {
3737
focusIndex:null,
3838
selectedIndex: null,
3939
listLength:this.props.items.length,
40-
items:[],
41-
errors:[],
42-
messages:[],
40+
items:[]
4341
};
4442
}
4543

@@ -63,13 +61,13 @@ class SLDSLookup extends React.Component {
6361
// Need to keep track of filtered list length to be able to increment/decrement the focus index so it's contained to the number of available list items.
6462
// Adding/subtracting 1 from focusIndex to account for fixed action items (searchRecords and addNewItem buttons)
6563
increaseIndex(){
66-
let items = this.state.listLength;
67-
this.setState({ focusIndex: this.state.focusIndex <= items ? this.state.focusIndex + 1 : 0 })
64+
let numFocusable = this.getNumFocusableItems();
65+
this.setState({ focusIndex: this.state.focusIndex < numFocusable - 1 ? this.state.focusIndex + 1 : 0 })
6866
}
6967

7068
decreaseIndex(){
71-
let items = this.state.listLength;
72-
this.setState({ focusIndex: this.state.focusIndex > 0 ? this.state.focusIndex - 1 : items })
69+
let numFocusable = this.getNumFocusableItems();
70+
this.setState({ focusIndex: this.state.focusIndex > 0 ? this.state.focusIndex - 1 : numFocusable - 1})
7371
}
7472

7573
setFocus(id){
@@ -80,16 +78,33 @@ class SLDSLookup extends React.Component {
8078
if(qty !== this.state.listLength) this.setState({listLength:qty});
8179
}
8280

81+
getNumFocusableItems(){
82+
let offset = 0
83+
if (this.refs.footer)
84+
offset += 1
85+
if (this.refs.header)
86+
offset += 1
87+
return this.state.listLength + offset
88+
}
89+
8390
//=================================================
8491
// Select menu item (onClick or on key enter/space)
8592
selectItem(itemId){
86-
const index = itemId.replace('item-', '');
87-
this.setState({
88-
selectedIndex: index,
89-
searchTerm: null
90-
});
91-
const data = this.state.items[index].data;
92-
if(this.props.onItemSelect) this.props.onItemSelect(data);
93+
if (itemId) {
94+
const index = itemId.replace('item-', '');
95+
this.selectItemByIndex(index);
96+
}
97+
}
98+
99+
selectItemByIndex(index){
100+
if (index >= 0 && index < this.state.items.length) {
101+
this.setState({
102+
selectedIndex: index,
103+
searchTerm: null
104+
});
105+
const data = this.state.items[index].data;
106+
if(this.props.onItemSelect) this.props.onItemSelect(data);
107+
}
93108
}
94109

95110
handleDeleteSelected() {
@@ -149,20 +164,19 @@ class SLDSLookup extends React.Component {
149164
//If user hits up key, advance aria activedescendant to previous item
150165
else if(event.keyCode === KEYS.UP){
151166
EventUtil.trapImmediate(event);
152-
this.state.focusIndex === null ? this.setState({focusIndex: this.state.listLength + 1}) : this.decreaseIndex();
167+
let numFocusable = this.getNumFocusableItems()
168+
this.state.focusIndex === null ? this.setState({focusIndex: numFocusable - 1}) : this.decreaseIndex();
153169
}
154170
//If user hits enter/space key, select current activedescendant item
155171
else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.focusIndex !== null){
156172
EventUtil.trapImmediate(event);
157173
//If the focus is on the first fixed Action Item in Menu, click it
158174
if(this.refs.header && this.state.focusIndex === 0){
159-
// document.getElementById('menuContainer').firstChild.children[0].click();
160175
React.findDOMNode(this.refs.header).click();
161176
}
162177
//If the focus is on the last fixed Action Item in Menu, click it
163178
else if(this.refs.footer && this.state.focusIndex === (this.state.listLength + 1)){
164179
React.findDOMNode(this.refs.footer).click();
165-
// document.getElementById('menuContainer').lastChild.children[0].click();
166180
}
167181
//If not, then select menu item
168182
else{
@@ -223,12 +237,13 @@ class SLDSLookup extends React.Component {
223237
searchTerm={this.state.searchTerm}
224238
label={this.props.label}
225239
type={this.props.type}
240+
iconCategory={this.props.iconCategory}
226241
focusIndex={this.state.focusIndex}
227242
listLength={this.state.listLength}
228243
items={this.state.items}
229244
emptyMessage={this.props.emptyMessage}
230-
messages={this.state.messages}
231-
errors={this.state.errors}
245+
messages={this.props.messages}
246+
errors={this.props.errors}
232247
filterWith={this.props.filterWith}
233248
getListLength={this.getListLength.bind(this)}
234249
setFocus={this.setFocus.bind(this)}
@@ -298,12 +313,6 @@ class SLDSLookup extends React.Component {
298313
if(newProps.items){
299314
this.modifyItems(newProps.items);
300315
}
301-
if (newProps.message){
302-
this.setState({message: newProps.message});
303-
}
304-
if (newProps.error){
305-
this.setState({errors: newProps.error});
306-
}
307316
}
308317

309318
render(){
@@ -349,12 +358,12 @@ class SLDSLookup extends React.Component {
349358

350359
SLDSLookup.propTypes = {
351360
items: React.PropTypes.array,
352-
errors: React.PropTypes.arrayOf(React.PropTypes.string),
353361
emptyMessage: React.PropTypes.string,
354362
messages: React.PropTypes.arrayOf(React.PropTypes.string),
355363
errors: React.PropTypes.arrayOf(React.PropTypes.string),
356364
label: React.PropTypes.string,
357365
type: React.PropTypes.string,
366+
iconCategory: React.PropTypes.string,
358367
filterWith: React.PropTypes.func,
359368
onItemSelect: React.PropTypes.func,
360369
onItemUnselect: React.PropTypes.func,

0 commit comments

Comments
 (0)