react-zeanium-ui-ui/src/table/TableFilter.js

Zeanium UI Framework for React.js

var React = require('react');
var Icon = require('../ui/Icon');
var Input = require('../ui/Input');
var Menu = require('../ui/Menu');
var FilterItem = require('../filter/FilterItem');

module.exports = React.createClass({
	displayName:'TableFilter',
	getDefaultProps: function () {
		return {
			filterData: {},
			onFilterSearch: function (){}
		};
	},
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){
		this.search(this.props.filterData);
	},
	__onFilter: function (){
		this.search(this.props.filterData);
	},
	__onTableColumnChange: function (index, name, value, input){
		if(this.props.filterData[name]) {
			this.props.filterData[name].value = value.value;
		} else {
			this.props.filterData[name] = {
				key: name,
				value: value.value
			}
		}
	},
	search: function (data){
		//console.log(data);
		data && this.props.onFilterSearch(data, this);
	},
	__onFilterChange: function (value, item){
		if(this.props.filterData[item.name]){
			this.props.filterData[item.name].opt = value.value;
		} else {
			this.props.filterData[item.name] = {
				key: item.name,
				opt: value.value
			}
		}
	},
	__itemRender: function (item, index){
		var _content = null;
		switch (item.type) {
			case 'checkbox':
				_content = <Icon icon="fa-filter" />;
				break;
			case 'action':
				item.textAlign = 'center';
				_content = <Icon onClick={this.__onFilter} icon="fa-search" />
				break;
			default:
				item.value = this.props.filterData[item.name]||'';
				var _filters = [
					{ text: '=', value: '=' },
					{ text: '>', value: '>' },
					{ text: '<', value: '<' },
					{ text: 'like', value: 'like' }
				];
				_content = <div>
					<Input onInputChange={(name, value, input)=>this.__onTableColumnChange(index, name, value, input)} {...item} />
					<Menu popupWidth={120} onChange={(event, value, menu)=>{this.__onFilterChange(value, item)}} style={{ float: 'right', marginTop: '-23px' }} bottomPopupViewRender={()=>{return <Icon ref="icon" icon="fa-caret-down" />;}} data={_filters} />
				</div>;
				break;
		}

		return <td key={index} className={'text-align-'+(item.textAlign||'left')} width={(item.width?item.width:0)}>{_content}</td>
	},
	render:function(){
		return (
			<tr className="row editable filter">
				{
					(this.props.items||[]).map(this.__itemRender)
				}
			</tr>
		);
	}
});