Completely updated React, fixed #11, (hopefully)
This commit is contained in:
549
goTorrentWebUI/node_modules/material-ui/Input/Input.js
generated
vendored
549
goTorrentWebUI/node_modules/material-ui/Input/Input.js
generated
vendored
@@ -57,18 +57,12 @@ var _withStyles = require('../styles/withStyles');
|
||||
|
||||
var _withStyles2 = _interopRequireDefault(_withStyles);
|
||||
|
||||
var _reactHelpers = require('../utils/reactHelpers');
|
||||
|
||||
var _Textarea = require('./Textarea');
|
||||
|
||||
var _Textarea2 = _interopRequireDefault(_Textarea);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_ComponentType = require('prop-types').func; // weak
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
|
||||
|
||||
// Supports determination of isControlled().
|
||||
// Controlled input accepts its current value as a prop.
|
||||
//
|
||||
@@ -76,7 +70,7 @@ var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFl
|
||||
// @param value
|
||||
// @returns {boolean} true if string (including '') or number (including zero)
|
||||
function hasValue(value) {
|
||||
return value !== undefined && value !== null && !(Array.isArray(value) && value.length === 0);
|
||||
return value != null && !(Array.isArray(value) && value.length === 0);
|
||||
}
|
||||
|
||||
// Determine if field is dirty (a.k.a. filled).
|
||||
@@ -104,30 +98,31 @@ function isAdornedStart(obj) {
|
||||
}
|
||||
|
||||
var styles = exports.styles = function styles(theme) {
|
||||
var light = theme.palette.type === 'light';
|
||||
var placeholder = {
|
||||
color: 'currentColor',
|
||||
opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
|
||||
opacity: light ? 0.42 : 0.5,
|
||||
transition: theme.transitions.create('opacity', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.ease
|
||||
duration: theme.transitions.duration.shorter
|
||||
})
|
||||
};
|
||||
var placeholderHidden = {
|
||||
opacity: 0
|
||||
};
|
||||
var placeholderVisible = {
|
||||
opacity: theme.palette.type === 'light' ? 0.42 : 0.5
|
||||
opacity: light ? 0.42 : 0.5
|
||||
};
|
||||
var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
||||
|
||||
return {
|
||||
root: {
|
||||
// Mimics the default input display property used by browsers for an input.
|
||||
display: 'inline-flex',
|
||||
alignItems: 'baseline',
|
||||
position: 'relative',
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
color: theme.palette.input.inputText,
|
||||
fontSize: theme.typography.pxToRem(16)
|
||||
color: light ? 'rgba(0, 0, 0, 0.87)' : theme.palette.common.white,
|
||||
fontSize: theme.typography.pxToRem(16),
|
||||
lineHeight: '1.1875em' // Reset (19px), match the native input line-height
|
||||
},
|
||||
formControl: {
|
||||
'label + &': {
|
||||
@@ -136,7 +131,7 @@ var styles = exports.styles = function styles(theme) {
|
||||
},
|
||||
inkbar: {
|
||||
'&:after': {
|
||||
backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
|
||||
backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
@@ -157,21 +152,61 @@ var styles = exports.styles = function styles(theme) {
|
||||
},
|
||||
error: {
|
||||
'&:after': {
|
||||
backgroundColor: theme.palette.error.A400,
|
||||
backgroundColor: theme.palette.error.main,
|
||||
transform: 'scaleX(1)' // error is always underlined in red
|
||||
}
|
||||
},
|
||||
focused: {},
|
||||
disabled: {
|
||||
color: theme.palette.text.disabled
|
||||
},
|
||||
underline: {
|
||||
'&:before': {
|
||||
backgroundColor: bottomLineColor,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '""',
|
||||
height: 1,
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shorter
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
'&:hover:not($disabled):before': {
|
||||
backgroundColor: theme.palette.text.primary,
|
||||
height: 2
|
||||
},
|
||||
'&$disabled:before': {
|
||||
background: 'transparent',
|
||||
backgroundImage: 'linear-gradient(to right, ' + bottomLineColor + ' 33%, transparent 0%)',
|
||||
backgroundPosition: 'left top',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundSize: '5px 1px'
|
||||
}
|
||||
},
|
||||
multiline: {
|
||||
padding: theme.spacing.unit - 2 + 'px 0 ' + (theme.spacing.unit - 1) + 'px'
|
||||
},
|
||||
fullWidth: {
|
||||
width: '100%'
|
||||
},
|
||||
input: {
|
||||
font: 'inherit',
|
||||
color: 'currentColor',
|
||||
// slight alteration to spec spacing to match visual spec result
|
||||
padding: theme.spacing.unit - 1 + 'px 0 ' + (theme.spacing.unit + 1) + 'px',
|
||||
padding: theme.spacing.unit - 2 + 'px 0 ' + (theme.spacing.unit - 1) + 'px',
|
||||
border: 0,
|
||||
boxSizing: 'content-box',
|
||||
verticalAlign: 'middle',
|
||||
background: 'none',
|
||||
margin: 0, // Reset for Safari
|
||||
// Remove grey highlight
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
display: 'block',
|
||||
// Make the flex item shrink with Firefox
|
||||
minWidth: 0,
|
||||
width: '100%',
|
||||
'&::-webkit-input-placeholder': placeholder,
|
||||
'&::-moz-placeholder': placeholder, // Firefox 19+
|
||||
@@ -186,7 +221,7 @@ var styles = exports.styles = function styles(theme) {
|
||||
},
|
||||
'&::-webkit-search-decoration': {
|
||||
// Remove the padding when type=search.
|
||||
appearance: 'none'
|
||||
'-webkit-appearance': 'none'
|
||||
},
|
||||
// Show and hide the placeholder logic
|
||||
'label[data-shrink=false] + $formControl &': {
|
||||
@@ -201,227 +236,52 @@ var styles = exports.styles = function styles(theme) {
|
||||
}
|
||||
},
|
||||
inputDense: {
|
||||
paddingTop: theme.spacing.unit / 2
|
||||
},
|
||||
disabled: {
|
||||
color: theme.palette.text.disabled
|
||||
},
|
||||
focused: {},
|
||||
underline: {
|
||||
'&:before': {
|
||||
backgroundColor: theme.palette.input.bottomLine,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '""',
|
||||
height: 1,
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.ease
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
'&:hover:not($disabled):before': {
|
||||
backgroundColor: theme.palette.text.primary,
|
||||
height: 2
|
||||
},
|
||||
'&$disabled:before': {
|
||||
background: 'transparent',
|
||||
backgroundImage: 'linear-gradient(to right, ' + theme.palette.input.bottomLine + ' 33%, transparent 0%)',
|
||||
backgroundPosition: 'left top',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundSize: '5px 1px'
|
||||
}
|
||||
},
|
||||
multiline: {
|
||||
padding: theme.spacing.unit - 2 + 'px 0 ' + (theme.spacing.unit - 1) + 'px'
|
||||
paddingTop: theme.spacing.unit / 2 - 1
|
||||
},
|
||||
inputDisabled: {
|
||||
opacity: 1 // Reset iOS opacity
|
||||
},
|
||||
inputSingleline: {
|
||||
height: '1em'
|
||||
},
|
||||
inputSearch: {
|
||||
appearance: 'textfield' // Improve type search style.
|
||||
inputType: {
|
||||
// type="date" or type="time", etc. have specific styles we need to reset.
|
||||
height: '1.1875em' // Reset (19px), match the native input line-height
|
||||
},
|
||||
inputMultiline: {
|
||||
resize: 'none',
|
||||
padding: 0
|
||||
},
|
||||
fullWidth: {
|
||||
width: '100%'
|
||||
inputSearch: {
|
||||
// Improve type search style.
|
||||
'-moz-appearance': 'textfield',
|
||||
'-webkit-appearance': 'textfield'
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Props = {
|
||||
/**
|
||||
* This property helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, it's more like an autofill.
|
||||
* You can learn more about it in this article
|
||||
* https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
|
||||
*/
|
||||
autoComplete: require('prop-types').string,
|
||||
function formControlState(props, context) {
|
||||
var disabled = props.disabled;
|
||||
var error = props.error;
|
||||
var margin = props.margin;
|
||||
|
||||
/**
|
||||
* If `true`, the input will be focused during the first mount.
|
||||
*/
|
||||
autoFocus: require('prop-types').bool,
|
||||
if (context && context.muiFormControl) {
|
||||
if (typeof disabled === 'undefined') {
|
||||
disabled = context.muiFormControl.disabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: require('prop-types').object,
|
||||
if (typeof error === 'undefined') {
|
||||
error = context.muiFormControl.error;
|
||||
}
|
||||
|
||||
/**
|
||||
* The CSS class name of the wrapper element.
|
||||
*/
|
||||
className: require('prop-types').string,
|
||||
if (typeof margin === 'undefined') {
|
||||
margin = context.muiFormControl.margin;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The default input value, useful when not controlling the component.
|
||||
*/
|
||||
defaultValue: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number]),
|
||||
|
||||
/**
|
||||
* If `true`, the input will be disabled.
|
||||
*/
|
||||
disabled: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* If `true`, the input will not have an underline.
|
||||
*/
|
||||
disableUnderline: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
|
||||
|
||||
/**
|
||||
* If `true`, the input will indicate an error. This is normally obtained via context from
|
||||
* FormControl.
|
||||
*/
|
||||
error: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* If `true`, the input will take up the full width of its container.
|
||||
*/
|
||||
fullWidth: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* The component used for the input node.
|
||||
* Either a string to use a DOM element or a component.
|
||||
* It's an `input` by default.
|
||||
*/
|
||||
inputComponent: require('prop-types').oneOfType([require('prop-types').string, typeof babelPluginFlowReactPropTypes_proptype_ComponentType === 'function' ? babelPluginFlowReactPropTypes_proptype_ComponentType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ComponentType)]),
|
||||
|
||||
/**
|
||||
* Properties applied to the `input` element.
|
||||
*/
|
||||
inputProps: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* Use that property to pass a ref callback to the native input component.
|
||||
*/
|
||||
inputRef: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
*/
|
||||
margin: require('prop-types').oneOf(['dense', 'none']),
|
||||
|
||||
/**
|
||||
* If `true`, a textarea element will be rendered.
|
||||
*/
|
||||
multiline: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
readOnly: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onBlur: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onChange: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
onClean: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
onDirty: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* The short hint displayed in the input before the user enters a value.
|
||||
*/
|
||||
placeholder: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number]),
|
||||
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rowsMax: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number]),
|
||||
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
|
||||
|
||||
/**
|
||||
* Type of the input element. It should be a valid HTML5 input type.
|
||||
*/
|
||||
type: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* The input value, required for a controlled component.
|
||||
*/
|
||||
value: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number, require('prop-types').arrayOf(require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number]))])
|
||||
};
|
||||
return {
|
||||
disabled: disabled,
|
||||
error: error,
|
||||
margin: margin
|
||||
};
|
||||
}
|
||||
|
||||
var Input = function (_React$Component) {
|
||||
(0, _inherits3.default)(Input, _React$Component);
|
||||
@@ -440,6 +300,13 @@ var Input = function (_React$Component) {
|
||||
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Input.__proto__ || (0, _getPrototypeOf2.default)(Input)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
focused: false
|
||||
}, _this.input = null, _this.handleFocus = function (event) {
|
||||
// Fix an bug with IE11 where the focus/blur events are triggered
|
||||
// while the input is disabled.
|
||||
if (formControlState(_this.props, _this.context).disabled) {
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
_this.setState({ focused: true });
|
||||
if (_this.props.onFocus) {
|
||||
_this.props.onFocus(event);
|
||||
@@ -450,7 +317,7 @@ var Input = function (_React$Component) {
|
||||
_this.props.onBlur(event);
|
||||
}
|
||||
}, _this.handleChange = function (event) {
|
||||
if (!_this.isControlled()) {
|
||||
if (!_this.isControlled) {
|
||||
_this.checkDirty(_this.input);
|
||||
}
|
||||
|
||||
@@ -460,32 +327,46 @@ var Input = function (_React$Component) {
|
||||
}
|
||||
}, _this.handleRefInput = function (node) {
|
||||
_this.input = node;
|
||||
|
||||
if (_this.props.inputRef) {
|
||||
_this.props.inputRef(node);
|
||||
} else if (_this.props.inputProps && _this.props.inputProps.ref) {
|
||||
_this.props.inputProps.ref(node);
|
||||
}
|
||||
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||||
}
|
||||
|
||||
(0, _createClass3.default)(Input, [{
|
||||
key: 'getChildContext',
|
||||
value: function getChildContext() {
|
||||
// We are consuming the parent muiFormControl context.
|
||||
// We don't want a child to consume it a second time.
|
||||
return {
|
||||
muiFormControl: null
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillMount',
|
||||
value: function componentWillMount() {
|
||||
if (this.isControlled()) {
|
||||
this.isControlled = this.props.value != null;
|
||||
|
||||
if (this.isControlled) {
|
||||
this.checkDirty(this.props);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
if (!this.isControlled()) {
|
||||
if (!this.isControlled) {
|
||||
this.checkDirty(this.input);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
value: function componentWillReceiveProps(nextProps, nextContext) {
|
||||
// The blur won't fire when the disabled state is set on a focused input.
|
||||
// We need to book keep the focused state manually.
|
||||
if (!this.props.disabled && nextProps.disabled) {
|
||||
if (!formControlState(this.props, this.context).disabled && formControlState(nextProps, nextContext).disabled) {
|
||||
this.setState({
|
||||
focused: false
|
||||
});
|
||||
@@ -493,13 +374,13 @@ var Input = function (_React$Component) {
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUpdate',
|
||||
value: function componentWillUpdate(nextProps) {
|
||||
if (this.isControlled(nextProps)) {
|
||||
value: function componentWillUpdate(nextProps, nextState, nextContext) {
|
||||
if (this.isControlled) {
|
||||
this.checkDirty(nextProps);
|
||||
} // else performed in the onChange
|
||||
|
||||
// Book keep the focused state.
|
||||
if (!this.props.disabled && nextProps.disabled) {
|
||||
if (!formControlState(this.props, this.context).disabled && formControlState(nextProps, nextContext).disabled) {
|
||||
var muiFormControl = this.context.muiFormControl;
|
||||
|
||||
if (muiFormControl && muiFormControl.onBlur) {
|
||||
@@ -510,19 +391,6 @@ var Input = function (_React$Component) {
|
||||
|
||||
// Holds the input reference
|
||||
|
||||
}, {
|
||||
key: 'isControlled',
|
||||
|
||||
|
||||
// A controlled input accepts its current value as a prop.
|
||||
//
|
||||
// @see https://facebook.github.io/react/docs/forms.html#controlled-components
|
||||
// @returns {boolean} true if string (including '') or number (including zero)
|
||||
value: function isControlled() {
|
||||
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
|
||||
|
||||
return hasValue(props.value);
|
||||
}
|
||||
}, {
|
||||
key: 'checkDirty',
|
||||
value: function checkDirty(obj) {
|
||||
@@ -571,63 +439,49 @@ var Input = function (_React$Component) {
|
||||
inputRef = _props.inputRef,
|
||||
marginProp = _props.margin,
|
||||
multiline = _props.multiline,
|
||||
name = _props.name,
|
||||
onBlur = _props.onBlur,
|
||||
onFocus = _props.onFocus,
|
||||
onChange = _props.onChange,
|
||||
onClean = _props.onClean,
|
||||
onDirty = _props.onDirty,
|
||||
onFocus = _props.onFocus,
|
||||
onKeyDown = _props.onKeyDown,
|
||||
onKeyUp = _props.onKeyUp,
|
||||
placeholder = _props.placeholder,
|
||||
name = _props.name,
|
||||
readOnly = _props.readOnly,
|
||||
rows = _props.rows,
|
||||
rowsMax = _props.rowsMax,
|
||||
startAdornment = _props.startAdornment,
|
||||
type = _props.type,
|
||||
value = _props.value,
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['autoComplete', 'autoFocus', 'classes', 'className', 'defaultValue', 'disabled', 'disableUnderline', 'endAdornment', 'error', 'fullWidth', 'id', 'inputComponent', 'inputProps', 'inputRef', 'margin', 'multiline', 'onBlur', 'onFocus', 'onChange', 'onClean', 'onDirty', 'onKeyDown', 'onKeyUp', 'placeholder', 'name', 'readOnly', 'rows', 'rowsMax', 'startAdornment', 'type', 'value']);
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['autoComplete', 'autoFocus', 'classes', 'className', 'defaultValue', 'disabled', 'disableUnderline', 'endAdornment', 'error', 'fullWidth', 'id', 'inputComponent', 'inputProps', 'inputRef', 'margin', 'multiline', 'name', 'onBlur', 'onChange', 'onClean', 'onDirty', 'onFocus', 'onKeyDown', 'onKeyUp', 'placeholder', 'readOnly', 'rows', 'rowsMax', 'startAdornment', 'type', 'value']);
|
||||
var muiFormControl = this.context.muiFormControl;
|
||||
|
||||
var disabled = disabledProp;
|
||||
var error = errorProp;
|
||||
var margin = marginProp;
|
||||
|
||||
if (muiFormControl) {
|
||||
if (typeof disabled === 'undefined') {
|
||||
disabled = muiFormControl.disabled;
|
||||
}
|
||||
|
||||
if (typeof error === 'undefined') {
|
||||
error = muiFormControl.error;
|
||||
}
|
||||
|
||||
if (typeof margin === 'undefined') {
|
||||
margin = muiFormControl.margin;
|
||||
}
|
||||
}
|
||||
var _formControlState = formControlState(this.props, this.context),
|
||||
disabled = _formControlState.disabled,
|
||||
error = _formControlState.error,
|
||||
margin = _formControlState.margin;
|
||||
|
||||
var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, classes.error, error), (0, _defineProperty3.default)(_classNames, classes.fullWidth, fullWidth), (0, _defineProperty3.default)(_classNames, classes.focused, this.state.focused), (0, _defineProperty3.default)(_classNames, classes.formControl, muiFormControl), (0, _defineProperty3.default)(_classNames, classes.inkbar, !disableUnderline), (0, _defineProperty3.default)(_classNames, classes.multiline, multiline), (0, _defineProperty3.default)(_classNames, classes.underline, !disableUnderline), _classNames), classNameProp);
|
||||
|
||||
var inputClassName = (0, _classnames2.default)(classes.input, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.inputDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.inputSingleline, !multiline), (0, _defineProperty3.default)(_classNames2, classes.inputSearch, type === 'search'), (0, _defineProperty3.default)(_classNames2, classes.inputMultiline, multiline), (0, _defineProperty3.default)(_classNames2, classes.inputDense, margin === 'dense'), _classNames2), inputPropsClassName);
|
||||
var inputClassName = (0, _classnames2.default)(classes.input, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.inputDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.inputType, type !== 'text'), (0, _defineProperty3.default)(_classNames2, classes.inputMultiline, multiline), (0, _defineProperty3.default)(_classNames2, classes.inputSearch, type === 'search'), (0, _defineProperty3.default)(_classNames2, classes.inputDense, margin === 'dense'), _classNames2), inputPropsClassName);
|
||||
|
||||
var required = muiFormControl && muiFormControl.required === true;
|
||||
|
||||
var InputComponent = 'input';
|
||||
var inputProps = (0, _extends3.default)({
|
||||
var inputProps = (0, _extends3.default)({}, inputPropsProp, {
|
||||
ref: this.handleRefInput
|
||||
}, inputPropsProp);
|
||||
});
|
||||
|
||||
if (inputComponent) {
|
||||
InputComponent = inputComponent;
|
||||
|
||||
if ((0, _reactHelpers.isMuiComponent)(InputComponent, ['SelectInput'])) {
|
||||
inputProps = (0, _extends3.default)({
|
||||
selectRef: this.handleRefInput
|
||||
}, inputProps, {
|
||||
ref: null
|
||||
});
|
||||
}
|
||||
inputProps = (0, _extends3.default)({
|
||||
// Rename ref to inputRef as we don't know the
|
||||
// provided `inputComponent` structure.
|
||||
inputRef: this.handleRefInput
|
||||
}, inputProps, {
|
||||
ref: null
|
||||
});
|
||||
} else if (multiline) {
|
||||
if (rows && !rowsMax) {
|
||||
InputComponent = 'textarea';
|
||||
@@ -662,7 +516,9 @@ var Input = function (_React$Component) {
|
||||
placeholder: placeholder,
|
||||
type: type,
|
||||
readOnly: readOnly,
|
||||
rows: rows
|
||||
rows: rows,
|
||||
'aria-required': required,
|
||||
'aria-invalid': error
|
||||
}, inputProps)),
|
||||
endAdornment
|
||||
);
|
||||
@@ -671,7 +527,143 @@ var Input = function (_React$Component) {
|
||||
return Input;
|
||||
}(_react2.default.Component);
|
||||
|
||||
Input.propTypes = process.env.NODE_ENV !== "production" ? {
|
||||
/**
|
||||
* This property helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, as it's more like an autofill.
|
||||
* You can learn more about it here:
|
||||
* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
|
||||
*/
|
||||
autoComplete: _propTypes2.default.string,
|
||||
/**
|
||||
* If `true`, the input will be focused during the first mount.
|
||||
*/
|
||||
autoFocus: _propTypes2.default.bool,
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: _propTypes2.default.object.isRequired,
|
||||
/**
|
||||
* The CSS class name of the wrapper element.
|
||||
*/
|
||||
className: _propTypes2.default.string,
|
||||
/**
|
||||
* The default input value, useful when not controlling the component.
|
||||
*/
|
||||
defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
||||
/**
|
||||
* If `true`, the input will be disabled.
|
||||
*/
|
||||
disabled: _propTypes2.default.bool,
|
||||
/**
|
||||
* If `true`, the input will not have an underline.
|
||||
*/
|
||||
disableUnderline: _propTypes2.default.bool,
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: _propTypes2.default.node,
|
||||
/**
|
||||
* If `true`, the input will indicate an error. This is normally obtained via context from
|
||||
* FormControl.
|
||||
*/
|
||||
error: _propTypes2.default.bool,
|
||||
/**
|
||||
* If `true`, the input will take up the full width of its container.
|
||||
*/
|
||||
fullWidth: _propTypes2.default.bool,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: _propTypes2.default.string,
|
||||
/**
|
||||
* The component used for the native input.
|
||||
* Either a string to use a DOM element or a component.
|
||||
*/
|
||||
inputComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
|
||||
/**
|
||||
* Properties applied to the `input` element.
|
||||
*/
|
||||
inputProps: _propTypes2.default.object,
|
||||
/**
|
||||
* Use that property to pass a ref callback to the native input component.
|
||||
*/
|
||||
inputRef: _propTypes2.default.func,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
*/
|
||||
margin: _propTypes2.default.oneOf(['dense', 'none']),
|
||||
/**
|
||||
* If `true`, a textarea element will be rendered.
|
||||
*/
|
||||
multiline: _propTypes2.default.bool,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: _propTypes2.default.string,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onBlur: _propTypes2.default.func,
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onChange: _propTypes2.default.func,
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
onClean: _propTypes2.default.func,
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
onDirty: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: _propTypes2.default.func,
|
||||
/**
|
||||
* The short hint displayed in the input before the user enters a value.
|
||||
*/
|
||||
placeholder: _propTypes2.default.string,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
readOnly: _propTypes2.default.bool,
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rowsMax: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: _propTypes2.default.node,
|
||||
/**
|
||||
* Type of the input element. It should be a valid HTML5 input type.
|
||||
*/
|
||||
type: _propTypes2.default.string,
|
||||
/**
|
||||
* The input value, required for a controlled component.
|
||||
*/
|
||||
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]))])
|
||||
} : {};
|
||||
|
||||
Input.muiName = 'Input';
|
||||
|
||||
Input.defaultProps = {
|
||||
disableUnderline: false,
|
||||
fullWidth: false,
|
||||
@@ -679,9 +671,12 @@ Input.defaultProps = {
|
||||
type: 'text'
|
||||
};
|
||||
|
||||
|
||||
Input.contextTypes = {
|
||||
muiFormControl: _propTypes2.default.object
|
||||
};
|
||||
|
||||
Input.childContextTypes = {
|
||||
muiFormControl: _propTypes2.default.object
|
||||
};
|
||||
|
||||
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiInput' })(Input);
|
||||
Reference in New Issue
Block a user