feat(Textfield): support trailing and leading icons (#50)

kradio3 · Dec 2, 2017 · 279deff · 279deff
1 parent 29c1a25
commit 279deff
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 23 deletions.
diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Children } from 'react';
-/* eslint-disable import/no-unresolved, import/extensions*/
+/* eslint-disable import/no-unresolved, import/extensions */
 import { clamp } from './util';
-/* eslint-enable import/no-unresolved, import/extensions*/
+/* eslint-enable import/no-unresolved, import/extensions */
 import AnimationController from '../Animation/AnimationController';
 import DocumentClickHandler from './DocumentClickHandler';
 import MenuList from './MenuList';

diff --git a/src/Menu/scaleCalculator.js b/src/Menu/scaleCalculator.js
@@ -1,6 +1,6 @@
-/* eslint-disable import/no-unresolved, import/extensions*/
+/* eslint-disable import/no-unresolved, import/extensions */
 import { clamp, bezierProgress } from './util';
-/* eslint-enable import/no-unresolved, import/extensions*/
+/* eslint-enable import/no-unresolved, import/extensions */
 
 import { TRANSITION_SCALE_ADJUSTMENT_X, TRANSITION_SCALE_ADJUSTMENT_Y } from './constants';
 

diff --git a/src/Textfield/Field.js b/src/Textfield/Field.js
@@ -1,14 +1,17 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import classnames from 'classnames';
+import Icon from '../Icon';
 
 const propTypes = {
+  box: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   focused: PropTypes.bool,
   invalid: PropTypes.bool,
   textarea: PropTypes.bool,
+  trailingIcon: PropTypes.bool,
 };
 
 const ROOT = 'mdc-text-field';
@@ -17,18 +20,47 @@ const DISABLED = `${ROOT}--disabled`;
 const FOCUSED = `${ROOT}--focused`;
 const INVALID = `${ROOT}--invalid`;
 const UPGRADED = `${ROOT}--upgraded`;
+const BOX = `${ROOT}--box`;
+const LEADING_ICON = `${ROOT}--with-leading-icon`;
+const TRAILING_ICON = `${ROOT}--with-trailing-icon`;
+const ICON = `${ROOT}__icon`;
 
-const Field = ({ className, focused, disabled, invalid, children, textarea }) => (
-  <div
-    className={classnames(ROOT, {
-      [TEXTAREA]: textarea,
-      [FOCUSED]: focused,
-      [DISABLED]: disabled,
-      [INVALID]: invalid,
-    }, UPGRADED, className)}
-  >
-    {children}
-  </div>
-);
+const Field = ({
+  className,
+  box,
+  focused,
+  disabled,
+  invalid,
+  children,
+  textarea,
+  trailingIcon,
+}) => {
+  let hasIcon = false;
+  const childs = Children.map(children, (child) => {
+    if (child && child.type === Icon) {
+      hasIcon = true;
+      const { className: childClassName } = child.props;
+      const classes = classnames(ICON, childClassName);
+      return cloneElement(child, { childClassName: classes });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      className={classnames(ROOT, {
+        [TEXTAREA]: textarea,
+        [BOX]: box,
+        [FOCUSED]: focused,
+        [DISABLED]: disabled,
+        [INVALID]: invalid,
+        [LEADING_ICON]: hasIcon && !trailingIcon,
+        [TRAILING_ICON]: hasIcon && trailingIcon,
+      }, UPGRADED, className)}
+    >
+      {childs}
+    </div>
+  );
+};
 Field.propTypes = propTypes;
 export default Field;
diff --git a/src/Textfield/Helptext.js b/src/Textfield/Helptext.js
@@ -10,9 +10,9 @@ const propTypes = {
   invalid: PropTypes.bool,
 };
 
-const ROOT = 'mdc-text-field-helptext';
-const PERSISTENT = 'mdc-textfield-helptext--persistent';
-const VALIDATION = 'mdc-textfield-helptext--validation-msg';
+const ROOT = 'mdc-text-field-helper-text';
+const PERSISTENT = 'mdc-text-field-helper-text--persistent';
+const VALIDATION = 'mdc-text-field-helper-text--validation-msg';
 
 const Helptext = ({
   children,

diff --git a/src/Textfield/Textfield.js b/src/Textfield/Textfield.js
@@ -9,17 +9,20 @@ import BottomLine from './BottomLine';
 class Textfield extends React.PureComponent {
 
   static propTypes = {
+    box: PropTypes.bool,
+    children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     floatingLabel: PropTypes.string,
     helptext: PropTypes.string,
     helptextPersistent: PropTypes.bool,
     helptextValidation: PropTypes.bool,
-    useInvalidProp: PropTypes.bool,
-    invalid: PropTypes.bool,
     id: PropTypes.string,
-    textarea: PropTypes.bool,
+    invalid: PropTypes.bool,
     required: PropTypes.bool,
+    textarea: PropTypes.bool,
+    trailingIcon: PropTypes.bool,
+    useInvalidProp: PropTypes.bool,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
@@ -41,7 +44,9 @@ class Textfield extends React.PureComponent {
     const focus = this.state.focus;
     let invalid = this.state.invalid;
     const {
+      box,
       className,
+      children,
       disabled,
       floatingLabel,
       helptext, // eslint-disable-line no-unused-vars
@@ -51,6 +56,7 @@ class Textfield extends React.PureComponent {
       invalid: invalidProp,
       id,
       textarea,
+      trailingIcon,
       value, // eslint-disable-line no-unused-vars
       ...otherProps
     } = this.props;
@@ -61,11 +67,14 @@ class Textfield extends React.PureComponent {
     return (
       <Field
         className={className}
+        box={box}
         disabled={disabled}
         focused={focus}
         invalid={invalid}
         textarea={textarea}
+        trailingIcon={trailingIcon}
       >
+        {children}
         <Input
           disabled={disabled}
           id={customId}