feat(Cascader): 增加API参数size和 inputProps (#734)

uiwjs · Apr 1, 2022 · fab5946 · fab5946
1 parent c89cd0c
commit fab5946
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
@@ -84,6 +84,57 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 尺寸
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { Cascader } from 'uiw';
+
+const Demo = () => {
+
+  const options = [
+    {
+      label: '尺寸', value: 1,
+      children: [
+        {
+          label: 'size',
+          value: 2,
+          children: [
+            { label: '小尺寸', value: 3 },
+            { label: '默认尺寸', value: 4 },
+            { label: '大尺寸', value: 5 },
+          ]
+        },
+      ]
+    }
+  ];
+
+  return (
+    <Row style={{ flexDirection: 'column' }}>
+        <Cascader
+          style={{ width: 150 }}
+          value={[1, 2, 3]}
+          option={options}
+          size="small"
+        />
+        <Cascader
+          style={{ width: 175, marginTop: 10 }}
+          value={[1, 2, 4]}
+          option={options}
+        />
+        <Cascader
+          style={{ width: 200, marginTop: 10 }}
+          value={[1, 2, 5]}
+          option={options}
+          size="large"
+        />
+    </Row>
+  )
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## 搜索选项
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -263,3 +314,5 @@ ReactDOM.render(<Demo />, _mount_);
 | value | 指定当前选中的条目，多选时为一个数组 | String[] \| Number[] | - | - |
 | onChange | 选中选项调用此函数 | function( isSeleted, value, selectedOptions) | - | - |
 | onSearch | 开启搜索选项 | functionon(searchText) \| Boolean | - | v4.16.1 |
+| size | 选择框尺寸 | Enum{large, default, small } | `default` | v17.0.1 |
+| inputProps | 传给[Input](http://localhost:3000/#/components/input)组件的参数 | Object | - | v17.0.1 |
diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import Input from '@uiw/react-input';
-import { IProps } from '@uiw/utils';
+import { HTMLInputProps, IProps } from '@uiw/utils';
 import Dropdown, { DropdownProps } from '@uiw/react-dropdown';
 import Menu from '@uiw/react-menu';
 import Icon from '@uiw/react-icon';
@@ -11,13 +11,15 @@ type OptionType = { value: string | number; label: React.ReactNode; children?: A
 type SearchOptionType = { label: string; options: Array<OptionType> };
 
 export interface CascaderProps extends IProps, DropdownProps {
+  size?: 'large' | 'default' | 'small';
   option?: Array<OptionType>;
   value?: ValueType;
   onChange?: (isSeleted: boolean, value: ValueType, selectedOptions: Array<OptionType>) => void;
   onSearch?: boolean | ((searchText: string) => void);
   allowClear?: boolean;
   placeholder?: string;
   disabled?: boolean;
+  inputProps?: HTMLInputProps;
 }
 
 function Cascader(props: CascaderProps) {
@@ -26,6 +28,7 @@ function Cascader(props: CascaderProps) {
     onChange,
     onSearch,
 
+    size,
     disabled,
     allowClear,
     placeholder,
@@ -34,6 +37,7 @@ function Cascader(props: CascaderProps) {
     style = { width: 200 },
     option = [],
     others,
+    inputProps,
   } = props;
 
   const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
@@ -178,7 +182,7 @@ function Cascader(props: CascaderProps) {
     <Dropdown
       className={cls}
       trigger="click"
-      style={{ marginTop: 5, ...style }}
+      style={{ marginTop: 5 }}
       overlayStyl={{ width: 100 }}
       disabled={disabled}
       {...others}
@@ -226,11 +230,13 @@ function Cascader(props: CascaderProps) {
     >
       <span onMouseLeave={() => renderSelectIcon('leave')} onMouseOver={() => renderSelectIcon('enter')}>
         <Input
+          {...inputProps}
           value={searchOn ? searchText : inputValue}
           onChange={inputChange}
+          size={size}
           disabled={disabled}
           placeholder={searchOn ? inputValue : placeholder}
-          style={{ width: style?.width }}
+          style={style}
           onFocus={() => onSearch && setSearchOn(true)}
           onBlur={() => onSearch && setSearchOn(false)}
           readOnly={!onSearch}