diff --git a/docs/index.md b/docs/index.md index 990811e..44304fd 100644 --- a/docs/index.md +++ b/docs/index.md @@ -182,3 +182,25 @@ Example: type: `array` + +### `header` + +Wether show header infomation. Defaults true. you can set it to false or object as argument + +if `header` is true, header will show. **Default** +if `header` is false, header won't show. +if `header` is blank object, header won't show too. +if `header` is equal to above like-code, header will show. + +Example: +```javascript +{ + "first": "Category", + "second": "Operator", + "third": "Value" +} + +``` +type: `object` or `bool` +defaultValue: `true` + diff --git a/example/src/ExampleTable.jsx b/example/src/ExampleTable.jsx index ad8cd0d..0a0e1be 100644 --- a/example/src/ExampleTable.jsx +++ b/example/src/ExampleTable.jsx @@ -22,6 +22,11 @@ var ExampleTable = React.createClass({ value: 'Dec 8, 1980 10:50 PM', }, ], + header: { + first: "Category1", + second: "Operator1", + third: "Value1" + }, } }, @@ -81,6 +86,7 @@ var ExampleTable = React.createClass({ }} onChange={this.updateFilter} value={this.state.filter} + header={this.state.header} /> `, `>=` ], date: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ], }, + header: true, } constructor( ...args ) { @@ -190,12 +206,25 @@ export default class Tokenizer extends Component { this._onKeyDown = this._onKeyDown.bind( this ); this._getOptionsForTypeahead = this._getOptionsForTypeahead.bind( this ); this._removeTokenForValue = this._removeTokenForValue.bind( this ); - } - state = { - selected: this.getStateFromProps( this.props ), - category: '', - operator: '', + let header = { + first: 'Category', + second: 'Operator', + third: 'Value', + }; + + if ( typeof this.props.header === 'boolean' ) { + header = this.props.header ? header : {}; + } else if ( Object.prototype.toString.call( this.props.header ) === '[object Object]' ) { + header = this.props.header; + } + + this.state = { + selected: this.getStateFromProps( this.props ), + category: '', + operator: '', + header, + }; } componentDidMount() { @@ -268,12 +297,12 @@ export default class Tokenizer extends Component { _getHeader() { if ( this.state.category === '' ) { - return 'Category'; + return this.state.header.first; } else if ( this.state.operator === '' ) { - return 'Operator'; + return this.state.header.second; } - return 'Value'; + return this.state.header.third; } _getCategoryType( category ) { diff --git a/src/typeahead/index.js b/src/typeahead/index.js index 5c3dff1..53c2dde 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -39,7 +39,7 @@ class Typeahead extends Component { static defaultProps = { options: [], - header: 'Category', + header: '', datatype: 'text', customClasses: {}, defaultValue: '', diff --git a/src/typeahead/selector.js b/src/typeahead/selector.js index afb1f08..18aed4e 100644 --- a/src/typeahead/selector.js +++ b/src/typeahead/selector.js @@ -118,9 +118,11 @@ export default class TypeaheadSelector extends Component { ) , this ); + const first = this.props.header ? (
  • { this.props.header }
  • ) : null; + return ( );