Merge 1c207d7 into c2c3c64

growingio · Nov 10, 2020 · 3db87ad · 3db87ad
2 parents c2c3c64 + 1c207d7
commit 3db87ad
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 24 deletions.
diff --git a/packages/components/src/components/input/Input.tsx b/packages/components/src/components/input/Input.tsx
@@ -7,6 +7,7 @@ const InputFC: React.FC<InputProps> = (props: InputProps) => {
   const sizeContext = useContext(SizeContext);
   const {
     type = 'text',
+    value,
     onChange,
     onPressEnter,
     disabled = false,
@@ -92,7 +93,7 @@ const InputFC: React.FC<InputProps> = (props: InputProps) => {
       <input
         className={inputClass}
         type={type}
-        value={rest.value ?? ''}
+        value={value ?? ''}
         onChange={handleOnChange}
         onKeyDown={handleOnPressEnter}
         style={innerStyle}

diff --git a/packages/components/src/components/input/interfaces.ts b/packages/components/src/components/input/interfaces.ts
@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-type InputPropsSuper = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-
-export interface InputProps extends Omit<InputPropsSuper, 'prefix'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
   onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;

diff --git a/packages/website/src/components/basic/input/demo/Input.tsx b/packages/website/src/components/basic/input/demo/Input.tsx
@@ -7,16 +7,16 @@ export default () => {
   const [inputValue1, setInputValue1] = React.useState('');
   const [inputValue2, setInputValue2] = React.useState('');
   const [inputValue3, setInputValue3] = React.useState('333');
-  const onChange = (e: React.FocusEvent<HTMLInputElement>) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
-  const onChange1 = (e: React.FocusEvent<HTMLInputElement>) => {
+  const onChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue1(e.target.value);
   };
-  const onChange2 = (e: React.FocusEvent<HTMLInputElement>) => {
+  const onChange2 = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue2(e.target.value);
   };
-  const onChange3 = (e: React.FocusEvent<HTMLInputElement>) => {
+  const onChange3 = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue3(e.target.value);
   };
 
@@ -27,6 +27,7 @@ export default () => {
         size="small"
         value={inputValue}
         onChange={onChange}
+        maxLength={10}
         style={{ display: 'block', marginBottom: '20px' }}
       />
 

diff --git a/packages/website/src/components/basic/input/demo/TextArea.tsx b/packages/website/src/components/basic/input/demo/TextArea.tsx
@@ -13,7 +13,7 @@ export default () => {
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         resize={false}
-        style={{ marginBottom: '20px', display: 'block' }}
+        style={{ marginBottom: '20px', display: 'block', height: 'auto' }}
       />
 
       <Input.TextArea
@@ -22,7 +22,7 @@ export default () => {
         onChange={(e) => setInputValue2(e.target.value)}
         disabled={true}
         resize={true}
-        style={{ display: 'block' }}
+        style={{ display: 'block', height: 'auto' }}
       />
     </div>
   );

diff --git a/packages/website/src/components/basic/input/index.zh-CN.md b/packages/website/src/components/basic/input/index.zh-CN.md
@@ -31,31 +31,34 @@ group:
 | 参数         | 说明                             | 类型                       | 默认值   |
 | ------------ | -------------------------------- | -------------------------- | -------- |
 | value        | 值                               | string                     | 必填     |
-| onChange     | 修改值时触发的回调函数           | Function(value: string)    | 必填     |
+| onPressEnter | 按下回车时的回调                 | Function(e: React.KeyboardEvent)   | -        |
 | type         | 同原生 input 的 type             | string                     | 'text'   |
 | size         | input 大小                       | 'large'、'middle'、'small' | 'middle' |
-| onPressEnter | 按下回车时的回调                 | Function(e)                | -        |
 | disabled     | 是否禁用                         | boolean                    | false    |
 | maxLength    | 输入文字的最大长度               | number                     | -        |
 | placeholder  | 默认显示文本                     | string                     | -        |
-| inputStyle   | input 的 style                   | React.CSSProperties        | -        |
-| wrapStyle    | input 组件外层容器的 style       | React.CSSProperties        | -        |
-| suffix       | input 的后缀图标                 | React.ReactNode            | -        |
+| style        | input 组件外层容器的 style (若存在，忽略 wrapStyle 和 inputStyle)       | React.CSSProperties        | -        |
+| inputStyle   | input 的 style (兼容老版本，后续会去掉)   | React.CSSProperties        | -        |
+| wrapStyle    | input 组件外层容器的 style (兼容老版本，后续会去掉)  | React.CSSProperties        | -        |
+| prefix       | input 的前缀图标                | React.ReactNode            | -        |
+| prefixWidth  | input 的左内边距                | number            | -        |
+| suffix       | input 的后缀图标                | React.ReactNode            | -        |
+| suffixWidth  | input 的右内边距                | number            | -        |
 | ...          | 支持其他 React 自带的 input 属性 | any                        | -        |
 
 ### Input.Password
 
 | 参数         | 说明                             | 类型                       | 默认值   |
 | ------------ | -------------------------------- | -------------------------- | -------- |
 | value        | 值                               | string                     | 必填     |
-| onChange     | 修改值时触发的回调函数           | Function(value: string)    | 必填     |
 | size         | input 大小                       | 'large'、'middle'、'small' | 'middle' |
-| onPressEnter | 按下回车时的回调                 | Function(e)                | -        |
+| onPressEnter | 按下回车时的回调                 | Function(e: React.KeyboardEvent)   | -        |
 | disabled     | 是否禁用                         | boolean                    | false    |
 | maxLength    | 输入文字的最大长度               | number                     | -        |
 | placeholder  | 默认显示文本                     | string                     | -        |
-| inputStyle   | input 的 style                   | React.CSSProperties        | -        |
-| wrapStyle    | input 组件外层容器的 style       | React.CSSProperties        | -        |
+| style        | input 组件外层容器的 style (若存在，忽略 wrapStyle 和 inputStyle)       | React.CSSProperties        | -        |
+| inputStyle   | input 的 style  (兼容老版本，后续会去掉)   | React.CSSProperties        | -        |
+| wrapStyle    | input 组件外层容器的 style   (兼容老版本，后续会去掉)  | React.CSSProperties        | -        |
 | ...          | 支持其他 React 自带的 input 属性 | any                        | -        |
 
 ### Input.InputNumber
@@ -68,8 +71,9 @@ group:
 | onPressEnter | 按下回车时的回调                 | Function(e)                | -                          |
 | disabled     | 是否禁用                         | boolean                    | false                      |
 | placeholder  | 默认显示文本                     | string                     | -                          |
-| inputStyle   | input 的 style                   | React.CSSProperties        | -                          |
-| wrapStyle    | input 组件外层容器的 style       | React.CSSProperties        | -                          |
+| style        | input 组件外层容器的 style (若存在，忽略 wrapStyle 和 inputStyle)       | React.CSSProperties        | -        |
+| inputStyle   | input 的 style  (兼容老版本，后续会去掉)   | React.CSSProperties        | -                          |
+| wrapStyle    | input 组件外层容器的 style  (兼容老版本，后续会去掉)  | React.CSSProperties        | -                          |
 | max          | 最大值                           | number                     | `Number.MAX_SAFE_INTEGER`  |
 | min          | 最小值                           | number                     | `-Number.MAX_SAFE_INTEGER` |
 | ...          | 支持其他 React 自带的 input 属性 | any                        | -                          |
@@ -79,11 +83,11 @@ group:
 | 参数        | 说明                                | 类型                    | 默认值 |
 | ----------- | ----------------------------------- | ----------------------- | ------ |
 | value       | 值                                  | string                  | 必填   |
-| onChange    | 修改值时触发的回调函数              | Function(value: string) | 必填   |
 | disabled    | 是否禁用                            | boolean                 | false  |
 | resize      | 是否可拖动大小                      | boolean                 | false  |
 | maxLength   | 输入文字的最大长度                  | number                  | -      |
 | placeholder | 默认显示文本                        | string                  | -      |
-| inputStyle  | input 的 style                      | React.CSSProperties     | -      |
-| wrapStyle   | input 组件外层容器的 style          | React.CSSProperties     | -      |
+| style        | textarea 组件外层容器的 style (若存在，忽略 wrapStyle 和 inputStyle)       | React.CSSProperties        | -        |
+| inputStyle  | textarea 的 style  (兼容老版本，后续会去掉)  | React.CSSProperties     | -      |
+| wrapStyle   | textarea 组件外层容器的 style  (兼容老版本，后续会去掉)  | React.CSSProperties     | -      |
 | ...         | 支持其他 React 自带的 textarea 属性 | any                     | -      |