diff --git a/package.json b/package.json index e474420fb..eea626b97 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@material/dom": "^0.41.0", "@material/drawer": "^1.0.1", "@material/fab": "^0.41.0", - "@material/floating-label": "^0.41.0", + "@material/floating-label": "^1.0.0", "@material/icon-button": "^0.41.0", "@material/layout-grid": "^0.41.0", "@material/line-ripple": "^1.0.0", diff --git a/packages/floating-label/index.tsx b/packages/floating-label/index.tsx index 645abacc0..923d45194 100644 --- a/packages/floating-label/index.tsx +++ b/packages/floating-label/index.tsx @@ -22,8 +22,8 @@ import * as React from 'react'; import classnames from 'classnames'; -// @ts-ignore no mdc .d.ts -import {MDCFloatingLabelFoundation} from '@material/floating-label/dist/mdc.floatingLabel'; +import {MDCFloatingLabelFoundation} from '@material/floating-label/foundation'; +import {MDCFloatingLabelAdapter} from '@material/floating-label/adapter'; export interface FloatingLabelProps extends React.LabelHTMLAttributes { className?: string; @@ -39,8 +39,8 @@ export default class FloatingLabel extends React.Component< FloatingLabelProps, FloatingLabelState > { - foundation_?: MDCFloatingLabelFoundation; - labelElement_: React.RefObject = React.createRef(); + foundation!: MDCFloatingLabelFoundation; + labelElement: React.RefObject = React.createRef(); static defaultProps: Partial = { className: '', @@ -55,12 +55,12 @@ export default class FloatingLabel extends React.Component< this.initializeFoundation(); this.handleWidthChange(); if (this.props.float) { - this.foundation_.float(true); + this.foundation.float(true); } } componentWillUnmount() { - this.foundation_.destroy(); + this.foundation.destroy(); } componentDidUpdate(prevProps: FloatingLabelProps) { @@ -68,13 +68,13 @@ export default class FloatingLabel extends React.Component< this.handleWidthChange(); } if (this.props.float !== prevProps.float) { - this.foundation_.float(this.props.float); + this.foundation.float(this.props.float!); } } initializeFoundation = () => { - this.foundation_ = new MDCFloatingLabelFoundation(this.adapter); - this.foundation_.init(); + this.foundation = new MDCFloatingLabelFoundation(this.adapter); + this.foundation.init(); }; get classes() { @@ -83,17 +83,26 @@ export default class FloatingLabel extends React.Component< return classnames('mdc-floating-label', Array.from(classList), className); } - get adapter() { + get adapter(): MDCFloatingLabelAdapter { return { addClass: (className: string) => this.setState({classList: this.state.classList.add(className)}), removeClass: this.removeClassFromClassList, + // the adapter methods below are effectively useless since React + // handles events and width differently + registerInteractionHandler: () => undefined, + deregisterInteractionHandler: () => undefined, + // Always returns 0 beacuse MDC Web component does + // only proxies to foundation.getWidth. + // MDC React instead passes it from the text-field + // component to floating-label component. + getWidth: () => 0, }; } // must be called via ref shake = () => { - this.foundation_.shake(true); + this.foundation.shake(true); }; removeClassFromClassList = (className: string) => { @@ -103,9 +112,8 @@ export default class FloatingLabel extends React.Component< }; handleWidthChange = () => { - const {handleWidthChange} = this.props; - if (handleWidthChange && this.labelElement_.current) { - handleWidthChange(this.labelElement_.current.offsetWidth); + if (this.props.handleWidthChange && this.labelElement.current) { + this.props.handleWidthChange(this.labelElement.current.offsetWidth); } }; @@ -126,7 +134,7 @@ export default class FloatingLabel extends React.Component< return (