@alicloud/console-components-search 0.1.3 → 0.2.2

package/lib/style.js

@@ -15,7 +15,7 @@ var prefix = function prefix(props) {
 
 var SearchWarp = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-0"
-})(["height:100%;width:100%;display:flex;.left-wrap{flex:1;border-left:1px solid rgba(192,198,204,1);border-bottom:1px solid rgba(192,198,204,1);border-top:1px solid rgba(192,198,204,1);border-right:1px solid rgba(192,198,204,1);display:flex;border-bottom-left-radius:2px;border-top-left-radius:2px;&.focus{border:1px solid #0064c8;border:1px solid var(--input-hover-border-color,#0064c8);;}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background:#EFF3F8;border-radius:2px;background-color:#EFF3F8;padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:1px;right:1px;height:28px;width:30px;background-color:#fff;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;border-left:none;}}"], prefix, prefix, prefix, prefix, prefix);
+})(["height:100%;width:100%;display:flex;.left-wrap{flex:1;border-left:1px solid rgba(192,198,204,1);border-bottom:1px solid rgba(192,198,204,1);border-top:1px solid rgba(192,198,204,1);border-right:1px solid rgba(192,198,204,1);display:flex;border-bottom-left-radius:2px;border-top-left-radius:2px;&.focus{border:1px solid #0064c8;border:1px solid var(--input-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background:#EFF3F8;border-radius:2px;background-color:#EFF3F8;padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:1px;right:1px;height:28px;width:30px;background-color:#fff;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}"], prefix, prefix, prefix, prefix, prefix);
 
 exports.SearchWarp = SearchWarp;
 
@@ -33,6 +33,6 @@ exports.MultiBtnWarp = MultiBtnWarp;
 
 var TagListWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-3"
-})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 
 exports.TagListWrap = TagListWrap;

package/lib/types/IRcSearchProps.type.d.ts

@@ -1,5 +1,9 @@
+/**
+ * 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化，因此你可以使用接口来定义Props，从而能便捷地将Props的信息通过文档透出。
+ *
+ * 下面列举的props其实是随便写的，仅仅用来说明breezr-docs的接口提取功能。
+ */
 import { IRcSearchOptionsProps } from './IRcSearchOptions.type';
-import { IRcSearchTagItemProps } from './IRcSearchTagItemProps.type';
 export interface IRcSearchProps {
     /**
      * 是否是简单搜索， 不支持多 filter, 但是支持模糊
@@ -20,42 +24,39 @@ export interface IRcSearchProps {
      */
     options: IRcSearchOptionsProps[];
     /**
-     * tags 传入的taglist, 用于， 同步
+     * 默认placeholder
      */
-    tags?: IRcSearchTagItemProps[];
+    placeholder?: string;
     /**
      * 默认类别
-     * 仅在mode是"single-multi" | "multi-multi"生效
      */
     defaultDataIndex?: string;
     /**
-     * 默认placeholder
-     * 仅在mode是"single-multi" | "multi-multi"生效, 且， 未配置默认值时生效
+     * 搜索触发
      */
-    defaultPlaceholder?: string;
+    onSearch?: (value: string, dataIndex: string, extra?: any) => void;
     /**
-     * regionId
+     * 模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表
      */
-    regionId?: string;
+    onSuggest?: (value: string, dataIndex: string) => void;
     /**
-     * resourceType
+     * 模糊搜索的 suggestions
      */
-    resourceType?: string;
+    suggestions?: any[];
     /**
-     * 搜索触发
+     * 是否是模糊搜索
      */
-    onSearch?: (allFields: any) => void;
+    fuzzy?: boolean;
     /**
-     * 模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表
+     * regionId, 数据上报用
      */
-    onSuggest?: (value: string, dataIndex: string) => void;
+    regionId?: string;
     /**
-     * 模糊搜索的回调函数(仅输入框返回)，当没设置defaultDataIndex，且有多个input类别时触发，
-     * 可自定义二级返回List
-     */
-    onSuggestNoDataIndex?: (value: string) => Promise<any>;
+    * resourceType， 数据上报用, 格式 ACS::ECS::INSTANCE
+    */
+    resourceType?: string;
     /**
-     * 提供单选和多选, 触发。
+     * 样式 class 前缀
      */
-    onSelect?: () => void;
+    prefix?: string;
 }

package/lib/types/IRcSearchTagItemProps.type.d.ts

@@ -11,7 +11,7 @@ export interface IRcSearchTagItemProps {
     /**
      * tag的类别的key
      */
-    dataIndex: string;
+    dataIndex?: string;
     /**
      * tag的类别的值
      */
@@ -19,5 +19,5 @@ export interface IRcSearchTagItemProps {
     /**
      * tag的类别的展示值
      */
-    valueShow: string;
+    valueLabel?: string;
 }

package/lib/types/IRcSearchTagListProps.type.d.ts

@@ -14,19 +14,23 @@ export interface IRcSearchTagListProps {
      */
     style?: any;
     /**
-     * tags 传入的taglist, 用于， 同步
+     * 筛选项
      */
-    tagList: IRcSearchTagItemProps[];
+    dataSource: IRcSearchTagItemProps[];
     /**
      * regionId
      */
-    regionId: string;
+    regionId?: string;
     /**
      * resourceType
      */
     resourceType?: string;
     /**
-     * 当删减tag时， 返回新的taglist， 可直接赋值给rc-search组件
+     * 当删减 tag 时， 返回新的筛选项
      */
-    onChange?: (newTags: any) => void;
+    onChange?: (deletedFilter: IRcSearchTagItemProps, remainFilters: IRcSearchTagItemProps[]) => void;
+    /**
+     * 清除山选项
+     */
+    onClear?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.1.3",
+  "version": "0.2.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@alicloud/console-components-truncate": "^1.0.16",
     "@alicloud/console-logger-sls": "^1.2.31"
   }
 }

package/demos/demo2.demo.tsx

@@ -1,81 +0,0 @@
-/**
- * @title 场景二 +  结合SearchTagList使用
- * @canFullScreen
- */
-
-import React, {useState} from "react";
-import { Search, IRcSearchProps, SearchTagList } from "@alicloud/console-components-search";
-
-// interface IProps {}
-let options = [
-  {
-    label: '实例名称',
-    dataIndex: 'name',
-    template: 'input',
-    templateProps: {
-      placeholder: '按实例名称搜索',
-      dataSource: []
-    }
-  },
-  {
-    label: '网络类型',
-    dataIndex: 'type',
-    template: 'select',
-    templateProps: {
-      placeholder: '请选择网络类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  },
-  {
-    label: '付费类型',
-    dataIndex: 'pay',
-    template: 'multiple',
-    templateProps: {
-      placeholder: '请选择付费类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  }
-]
-
-const Demo2: React.FC<IRcSearchProps> = (props) => {
-  const [tagList, setTagList] = useState<any>([]);
-
-  function onTagChangeByTagList (newTags: any) {
-    console.log(`onTagChange:`, newTags);
-    setTagList(newTags);
-  }
-
-  async function onSearch (field:any) {
-    console.log(`onSearch:`, 'allFileds', field)
-    console.log(`提交搜索： ${JSON.stringify(field)}`)
-  }
-
-
-  return (
-    <div>
-      <Search
-        defaultDataIndex="name"
-        regionId="demo"
-        resourceType="demo"
-        options={options}
-        onSearch={onSearch}
-        tags={tagList}
-      />
-      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList} onChange={onTagChangeByTagList} />
-      
-    </div>
-    
-  )
-};
- 
-export default Demo2;

package/demos/demo3.demo.tsx

@@ -1,90 +0,0 @@
-/**
- * @title 场景三 + 结合表格使用
- * @describe 场景三：结合表格使用
- * @canFullScreen
- */
-
-import React, {useState} from "react";
-import { Search, IRcSearchProps, SearchTagList } from "@alicloud/console-components-search";
-import { Button, Table } from '@alicloud/console-components'
-// interface IProps {}
-let options = [
-  {
-    label: '实例名称',
-    dataIndex: 'name',
-    template: 'input',
-    templateProps: {
-      placeholder: '按实例名称搜索',
-      dataSource: []
-    },
-    groupName:"test"
-  },
-  {
-    label: '网络类型',
-    dataIndex: 'type',
-    template: 'select',
-    templateProps: {
-      placeholder: '请选择网络类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    },
-    groupName:"test"
-  },
-  {
-    label: '付费类型',
-    dataIndex: 'pay',
-    template: 'multiple',
-    templateProps: {
-      placeholder: '请选择付费类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    },
-    groupName:"test2"
-  }
-]
- 
-const Demo3: React.FC<IRcSearchProps> = (props) => {
-  const [tagList, setTagList] = useState<any>([]);
-
-  async function onSearch (field:any) {
-    console.log(field)
-    setTagList(field);
-  }
-
-  return (
-    <div>
-      <p>有默认分类: 实例名称</p>
-      <div>
-        <Button type="primary" style={{marginRight: '10px'}}>主按钮</Button>
-        <Search
-          defaultDataIndex="name"
-          options={options}
-          onSearch={onSearch}
-          tags={tagList}
-          style={{marginRight: '10px', width: '500px'}}
-        />
-        <Button type="normal">普通按钮</Button>
-
-      </div>
-      
-      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList}/>
-
-      <Table>
-        <Table.Column title="Key" dataIndex="key" />
-        <Table.Column title="实例ID/名称" dataIndex="id" />
-        <Table.Column title="状态" dataIndex="status" />
-      </Table>
-    </div>
-    
-  )
-};
-
-export default Demo3;

package/demos/demo4.demo.tsx

@@ -1,137 +0,0 @@
-/**
- * @title 场景三 + 无默认类别
- * @describe 场景四：无默认类别
- * @canFullScreen
- */
-
-import React, {useState} from "react";
-import { Search, IRcSearchProps, SearchTagList } from "@alicloud/console-components-search";
-import { Radio } from '@alicloud/console-components'
-
-const RadioGroup = Radio.Group;
-// interface IProps {}
-let options = [
-  {
-    label: '实例名称',
-    dataIndex: 'name',
-    template: 'input',
-    templateProps: {
-      placeholder: '请输入',
-      dataSource: []
-    }
-  },
-  {
-    label: '密钥名称',
-    dataIndex: 'netkey',
-    template: 'input',
-    templateProps: {
-      placeholder: '请输入',
-      dataSource: []
-    }
-  },
-  {
-    label: '网络类型',
-    dataIndex: 'type',
-    template: 'select',
-    templateProps: {
-      placeholder: '请选择',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  },
-  {
-    label: '付费类型',
-    dataIndex: 'pay',
-    template: 'multiple',
-    templateProps: {
-      placeholder: '请选择',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  }
-]
- 
-const Demo3: React.FC<IRcSearchProps> = (props) => {
-  const [tagList, setTagList] = useState<any>([]);
-
-  async function onSuggest (value: string, dataIndex: string) {
-    console.log()
-    if (!value) {
-      return [];
-    }
-    return [
-      // {label: value, value: `${dataIndex}-${value}`}
-      `${value}-1`,
-      `${value}-2`,
-      `${value}-3`,
-      `${value}-4`,
-      `${value}-5`,
-    ]
-  }
-
-  async function onSuggestNoIndex (value: string) {
-    if (!value) {
-      return [];
-    }
-    
-    return [
-      {
-        label: '实例名称',
-        dataIndex: 'name',
-        children: [
-          {label: `${value}-1`, value: `${value}-1`, dataIndex: 'name'},
-          {label: `${value}-2`, value: `${value}-2`, dataIndex: 'name'},
-          {label: `${value}-3`, value: `${value}-3`, dataIndex: 'name'},
-        ]
-      },
-      {
-        label: '密钥名称',
-        dataIndex: 'netkey',
-        children: [
-          {label: `${value}-1`, value: `${value}-1`, dataIndex: 'name'},
-          {label: `${value}-2`, value: `${value}-2`, dataIndex: 'name'},
-          {label: `${value}-3`, value: `${value}-3`, dataIndex: 'name'},
-        ]
-      }
-    ]
-  }
-
-  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)}`)
-  }
-
-  return (
-    <div>
-      <p>无默认分类, 默认多类别搜索</p>
-      <Search
-        options={options}
-        regionId="demo"
-        resourceType="demo"
-        onSuggest={onSuggest}
-        defaultPlaceholder="请搜索"
-        onSuggestNoDataIndex={onSuggestNoIndex}
-        onSearch={onSearch}
-        tags={tagList}
-      />
-      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList} onChange={onTagChange} />
-      <br /><br /><br />
-    </div>
-    
-  )
-};
-
-export default Demo3;

package/dist/index.css

@@ -1 +0,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}