You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
7.4 KiB
242 lines
7.4 KiB
10 years ago
|
"use strict";
|
||
|
|
||
|
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
|
||
|
|
||
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||
|
|
||
|
var React = _interopRequire(require("react"));
|
||
|
|
||
|
var classNames = _interopRequire(require("classnames"));
|
||
|
|
||
|
var Button = _interopRequire(require("./Button"));
|
||
|
|
||
|
var FormGroup = _interopRequire(require("./FormGroup"));
|
||
|
|
||
|
var Input = React.createClass({
|
||
|
displayName: "Input",
|
||
|
|
||
|
propTypes: {
|
||
|
type: React.PropTypes.string,
|
||
|
label: React.PropTypes.node,
|
||
|
help: React.PropTypes.node,
|
||
|
addonBefore: React.PropTypes.node,
|
||
|
addonAfter: React.PropTypes.node,
|
||
|
buttonBefore: React.PropTypes.node,
|
||
|
buttonAfter: React.PropTypes.node,
|
||
|
bsSize: React.PropTypes.oneOf(["small", "medium", "large"]),
|
||
|
bsStyle: function bsStyle(props) {
|
||
|
if (props.type === "submit") {
|
||
|
// Return early if `type=submit` as the `Button` component
|
||
|
// it transfers these props to has its own propType checks.
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
return React.PropTypes.oneOf(["success", "warning", "error"]).apply(null, arguments);
|
||
|
},
|
||
|
hasFeedback: React.PropTypes.bool,
|
||
|
id: React.PropTypes.string,
|
||
|
groupClassName: React.PropTypes.string,
|
||
|
wrapperClassName: React.PropTypes.string,
|
||
|
labelClassName: React.PropTypes.string,
|
||
|
multiple: React.PropTypes.bool,
|
||
|
disabled: React.PropTypes.bool,
|
||
|
value: React.PropTypes.any
|
||
|
},
|
||
|
|
||
|
getInputDOMNode: function getInputDOMNode() {
|
||
|
return React.findDOMNode(this.refs.input);
|
||
|
},
|
||
|
|
||
|
getValue: function getValue() {
|
||
|
if (this.props.type === "static") {
|
||
|
return this.props.value;
|
||
|
} else if (this.props.type) {
|
||
|
if (this.props.type === "select" && this.props.multiple) {
|
||
|
return this.getSelectedOptions();
|
||
|
} else {
|
||
|
return this.getInputDOMNode().value;
|
||
|
}
|
||
|
} else {
|
||
|
throw "Cannot use getValue without specifying input type.";
|
||
|
}
|
||
|
},
|
||
|
|
||
|
getChecked: function getChecked() {
|
||
|
return this.getInputDOMNode().checked;
|
||
|
},
|
||
|
|
||
|
getSelectedOptions: function getSelectedOptions() {
|
||
|
var values = [];
|
||
|
|
||
|
Array.prototype.forEach.call(this.getInputDOMNode().getElementsByTagName("option"), function (option) {
|
||
|
if (option.selected) {
|
||
|
var value = option.getAttribute("value") || option.innerHTML;
|
||
|
|
||
|
values.push(value);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
return values;
|
||
|
},
|
||
|
|
||
|
isCheckboxOrRadio: function isCheckboxOrRadio() {
|
||
|
return this.props.type === "radio" || this.props.type === "checkbox";
|
||
|
},
|
||
|
|
||
|
isFile: function isFile() {
|
||
|
return this.props.type === "file";
|
||
|
},
|
||
|
|
||
|
renderInput: function renderInput() {
|
||
|
var input = null;
|
||
|
|
||
|
if (!this.props.type) {
|
||
|
return this.props.children;
|
||
|
}
|
||
|
|
||
|
switch (this.props.type) {
|
||
|
case "select":
|
||
|
input = React.createElement(
|
||
|
"select",
|
||
|
_extends({}, this.props, { className: classNames(this.props.className, "form-control"), ref: "input", key: "input" }),
|
||
|
this.props.children
|
||
|
);
|
||
|
break;
|
||
|
case "textarea":
|
||
|
input = React.createElement("textarea", _extends({}, this.props, { className: classNames(this.props.className, "form-control"), ref: "input", key: "input" }));
|
||
|
break;
|
||
|
case "static":
|
||
|
input = React.createElement(
|
||
|
"p",
|
||
|
_extends({}, this.props, { className: classNames(this.props.className, "form-control-static"), ref: "input", key: "input" }),
|
||
|
this.props.value
|
||
|
);
|
||
|
break;
|
||
|
case "submit":
|
||
|
input = React.createElement(Button, _extends({}, this.props, { componentClass: "input", ref: "input", key: "input" }));
|
||
|
break;
|
||
|
default:
|
||
|
var className = this.isCheckboxOrRadio() || this.isFile() ? "" : "form-control";
|
||
|
input = React.createElement("input", _extends({}, this.props, { className: classNames(this.props.className, className), ref: "input", key: "input" }));
|
||
|
}
|
||
|
|
||
|
return input;
|
||
|
},
|
||
|
|
||
|
renderInputGroup: function renderInputGroup(children) {
|
||
|
var addonBefore = this.props.addonBefore ? React.createElement(
|
||
|
"span",
|
||
|
{ className: "input-group-addon", key: "addonBefore" },
|
||
|
this.props.addonBefore
|
||
|
) : null;
|
||
|
|
||
|
var addonAfter = this.props.addonAfter ? React.createElement(
|
||
|
"span",
|
||
|
{ className: "input-group-addon", key: "addonAfter" },
|
||
|
this.props.addonAfter
|
||
|
) : null;
|
||
|
|
||
|
var buttonBefore = this.props.buttonBefore ? React.createElement(
|
||
|
"span",
|
||
|
{ className: "input-group-btn" },
|
||
|
this.props.buttonBefore
|
||
|
) : null;
|
||
|
|
||
|
var buttonAfter = this.props.buttonAfter ? React.createElement(
|
||
|
"span",
|
||
|
{ className: "input-group-btn" },
|
||
|
this.props.buttonAfter
|
||
|
) : null;
|
||
|
|
||
|
var inputGroupClassName = undefined;
|
||
|
switch (this.props.bsSize) {
|
||
|
case "small":
|
||
|
inputGroupClassName = "input-group-sm";break;
|
||
|
case "large":
|
||
|
inputGroupClassName = "input-group-lg";break;
|
||
|
}
|
||
|
|
||
|
return addonBefore || addonAfter || buttonBefore || buttonAfter ? React.createElement(
|
||
|
"div",
|
||
|
{ className: classNames(inputGroupClassName, "input-group"), key: "input-group" },
|
||
|
addonBefore,
|
||
|
buttonBefore,
|
||
|
children,
|
||
|
addonAfter,
|
||
|
buttonAfter
|
||
|
) : children;
|
||
|
},
|
||
|
|
||
|
renderIcon: function renderIcon() {
|
||
|
var classes = {
|
||
|
glyphicon: true,
|
||
|
"form-control-feedback": true,
|
||
|
"glyphicon-ok": this.props.bsStyle === "success",
|
||
|
"glyphicon-warning-sign": this.props.bsStyle === "warning",
|
||
|
"glyphicon-remove": this.props.bsStyle === "error"
|
||
|
};
|
||
|
|
||
|
return this.props.hasFeedback ? React.createElement("span", { className: classNames(classes), key: "icon" }) : null;
|
||
|
},
|
||
|
|
||
|
renderHelp: function renderHelp() {
|
||
|
return this.props.help ? React.createElement(
|
||
|
"span",
|
||
|
{ className: "help-block", key: "help" },
|
||
|
this.props.help
|
||
|
) : null;
|
||
|
},
|
||
|
|
||
|
renderCheckboxandRadioWrapper: function renderCheckboxandRadioWrapper(children) {
|
||
|
var classes = {
|
||
|
checkbox: this.props.type === "checkbox",
|
||
|
radio: this.props.type === "radio"
|
||
|
};
|
||
|
|
||
|
return React.createElement(
|
||
|
"div",
|
||
|
{ className: classNames(classes), key: "checkboxRadioWrapper" },
|
||
|
children
|
||
|
);
|
||
|
},
|
||
|
|
||
|
renderWrapper: function renderWrapper(children) {
|
||
|
return this.props.wrapperClassName ? React.createElement(
|
||
|
"div",
|
||
|
{ className: this.props.wrapperClassName, key: "wrapper" },
|
||
|
children
|
||
|
) : children;
|
||
|
},
|
||
|
|
||
|
renderLabel: function renderLabel(children) {
|
||
|
var classes = {
|
||
|
"control-label": !this.isCheckboxOrRadio()
|
||
|
};
|
||
|
classes[this.props.labelClassName] = this.props.labelClassName;
|
||
|
|
||
|
return this.props.label ? React.createElement(
|
||
|
"label",
|
||
|
{ htmlFor: this.props.id, className: classNames(classes), key: "label" },
|
||
|
children,
|
||
|
this.props.label
|
||
|
) : children;
|
||
|
},
|
||
|
|
||
|
render: function render() {
|
||
|
var children = undefined;
|
||
|
|
||
|
if (this.isCheckboxOrRadio()) {
|
||
|
children = this.renderWrapper([this.renderCheckboxandRadioWrapper(this.renderLabel(this.renderInput())), this.renderHelp()]);
|
||
|
} else {
|
||
|
children = [this.renderLabel(), this.renderWrapper([this.renderInputGroup(this.renderInput()), this.renderIcon(), this.renderHelp()])];
|
||
|
}
|
||
|
|
||
|
return React.createElement(
|
||
|
FormGroup,
|
||
|
this.props,
|
||
|
children
|
||
|
);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
module.exports = Input;
|