docs(SearchSelect): 完善示例文档&处理错误示例 (#730)

uiwjs · Mar 31, 2022 · d05ec7e · d05ec7e
1 parent 46f7ec2
commit d05ec7e
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 148 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
 import { SearchSelect,Row,Col } from 'uiw';
 
 const Demo = () => {
-  const selectOption=[
+  const option=[
     { label: 'a1', value: 1 },
     { label: 'a2', value: 2 },
     { label: 'a3', value: 3 },
@@ -32,68 +32,96 @@ const Demo = () => {
     { label: 'a8', value: 8 },
   ]
 
-  const [option, setOption] = React.useState(selectOption);
-  const [loading, setLoading] = React.useState(false);
-  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);
-  const [value, setValue] = React.useState([{label: 'a7', value: 7}]);
-
-function handleSearch(e) {
-    setLoading(true)
-    setTimeout(() =>  {
-     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
-      setOption([...filterOpion]);
-      setLoading(false);
-    }, 500);
-  }
-
   return(
     <Row gutter={20}>
+     <label>单选</label>
+     <Row>
+       <SearchSelect
+         mode="single"
+         style={{ width: 200 }}
+         placeholder="请输入选择"
+         option={option}
+       />
+     </Row>
+     <label>多选</label>
      <Row>
        <SearchSelect
          mode="multiple"
          style={{ width: 200 }}
-         showSearch={true}
-         labelInValue={true}
-         maxTagCount={6}
-         allowClear
-         value={values}
          placeholder="请输入选择"
-         onSearch={handleSearch}
-         // onSelect={(value)=>console.log('onSelect',value)}
-         loading={loading}
          option={option}
-         onChange={(value) => {
-           console.log('value', value)
-           setValues(value)
-         }}
        />
      </Row>
+     <label>禁用</label>
      <Row>
        <SearchSelect
          mode="single"
          style={{ width: 200 }}
-         showSearch={true}
-         labelInValue={true}
-         maxTagCount={6}
-         allowClear
-         value={value}
          placeholder="请输入选择"
-         onSearch={handleSearch}
-         // onSelect={(value)=>console.log('onSelect',value)}
-         loading={loading}
          option={option}
-         onChange={(value) => {
+         disabled={true}
+       />
+     </Row>
+    </Row>
+  );
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
+## 不同的value类型
+
+通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+  const option=[
+    { label: 'a1', value: 1 },
+    { label: 'a2', value: 2 },
+    { label: 'a3', value: 3 },
+    { label: 'a4', value: 4 },
+    { label: 'a5', value: 5 },
+    { label: 'a6', value: 6 },
+    { label: 'a7', value: 7 },
+    { label: 'a8', value: 8 },
+  ]
+
+
+  const [loading, setLoading] = React.useState(false);
+  const [value, setValue] = React.useState([1 ,7]);
+  const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);
+
+  return(
+    <Row gutter={20}>
+     <Row>
+       <SearchSelect
+         mode="multiple"
+         style={{ width: 200 }}
+         value={value}
+         option={option}
+         onChange={(value)=> {
            console.log('value', value)
            setValue(value)
          }}
+         placeholder="请输入选择"
        />
      </Row>
      <Row>
        <SearchSelect
-         mode="single"
+         mode="multiple"
+         labelInValue={true}
          style={{ width: 200 }}
+         option={option}
+         value={labelValue}
+         onChange={(value)=> {
+           console.log('value', value)
+           setLabelValue(value)
+         }}
+         plac
          placeholder="请输入选择"
-         disabled={true}
        />
      </Row>
     </Row>
@@ -104,6 +132,8 @@ ReactDOM.render(<Demo />, _mount_);
 
 ## 限制选项个数
 
+限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个
+
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
@@ -140,7 +170,6 @@ const Demo = () => {
         <SearchSelect
           mode="multiple"
           style={{ width: 200 }}
-          showSearch={true}
           valueAmount={valueAmount}
           allowClear
           value={values}
@@ -161,6 +190,8 @@ ReactDOM.render(<Demo />, _mount_);
 
 ## 显示最大数量
 
+使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示
+
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
@@ -203,7 +234,6 @@ const Demo = () => {
         <SearchSelect
           mode="multiple"
           style={{ width: 200 }}
-          showSearch={true}
           labelInValue={true}
           maxTagCount={maxTagCount}
           allowClear
@@ -222,7 +252,9 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
-## 不可搜索
+## 启用搜索
+
+将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
@@ -242,22 +274,33 @@ const Demo = () => {
   ]
 
   const [values, setValues] = React.useState([1,7]);
+  const [option, setOption] = React.useState(selectOption);
+  const [loading, setLoading] = React.useState(false);
+
+  function handleSearch(e) {
+    setLoading(true)
+    setTimeout(() =>  {
+     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+      setOption([...filterOpion]);
+      setLoading(false);
+    }, 500);
+  }
 
   return(
     <Row style={{ marginLeft: 10 }}>
-        <SearchSelect
-          mode="multiple"
-          style={{ width: 200 }}
-          showSearch={true}
-          labelInValue={false}
-          showSearch={false}
-          placeholder="请输入选择"
-          value={values}
-          option={selectOption}
-          onChange={(value) => {
-            setValues(value)
-          }}
-        />
+      <SearchSelect
+        mode="multiple"
+        showSearch={true}
+        value={values}
+        option={option}
+        loading={loading}
+        onSearch={handleSearch}
+        placeholder="请输入选择"
+        style={{ width: 200 }}
+        onChange={(value) => {
+          setValues(value)
+        }}
+      />
     </Row>
   );
 };