Skip to content

Commit 443e89d

Browse files
donniebergdonnieberg
committed
Merge pull request #2 from ux/master
Update Demo Page with SFX Lookup
2 parents cc4b839 + 4a6d08f commit 443e89d

30 files changed

+440
-298
lines changed

‎components/SLDSIcons.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,9 @@ export const InputIcon = React.createClass({
9797
}
9898

9999
});
100+
101+
module.exports = {
102+
InputIcon:InputIcon,
103+
Icon:Icon,
104+
ButtonIcon:ButtonIcon
105+
};

‎components/SLDSLookup/index.jsx

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ class SLDSLookup extends React.Component {
4141
if(this.refs.lookup) React.findDOMNode(this.refs.lookup).focus();
4242
}
4343
else if(!prevState.selectedIndex && this.state.selectedIndex){
44-
if(this.refs.clearSelectedItemButton) React.findDOMNode(this.refs.clearSelectedItemButton).focus();
44+
let selectedItem = 'pill-' + this.state.selectedIndex;
45+
if(this.refs[selectedItem]) React.findDOMNode(this.refs[selectedItem]).focus();
4546
}
4647
}
4748

@@ -141,6 +142,15 @@ class SLDSLookup extends React.Component {
141142
}
142143
}
143144

145+
handlePillKeyDown(event){
146+
if(event.keyCode){
147+
if(event.keyCode === KEYS.DELETE || event.keyCode === KEYS.BACKSPACE){
148+
EventUtil.trapImmediate(event);
149+
this.handleDeleteSelected();
150+
}
151+
}
152+
}
153+
144154
//=================================================
145155
// Rendering Things
146156
renderMenu(){
@@ -164,41 +174,44 @@ class SLDSLookup extends React.Component {
164174
renderSelectedItem(){
165175
let selectedItem = this.props.items[this.state.selectedIndex].label;
166176
return (
167-
<div className="slds-pill">
168-
<a href="#" className="slds-pill__label">
177+
<a href="#" className="slds-pill" ref={'pill-' + this.state.selectedIndex} onKeyDown={this.handlePillKeyDown.bind(this)}>
178+
<span className="slds-pill__label">
169179
<Icon name={this.props.type} />
170180
{selectedItem}
171-
</a>
181+
</span>
172182
<SLDSButton
173-
label={'Remove ' + selectedItem}
183+
label='Press delete to remove'
174184
variant='icon'
175185
iconName='close'
176186
iconSize='medium'
187+
disabled={true}
177188
onClick={this.handleDeleteSelected.bind(this)}
178189
ref="clearSelectedItemButton"
179190
/>
180-
</div>
191+
</a>
181192
);
182193
}
183194

184195
render(){
185196
let inputClasses = this.state.selectedIndex === null ? 'slds-input':'slds-input slds-hide';
186197
let componentClasses = this.state.selectedIndex === null ? "slds-lookup ignore-react-onclickoutside":"slds-lookup ignore-react-onclickoutside slds-has-selection";
198+
let inputContainerClasses = this.state.selectedIndex === null ? '':' slds-input';
199+
let inputContainerStyle = this.state.selectedIndex === null ? {} : {padding: '5px'};
187200

188201
return (
189-
<div className={componentClasses} data-select="single" data-scope="single" data-typeahead="true">
202+
<div className={componentClasses} data-select="multi" data-scope="single" data-typeahead="true">
190203
<section className="slds-form-element">
191-
<label className="slds-form-element__label" forHTML="lookup">{this.props.label}</label>
192204

193-
<div className="slds-lookup__control slds-input-has-icon slds-input-has-icon--right">
205+
<label className="slds-form-element__label" htmlFor={this.props.type + "Lookup"}>{this.props.label}</label>
206+
207+
<div className={"slds-lookup__control slds-input-has-icon slds-input-has-icon--right" + inputContainerClasses} style={inputContainerStyle}>
194208
{ this.state.selectedIndex !== null ? this.renderSelectedItem() : null }
195209
<InputIcon name="search"/>
196210
<input
197-
id="lookup"
211+
id={this.props.type + "Lookup"}
198212
ref="lookup"
199213
className={inputClasses}
200214
type="text"
201-
aria-label="lookup"
202215
aria-haspopup="true"
203216
aria-autocomplete="list"
204217
aria-activedescendant={this.state.currentFocus ? this.state.currentFocus:""}

‎components/SLDSPicklistBase/index.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,6 @@ module.exports = React.createClass( {
6060
if(this.props.initialFocus){
6161
this.setFocus();
6262
}
63-
console.log('this.props.listItemRenderer: ',this.props.listItemRenderer);
64-
6563
},
6664

6765
getIndexByValue(value){

‎components/SLDSPicklistBase/list-item-label.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ module.exports = React.createClass({
2626
value: null,
2727
inverted: false,
2828
isSelected: false,
29-
isHighlighted: false
29+
isHighlighted: false,
30+
data:{}
3031
};
3132
},
3233

‎components/SLDSPicklistBase/list-item.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ module.exports = React.createClass({
2929
isSelected: false,
3030
isHighlighted: false,
3131
labelRenderer: ListItemLabelRenderer,
32+
data: {},
3233

3334
onSelect (index) {
3435
console.log('onSelect should be defined ',index);
@@ -49,10 +50,6 @@ module.exports = React.createClass({
4950
};
5051
},
5152

52-
componentDidMount () {
53-
console.log('!!! this.props.labelRenderer: ',this.props.labelRenderer);
54-
},
55-
5653
handleClick (e) {
5754
e.preventDefault();
5855
e.stopPropagation();
@@ -143,6 +140,7 @@ module.exports = React.createClass({
143140
inverted={this.props.inverted}
144141
isSelected={this.props.isSelected}
145142
isHighlighted={this.props.isHighlighted}
143+
data={this.props.data}
146144
/>;
147145
},
148146

‎components/SLDSPicklistBase/list.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ module.exports = React.createClass({
132132
index={index}
133133
label={option.label}
134134
value={option.value}
135+
data={option}
135136
isHighlighted={(index===this.props.highlightedIndex)}
136137
isSelected={(index===this.props.selectedIndex)}
137138
onUpdateHighlighted={this.handleUpdateHighlighted}

‎components/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import SLDSSettings from './SLDSSettings';
1515
import SLDSButton from './SLDSButton';
1616
import SLDSModal from './SLDSModal';
1717
import SLDSModalTrigger from './SLDSModal/trigger';
18-
import SLDSToast from './SLDSToast';
18+
import SLDSIcons from './SLDSIcons';
1919

2020
module.exports = {
2121
SLDSPicklistBase: SLDSPicklistBase,
@@ -24,5 +24,5 @@ module.exports = {
2424
SLDSButton: SLDSButton,
2525
SLDSModal: SLDSModal,
2626
SLDSModalTrigger: SLDSModalTrigger,
27-
SLDSToast: SLDSToast
27+
SLDSIcons: SLDSIcons
2828
};

‎components/utils/KEYS.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@ module.exports = {
66
UP :38,
77
RIGHT :39,
88
DOWN :40,
9-
TAB :9
10-
};
9+
TAB :9,
10+
DELETE :46,
11+
BACKSPACE :8
12+
};

‎demo/pages/HomePage/CustomListItemLabel.cjsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
React = require('react')
2+
SLDS = require('../../../components')
3+
SLDSPicklistBase = SLDS.SLDSPicklistBase
4+
SLDSIcons = SLDS.SLDSIcons
5+
Icon = SLDSIcons.Icon
6+
module.exports = React.createClass(
7+
getDefaultProps: ->
8+
{
9+
index: 0
10+
label: ''
11+
value: null
12+
inverted: false
13+
isSelected: false
14+
isHighlighted: false
15+
data: {}
16+
}
17+
handleMouseOver: (event) ->
18+
console.log 'OVER: ' + @props.label
19+
return
20+
21+
render: ->
22+
icon = null
23+
if(@props.isSelected)
24+
icon = <Icon name='like' position='left' category='utility' />
25+
26+
<section
27+
onMouseOver={@handleMouseOver}
28+
>
29+
{ icon }
30+
{
31+
@props.data.strongLabel
32+
}
33+
</section>
34+
)

‎demo/pages/HomePage/PicklistBaseCustomSection.jsx

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1010
'use strict';
1111

1212
import React from 'react';
13-
import SLDSPicklistBase from '../../../components/SLDSPicklistBase';
14-
import {Icon} from '../../../components/SLDSIcons';
13+
import {SLDSPicklistBase, SLDSIcons} from '../../../components';
1514

1615
import {default as PrismCode} from 'react-prism/lib/PrismCode';
1716

17+
import CustomListItemLabel from './CustomListItemLabel.cjsx';
1818

19-
19+
const Icon = SLDSIcons.Icon;
20+
/*
2021
const CustomListItemLabel = React.createClass( {
2122
getDefaultProps () {
2223
return {
@@ -25,7 +26,8 @@ const CustomListItemLabel = React.createClass( {
2526
value: null,
2627
inverted: false,
2728
isSelected: false,
28-
isHighlighted: false
29+
isHighlighted: false,
30+
data:{}
2931
};
3032
},
3133
handleMouseOver (event) {
@@ -40,12 +42,12 @@ const CustomListItemLabel = React.createClass( {
4042
this.props.isSelected?<Icon name='like' position='left' category='utility' />:null
4143
}
4244
{
43-
this.props.label
45+
this.props.data.strongLabel
4446
}
4547
</section>;
4648
}
4749
});
48-
50+
*/
4951

5052
module.exports = React.createClass( {
5153

@@ -86,16 +88,16 @@ module.exports = React.createClass( {
8688
<div className="slds-p-vertical--large">
8789
<SLDSPicklistBase
8890
options={[
89-
{label:'A Option Option Super Super Long',value:'A0'},
90-
{label:'B Option',value:'B0'},
91-
{label:'C Option',value:'C0'},
92-
{label:'D Option',value:'D0'},
93-
{label:'E Option',value:'E0'},
94-
{label:'A1 Option',value:'A1'},
95-
{label:'B2 Option',value:'B1'},
96-
{label:'C2 Option',value:'C1'},
97-
{label:'D2 Option',value:'D1'},
98-
{label:'E2 Option Super Super Long',value:'E1'},
91+
{label:'A Option Option Super Super Long',value:'A0',strongLabel:'SUPER TITLE B0'},
92+
{label:'B Option',value:'B0',strongLabel:'SUPER TITLE B0'},
93+
{label:'C Option',value:'C0',strongLabel:'SUPER TITLE C0'},
94+
{label:'D Option',value:'D0',strongLabel:'SUPER TITLE D0'},
95+
{label:'E Option',value:'E0',strongLabel:'SUPER TITLE E0'},
96+
{label:'A1 Option',value:'A1',strongLabel:'SUPER TITLE A1'},
97+
{label:'B2 Option',value:'B1',strongLabel:'SUPER TITLE B1'},
98+
{label:'C2 Option',value:'C1',strongLabel:'SUPER TITLE C1'},
99+
{label:'D2 Option',value:'D1',strongLabel:'SUPER TITLE D1'},
100+
{label:'E2 Option Super Super Long',value:'E1',strongLabel:'SUPER TITLE E1'},
99101

100102
]}
101103
value='C0'

‎demo/pages/HomePage/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import ButtonSection from './ButtonSection';
1818
import PicklistBaseSection from './PicklistBaseSection';
1919
import PicklistBaseCustomSection from './PicklistBaseCustomSection';
2020

21+
2122
import ModalSection from './ModalSection';
2223
import DatePickerSingleSelectSection from './DatePickerSingleSelectSection';
2324
import LookupBaseSection from './LookupBaseSection';

0 commit comments

Comments
 (0)