feat(text-field): character counter (#861)

packages/list/ListItem.tsx

@@ -29,7 +29,9 @@ import {MDCListFoundation} from '@material/list/foundation';
 import {ListItemContext, ListItemContextShape} from './index';
 
 export interface ListItemProps<T extends HTMLElement = HTMLElement>
-  extends React.HTMLProps<T>, ListItemContextShape, InjectedProps<T> {
+  extends React.HTMLProps<T>,
+    ListItemContextShape,
+    InjectedProps<T> {
   checkboxList?: boolean;
   radioList?: boolean;
   tag?: string;

packages/menu/MenuListItem.tsx

@@ -36,9 +36,9 @@ class MenuListItem<T extends HTMLElement = HTMLElement> extends React.Component<
     const {
       role = 'menuitem',
       children,
-      /* eslint-disable no-unused-vars */
+      /* eslint-disable @typescript-eslint/no-unused-vars */
       computeBoundingRect,
-      /* eslint-disable no-unused-vars */
+      /* eslint-disable @typescript-eslint/no-unused-vars */
       ...otherProps
     } = this.props;
 

packages/text-field/character-counter/README.md

@@ -0,0 +1,59 @@
+# React Text Field Character Counter
+
+MDC React Text Field Character Counter is a React Component which uses [MDC Text Field Character Counter](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield/character-counter)'s Sass and Foundational JavaScript logic.
+
+## Usage
+
+```js
+import CharacterCounter from '@material/react-text-field/character-counter/index.js';
+
+const MyComponent = () => {
+  return (
+    <CharacterCounter />
+  );
+}
+```
+
+## Props
+
+Prop Name | Type | Description
+--- | --- | ---
+className | String | CSS classes for element.
+template | String | You can set custom template. [See below](#custom-template)
+
+## Custom Template
+
+CharacterCounter provides customization with the `template` prop in CharacterCounter.
+The `template` prop accepts the `${count}` and `${maxLength}` arguments.  
+The default template is `${count} / ${maxLength}`, so it appears `0 / 140`.  
+If you set template as `${count} : ${maxLength}`, it appears as `0 : 140`.  
+
+### Sample
+
+``` js
+import React from 'react';
+import TextField, {CharacterCounter, Input} from '@material/react-text-field';
+
+class MyApp extends React.Component {
+  state = {value: 'Happy Coding!'};
+
+  render() {
+    return (
+      <TextField characterCounter={<CharacterCounter template='${count} : ${maxLength}' />}>
+        <Input
+          maxLength={140}
+          value={this.state.value}
+          onChange={(e) => this.setState({value: e.target.value})}
+        />
+      </TextField>
+    );
+  }
+}
+```
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the Components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield/character-counter#sass-mixins)

packages/text-field/character-counter/index.scss

@@ -0,0 +1,23 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@import "@material/textfield/character-counter/mdc-text-field-character-counter";

packages/text-field/character-counter/index.tsx

@@ -0,0 +1,93 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import React from 'react';
+import classnames from 'classnames';
+import {MDCTextFieldCharacterCounterAdapter} from '@material/textfield/character-counter/adapter';
+import {MDCTextFieldCharacterCounterFoundation} from '@material/textfield/character-counter/foundation';
+
+const cssClasses = MDCTextFieldCharacterCounterFoundation.cssClasses;
+
+const TEMPLATE = {
+  COUNT: '${count}',
+  MAX_LENGTH: '${maxLength}',
+};
+
+export interface CharacterCounterProps extends React.HTMLProps<HTMLDivElement> {
+  count?: number;
+  maxLength?: number;
+  template?: string;
+}
+
+export default class CharacterCounter extends React.Component<
+  CharacterCounterProps
+> {
+  foundation = new MDCTextFieldCharacterCounterFoundation(this.adapter);
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  get adapter(): MDCTextFieldCharacterCounterAdapter {
+    return {
+      // Please manage content through JSX
+      setContent: () => undefined,
+    };
+  }
+
+  renderTemplate(template: string) {
+    const {count = 0, maxLength = 0} = this.props;
+
+    return template
+      .replace(TEMPLATE.COUNT, count.toString())
+      .replace(TEMPLATE.MAX_LENGTH, maxLength.toString());
+  }
+
+  get classes() {
+    return classnames(cssClasses.ROOT, this.props.className);
+  }
+
+  get otherProps() {
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      className,
+      count,
+      maxLength,
+      template,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      ...otherProps
+    } = this.props;
+
+    return otherProps;
+  }
+
+  render() {
+    const {template} = this.props;
+
+    return (
+      <div className={this.classes} {...this.otherProps}>
+        {this.renderTemplate(
+          template ? template : `${TEMPLATE.COUNT} / ${TEMPLATE.MAX_LENGTH}`
+        )}
+      </div>
+    );
+  }
+}

packages/text-field/index.tsx

@@ -31,8 +31,9 @@ import {
 } from '@material/textfield/adapter';
 import {MDCTextFieldFoundation} from '@material/textfield/foundation';
 import Input, {InputProps} from './Input';
-import Icon, {IconProps} from './icon/index';
-import HelperText, {HelperTextProps} from './helper-text/index';
+import Icon, {IconProps} from './icon';
+import HelperText, {HelperTextProps} from './helper-text';
+import CharacterCounter, {CharacterCounterProps} from './character-counter';
 import FloatingLabel from '@material/react-floating-label';
 import LineRipple from '@material/react-line-ripple';
 import NotchedOutline from '@material/react-notched-outline';
@@ -48,7 +49,7 @@ export interface Props<T extends HTMLElement = HTMLInputElement> {
   floatingLabelClassName?: string;
   fullWidth?: boolean;
   helperText?: React.ReactElement<HelperTextProps>;
-  characterCounter?: React.ReactElement<any>;
+  characterCounter?: React.ReactElement<CharacterCounterProps>;
   label?: React.ReactNode;
   leadingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
   lineRippleClassName?: string;
@@ -82,6 +83,7 @@ interface TextFieldState {
 class TextField<
   T extends HTMLElement = HTMLInputElement
 > extends React.Component<TextFieldProps<T>, TextFieldState> {
+  textFieldElement: React.RefObject<HTMLDivElement> = React.createRef();
   floatingLabelElement: React.RefObject<FloatingLabel> = React.createRef();
   inputComponent_: null | Input<T> = null;
 
@@ -175,6 +177,7 @@ class TextField<
       floatingLabelClassName,
       fullWidth,
       helperText,
+      characterCounter,
       label,
       leadingIcon,
       lineRippleClassName,
@@ -278,10 +281,11 @@ class TextField<
     };
   }
 
-  inputProps(child: React.ReactElement<InputProps<T>>) {
+  get inputProps() {
     // ref does exist on React.ReactElement<InputProps<T>>
     // @ts-ignore
-    const {props} = child;
+    const {props} = React.Children.only(this.props.children);
+
     return Object.assign({}, props, {
       foundation: this.state.foundation,
       handleFocusChange: (isFocused: boolean) => {
@@ -300,6 +304,14 @@ class TextField<
     });
   }
 
+  get characterCounterProps() {
+    const {value, maxLength} = this.inputProps;
+    return {
+      count: value ? value.length : 0,
+      maxLength: maxLength ? parseInt(maxLength) : 0,
+    };
+  }
+
   /**
    * render methods
    */
@@ -323,11 +335,15 @@ class TextField<
           className={this.classes}
           onClick={() => foundation!.handleTextFieldInteraction()}
           onKeyDown={() => foundation!.handleTextFieldInteraction()}
+          ref={this.textFieldElement}
           key='text-field-container'
         >
           {leadingIcon
             ? this.renderIcon(leadingIcon, onLeadingIconSelect)
             : null}
+          {textarea &&
+            characterCounter &&
+            this.renderCharacterCounter(characterCounter)}
           {this.renderInput()}
           {this.notchedOutlineAdapter.hasOutline() ? (
             this.renderNotchedOutline()
@@ -352,8 +368,7 @@ class TextField<
     const child: React.ReactElement<InputProps<T>> = React.Children.only(
       this.props.children
     );
-    const props = this.inputProps(child);
-    return React.cloneElement(child, props);
+    return React.cloneElement(child, this.inputProps);
   }
 
   renderLabel() {
@@ -402,12 +417,14 @@ class TextField<
 
   renderHelperLine(
     helperText?: React.ReactElement<HelperTextProps>,
-    characterCounter?: React.ReactElement<any>
+    characterCounter?: React.ReactElement<CharacterCounterProps>
   ) {
     return (
       <div className={cssClasses.HELPER_LINE}>
         {helperText && this.renderHelperText(helperText)}
-        {characterCounter}
+        {characterCounter &&
+          !this.props.textarea &&
+          this.renderCharacterCounter(characterCounter)}
       </div>
     );
   }
@@ -436,7 +453,25 @@ class TextField<
       </Icon>
     );
   }
+
+  renderCharacterCounter(
+    characterCounter: React.ReactElement<CharacterCounterProps>
+  ) {
+    return React.cloneElement(
+      characterCounter,
+      Object.assign(this.characterCounterProps, characterCounter.props)
+    );
+  }
 }
 
-export {Icon, HelperText, Input, IconProps, HelperTextProps, InputProps};
+export {
+  Icon,
+  HelperText,
+  CharacterCounter,
+  Input,
+  IconProps,
+  HelperTextProps,
+  CharacterCounterProps,
+  InputProps,
+};
 export default TextField;

test/screenshot/golden.json

@@ -22,6 +22,7 @@
   "tab-bar": "6c28ec268b2baf308459e7df9d7471fb7907b6473240b9a28a81be54a335f932",
   "tab-indicator": "7ce7ce8fd50301c67d7ebfb0ba953208260ce2881bee0c7e640c46bf60dc90b6",
   "tab-scroller": "468866dd0c222b36b55485ab44a5760133a4ddfb2a6cf81e6ae4672d7e02a447",
+  "text-field/character-counter": "b6c744bd58b76dd7d3794fa84dae98e44a612b11f7e6dab895e91aceae8aba73",
   "text-field/helper-text": "59604d0f39e0846fc97aae7573d317dded215282a677e4641c5e33426e3a2a1e",
   "text-field/icon": "0bbc8c762d27071e55983e5742548d166864b6fcebc0b9f1e413523fb93b7075",
   "text-field/textArea": "dde78e3f154a8b910a989f8ce96e320e7ad2b3e199e6e7a81034174c598cbd9d",

test/screenshot/screenshot-test-urls.tsx

@@ -25,6 +25,7 @@ const urls = [
   'tab-bar',
   'tab-indicator',
   'tab-scroller',
+  'text-field/character-counter',
   'text-field/helper-text',
   'text-field/icon',
   'typography',

test/screenshot/text-field/TestTextField.tsx

@@ -54,6 +54,7 @@ class TestField extends React.Component<TestFieldProps, TestFieldState> {
             required={required}
             disabled={disabled}
             onChange={this.onChange}
+            maxLength={140}
           />
         </TextField>
       </div>