2015-10-09 13:53:04 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
function prefixClsFn(prefixCls, ...args) {
|
|
|
|
return args.map((s)=> {
|
|
|
|
return prefixCls + '-' + s;
|
|
|
|
}).join(' ');
|
|
|
|
}
|
|
|
|
|
|
|
|
class Group extends React.Component {
|
|
|
|
render() {
|
|
|
|
return (
|
2015-10-27 19:23:45 +08:00
|
|
|
<div className={this.props.className}>
|
2015-10-09 13:53:04 +08:00
|
|
|
{this.props.children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Group.propTypes = {
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
children: React.PropTypes.any,
|
|
|
|
};
|
|
|
|
|
|
|
|
Group.defaultProps = {
|
|
|
|
className: 'ant-input-group',
|
|
|
|
};
|
|
|
|
|
2015-10-25 11:34:02 +08:00
|
|
|
|
2015-10-09 13:53:04 +08:00
|
|
|
class Input extends React.Component {
|
|
|
|
renderLabledInput(children) {
|
|
|
|
const props = this.props;
|
|
|
|
const wrapperClassName = prefixClsFn(props.prefixCls, 'input-group');
|
|
|
|
const addonClassName = prefixClsFn(wrapperClassName, 'addon');
|
|
|
|
const addonBefore = props.addonBefore ? (
|
2015-10-27 19:23:45 +08:00
|
|
|
<span className={addonClassName}>
|
2015-10-09 13:53:04 +08:00
|
|
|
{props.addonBefore}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const addonAfter = props.addonAfter ? (
|
2015-10-27 19:23:45 +08:00
|
|
|
<span className={addonClassName}>
|
2015-10-09 13:53:04 +08:00
|
|
|
{props.addonAfter}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
2015-10-31 08:43:38 +08:00
|
|
|
return (
|
|
|
|
<div className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
|
2015-10-09 13:53:04 +08:00
|
|
|
{addonBefore}
|
|
|
|
{children}
|
|
|
|
{addonAfter}
|
|
|
|
</div>
|
2015-10-31 08:43:38 +08:00
|
|
|
);
|
2015-10-09 13:53:04 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
renderInput() {
|
|
|
|
const props = this.props;
|
|
|
|
const prefixCls = props.prefixCls;
|
2015-10-25 11:34:02 +08:00
|
|
|
let inputClassName = prefixClsFn(prefixCls, 'input');
|
2015-10-09 13:53:04 +08:00
|
|
|
if (!props.type) {
|
|
|
|
return props.children;
|
|
|
|
}
|
|
|
|
|
2015-10-25 11:34:02 +08:00
|
|
|
switch (props.size) {
|
|
|
|
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
|
|
|
|
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
|
|
|
|
default:
|
|
|
|
}
|
2015-10-09 13:53:04 +08:00
|
|
|
|
|
|
|
switch (props.type) {
|
|
|
|
case 'textarea':
|
|
|
|
return <textarea {...props} className={inputClassName} ref="input" />;
|
|
|
|
default:
|
2015-10-25 11:34:02 +08:00
|
|
|
inputClassName = props.className ? props.className : inputClassName;
|
2015-10-27 19:23:45 +08:00
|
|
|
return <input {...props} className={inputClassName} ref="input"/>;
|
2015-10-09 13:53:04 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return this.renderLabledInput(this.renderInput());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Input.propTypes = {
|
|
|
|
type: React.PropTypes.string,
|
|
|
|
id: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.number,
|
|
|
|
]),
|
2015-10-25 11:34:02 +08:00
|
|
|
size: React.PropTypes.oneOf(['small', 'default', 'large']),
|
2015-10-09 13:53:04 +08:00
|
|
|
disabled: React.PropTypes.bool,
|
|
|
|
value: React.PropTypes.any,
|
|
|
|
defaultValue: React.PropTypes.any,
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
addonBefore: React.PropTypes.node,
|
|
|
|
addonAfter: React.PropTypes.node,
|
|
|
|
prefixCls: React.PropTypes.string,
|
|
|
|
};
|
|
|
|
|
|
|
|
Input.defaultProps = {
|
|
|
|
defaultValue: '',
|
|
|
|
disabled: false,
|
|
|
|
prefixCls: 'ant',
|
2015-10-29 08:39:35 +08:00
|
|
|
type: 'text',
|
2015-10-09 13:53:04 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = Input;
|
|
|
|
module.exports.Group = Group;
|