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
"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; |