fix(input): fix internal className will be cover (#431)

affects: @gio-design/components
growingio · Nov 10, 2020 · c2c3c64 · c2c3c64
1 parent 9e6373b
commit c2c3c64
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 237 deletions.
diff --git a/...es/components/src/components/date-picker/__tests__/__snapshots__/data-picker.spec.js.snap b/...es/components/src/components/date-picker/__tests__/__snapshots__/data-picker.spec.js.snap
@@ -14,7 +14,7 @@ initialize {
         "children": Array [
           Object {
             "attribs": Object {
-              "class": "gio-input-content gio-input-content-medium",
+              "class": "gio-input-content gio-input-content-middle",
               "placeholder": "请输入…",
               "type": "text",
               "value": "2015/06/01",
@@ -86,7 +86,7 @@ initialize {
           "children": Array [
             Object {
               "attribs": Object {
-                "class": "gio-input-content gio-input-content-medium",
+                "class": "gio-input-content gio-input-content-middle",
                 "placeholder": "请输入…",
                 "type": "text",
                 "value": "2015/06/01",

diff --git a/packages/components/src/components/input/Input.tsx b/packages/components/src/components/input/Input.tsx
@@ -1,28 +1,30 @@
-import * as React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { InputProps, InputNumberProps, TextAreaProps } from './interfaces';
-
+import { SizeContext } from '../config-provider/SizeContext';
 export const prefixCls = 'gio-input';
-
-const InputFC: React.FC<InputProps> = ({
-  type = 'text',
-  onChange,
-  onPressEnter,
-  disabled = false,
-  readOnly = false,
-  placeholder = '',
-  size = 'medium',
-  prefix,
-  prefixWidth,
-  suffix,
-  suffixWidth,
-  style,
-  wrapStyle,
-  inputStyle,
-  forwardRef,
-  ...rest
-}: InputProps) => {
-  const wrapClass = classNames(prefixCls, {
+const InputFC: React.FC<InputProps> = (props: InputProps) => {
+  const sizeContext = useContext(SizeContext);
+  const {
+    type = 'text',
+    onChange,
+    onPressEnter,
+    disabled = false,
+    readOnly = false,
+    placeholder = '',
+    size = sizeContext || 'middle',
+    prefix,
+    prefixWidth,
+    suffix,
+    suffixWidth,
+    style,
+    wrapStyle,
+    inputStyle,
+    forwardRef,
+    className,
+    ...rest
+  } = props;
+  const wrapClass = classNames(prefixCls, className, {
     [`${prefixCls}-container`]: !!suffix || !!prefix,
   });
 
@@ -36,7 +38,7 @@ const InputFC: React.FC<InputProps> = ({
     },
     {
       [`${prefixCls}-content-prefix`]: !!prefix,
-    },
+    }
   );
 
   const handleOnPressEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -57,32 +59,32 @@ const InputFC: React.FC<InputProps> = ({
     if (!prefix) {
       return null;
     }
-    return <div className={`${prefixCls}-container-prefix`}>{prefix}</div>
+    return <div className={`${prefixCls}-container-prefix`}>{prefix}</div>;
   };
 
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (typeof onChange === 'function') {
-      onChange(e)
+      onChange(e);
     }
   };
 
-  const outerStyle = style !== undefined ? style : (wrapStyle || {})
-  const innerStyle = style !== undefined ? {} : (inputStyle || {})
+  const outerStyle = style !== undefined ? style : wrapStyle || {};
+  const innerStyle = style !== undefined ? {} : inputStyle || {};
   if (wrapStyle !== undefined || inputStyle !== undefined) {
     console.warn(
       'The latest version of Input only accept "style" for inline-style setting, ' +
-      'please fix your code because the deprecated parameter "wrapStyle" and "inputStyle" ' +
-      'will be removed in the future version'
-    )
-  };
+        'please fix your code because the deprecated parameter "wrapStyle" and "inputStyle" ' +
+        'will be removed in the future version'
+    );
+  }
 
   if (typeof prefixWidth === 'number') {
     innerStyle.paddingLeft = prefixWidth;
-  };
+  }
 
   if (typeof suffixWidth === 'number') {
     innerStyle.paddingRight = suffixWidth;
-  };
+  }
 
   return (
     <div className={wrapClass} style={outerStyle}>