Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,261 @@
// @flow
// @inheritedComponent FormControl
import React from 'react';
import warning from 'warning';
import type { ChildrenArray, Node } from 'react';
import Input, { InputLabel } from '../Input';
import FormControl from '../Form/FormControl';
import FormHelperText from '../Form/FormHelperText';
import Select from '../Select/Select';
export type Props = {
/**
* This property helps users to fill forms faster, especially on mobile devices.
* The name can be confusion, it's more like an autofill.
* You can learn about it with that 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,
/**
* @ignore
*/
children?: ChildrenArray<*>,
/**
* @ignore
*/
className?: string,
/**
* The default value of the `Input` element.
*/
defaultValue?: string,
/**
* If `true`, the input will be disabled.
*/
disabled?: boolean,
/**
* If `true`, the label will be displayed in an error state.
*/
error?: boolean,
/**
* Properties applied to the `FormHelperText` element.
*/
FormHelperTextProps?: Object,
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth?: boolean,
/**
* The helper text content.
*/
helperText?: Node,
/**
* The CSS class name of the helper text element.
*/
helperTextClassName?: string,
/**
* The id of the `input` element.
*/
id?: string,
/**
* The CSS class name of the `input` element.
*/
inputClassName?: string,
/**
* The CSS class name of the `Input` element.
*/
InputClassName?: string,
/**
* Properties applied to the `InputLabel` element.
*/
InputLabelProps?: Object,
/**
* Properties applied to the `input` element.
*/
inputProps?: Object,
/**
* Properties applied to the `Input` element.
*/
InputProps?: Object,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef?: Function,
/**
* The label content.
*/
label?: Node,
/**
* The CSS class name of the label element.
*/
labelClassName?: string,
/**
* If `true`, a textarea element will be rendered instead of an input.
*/
multiline?: boolean,
/**
* Name attribute of the `input` element.
*/
name?: string,
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback
*/
onChange?: (event: SyntheticInputEvent<>) => void,
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder?: string,
/**
* If `true`, the label is displayed as required.
*/
required?: boolean,
/**
* Use that property to pass a ref callback to the root component.
*/
rootRef?: 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,
/**
* Render a `Select` element while passing the `Input` element to `Select` as `input` parameter.
* If this option is set you must pass the options of the select as children.
*/
select?: boolean,
/**
* Properties applied to the `Select` element.
*/
SelectProps?: Object,
/**
* Type attribute of the `Input` element. It should be a valid HTML5 input type.
*/
type?: string,
/**
* The value of the `Input` element, required for a controlled component.
*/
value?: string | number,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
*/
margin?: 'none' | 'dense' | 'normal',
};
function TextField(props: Props) {
const {
autoComplete,
autoFocus,
children,
className,
defaultValue,
disabled,
error,
id,
inputClassName,
InputClassName,
inputProps: inputPropsProp,
InputProps,
inputRef,
label,
labelClassName,
InputLabelProps,
helperText,
helperTextClassName,
FormHelperTextProps,
fullWidth,
required,
type,
multiline,
name,
onChange,
placeholder,
rootRef,
rows,
rowsMax,
select,
SelectProps,
value,
...other
} = props;
let inputProps = inputPropsProp;
if (inputClassName) {
inputProps = {
className: inputClassName,
...inputProps,
};
}
warning(
!select || Boolean(children),
'Material-UI: `children` must be passed when using the `TextField` component with `select`.',
);
const InputComponent = (
<Input
autoComplete={autoComplete}
autoFocus={autoFocus}
className={InputClassName}
defaultValue={defaultValue}
disabled={disabled}
multiline={multiline}
name={name}
rows={rows}
rowsMax={rowsMax}
type={type}
value={value}
id={id}
inputProps={inputProps}
inputRef={inputRef}
onChange={onChange}
placeholder={placeholder}
{...InputProps}
/>
);
return (
<FormControl
fullWidth={fullWidth}
className={className}
error={error}
required={required}
{...other}
ref={rootRef}
>
{label && (
<InputLabel htmlFor={id} className={labelClassName} {...InputLabelProps}>
{label}
</InputLabel>
)}
{select ? (
<Select input={InputComponent} {...SelectProps}>
{children}
</Select>
) : (
InputComponent
)}
{helperText && (
<FormHelperText className={helperTextClassName} {...FormHelperTextProps}>
{helperText}
</FormHelperText>
)}
</FormControl>
);
}
TextField.defaultProps = {
required: false,
select: false,
};
export default TextField;