Use PropTypes for PicklistBase Function

Author: billyma

components/SLDSPicklistBase/index.jsx

@@ -9,7 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 'use strict';
 
-import React from 'react';
+import React, {PropTypes} from 'react';
 import SLDSPopover from '../SLDSPopover';
 import List from './list';
 
@@ -21,6 +21,12 @@ import {KEYS,EventUtil} from '../utils';
 
 module.exports = React.createClass( {
 
+  propTypes : {
+        onClick: PropTypes.func,
+        onSelect: PropTypes.func.isRequired,
+        onUpdateHighlighted: PropTypes.func
+    },
+
   getDefaultProps(){
     return {
       placeholder: 'Select an Option',
@@ -32,15 +38,7 @@ module.exports = React.createClass( {
       initialFocus: false,
       modal: false,
       className:'',
-      listClassName:'',
-      onClick () {
-      },
-      onSelect (value){
-        console.log('onItemSelect should be defined');
-      },
-      onUpdateHighlighted (nextIndex) {
-        console.log('onUpdateHighlighted should be defined');
-      }
+      listClassName:''
     }
   },
 
@@ -130,9 +128,9 @@ module.exports = React.createClass( {
 
   handleKeyDown(event) {
     if (event.keyCode){
-      if (event.keyCode === KEYS.ENTER || 
-          event.keyCode === KEYS.SPACE || 
-          event.keyCode === KEYS.DOWN || 
+      if (event.keyCode === KEYS.ENTER ||
+          event.keyCode === KEYS.SPACE ||
+          event.keyCode === KEYS.DOWN ||
           event.keyCode === KEYS.UP){
         EventUtil.trapEvent(event);
 
@@ -165,8 +163,8 @@ module.exports = React.createClass( {
             className={this.props.listClassName}
             highlightedIndex={this.state.highlightedIndex}
             selectedIndex={this.state.selectedIndex}
-            onSelect={this.handleSelect} 
-            onUpdateHighlighted={this.handleUpdateHighlighted} 
+            onSelect={this.handleSelect}
+            onUpdateHighlighted={this.handleUpdateHighlighted}
             onListBlur={this.handleListBlur}
             onListItemBlur={this.handleListItemBlur}
             onCancel={this.handleCancel}
@@ -176,9 +174,9 @@ module.exports = React.createClass( {
   getSimplePopover() {
     return (
       !this.props.disabled && this.state.isOpen?
-        <div 
-          className="slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu" 
-          targetElement={this.refs.button} 
+        <div
+          className="slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu"
+          targetElement={this.refs.button}
           style={{maxHeight:'20em'}}>
           {this.getPopoverContent()}
         </div>:null
@@ -188,9 +186,9 @@ module.exports = React.createClass( {
   getModalPopover() {
     return (
       !this.props.disabled && this.state.isOpen?
-        <SLDSPopover 
-          className='slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu' 
-          targetElement={this.refs.date} 
+        <SLDSPopover
+          className='slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu'
+          targetElement={this.refs.date}
           closeOnTabKey={true}
           onClose={this.handleCancel}>
           {this.getPopoverContent()}
@@ -217,7 +215,7 @@ module.exports = React.createClass( {
       <div className={"slds-form-element slds-theme--"+this.props.theme}>
         <div className={"slds-picklist slds-theme--"+this.props.theme}>
         <form>
-          <button 
+          <button
             id={this.props.id}
             ref="button"
             className={'slds-button slds-button--neutral slds-picklist__label '+this.props.className }

demo/pages/HomePage/PicklistBaseSection.jsx

@@ -28,6 +28,17 @@ module.exports = React.createClass( {
     return {};
   },
 
+  handleOnUpdateHighlighted () {
+    console.log('onUpdateHighlighted should be defined');
+  },
+
+  handleOnSelect() {
+    console.log('onSelect should be defined');
+  },
+
+  handleOnClick() {
+    console.log('onClick should be defined');
+  },
 
   render() {
     return (
@@ -57,12 +68,14 @@ module.exports = React.createClass( {
                       {label:'D2 Option',value:'D1'},
                       {label:'E2 Option Super Super Long',value:'E1'},
 
-
                     ]}
                     value='C0'
                     label="Contacts"
                     modal={false}
-                    placeholder = "Select a contact" />
+                    placeholder = "Select a contact"
+                    onSelect={this.handleOnSelect}
+                    onClick={this.handleOnClick}
+                    onUpdateHighlighted={this.handleOnUpdateHighlighted} />
               </div>
 
             </div>