react-zeanium-ui-ui
Version:
Zeanium UI Framework for React.js
218 lines (210 loc) • 6.4 kB
JavaScript
require('codemirror/lib/codemirror.css');
require('codemirror/addon/display/fullscreen.css');
require('codemirror/theme/night.css');
require('codemirror/mode/xml/xml.js');
require('codemirror/addon/display/fullscreen.js');
var React = require('react');
var ReactDOM = require('react-dom');
var CodeMirror = require('codemirror');
var Select = require('./Select');
var Menu = require('./Menu');
var Uploader = require('./Uploader');
var CheckboxGroup = require('./CheckboxGroup');
var RadioGroup = require('./RadioGroup');
module.exports = React.createClass({
displayName: 'Input',
getDefaultProps: function (){
return {
className: 'c-default',
required: false
};
},
getInitialState: function(){
var _placeholder = this.props.placeholder || '';
if(this.props.type=='file'){
_placeholder = 'Choose File ...';
}
return {
status: this.props.status||'',
placeholder: _placeholder
}
},
componentDidMount: function(){
if(this.props.type=="codemirror"){
this.refs.view = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.code), {
lineNumbers: true,
theme: "night",
lineWrapping: true,
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
}
if(this.props.value || this.props.text) {
this.__onValueChange(this.props.text, this.props.value);
}
this.props.onDidMount && this.props.onDidMount(this);
},
getValue: function (){
var _value = this._value;
if(this.refs.cbg) {
return this.refs.cbg.getValue();
}
if(this.refs.view){
return this.refs.view.getValue();
}
return _value;
},
getText: function (){
return (this.refs.view && this.refs.view.getValue()) || this._text;
},
setValue: function (value){
if(value === undefined){
return this;
}
if(this.refs.view){
this.refs.view.setValue(value);
} else if (this.refs.input) {
this.refs.input.value = value;
}
this.__onValueChange(value, value);
},
__onChange: function (event, value, owner){
var _value, _text;
switch (this.props.type) {
case 'checkbox':
_text = value.value.join(owner.props.sep);
_value = _text;
break;
case 'radio':
_text = value.value.text;
_value = value.value.value;
break;
case 'select':
_text = value.text;
_value = value.value;
break;
case 'menu':
_text = value.text;
_value = value.value;
break;
case 'file':
if(event.nativeEvent.target.files.length==0){
return;
}
_value = _text = event.nativeEvent.target.files[0].name;
if(this.props.allowExts){
if(this.props.allowExts.join('|').indexOf(/\.[^\.]+$/.exec(_text)[0])==-1){
event.stopPropagation();
event.preventDefault();
Popup.message({
content: 'File format is invalid, just upload ' + this.props.allowExts.join(',') + ' file.',
type:'warning'
});
return false;
}
}
this.setState({
placeholder: _value
});
break;
case 'uploader':
if(value.status==200){
}
break;
default:
_value = _text = event.nativeEvent.target.value;
break;
}
this.props.onChange && this.props.onChange(event, value, owner, this);
this.__onValueChange(_text, _value, value);
},
__onValueChange: function (text, value, meta){
this._text = text;
this._value = value;
this.validate();
this.props.onInputChange && this.props.onInputChange(this.props.name, {
text: text,
value: value,
meta: meta,
props: this.props
}, this);
},
__onBlur: function (event){
event.self = this;
this.validate();
this.props.onBlur && this.props.onBlur(event);
},
__onFocus: function (event){
event.self = this;
this.props.onFocus && this.props.onFocus(event);
},
__inputRender: function (){
var _type = this.props.type||'text';
switch (_type) {
case 'label':
return <label>{this.props.text||this.props.value}</label>;
case 'checkbox':
return <CheckboxGroup {...this.props} ref="cbg" onChange={this.__onChange} />;
case 'radio':
return <RadioGroup {...this.props} onChange={this.__onChange} />;
case 'select':
return <Select {...this.props} onChange={this.__onChange} icon="fa-caret-down" />;
case 'menu':
return <Menu {...this.props} onChange={this.__onChange} icon="fa-caret-down" />;
case 'uploader':
return <Uploader {...this.props} onChange={this.__onChange} />;
case 'view':
return <this.props.view {...this.props} data={this.props.data||this.props.value} ref="view" onChange={this.__onChange} />;
case 'file':
return <div className="input choose-file">
<i className="icon fa fa-file"></i>
<span className="label">{this.state.placeholder}</span>
<input type={_type} name={this.props.name} onChange={this.__onChange} />
</div>;
case 'codemirror':
return <textarea className="input" ref="code" defaultValue={this.props.value}></textarea>;
case 'textarea':
return <textarea className="input" ref="input" name={this.props.name} onChange={this.__onChange} onBlur={this.__onBlur} onFocus={this.__onFocus} placeholder={this.props.placeholder} defaultValue={this.props.value}></textarea>;
default:
return <input className="input" ref="input" type={_type} name={this.props.name} defaultValue={this.props.text||this.props.value} onChange={this.__onChange} onBlur={this.__onBlur} onFocus={this.__onFocus} placeholder={this.props.placeholder} />;
}
},
validate: function (){
var _text = this.getText(),
_value = this.getValue();
if(this.props.required&&(!_text||!_value)){
this.setState({
status: 'danger'
});
if(this.refs.input){
ReactDOM.findDOMNode(this.refs.input).focus();
}
return false;
} else {
this.setState({
status: 'success'
});
}
return {
name: this.props.name,
text: _text,
value: _value
};
},
render:function(){
var _style = this.props.style || {};
_style.width = this.props.width;
return (
<div className={"rt-input " + this.props.className + " " + this.state.status} style={_style} data-required={this.props.required}>
{this.props.error && <div className="error-message">{this.props.error}</div>}
{this.__inputRender()}
</div>
);
}
});