From 143f2fe6330b307791d027da84d51869dc1c034a Mon Sep 17 00:00:00 2001 From: 2012 <2013> Date: Sun, 18 Mar 2018 09:33:38 +0800 Subject: [PATCH 1/2] fix issue13 --- docs/index.md | 20 ++++++++++++++++++++ example/src/ExampleTable.jsx | 6 ++++++ src/tokenizer/index.js | 22 +++++++++++++++++++--- src/typeahead/index.js | 2 +- src/typeahead/selector.js | 4 +++- 5 files changed, 49 insertions(+), 5 deletions(-) diff --git a/docs/index.md b/docs/index.md index 990811e..b1e7a53 100644 --- a/docs/index.md +++ b/docs/index.md @@ -182,3 +182,23 @@ Example: type: `array` + +### `header` + +A mapping of headers to show + +if `header` is false, header won't show. +if `header` is blank object, header won't show too. +if `header` is equal above, header will show. + +Example: +```javascript +{ + "first": "Category", + "second": "Operator", + "third": "Value" +} +``` +type: `object` +defaultValue: `{}` + diff --git a/example/src/ExampleTable.jsx b/example/src/ExampleTable.jsx index ad8cd0d..76192cc 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: "Category", + second: "Operator", + third: "Value" + }, } }, @@ -81,6 +86,7 @@ var ExampleTable = React.createClass({ }} onChange={this.updateFilter} value={this.state.filter} + header={this.state.header} /> `, `>=` ], date: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ], }, + headers: {}, } constructor( ...args ) { @@ -268,12 +281,15 @@ export default class Tokenizer extends Component { _getHeader() { if ( this.state.category === '' ) { - return 'Category'; + // return 'Category'; + return this.props.header.first; } else if ( this.state.operator === '' ) { - return 'Operator'; + // return 'Operator'; + return this.props.header.second; } - return 'Value'; + // return 'Value'; + return this.props.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 ( ); From b4aeff08426bbe555741edcea25c2bcdb3eae3ab Mon Sep 17 00:00:00 2001 From: 2012 <2013> Date: Wed, 21 Mar 2018 21:08:27 +0800 Subject: [PATCH 2/2] set header default to show --- docs/index.md | 10 +++++---- example/src/ExampleTable.jsx | 6 +++--- src/tokenizer/index.js | 39 ++++++++++++++++++++++++------------ 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/docs/index.md b/docs/index.md index b1e7a53..44304fd 100644 --- a/docs/index.md +++ b/docs/index.md @@ -185,11 +185,12 @@ type: `array` ### `header` -A mapping of headers to show +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 above, header will show. +if `header` is equal to above like-code, header will show. Example: ```javascript @@ -198,7 +199,8 @@ Example: "second": "Operator", "third": "Value" } + ``` -type: `object` -defaultValue: `{}` +type: `object` or `bool` +defaultValue: `true` diff --git a/example/src/ExampleTable.jsx b/example/src/ExampleTable.jsx index 76192cc..0a0e1be 100644 --- a/example/src/ExampleTable.jsx +++ b/example/src/ExampleTable.jsx @@ -23,9 +23,9 @@ var ExampleTable = React.createClass({ }, ], header: { - first: "Category", - second: "Operator", - third: "Value" + first: "Category1", + second: "Operator1", + third: "Value1" }, } }, diff --git a/src/tokenizer/index.js b/src/tokenizer/index.js index 214902c..0bc925f 100644 --- a/src/tokenizer/index.js +++ b/src/tokenizer/index.js @@ -178,7 +178,10 @@ export default class Tokenizer extends Component { * } * ``` */ - header: PropTypes.object, + header: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.bool, + ]), } static defaultProps = { @@ -194,7 +197,7 @@ export default class Tokenizer extends Component { number: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ], date: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ], }, - headers: {}, + header: true, } constructor( ...args ) { @@ -203,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() { @@ -281,15 +297,12 @@ export default class Tokenizer extends Component { _getHeader() { if ( this.state.category === '' ) { - // return 'Category'; - return this.props.header.first; + return this.state.header.first; } else if ( this.state.operator === '' ) { - // return 'Operator'; - return this.props.header.second; + return this.state.header.second; } - // return 'Value'; - return this.props.header.third; + return this.state.header.third; } _getCategoryType( category ) {