feat(props): Add classNames and placeholder props to let the user of …

…the library pass the custom cla
hibiken · Jul 12, 2016 · 8c8ded8 · 8c8ded8
1 parent 4cbd4af
commit 8c8ded8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 9 deletions.
diff --git a/src/PlacesAutocomplete.js b/src/PlacesAutocomplete.js
@@ -144,6 +144,7 @@ class PlacesAutocomplete extends React.Component {
     this.autocompleteService.getPlacePredictions({ input: event.target.value }, this.autocompleteCallback)
   }
 
+  // TODO: this should be customizable.
   autocompleteItemStyle(active) {
     if (active) {
       return { backgroundColor: '#fafafa' }
@@ -152,11 +153,15 @@ class PlacesAutocomplete extends React.Component {
     }
   }
 
+  // TODO: Autocomplete item should be customizable.
   renderAutocomplete() {
     const { autocompleteItems } = this.state
     if (autocompleteItems.length === 0) { return null }
     return (
-      <div className="autocomplete__wrapper" style={styles.autocompleteWrapper}>
+      <div
+        id="PlacesAutocomplete__autocomplete-container"
+        className={this.props.classNames.autocompleteContainer || ''}
+        style={styles.autocompleteWrapper}>
         {autocompleteItems.map((p, idx) => (
           <div
             key={p.placeId}
@@ -172,17 +177,18 @@ class PlacesAutocomplete extends React.Component {
   }
 
   render() {
+    const { classNames, placeholder, value } = this.props
     return (
       <fieldset
         style={styles.autocompleteContainer}
-        className={this.props.classNames.container || ''}
+        className={classNames.container || ''}
       >
-        <label className="form-label--simple">Location</label>
+        <label className={classNames.label || ''}>Location</label>
         <input
           type="text"
-          placeholder="Address"
-          className="form-input--simple"
-          value={this.props.value}
+          placeholder={placeholder}
+          className={classNames.input || ''}
+          value={value}
           onChange={this.handleAddressChange}
           onKeyDown={this.handleAddressKeyDown}
         />
@@ -195,10 +201,17 @@ class PlacesAutocomplete extends React.Component {
 PlacesAutocomplete.propTypes = {
   value: React.PropTypes.string.isRequired,
   setAddress: React.PropTypes.func.isRequired,
-  classNames: React.PropTypes.obj,
+  placeholder: React.PropTypes.string,
+  classNames: React.PropTypes.shape({
+    container: React.PropTypes.string,
+    label: React.PropTypes.string,
+    input: React.PropTypes.string,
+    autocompleteContainer: React.PropTypes.string,
+  }),
 };
 
 PlacesAutocomplete.defaultProps = {
+  placeholder: 'Address',
   classNames: {},
 }
 

diff --git a/src/tests/index.spec.js b/src/tests/index.spec.js
@@ -43,7 +43,7 @@ describe('autocomplete dropdown', () => {
   })
 
   it('initially does not have an autocomplete dropdown', () => {
-    expect(wrapper.find('.autocomplete__wrapper')).to.have.length(0)
+    expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.length(0)
   })
 
   it('renders autocomplete dropdown once it receives data from google maps', () => {
@@ -68,11 +68,53 @@ describe('autocomplete dropdown', () => {
       }
     ]
     wrapper.setState({ autocompleteItems: data })
-    expect(wrapper.find('.autocomplete__wrapper')).to.have.length(1)
+    expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.length(1)
     expect(wrapper.find('.autocomplete__item')).to.have.length(3)
   })
 })
 
+describe('custom classNames, placeholder', () => {
+  const classNames = {
+    container: 'my-container',
+    label: 'my-label',
+    input: 'my-input',
+    autocompleteContainer: 'my-autocomplete-container'
+  }
+
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<PlacesAutocomplete
+                        value="San Francisco, CA"
+                        setAddress={() => {}}
+                        classNames={classNames}
+                        placeholder="Your Address"
+                      />)
+  })
+
+  it('lets you set a custom className for the container', () => {
+    expect(wrapper.find('.my-container')).to.have.length(1)
+  })
+
+  it('lets you set a custom className for the label', () => {
+    expect(wrapper.find('label')).to.have.className('my-label')
+  })
+
+  it('lets you set a custom className for the input', () => {
+    expect(wrapper.find('input')).to.have.className('my-input')
+  })
+
+  it('lets you set a custom className for autocomplete container', () => {
+    wrapper.setState({ autocompleteItems: [{ suggestion: 'San Francisco, CA', placeId: 1, active: false, index: 0 }] })
+    expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.className('my-autocomplete-container')
+  })
+
+  it('lets you set a custom placeholder for the input', () => {
+    //console.log(wrapper.find('input').props().placeholder)
+    expect(wrapper.find('input').props().placeholder).to.equal('Your Address')
+  })
+});
+