Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -1,14 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface InputProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
InputClassKey,
'onChange' | 'onKeyUp' | 'onKeyDown' | 'defaultValue'
> {
export interface InputProps
extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
InputClassKey,
'onChange' | 'onKeyUp' | 'onKeyDown' | 'defaultValue'
> {
autoComplete?: string;
autoFocus?: boolean;
inputComponent?: React.ReactNode;
defaultValue?: string | number;
disabled?: boolean;
disableUnderline?: boolean;
@@ -16,6 +16,7 @@ export interface InputProps extends StandardProps<
error?: boolean;
fullWidth?: boolean;
id?: string;
inputComponent?: React.ReactType<InputProps>;
inputProps?:
| React.TextareaHTMLAttributes<HTMLTextAreaElement>
| React.InputHTMLAttributes<HTMLInputElement>;
@@ -28,7 +29,7 @@ export interface InputProps extends StandardProps<
rowsMax?: string | number;
startAdornment?: React.ReactNode;
type?: string;
value?: string | number;
value?: Array<string | number> | string | number;
onClean?: () => void;
onDirty?: () => void;
/**
@@ -59,8 +60,7 @@ export type InputClassKey =
| 'inputSingleline'
| 'inputSearch'
| 'inputMultiline'
| 'fullWidth'
;
| 'fullWidth';
declare const Input: React.ComponentType<InputProps>;

View File

@@ -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);

View File

@@ -1,11 +1,7 @@
// @flow weak
import React from 'react';
import type { Node, ComponentType } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { isMuiComponent } from '../utils/reactHelpers';
import Textarea from './Textarea';
// Supports determination of isControlled().
@@ -14,8 +10,8 @@ import Textarea from './Textarea';
// @see https://facebook.github.io/react/docs/forms.html#controlled-components
// @param value
// @returns {boolean} true if string (including '') or number (including zero)
export function hasValue(value: ?(number | string | Array<*>)) {
return value !== undefined && value !== null && !(Array.isArray(value) && value.length === 0);
export function hasValue(value) {
return value != null && !(Array.isArray(value) && value.length === 0);
}
// Determine if field is dirty (a.k.a. filled).
@@ -44,31 +40,32 @@ export function isAdornedStart(obj) {
return obj.startAdornment;
}
export const styles = (theme: Object) => {
export const styles = theme => {
const light = theme.palette.type === 'light';
const 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,
}),
};
const placeholderHidden = {
opacity: 0,
};
const placeholderVisible = {
opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
opacity: light ? 0.42 : 0.5,
};
const 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,
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 + &': {
@@ -77,7 +74,7 @@ export const styles = (theme: Object) => {
},
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
@@ -98,21 +95,61 @@ export const styles = (theme: Object) => {
},
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+
@@ -127,7 +164,7 @@ export const styles = (theme: Object) => {
},
'&::-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 &': {
@@ -142,254 +179,103 @@ export const styles = (theme: Object) => {
},
},
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',
},
};
};
type ProvidedProps = {
classes: Object,
disableUnderline: boolean,
fullWidth: boolean,
multiline: boolean,
type: string,
};
function formControlState(props, context) {
let disabled = props.disabled;
let error = props.error;
let margin = props.margin;
export type 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?: string,
/**
* If `true`, the input will be focused during the first mount.
*/
autoFocus?: boolean,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* The CSS class name of the wrapper element.
*/
className?: string,
/**
* The default input value, useful when not controlling the component.
*/
defaultValue?: string | number,
/**
* If `true`, the input will be disabled.
*/
disabled?: boolean,
/**
* If `true`, the input will not have an underline.
*/
disableUnderline?: boolean,
/**
* End `InputAdornment` for this component.
*/
endAdornment?: Node,
/**
* If `true`, the input will indicate an error. This is normally obtained via context from
* FormControl.
*/
error?: boolean,
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth?: boolean,
/**
* The id of the `input` element.
*/
id?: 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?: string | ComponentType<*>,
/**
* Properties applied to the `input` element.
*/
inputProps?: Object,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef?: Function,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin?: 'dense' | 'none',
/**
* If `true`, a textarea element will be rendered.
*/
multiline?: boolean,
/**
* Name attribute of the `input` element.
*/
name?: string,
/**
* @ignore
*/
readOnly?: boolean,
/**
* @ignore
*/
onBlur?: (event: SyntheticFocusEvent<>) => void,
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback
*/
onChange?: (event: SyntheticInputEvent<>) => void,
/**
* TODO
*/
onClean?: () => void,
/**
* TODO
*/
onDirty?: () => void,
/**
* @ignore
*/
onFocus?: (event: SyntheticFocusEvent<>) => void,
/**
* @ignore
*/
onKeyDown?: (event: SyntheticKeyboardEvent<>) => void,
/**
* @ignore
*/
onKeyUp?: (event: SyntheticKeyboardEvent<>) => void,
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder?: string,
/**
* Number of rows to display when multiline option is set to true.
*/
rows?: string | number,
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax?: string | number,
/**
* Start `InputAdornment` for this component.
*/
startAdornment?: Node,
/**
* Type of the input element. It should be a valid HTML5 input type.
*/
type?: string,
/**
* The input value, required for a controlled component.
*/
value?: string | number | Array<string | number>,
};
if (context && context.muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = context.muiFormControl.disabled;
}
type State = {
focused: boolean,
};
if (typeof error === 'undefined') {
error = context.muiFormControl.error;
}
class Input extends React.Component<ProvidedProps & Props, State> {
static muiName = 'Input';
if (typeof margin === 'undefined') {
margin = context.muiFormControl.margin;
}
}
static defaultProps = {
disableUnderline: false,
fullWidth: false,
multiline: false,
type: 'text',
return {
disabled,
error,
margin,
};
}
class Input extends React.Component {
state = {
focused: false,
};
getChildContext() {
// We are consuming the parent muiFormControl context.
// We don't want a child to consume it a second time.
return {
muiFormControl: null,
};
}
componentWillMount() {
if (this.isControlled()) {
this.isControlled = this.props.value != null;
if (this.isControlled) {
this.checkDirty(this.props);
}
}
componentDidMount() {
if (!this.isControlled()) {
if (!this.isControlled) {
this.checkDirty(this.input);
}
}
componentWillReceiveProps(nextProps) {
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,
});
}
}
componentWillUpdate(nextProps) {
if (this.isControlled(nextProps)) {
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
) {
const { muiFormControl } = this.context;
if (muiFormControl && muiFormControl.onBlur) {
muiFormControl.onBlur();
@@ -400,22 +286,29 @@ class Input extends React.Component<ProvidedProps & Props, State> {
// Holds the input reference
input = null;
handleFocus = (event: SyntheticFocusEvent<>) => {
handleFocus = 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);
}
};
handleBlur = (event: SyntheticFocusEvent<>) => {
handleBlur = event => {
this.setState({ focused: false });
if (this.props.onBlur) {
this.props.onBlur(event);
}
};
handleChange = (event: SyntheticInputEvent<>) => {
if (!this.isControlled()) {
handleChange = event => {
if (!this.isControlled) {
this.checkDirty(this.input);
}
@@ -427,19 +320,14 @@ class Input extends React.Component<ProvidedProps & Props, State> {
handleRefInput = 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);
}
};
// 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)
isControlled(props = this.props) {
return hasValue(props.value);
}
checkDirty(obj) {
const { muiFormControl } = this.context;
@@ -479,43 +367,26 @@ class Input extends React.Component<ProvidedProps & Props, State> {
inputRef,
margin: marginProp,
multiline,
name,
onBlur,
onFocus,
onChange,
onClean,
onDirty,
onFocus,
onKeyDown,
onKeyUp,
placeholder,
name,
readOnly,
rows,
rowsMax,
startAdornment,
type,
// $FlowFixMe
value,
...other
} = this.props;
const { muiFormControl } = this.context;
let disabled = disabledProp;
let error = errorProp;
let 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;
}
}
const { disabled, error, margin } = formControlState(this.props, this.context);
const className = classNames(
classes.root,
@@ -536,9 +407,9 @@ class Input extends React.Component<ProvidedProps & Props, State> {
classes.input,
{
[classes.inputDisabled]: disabled,
[classes.inputSingleline]: !multiline,
[classes.inputSearch]: type === 'search',
[classes.inputType]: type !== 'text',
[classes.inputMultiline]: multiline,
[classes.inputSearch]: type === 'search',
[classes.inputDense]: margin === 'dense',
},
inputPropsClassName,
@@ -548,20 +419,19 @@ class Input extends React.Component<ProvidedProps & Props, State> {
let InputComponent = 'input';
let inputProps = {
ref: this.handleRefInput,
...inputPropsProp,
ref: this.handleRefInput,
};
if (inputComponent) {
InputComponent = inputComponent;
if (isMuiComponent(InputComponent, ['SelectInput'])) {
inputProps = {
selectRef: this.handleRefInput,
...inputProps,
ref: null,
};
}
inputProps = {
// 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';
@@ -596,6 +466,8 @@ class Input extends React.Component<ProvidedProps & Props, State> {
type={type}
readOnly={readOnly}
rows={rows}
aria-required={required}
aria-invalid={error}
{...inputProps}
/>
{endAdornment}
@@ -604,8 +476,160 @@ class Input extends React.Component<ProvidedProps & Props, State> {
}
}
Input.propTypes = {
/**
* 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: PropTypes.string,
/**
* If `true`, the input will be focused during the first mount.
*/
autoFocus: PropTypes.bool,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
/**
* The default input value, useful when not controlling the component.
*/
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* If `true`, the input will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the input will not have an underline.
*/
disableUnderline: PropTypes.bool,
/**
* End `InputAdornment` for this component.
*/
endAdornment: PropTypes.node,
/**
* If `true`, the input will indicate an error. This is normally obtained via context from
* FormControl.
*/
error: PropTypes.bool,
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* The component used for the native input.
* Either a string to use a DOM element or a component.
*/
inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Properties applied to the `input` element.
*/
inputProps: PropTypes.object,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef: PropTypes.func,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense', 'none']),
/**
* If `true`, a textarea element will be rendered.
*/
multiline: PropTypes.bool,
/**
* Name attribute of the `input` element.
*/
name: PropTypes.string,
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback
*/
onChange: PropTypes.func,
/**
* TODO
*/
onClean: PropTypes.func,
/**
* TODO
*/
onDirty: PropTypes.func,
/**
* @ignore
*/
onFocus: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
onKeyUp: PropTypes.func,
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder: PropTypes.string,
/**
* @ignore
*/
readOnly: PropTypes.bool,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Start `InputAdornment` for this component.
*/
startAdornment: PropTypes.node,
/**
* Type of the input element. It should be a valid HTML5 input type.
*/
type: PropTypes.string,
/**
* The input value, required for a controlled component.
*/
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
]),
};
Input.muiName = 'Input';
Input.defaultProps = {
disableUnderline: false,
fullWidth: false,
multiline: false,
type: 'text',
};
Input.contextTypes = {
muiFormControl: PropTypes.object,
};
Input.childContextTypes = {
muiFormControl: PropTypes.object,
};
export default withStyles(styles, { name: 'MuiInput' })(Input);

View File

@@ -2,16 +2,12 @@ import * as React from 'react';
import { StandardProps } from '..';
export interface InputAdornmentProps extends StandardProps<{}, InputAdornmentClassKey> {
component?: React.ReactType;
component?: React.ReactType<InputAdornmentProps>;
disableTypography?: boolean;
position: 'start' | 'end';
}
export type InputAdornmentClassKey =
| 'root'
| 'positionStart'
| 'positionEnd'
;
export type InputAdornmentClassKey = 'root' | 'positionStart' | 'positionEnd';
declare const InputAdornment: React.ComponentType<InputAdornmentProps>;

View File

@@ -17,12 +17,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -37,16 +39,12 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
'label + div > &': {
marginTop: -theme.spacing.unit * 2
}
display: 'flex',
maxHeight: '2em',
alignItems: 'center'
},
positionStart: {
marginRight: theme.spacing.unit
@@ -57,40 +55,6 @@ var styles = exports.styles = function styles(theme) {
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The content of the component, normally an `IconButton` or string.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
/**
* If children is a string then disable wrapping in a Typography component.
*/
disableTypography: require('prop-types').bool,
/**
* The position this adornment should appear relative to the `Input`.
*/
position: require('prop-types').oneOf(['start', 'end']).isRequired
};
function InputAdornment(props) {
var _classNames;
@@ -110,18 +74,40 @@ function InputAdornment(props) {
}, other),
typeof children === 'string' && !disableTypography ? _react2.default.createElement(
_Typography2.default,
{ color: 'secondary' },
{ color: 'textSecondary' },
children
) : children
);
}
InputAdornment.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired : babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType).isRequired,
disableTypography: require('prop-types').bool.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'component', typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)), (0, _defineProperty3.default)(_ref, 'disableTypography', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'position', require('prop-types').oneOf(['start', 'end']).isRequired), _ref) : {};
InputAdornment.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component, normally an `IconButton` or string.
*/
children: _propTypes2.default.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* If children is a string then disable wrapping in a Typography component.
*/
disableTypography: _propTypes2.default.bool,
/**
* The position this adornment should appear relative to the `Input`.
*/
position: _propTypes2.default.oneOf(['start', 'end'])
} : {};
InputAdornment.defaultProps = {
component: 'div',
disableTypography: false

View File

@@ -1,16 +1,14 @@
// @flow
import React from 'react';
import type { Node, ElementType } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Typography from '../Typography';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
'label + div > &': {
marginTop: -theme.spacing.unit * 2,
},
display: 'flex',
maxHeight: '2em',
alignItems: 'center',
},
positionStart: {
marginRight: theme.spacing.unit,
@@ -20,41 +18,7 @@ export const styles = (theme: Object) => ({
},
});
type ProvidedProps = {
classes: Object,
component: ElementType,
disableTypography: boolean,
};
export type Props = {
/**
* The content of the component, normally an `IconButton` or string.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component?: ElementType,
/**
* If children is a string then disable wrapping in a Typography component.
*/
disableTypography?: boolean,
/**
* The position this adornment should appear relative to the `Input`.
*/
position: 'start' | 'end',
};
function InputAdornment(props: ProvidedProps & Props) {
function InputAdornment(props) {
const {
children,
component: Component,
@@ -78,7 +42,7 @@ function InputAdornment(props: ProvidedProps & Props) {
{...other}
>
{typeof children === 'string' && !disableTypography ? (
<Typography color="secondary">{children}</Typography>
<Typography color="textSecondary">{children}</Typography>
) : (
children
)}
@@ -86,6 +50,34 @@ function InputAdornment(props: ProvidedProps & Props) {
);
}
InputAdornment.propTypes = {
/**
* The content of the component, normally an `IconButton` or string.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If children is a string then disable wrapping in a Typography component.
*/
disableTypography: PropTypes.bool,
/**
* The position this adornment should appear relative to the `Input`.
*/
position: PropTypes.oneOf(['start', 'end']),
};
InputAdornment.defaultProps = {
component: 'div',
disableTypography: false,

View File

@@ -1,14 +1,13 @@
import * as React from 'react';
import { StandardProps } from '..';
import { FormLabelProps, FormLabelClassKey } from '../Form/FormLabel';
import { ClassNameMap } from '../styles/withStyles';
export interface InputLabelProps extends StandardProps<
FormLabelProps,
InputLabelClassKey
> {
export interface InputLabelProps extends StandardProps<FormLabelProps, InputLabelClassKey> {
disableAnimation?: boolean;
disabled?: boolean;
error?: boolean;
FormControlClasses?: Partial<ClassNameMap<FormLabelClassKey>>;
focused?: boolean;
required?: boolean;
shrink?: boolean;
@@ -19,8 +18,7 @@ export type InputLabelClassKey =
| 'formControl'
| 'labelDense'
| 'shrink'
| 'animated'
;
| 'animated';
declare const InputLabel: React.ComponentType<InputLabelProps>;

View File

@@ -17,8 +17,6 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
@@ -39,19 +37,17 @@ var _Form = require('../Form');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
transformOrigin: 'top ' + (theme.direction === 'ltr' ? 'left' : 'right')
transformOrigin: 'top left'
},
formControl: {
position: 'absolute',
left: 0,
top: 0,
// slight alteration to spec spacing to match visual spec result
transform: 'translate(0, ' + (theme.spacing.unit * 3 - 1) + 'px) scale(1)'
transform: 'translate(0, ' + theme.spacing.unit * 3 + 'px) scale(1)'
},
labelDense: {
// Compensation for the `Input.inputDense` style.
@@ -59,7 +55,7 @@ var styles = exports.styles = function styles(theme) {
},
shrink: {
transform: 'translate(0, 1.5px) scale(0.75)',
transformOrigin: 'top ' + (theme.direction === 'ltr' ? 'left' : 'right')
transformOrigin: 'top left'
},
animated: {
transition: theme.transitions.create('transform', {
@@ -68,82 +64,23 @@ var styles = exports.styles = function styles(theme) {
})
},
disabled: {
color: theme.palette.input.disabled
color: theme.palette.text.disabled
}
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The contents of the `InputLabel`.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, the transition animation is disabled.
*/
disableAnimation: require('prop-types').bool,
/**
* If `true`, apply disabled class.
*/
disabled: require('prop-types').bool,
/**
* If `true`, the label will be displayed in an error state.
*/
error: require('prop-types').bool,
/**
* `classes` property applied to the `FormControl` element.
*/
FormControlClasses: require('prop-types').object,
/**
* If `true`, the input of this label is focused.
*/
focused: require('prop-types').bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: require('prop-types').oneOf(['dense']),
/**
* if `true`, the label will indicate that the input is required.
*/
required: require('prop-types').bool,
/**
* If `true`, the label is shrunk.
*/
shrink: require('prop-types').bool
};
}; // @inheritedComponent FormLabel
function InputLabel(props, context) {
var _classNames;
var disabled = props.disabled,
disableAnimation = props.disableAnimation,
children = props.children,
var children = props.children,
classes = props.classes,
classNameProp = props.className,
disableAnimation = props.disableAnimation,
disabled = props.disabled,
FormControlClasses = props.FormControlClasses,
shrinkProp = props.shrink,
marginProp = props.margin,
other = (0, _objectWithoutProperties3.default)(props, ['disabled', 'disableAnimation', 'children', 'classes', 'className', 'FormControlClasses', 'shrink', 'margin']);
shrinkProp = props.shrink,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'disableAnimation', 'disabled', 'FormControlClasses', 'margin', 'shrink']);
var muiFormControl = context.muiFormControl;
var shrink = shrinkProp;
@@ -166,12 +103,54 @@ function InputLabel(props, context) {
);
}
InputLabel.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
disabled: require('prop-types').bool.isRequired,
disableAnimation: require('prop-types').bool.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'disableAnimation', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'disabled', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'error', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'FormControlClasses', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'focused', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'margin', require('prop-types').oneOf(['dense'])), (0, _defineProperty3.default)(_ref, 'required', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'shrink', require('prop-types').bool), _ref) : {};
InputLabel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The contents of the `InputLabel`.
*/
children: _propTypes2.default.node,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the transition animation is disabled.
*/
disableAnimation: _propTypes2.default.bool,
/**
* If `true`, apply disabled class.
*/
disabled: _propTypes2.default.bool,
/**
* If `true`, the label will be displayed in an error state.
*/
error: _propTypes2.default.bool,
/**
* If `true`, the input of this label is focused.
*/
focused: _propTypes2.default.bool,
/**
* `classes` property applied to the `FormControl` element.
*/
FormControlClasses: _propTypes2.default.object,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: _propTypes2.default.oneOf(['dense']),
/**
* if `true`, the label will indicate that the input is required.
*/
required: _propTypes2.default.bool,
/**
* If `true`, the label is shrunk.
*/
shrink: _propTypes2.default.bool
} : {};
InputLabel.defaultProps = {
disabled: false,
disableAnimation: false

View File

@@ -1,22 +1,21 @@
// @flow
// @inheritedComponent FormLabel
import React from 'react';
import type { Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { FormLabel } from '../Form';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`,
transformOrigin: 'top left',
},
formControl: {
position: 'absolute',
left: 0,
top: 0,
// slight alteration to spec spacing to match visual spec result
transform: `translate(0, ${theme.spacing.unit * 3 - 1}px) scale(1)`,
transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`,
},
labelDense: {
// Compensation for the `Input.inputDense` style.
@@ -24,7 +23,7 @@ export const styles = (theme: Object) => ({
},
shrink: {
transform: 'translate(0, 1.5px) scale(0.75)',
transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`,
transformOrigin: 'top left',
},
animated: {
transition: theme.transitions.create('transform', {
@@ -33,74 +32,20 @@ export const styles = (theme: Object) => ({
}),
},
disabled: {
color: theme.palette.input.disabled,
color: theme.palette.text.disabled,
},
});
type ProvidedProps = {
classes: Object,
disabled: boolean,
disableAnimation: boolean,
};
export type Props = {
/**
* The contents of the `InputLabel`.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* If `true`, the transition animation is disabled.
*/
disableAnimation?: boolean,
/**
* If `true`, apply disabled class.
*/
disabled?: boolean,
/**
* If `true`, the label will be displayed in an error state.
*/
error?: boolean,
/**
* `classes` property applied to the `FormControl` element.
*/
FormControlClasses?: Object,
/**
* If `true`, the input of this label is focused.
*/
focused?: boolean,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin?: 'dense',
/**
* if `true`, the label will indicate that the input is required.
*/
required?: boolean,
/**
* If `true`, the label is shrunk.
*/
shrink?: boolean,
};
function InputLabel(props: ProvidedProps & Props, context: { muiFormControl: Object }) {
function InputLabel(props, context) {
const {
disabled,
disableAnimation,
children,
classes,
className: classNameProp,
disableAnimation,
disabled,
FormControlClasses,
shrink: shrinkProp,
margin: marginProp,
shrink: shrinkProp,
...other
} = props;
@@ -135,6 +80,54 @@ function InputLabel(props: ProvidedProps & Props, context: { muiFormControl: Obj
);
}
InputLabel.propTypes = {
/**
* The contents of the `InputLabel`.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the transition animation is disabled.
*/
disableAnimation: PropTypes.bool,
/**
* If `true`, apply disabled class.
*/
disabled: PropTypes.bool,
/**
* If `true`, the label will be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the input of this label is focused.
*/
focused: PropTypes.bool,
/**
* `classes` property applied to the `FormControl` element.
*/
FormControlClasses: PropTypes.object,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense']),
/**
* if `true`, the label will indicate that the input is required.
*/
required: PropTypes.bool,
/**
* If `true`, the label is shrunk.
*/
shrink: PropTypes.bool,
};
InputLabel.defaultProps = {
disabled: false,
disableAnimation: false,

View File

@@ -1,11 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface TextareaProps extends StandardProps<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
TextareaClassKey,
'rows'
> {
export interface TextareaProps
extends StandardProps<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
TextareaClassKey,
'rows'
> {
defaultValue?: any;
disabled?: boolean;
rows?: string | number;
@@ -14,11 +15,7 @@ export interface TextareaProps extends StandardProps<
value?: string;
}
export type TextareaClassKey =
| 'root'
| 'shadow'
| 'textarea'
;
export type TextareaClassKey = 'root' | 'shadow' | 'textarea';
declare const Textarea: React.ComponentType<TextareaProps>;

View File

@@ -37,6 +37,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -55,7 +59,7 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var rowsHeight = 24;
var ROWS_HEIGHT = 19;
var styles = exports.styles = {
root: {
@@ -88,56 +92,10 @@ var styles = exports.styles = {
}
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* @ignore
*/
defaultValue: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number]),
/**
* @ignore
*/
disabled: require('prop-types').bool,
/**
* @ignore
*/
onChange: require('prop-types').func,
/**
* 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]),
/**
* Use that property to pass a ref callback to the native textarea element.
*/
textareaRef: require('prop-types').func,
/**
* @ignore
*/
value: require('prop-types').oneOfType([require('prop-types').string, require('prop-types').number])
};
/**
* @ignore - internal component.
*/
var Textarea = function (_React$Component) {
(0, _inherits3.default)(Textarea, _React$Component);
@@ -154,7 +112,7 @@ var Textarea = function (_React$Component) {
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Textarea.__proto__ || (0, _getPrototypeOf2.default)(Textarea)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
height: null
}, _this.handleResize = (0, _debounce2.default)(function (event) {
}, _this.shadow = null, _this.singlelineShadow = null, _this.input = null, _this.value = null, _this.handleResize = (0, _debounce2.default)(function (event) {
_this.syncHeightWithShadow(event);
}, 166), _this.handleRefInput = function (node) {
_this.input = node;
@@ -187,7 +145,7 @@ var Textarea = function (_React$Component) {
// so that it can check whether they are dirty
this.value = this.props.value || this.props.defaultValue || '';
this.setState({
height: Number(this.props.rows) * rowsHeight
height: Number(this.props.rows) * ROWS_HEIGHT
});
}
}, {
@@ -283,17 +241,56 @@ var Textarea = function (_React$Component) {
className: (0, _classnames2.default)(classes.textarea, className),
defaultValue: defaultValue,
value: value,
onChange: this.handleChange
}, other, {
onChange: this.handleChange,
ref: this.handleRefInput
}))
}, other))
);
}
}]);
return Textarea;
}(_react2.default.Component);
Textarea.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* @ignore
*/
defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/**
* @ignore
*/
disabled: _propTypes2.default.bool,
/**
* @ignore
*/
onChange: _propTypes2.default.func,
/**
* 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]),
/**
* Use that property to pass a ref callback to the native textarea element.
*/
textareaRef: _propTypes2.default.func,
/**
* @ignore
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
} : {};
Textarea.defaultProps = {
rows: 1
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTextarea' })(Textarea);

View File

@@ -1,12 +1,11 @@
// @flow
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import debounce from 'lodash/debounce';
import EventListener from 'react-event-listener';
import withStyles from '../styles/withStyles';
const rowsHeight = 24;
const ROWS_HEIGHT = 19;
export const styles = {
root: {
@@ -39,61 +38,10 @@ export const styles = {
},
};
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* @ignore
*/
defaultValue?: string | number,
/**
* @ignore
*/
disabled?: boolean,
/**
* @ignore
*/
onChange?: Function,
/**
* Number of rows to display when multiline option is set to true.
*/
rows?: string | number,
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax?: string | number,
/**
* Use that property to pass a ref callback to the native textarea element.
*/
textareaRef?: Function,
/**
* @ignore
*/
value?: string | number,
};
type State = {
height: ?number,
};
/**
* @ignore - internal component.
*/
class Textarea extends React.Component<ProvidedProps & Props, State> {
static defaultProps = {
rows: 1,
};
class Textarea extends React.Component {
state = {
height: null,
};
@@ -103,7 +51,7 @@ class Textarea extends React.Component<ProvidedProps & Props, State> {
// so that it can check whether they are dirty
this.value = this.props.value || this.props.defaultValue || '';
this.setState({
height: Number(this.props.rows) * rowsHeight,
height: Number(this.props.rows) * ROWS_HEIGHT,
});
}
@@ -124,10 +72,10 @@ class Textarea extends React.Component<ProvidedProps & Props, State> {
this.handleResize.cancel();
}
shadow: ?HTMLInputElement;
singlelineShadow: ?HTMLInputElement;
input: ?HTMLInputElement;
value: string | number;
shadow = null;
singlelineShadow = null;
input = null;
value = null;
handleResize = debounce(event => {
this.syncHeightWithShadow(event);
@@ -233,12 +181,55 @@ class Textarea extends React.Component<ProvidedProps & Props, State> {
defaultValue={defaultValue}
value={value}
onChange={this.handleChange}
{...other}
ref={this.handleRefInput}
{...other}
/>
</div>
);
}
}
Textarea.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* @ignore
*/
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* @ignore
*/
disabled: PropTypes.bool,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Use that property to pass a ref callback to the native textarea element.
*/
textareaRef: PropTypes.func,
/**
* @ignore
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Textarea.defaultProps = {
rows: 1,
};
export default withStyles(styles, { name: 'MuiTextarea' })(Textarea);

View File

@@ -4,4 +4,3 @@ export { default as InputLabel } from './InputLabel';
export * from './InputLabel';
export { default as InputAdornment } from './InputAdornment';
export * from './InputAdornment';
// NOTE: Textarea is missing from exports (intentional?)

View File

@@ -1,5 +1,3 @@
// @flow
export { default } from './Input';
export { default as InputAdornment } from './InputAdornment';
export { default as InputLabel } from './InputLabel';