react-zeanium-ui-ui/src/ui/Form.js

Zeanium UI Framework for React.js

var React = require('react');
var ReactDOM = require('react-dom');
var FormItem = require('./FormItem');
var ButtonGroup = require('./ButtonGroup');

module.exports = React.createClass({
	displayName:'Form',
	getDefaultProps: function (){
		return {
			layout: 'inline',
			className: '',
			btnFloatDirection: 'right',
			data: {},
			submitCallback: function (data){
				if(data.status==200){
					return true;
				} else {
					return false;
				}
			}
		};
	},
	getInitialState:function(){
		this._items = {};
		return {
			hiddens: this.props.hiddens||{},
			value: this.props.value,
			text: this.props.text
		}
	},
	componentDidMount:function(){

	},
	componentWillReceiveProps: function (nextProps){

	},
	setData: function (value){
		var _item = null,
			_value = null;
		for(var key in value){
			_item = this._items[key];
			_value = value[key];
			if(_item){
				_item.setValue(_value);
			} else {
				this.state.hiddens[key] = _value;
			}
		}
	},
	getItem: function(name){
		return this._items[name];
	},
	validate: function (){
		var _data = {},
			_value = null;
		for(var name in this._items){
			if(!this._items[name]){
				continue;
			}
			_value = this._items[name].validate();
			if(_value){
				_data[_value.name] = _value.value||'';
			} else {
				return false;
			}
		}

		return _data;
	},
	submit: function (){
		var _result = this.validate();
		if(_result === false){
			return false;
		}
		for(var key in this.state.hiddens){
			_result[key] = _result[key] || this.state.hiddens[key];
		}
		_result = (this.props.onSubmitBefore && this.props.onSubmitBefore(_result, this))||_result;
		this.loading(true);
		if(this.props.syncSubmit){
			ReactDOM.findDOMNode(this).submit();
		} else {
			//console.log('data: ', _result);
			Store.init(this.props.action, _result, this.props.method).exec().then(this.__onSubmitCallbackHandler, function (data){
				this.loading(false);
				this.props.onSubmitError && this.props.onSubmitError(data, this);
			}.bind(this));
		}
	},
	loading: function (loading){
		if(this._submit){
			this._submit.loading(loading);
		}
	},
	reset: function (){
		console.log('Form reset');
	},
	setHidden: function (key, value){
		this.state.hiddens[key] = value;
		this.setState({
			hiddens: this.state.hiddens
		});
	},
	__onSubmitCallbackHandler: function (data){
		this.loading(false);
		if(this.props.submitCallback(data)!==false){
			this.props.onSubmitSuccess && this.props.onSubmitSuccess(data, this);
		}else {
			this.props.onSubmitError && this.props.onSubmitError(data, this);
		}
	},
	__itemRender: function (item, index){
		var _content = null,
			_name = item.name,
			_value = (this.props.data||{})[item.name] || item.value;

		item.bWidth = (item.bWidth || this.props.itemBWidth);
		item.hWidth = (item.hWidth || this.props.itemHWidth);
		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}
		if(!_content){
			if(item.type==='hidden'){
				this.state.hiddens[_name] = _value;
				_content = <input key={'hidden_' + _name} type="hidden" name={_name} value={_value} />;
			} else {
				_content = <FormItem {...item} key={index} value={_value}
					onFormItemDidMount={this.__onItemDidMount}
					onFormItemDidUpdate={this.__onItemDidMount}
					/>;
			}
		}

		return _content;
	},
	__onItemDidMount: function (item){
		item.form = this;
		item.pre = this.curr;
		if(this.curr) { this.curr.next = item; }
		this.curr = item;
		this._items[item.props.name] = item;
	},
	__onIFrameLoad: function (event){
		var _target = event.target,
			_data = '';
		if (_target.contentWindow) {
			_data = _target.contentWindow.document.body ? _target.contentWindow.document.body.innerHTML : null;
        } else if (_target.contentDocument) {
			_data = _target.contentDocument.document.body ? _target.contentDocument.document.body.innerHTML : null;
        }

		//_data = _data.replace(/<[^>]+>/g,"");  //remove all tag
		var _search = _target.contentWindow.location.search;
		_data = decodeURI(_search.split('?').pop());
		/*
		var _dom = document.createElement('div');
		_dom.innerHTML = _data;
		_data = _dom.innerText || _dom.textContent;
		*/
		this.__onSubmitCallbackHandler(JSON.parse(_data)||{});
	},
	__onBtnClick: function (props, event, btn){
		if(btn.state.status=='disabled' || btn.state.loading){ return; }
		switch (props.type) {
			case 'submit':
				this._submit = btn;
				this.submit();
				break;
			case 'reset':
				this.reset();
				break;
			case 'cancle':
				Popup.close('dialog');
				break;
		}
	},
	render:function(){
		this._items = [];
		var _hiddens = this.state.hiddens||{};
		if(this.props.syncSubmit){
			_hiddens['FORWORD_URL'] = window.location.origin + '/_black.html';
			return (
				<form
					className={"rt-form layout-" + this.props.layout + ' '+ this.props.className}
					target="upload-target"
					encType="multipart/form-data"
					action={Store.fixURL(this.props.action)}
					method={this.props.method}
					style={this.props.style}>
					<iframe onLoad={this.__onIFrameLoad} className="upload-target" name="upload-target" />
					{
						Object.keys(_hiddens).map(function (hidden, index){
							return <input key={'hidden_' + hidden} type="hidden" name={hidden} value={_hiddens[hidden]} />;
						})
					}
					{
						this.props.items && this.props.items.map(this.__itemRender)
					}
					{this.props.children}
					{this.props.btns && <ButtonGroup floatDirection={this.props.btnFloatDirection} items={this.props.btns} onClick={this.__onBtnClick} />}
				</form>
			);
		} else {
			return (
				<div
					className={"rt-form layout-" + this.props.layout + ' '+ this.props.className}
					style={this.props.style}>
					{
						this.props.items && this.props.items.map(this.__itemRender)
					}
					{this.props.children}
					{this.props.btns && <ButtonGroup floatDirection={this.props.btnFloatDirection} items={this.props.btns} onClick={this.__onBtnClick} />}
				</div>
			);
		}
	}
});