Merge pull request #44 from anedot/patrickW/feature--support-style-props

Add Support for custom styles

README.md

@@ -63,12 +63,17 @@ attribute|default|description
 ---------|-------|-----------
 caseSensitive|false|Indicates whether comparisons should be case sensitive.
 className|null|give a custom class name to the root element
+inputStyle|{}|Styles passed directly to the `input` element.
+inputWrapperStyle|{}|Styles passed directly to the `input` wrapper `div`.
+listItemStyle|{}|Styles passed to each item in the dropdown list.
+listWrapperStyle|{}|Styles passed directly to the dropdown wrapper.
+selectedListItemStyle|{}|Styles passed directly to current 'active' item.
+width|430|width of the fuzzy searchbox
 distance|100|Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.
 id|null|The name of the identifier property. If specified, the returned result will be a list of the items' identifiers, otherwise it will be a list of the items.
 include|[]|An array of values that should be included from the searcher's output. When this array contains elements, each result in the list will be of the form `{ item: ..., include1: ..., include2: ... }`. Values you can include are score, matches. Eg: `{ include: ['score', 'matches' ] }`
 maxPatternLength|32|The maximum length of the pattern. The longer the pattern, the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown.
 onSelect| noop | Function to be executed on selection of any result.
-width|430|width of the fuzzy searchbox
 keyForDisplayName|title|The key which should be used for list item text.
 keys|all[Array]|List of properties that will be searched. This also supports nested properties.
 list|null|Array of properties to be filtered.

src/index.js

@@ -54,7 +54,7 @@ const styles = {
 
 function defaultResultsTemplate(props, state, styl, clickHandler) {
   return state.results.map((val, i) => {
-    const style = state.selectedIndex === i ? styl.selectedResultStyle : styl.resultsStyle;
+    const style = state.selectedIndex === i ? {...styl.selectedResultStyle, ...props.selectedListItemStyle} : {...styl.resultsStyle, ...props.listItemStyle };
     return (
       <div key={i} style={style} onClick={() => clickHandler(i)}>
         {val[props.keyForDisplayName]}
@@ -87,6 +87,11 @@ export default class FuzzySearch extends Component {
     autoFocus: PropTypes.bool,
     maxResults: PropTypes.number,
     options: PropTypes.object,
+    inputStyle: PropTypes.object,
+    inputWrapperStyle: PropTypes.object,
+    listItemStyle: PropTypes.object,
+    listWrapperStyle: PropTypes.object,
+    selectedListItemStyle: PropTypes.object,
   };
 
   static defaultProps = {
@@ -107,6 +112,11 @@ export default class FuzzySearch extends Component {
     verbose: false,
     autoFocus: false,
     maxResults: 10,
+    inputStyle: {},
+    inputWrapperStyle: {},
+    listItemStyle: {},
+    listWrapperStyle: {},
+    selectedListItemStyle: {},
   };
 
   constructor(props) {
@@ -220,18 +230,18 @@ export default class FuzzySearch extends Component {
 
     return (
       <div className={mainClass} style={{ width }} onKeyDown={this.handleKeyDown}>
-        <div style={styles.searchBoxWrapper}>
+        <div style={{...styles.searchBoxWrapper, ...this.props.inputWrapperStyle}}>
           <input
             autoFocus={autoFocus}
             onChange={this.handleChange}
             placeholder={placeholder}
-            style={styles.searchBoxStyle}
+            style={{...styles.searchBoxStyle, ...this.props.inputStyle}}
             type="text"
             value={this.state.value}
           />
         </div>
         {this.state.results && this.state.results.length > 0 && (
-          <div style={styles.resultsWrapperStyle}>
+          <div style={{...styles.resultsWrapperStyle, ...this.props.listWrapperStyle}}>
             {resultsTemplate(this.props, this.state, styles, this.handleMouseClick)}
           </div>
         )}

src/stories/index.js

@@ -70,6 +70,28 @@ storiesOf('SearchBox', module)
   .add('Basic', () => (
     <FuzzySearch list={list} keys={['author', 'title']} width={430} onSelect={action('selected')} />
   ))
+  .add('Custom Styles', () => (
+    <FuzzySearch
+      list={list}
+      onSelect={action('selected')}
+      keys={['author', 'title']}
+      inputStyle={{
+        outline: '1px solid red',
+      }}
+      inputWrapperStyle={{
+        outline: '1px solid red',
+      }}
+      listItemStyle={{
+        backgroundColor: 'yellow',
+      }}
+      listWrapperStyle={{
+        border: '2px solid blue',
+      }}
+      selectedListItemStyle={{
+        color: 'red',
+      }}
+    />
+  ))
   .add('Custom Template', () => {
     function x(props, state, styles, clickHandler) {
       return state.results.map((val, i) => {

src/tests/index.js

@@ -142,4 +142,32 @@ describe('<FuzzySearch />', () => {
     // Each result should have a 'matches' array now with `includeMatches`
     expect(wrapper.state('results')[0].item.title).to.equal('The Great Gatsby');
   });
+
+  it('should support style props', () => {
+     const onChange = sinon.spy();
+     const wrapper = mount(
+      <FuzzySearch
+        list={list}
+        onSelect={onChange}
+        keys={['author', 'title']}
+        inputStyle={{
+          outline: '1px solid red',
+        }}
+        inputWrapperStyle={{
+          outline: '1px solid red',
+        }}
+        resultStyle={{
+          backgroundColor: 'yellow',
+        }}
+        listWrapperStyle={{
+          border: '2px solid blue',
+        }}
+        selectedListItemStyle={{
+          backgroundColor: 'green',
+        }}
+      />,
+    );
+
+    expect(wrapper.find('input')).to.exist;
+  })
 });