From 93e8c15a6da1e9975f53866d966364675abff482 Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Tue, 12 Mar 2019 16:34:15 -0700 Subject: [PATCH] fix(text-field): make props optional (#735) --- packages/text-field/Input.tsx | 39 +++++++++++------------ packages/text-field/helper-text/index.tsx | 16 +++++----- packages/text-field/index.tsx | 26 +++++++-------- 3 files changed, 40 insertions(+), 41 deletions(-) diff --git a/packages/text-field/Input.tsx b/packages/text-field/Input.tsx index 42b295ece..56789b89c 100644 --- a/packages/text-field/Input.tsx +++ b/packages/text-field/Input.tsx @@ -24,28 +24,27 @@ import * as classnames from 'classnames'; // @ts-ignore no .d.ts file import {MDCTextFieldFoundation} from '@material/textfield/dist/mdc.textfield'; -export interface InputProps { - className: string; - inputType: 'input' | 'textarea'; - disabled: boolean; +export interface InputProps { + className?: string; + inputType?: 'input' | 'textarea'; isValid?: boolean; foundation?: MDCTextFieldFoundation; - handleValueChange: (value: string | number | string[] | undefined, cb: () => void) => void; - id: string; + handleValueChange?: (value: string | number | string[] | undefined, cb: () => void) => void; ref?: (inputInstance: Input) => void, onBlur?: Pick, 'onBlur'>; onChange?: Pick, 'onChange'>; onFocus?: Pick, 'onFocus'>; onMouseDown?: Pick, 'onMouseDown'>; onTouchStart?: Pick, 'onTouchStart'>; - setDisabled: (disabled: boolean) => void; - setInputId: (id: string | number) => void; - handleFocusChange: (isFocused: boolean) => void; + setDisabled?: (disabled: boolean) => void; + setInputId?: (id: string | number) => void; + handleFocusChange?: (isFocused: boolean) => void; }; type InputElementProps = Exclude, 'ref'>; type TextareaElementProps = Exclude, 'ref'>; -type Props = InputProps & (T extends HTMLInputElement ? InputElementProps : TextareaElementProps); +type Props + = InputProps & (T extends HTMLInputElement ? InputElementProps : TextareaElementProps); interface InputState { wasUserTriggeredChange: boolean; @@ -61,7 +60,7 @@ const VALIDATION_ATTR_WHITELIST: ValidationAttrWhiteList[] = [ ]; -export default class Input extends React.Component< +export default class Input extends React.Component< Props, InputState > { inputElement_: React.RefObject< @@ -94,7 +93,7 @@ export default class Input extends React.Component< isValid, } = this.props; if (setInputId && id) { - setInputId(id); + setInputId(id!); } if (setDisabled && disabled) { setDisabled(true); @@ -111,28 +110,28 @@ export default class Input extends React.Component< componentDidUpdate(prevProps: Props) { const { id, - handleValueChange, - setInputId, - setDisabled, foundation, value, disabled, isValid, + handleValueChange, + setInputId, + setDisabled, } = this.props; this.handleValidationAttributeUpdate(prevProps); if (disabled !== prevProps.disabled) { - setDisabled(disabled); + setDisabled && setDisabled(disabled!); foundation.setDisabled(disabled); } if (id !== prevProps.id) { - setInputId(id); + setInputId && setInputId(id!); } if (value !== prevProps.value) { - handleValueChange(value, () => { + handleValueChange && handleValueChange(value, () => { // only call #foundation.setValue on programatic changes; // not changes by the user. if (this.state.wasUserTriggeredChange) { @@ -165,14 +164,14 @@ export default class Input extends React.Component< handleFocus = (evt: React.FocusEvent) => { const {foundation, handleFocusChange, onFocus = () => {}} = this.props; foundation.activateFocus(); - handleFocusChange(true); + handleFocusChange && handleFocusChange(true); onFocus(evt); }; handleBlur = (evt: React.FocusEvent) => { const {foundation, handleFocusChange, onBlur = () => {}} = this.props; foundation.deactivateFocus(); - handleFocusChange(false); + handleFocusChange && handleFocusChange(false); onBlur(evt); }; diff --git a/packages/text-field/helper-text/index.tsx b/packages/text-field/helper-text/index.tsx index cb27f2797..73000fcd9 100644 --- a/packages/text-field/helper-text/index.tsx +++ b/packages/text-field/helper-text/index.tsx @@ -25,15 +25,15 @@ import * as classnames from 'classnames'; import {MDCTextFieldHelperTextFoundation} from '@material/textfield/dist/mdc.textfield'; export interface HelperTextProps { - 'aria-hidden': boolean; + 'aria-hidden'?: boolean; children: React.ReactNode; - className: string; - isValid: boolean; - isValidationMessage: boolean; - persistent: boolean; + className?: string; + isValid?: boolean; + isValidationMessage?: boolean; + persistent?: boolean; role?: string; - showToScreenReader: boolean; - validation: boolean; + showToScreenReader?: boolean; + validation?: boolean; }; interface HelperTextState { @@ -61,7 +61,7 @@ export default class HelperText extends React.Component< constructor(props: HelperTextProps) { super(props); this.state = { - 'aria-hidden': props['aria-hidden'], + 'aria-hidden': props['aria-hidden']!, 'role': props.role, 'classList': new Set(), }; diff --git a/packages/text-field/index.tsx b/packages/text-field/index.tsx index c2b4158c6..ebb7334b6 100644 --- a/packages/text-field/index.tsx +++ b/packages/text-field/index.tsx @@ -30,28 +30,28 @@ import FloatingLabel from '@material/react-floating-label'; import LineRipple from '@material/react-line-ripple'; import NotchedOutline from '@material/react-notched-outline'; -export interface Props { +export interface Props { // InputProps includes the prop `id`, which we use below in the constructor 'children.props'?: InputProps; children: React.ReactElement>; - className: string; - dense: boolean; - floatingLabelClassName: string; - fullWidth: boolean; + className?: string; + dense?: boolean; + floatingLabelClassName?: string; + fullWidth?: boolean; helperText?: React.ReactElement; - isRtl: boolean; - label: React.ReactNode; + isRtl?: boolean; + label?: React.ReactNode; leadingIcon?: React.ReactElement>; - lineRippleClassName: string; - notchedOutlineClassName: string; - outlined: boolean; + lineRippleClassName?: string; + notchedOutlineClassName?: string; + outlined?: boolean; onLeadingIconSelect?: () => void; onTrailingIconSelect?: () => void; - textarea: boolean; + textarea?: boolean; trailingIcon?: React.ReactElement>; }; -type TextFieldProps = Props & React.HTMLProps; +type TextFieldProps = Props & React.HTMLProps; interface TextFieldState { foundation?: MDCTextFieldFoundation; @@ -71,7 +71,7 @@ interface TextFieldState { isValid: boolean; }; -class TextField extends React.Component, TextFieldState> { +class TextField extends React.Component, TextFieldState> { floatingLabelElement: React.RefObject = React.createRef(); inputComponent_: null | Input = null;