feat(Cascader): add disabled props(#723)

uiwjs · Mar 29, 2022 · f92c7e7 · f92c7e7
1 parent 8e8bf3d
commit f92c7e7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
@@ -8,7 +8,7 @@ Cascader 级联选择
 级联选择框。v4.16.0中添加
 
 ```jsx
-import { Cascader  } from 'uiw';
+import { Cascader, Row, Col  } from 'uiw';
 // or
 import Cascader from '@uiw/react-cascader';
 ```
@@ -56,15 +56,29 @@ const Demo = () => {
   ];
 
   return (
-    <div style={{ width: 200 }}>
-    < Cascader
-        allowClear={true}
-        placeholder="请选择"
-        value={[1, 4, 7]}
-        option={options}
-        onChange={(value, seleteds) => console.log(value, seleteds)}
-      />
-    </div>
+    <Row>
+      <Row>
+        <Cascader
+          style={{ width:200 }}
+          allowClear={true}
+          placeholder="请选择"
+          value={[1, 4, 7]}
+          option={options}
+          onChange={(value, seleteds) => console.log(value, seleteds)}
+        />
+      </Row>
+      <Row style={{ marginLeft: 20 }}>
+        <Cascader
+          style={{ width:200 }}
+          allowClear={true}
+          placeholder="请选择"
+          value={[1, 4, 7]}
+          disabled={true}
+          option={options}
+          onChange={(value, seleteds) => console.log(value, seleteds)}
+        />
+      </Row>
+    </Row>
   )
 };
 ReactDOM.render(<Demo />, _mount_);
@@ -113,16 +127,15 @@ const Demo = () => {
   ];
 
   return (
-    <div style={{ width: 200 }}>
-      <Cascader
-        allowClear={true}
-        placeholder="请选择"
-        value={[1, 4, 7]}
-        option={options}
-        onChange={(value, seleteds) => console.log(value, seleteds)}
-        onSearch={(text)=> console.log('text', text)}
-      />
-    </div>
+    <Cascader
+      style={{ width: 200 }}
+      allowClear={true}
+      placeholder="请选择"
+      value={[1, 4, 7]}
+      option={options}
+      onChange={(value, seleteds) => console.log(value, seleteds)}
+      onSearch={(text)=> console.log('text', text)}
+    />
   )
 };
 ReactDOM.render(<Demo />, _mount_);
@@ -244,6 +257,7 @@ ReactDOM.render(<Demo />, _mount_);
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | ---- | ---- | ---- | ---- | ---- |
 | allowClear | 支持清除 | Boolean | `false` | - |
+| disabled | 禁用选择器 | Boolean | `false` | - |
 | placeholder | 选择框默认文字 | String | - | - |
 | option | 选项菜单 | { value: String \| Number, label: React.ReactNode, children: Array<String \| Number>} | - | - |
 | value | 指定当前选中的条目，多选时为一个数组 | String[] \| Number[] | - | - |

diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx
@@ -17,6 +17,7 @@ export interface CascaderProps extends IProps, DropdownProps {
   onSearch?: boolean | ((searchText: string) => void);
   allowClear?: boolean;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 function Cascader(props: CascaderProps) {
@@ -25,6 +26,7 @@ function Cascader(props: CascaderProps) {
     onChange,
     onSearch,
 
+    disabled,
     allowClear,
     placeholder,
     prefixCls = 'w-cascader',
@@ -131,7 +133,7 @@ function Cascader(props: CascaderProps) {
     onSearch && handelSearch(value);
   };
 
-  const widths = (style?.width as number) * 0.5 || undefined;
+  const widths = (style?.width as number) * 0.7 || undefined;
 
   const OptionIter = (option: Array<OptionType>, level: number = 0) => {
     if (!option) return;
@@ -178,6 +180,7 @@ function Cascader(props: CascaderProps) {
       trigger="click"
       style={{ marginTop: 5, ...style }}
       overlayStyl={{ width: 100 }}
+      disabled={disabled}
       {...others}
       onVisibleChange={onVisibleChange}
       isOpen={innerIsOpen}
@@ -225,14 +228,15 @@ function Cascader(props: CascaderProps) {
         <Input
           value={searchOn ? searchText : inputValue}
           onChange={inputChange}
+          disabled={disabled}
           placeholder={searchOn ? inputValue : placeholder}
           style={{ width: style?.width }}
           onFocus={() => onSearch && setSearchOn(true)}
           onBlur={() => onSearch && setSearchOn(false)}
           readOnly={!onSearch}
           addonAfter={
             <span style={{ width: 'auto' }}>
-              {selectIconType === 'close' && (
+              {!disabled && selectIconType === 'close' && (
                 <Icon type={selectIconType} onClick={onClear} className={`${prefixCls}-close`} />
               )}
             </span>