ant-design/components/input/index.jsx

128 lines
3.1 KiB
React
Raw Normal View History

2015-10-09 13:53:04 +08:00
import React from 'react';
import assign from 'object-assign';
2015-10-09 13:53:04 +08:00
function prefixClsFn(prefixCls, ...args) {
2016-01-05 14:42:06 +08:00
return args.map((s) => {
2015-10-09 13:53:04 +08:00
return prefixCls + '-' + s;
}).join(' ');
}
2015-11-09 10:58:52 +08:00
function ieGT9() {
if (typeof document === undefined) {
return false;
}
const documentMode = document.documentMode || 0;
return documentMode > 9;
}
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return value;
}
2015-10-09 13:53:04 +08:00
class Group extends React.Component {
render() {
2015-12-02 19:33:26 +08:00
const className = 'ant-input-group ' + (this.props.className || '');
2015-10-09 13:53:04 +08:00
return (
2016-01-05 14:42:06 +08:00
<span className={className} style={this.props.style}>
2015-10-09 13:53:04 +08:00
{this.props.children}
2015-12-02 15:55:02 +08:00
</span>
2015-10-09 13:53:04 +08:00
);
}
}
Group.propTypes = {
children: React.PropTypes.any,
};
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;
return (
2015-12-02 15:55:02 +08:00
<span className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
2015-10-09 13:53:04 +08:00
{addonBefore}
{children}
{addonAfter}
2015-12-02 15:55:02 +08:00
</span>
);
2015-10-09 13:53:04 +08:00
}
renderInput() {
const props = assign({}, this.props);
2015-10-09 13:53:04 +08:00
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) {
2016-01-19 16:32:12 +08:00
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
2015-10-25 11:34:02 +08:00
}
2015-11-09 10:58:52 +08:00
let placeholder = props.placeholder;
if (placeholder && ieGT9()) {
2015-11-09 10:58:52 +08:00
placeholder = null;
}
if ('value' in props) {
props.value = fixControlledValue(props.value);
}
2015-10-09 13:53:04 +08:00
switch (props.type) {
2016-01-19 16:32:12 +08:00
case 'textarea':
return (
<textarea {...props} placeholder={placeholder}
className={inputClassName} ref="input" />
);
2016-01-19 16:32:12 +08:00
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} 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;