ant-design/components/form/Input.jsx
2015-10-31 08:45:36 +08:00

108 lines
2.5 KiB
JavaScript

import React from 'react';
function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> {
return prefixCls + '-' + s;
}).join(' ');
}
class Group extends React.Component {
render() {
return (
<div className={this.props.className}>
{this.props.children}
</div>
);
}
}
Group.propTypes = {
className: React.PropTypes.string,
children: React.PropTypes.any,
};
Group.defaultProps = {
className: 'ant-input-group',
};
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 ? (
<span className={addonClassName}>
{props.addonBefore}
</span>
) : null;
const addonAfter = props.addonAfter ? (
<span className={addonClassName}>
{props.addonAfter}
</span>
) : null;
return addonBefore || addonAfter ? (
<div className={wrapperClassName}>
{addonBefore}
{children}
{addonAfter}
</div>
) : children;
}
renderInput() {
const props = this.props;
const prefixCls = props.prefixCls;
let inputClassName = prefixClsFn(prefixCls, 'input');
if (!props.type) {
return props.children;
}
switch (props.size) {
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
}
switch (props.type) {
case 'textarea':
return <textarea {...props} className={inputClassName} ref="input" />;
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} className={inputClassName} ref="input"/>;
}
}
render() {
return this.renderLabledInput(this.renderInput());
}
}
Input.propTypes = {
type: React.PropTypes.string,
id: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
size: React.PropTypes.oneOf(['small', 'default', 'large']),
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',
type: 'text',
};
module.exports = Input;
module.exports.Group = Group;