@alicloud/console-components-search 0.1.1 → 0.2.0

package/demos/demo2.demo.tsx

@@ -1,83 +0,0 @@
-/**
- * @title 场景二 +  结合SearchTagList使用
- * @describe 场景二：single-multi：单维度多类别单选
- * @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) {
-    alert(JSON.stringify(field))
-    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,87 +0,0 @@
-/**
- * @title 场景三 + 结合表格使用
- * @describe 场景三：multi-multi：多维度多类别单选
- * @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: []
-    }
-  },
-  {
-    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 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,142 +0,0 @@
-/**
- * @title 场景三 + 无默认类别
- * @describe 场景三：multi-multi：多维度多类别单选
- * @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'},
-        ]
-      }
-    ]
-  }
-
-  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)}`)
-  }
-
-  return (
-    <div>
-      <p>无默认分类, 默认多类别搜索</p>
-      <Search
-        options={options}
-        regionId="demo"
-        resourceType="demo"
-        onChange={onChange}
-        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}