@alicloud/console-components-search 0.1.0 → 0.1.3

package/README.md

@@ -3,11 +3,10 @@
 基础搜索组件： 当前控制台的基础搜索主要针对列表页的搜索场景，此次基础搜索组件主要通过一个简约通用的框架满足控制台针对列表页不同场景下的搜索需求
 按照使用场景分为三种使用场景
 - 场景一：单维度单类别单选 （eg：该功能模块下只支持“实例名称”这唯一类别的搜索）；
-- 场景二：单维度多类别单选（eg：该功能模块下只支持“实例名称”这唯一类别的搜索网络类型包括多个子类别）；
-- 场景三：多维度多类别（eg：该功能模块下支持“网络类型”这一类别和其他同等类别的交集搜索）；
+- 场景二：带着多个筛选维度的输入
 
 ### SearchTagList
-场景二、三需结合SearchTagList使用， SearchTagList用与展示Search已选的筛选条件（以tag的形式），分成两个组件可以更灵活的定位SearchTagList的位置（比如表格场景）
+场景二 需结合SearchTagList使用， SearchTagList用与展示Search已选的筛选条件（以tag的形式），分成两个组件可以更灵活的定位SearchTagList的位置（比如表格场景）
 
 ## install 
 
@@ -87,9 +86,7 @@ async function onSearch (allFileds:any) {
 <div>
   搜索类型：(async 调用)<br />
   <Search
-    mode="single-single"
-    regionId="demo"
-    resourceType="demo"
+    simple
     options={options}
     onSuggest={onSuggestAsync}
     onChange={onChange1}
@@ -97,9 +94,7 @@ async function onSearch (allFileds:any) {
   />
   <br /><br /><br /> 搜索类型：（promise调用）<br />
   <Search
-    mode="single-single"
-    regionId="demo"
-    resourceType="demo"
+    simple
     options={options}
     onSuggest={onSuggestPromise}
     onChange={onChange1}
@@ -107,9 +102,7 @@ async function onSearch (allFileds:any) {
   />
   <br /><br /><br /> 单选类型：<br />
   <Search
-    mode="single-single"
-    regionId="demo"
-    resourceType="demo"
+    simple
     options={options2}
     onChange={onChange1}
     onSearch={onSearch}

package/config/components-with-style.tsx

@@ -1,2 +1,2 @@
 export * from '@alicloud/console-components'
-import '@alicloud/console-components/dist/xconsole.css'
+import '@alicloud/console-components/dist/wind.css'

package/demos/demo1.demo.tsx

@@ -86,52 +86,40 @@ const Demo1: React.FC<IRcSearchProps> = (props) => {
   }
 
   async function onSearch (allFileds:any) {
-    console.log(`onSearch:`, 'allFileds', allFileds)
-    console.log(`提交搜索： ${JSON.stringify(allFileds)}`)
+    alert(JSON.stringify(allFileds))
   }
 
   return (
     <div>
       搜索类型：(async 调用)<br />
       <Search
-        mode="single-single"
-        regionId="demo"
-        resourceType="demo"
+        simple
         options={options}
         onSuggest={onSuggestAsync}
-        onChange={onChange1}
         onSearch={onSearch}
       />
       <br /><br /><br />
       搜索类型：（promise调用）<br />
       <Search
-        mode="single-single"
-        regionId="demo"
+        simple
         resourceType="demo"
         options={options}
         onSuggest={onSuggestPromise}
-        onChange={onChange1}
         onSearch={onSearch} 
       />
       <br /><br /><br />
       搜索类型：（不支持模糊搜索 fuzzyDisable: true）<br />
       <Search
-        mode="single-single"
-        regionId="demo"
-        resourceType="demo"
+        simple
         options={noFuzzyoptions}
         onSuggest={onSuggestPromise}
-        onChange={onChange1}
         onSearch={onSearch} 
       />
       <br /><br /><br />
       单选类型：<br />
       <Search
-        mode="single-single"
-        regionId="demo"
-        resourceType="demo"
+        simple
         options={options2}
-        onChange={onChange1}
         onSearch={onSearch}
       />
       <br />

package/demos/demo2.demo.tsx

@@ -1,6 +1,5 @@
 /**
  * @title 场景二 +  结合SearchTagList使用
- * @describe 场景二：single-multi：单维度多类别单选
  * @canFullScreen
  */
 
@@ -51,52 +50,24 @@ let options = [
 const Demo2: React.FC<IRcSearchProps> = (props) => {
   const [tagList, setTagList] = useState<any>([]);
 
-  async function onSuggest (value: string, dataIndex: string) {
-    if (!value) {
-      return [];
-    }
-    return [
-      // {label: value, value: `${dataIndex}-${value}`}
-      `${value}-1`,
-      `${value}-2`,
-      `${value}-3`,
-      `${value}-4`,
-      `${value}-5`,
-    ]
-  }
-
-  async function onChange (changedFileds:any, allFileds:any) {
-    console.log(`changedFileds:`,  changedFileds, 'allFileds', allFileds)
-  }
-
-  function onTagChange(newTags: any) {
-    console.log(`onTagChange:`, newTags);
-    setTagList(newTags);
-  }
-
   function onTagChangeByTagList (newTags: any) {
     console.log(`onTagChange:`, newTags);
     setTagList(newTags);
-  
   }
 
-  async function onSearch (allFileds:any) {
-    console.log(`onSearch:`, 'allFileds', allFileds)
-    console.log(`提交搜索： ${JSON.stringify(allFileds)}`)
+  async function onSearch (field:any) {
+    console.log(`onSearch:`, 'allFileds', field)
+    console.log(`提交搜索： ${JSON.stringify(field)}`)
   }
 
 
   return (
     <div>
       <Search
-        mode="single-multi"
         defaultDataIndex="name"
         regionId="demo"
         resourceType="demo"
         options={options}
-        onChange={onChange}
-        onSuggest={onSuggest}
-        onTagChange={onTagChange}
         onSearch={onSearch}
         tags={tagList}
       />

package/demos/demo3.demo.tsx

@@ -1,6 +1,6 @@
 /**
  * @title 场景三 + 结合表格使用
- * @describe 场景三：multi-multi：多维度多类别单选
+ * @describe 场景三：结合表格使用
  * @canFullScreen
  */
 
@@ -16,7 +16,8 @@ let options = [
     templateProps: {
       placeholder: '按实例名称搜索',
       dataSource: []
-    }
+    },
+    groupName:"test"
   },
   {
     label: '网络类型',
@@ -30,7 +31,8 @@ let options = [
         {label: 'C', value: 'c'},
         {label: 'D', value: 'd'},
       ]
-    }
+    },
+    groupName:"test"
   },
   {
     label: '付费类型',
@@ -44,39 +46,17 @@ let options = [
         {label: 'C', value: 'c'},
         {label: 'D', value: 'd'},
       ]
-    }
+    },
+    groupName:"test2"
   }
 ]
  
 const Demo3: React.FC<IRcSearchProps> = (props) => {
   const [tagList, setTagList] = useState<any>([]);
 
-  async function onSuggest (value: string, dataIndex: string) {
-    if (!value) {
-      return [];
-    }
-    return [
-      // {label: value, value: `${dataIndex}-${value}`}
-      `${value}-1`,
-      `${value}-2`,
-      `${value}-3`,
-      `${value}-4`,
-      `${value}-5`,
-    ]
-  }
-
-  async function onChange (changedFileds:any, allFileds:any) {
-    console.log(`changedFileds:`,  changedFileds, 'allFileds', allFileds)
-  }
-
-  function onTagChange(newTags: any) {
-    console.log(`onTagChange:`, newTags);
-    setTagList(newTags);
-  }
-
-  async function onSearch (allFileds:any) {
-    console.log(`onSearch:`, 'allFileds', allFileds)
-    console.log(`提交搜索： ${JSON.stringify(allFileds)}`)
+  async function onSearch (field:any) {
+    console.log(field)
+    setTagList(field);
   }
 
   return (
@@ -85,14 +65,8 @@ const Demo3: React.FC<IRcSearchProps> = (props) => {
       <div>
         <Button type="primary" style={{marginRight: '10px'}}>主按钮</Button>
         <Search
-          mode="multi-multi"
           defaultDataIndex="name"
-          regionId="demo"
-          resourceType="demo"
           options={options}
-          onChange={onChange}
-          onSuggest={onSuggest}
-          onTagChange={onTagChange}
           onSearch={onSearch}
           tags={tagList}
           style={{marginRight: '10px', width: '500px'}}
@@ -101,7 +75,8 @@ const Demo3: React.FC<IRcSearchProps> = (props) => {
 
       </div>
       
-      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList} onChange={onTagChange} />
+      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList}/>
+
       <Table>
         <Table.Column title="Key" dataIndex="key" />
         <Table.Column title="实例ID/名称" dataIndex="id" />

package/demos/demo4.demo.tsx

@@ -1,6 +1,6 @@
 /**
  * @title 场景三 + 无默认类别
- * @describe 场景三：multi-multi：多维度多类别单选
+ * @describe 场景四：无默认类别
  * @canFullScreen
  */
 
@@ -104,10 +104,6 @@ const Demo3: React.FC<IRcSearchProps> = (props) => {
     ]
   }
 
-  async function onChange (changedFileds:any, allFileds:any) {
-    console.log(`changedFileds:`,  changedFileds, 'allFileds', allFileds)
-  }
-
   function onTagChange(newTags: any) {
     console.log(`onTagChange:`, newTags);
     setTagList(newTags);
@@ -122,15 +118,12 @@ const Demo3: React.FC<IRcSearchProps> = (props) => {
     <div>
       <p>无默认分类, 默认多类别搜索</p>
       <Search
-        mode="multi-multi"
         options={options}
         regionId="demo"
         resourceType="demo"
-        onChange={onChange}
         onSuggest={onSuggest}
         defaultPlaceholder="请搜索"
         onSuggestNoDataIndex={onSuggestNoIndex}
-        onTagChange={onTagChange}
         onSearch={onSearch}
         tags={tagList}
       />

package/dist/index.css

@@ -1 +1 @@
-body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}
+body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}body .xconsole-rc-search-popup{margin-top:4px}