@alicloud/console-components-search 0.2.35 → 0.2.37-alpha.0

package/demos/demo1.demo.tsx

@@ -2,21 +2,20 @@
  * @title 场景1
  */
 
-import React from "react";
-import { Search, SearchFilter } from "@alicloud/console-components-search";
-import { ConfigProvider } from "@alicloud/console-components";
-import { useState } from "react";
- 
- let options = [
+import React, { useState } from 'react';
+import { Search, SearchFilter } from '@alicloud/console-components-search';
+import { ConfigProvider } from '@alicloud/console-components';
+
+const options = [
   {
     label: '实例名称',
     dataIndex: 'name',
     template: 'input',
     templateProps: {
       // placeholder: '按实例名称搜索',
-      dataSource: []
+      dataSource: [],
     },
-    groupName:"test"
+    groupName: 'test',
   },
   {
     label: '网络类型',
@@ -25,13 +24,13 @@ import { useState } from "react";
     templateProps: {
       placeholder: '请选择网络类型',
       dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' },
+        { label: 'C', value: 'c' },
+        { label: 'D', value: 'd' },
+      ],
     },
-    groupName:"test"
+    groupName: 'test',
   },
   {
     label: '付费类型',
@@ -40,88 +39,98 @@ import { useState } from "react";
     templateProps: {
       placeholder: '请选择付费类型',
       dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' },
+        { label: 'C', value: 'c' },
+        { label: 'D', value: 'd' },
+      ],
     },
-    groupName:"test2"
-  }
-]
+    groupName: 'test2',
+  },
+];
 
-let options2 = [
+const options2 = [
   {
     label: '实例名称',
     dataIndex: 'name',
     template: 'input',
     templateProps: {
       placeholder: '按实例名称搜索',
-      dataSource: []
+      dataSource: [],
     },
-  }
-]
-
+  },
+];
 
- const Demo1: React.FC<{}> = (props) => {
-   const [filters, setFilters] = useState<any>([
-    {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},
-    {value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}
+const Demo1: React.FC<{}> = (props) => {
+  const [filters, setFilters] = useState<any>([
+    { label: '实例名称', value: 'xxxxxx', dataIndex: 'name' },
+    { value: [{ tagKey: 'test', tagValue: '' }], dataIndex: 'tag' },
+    { value: [{ tagKey: 'test', tagValue: '' }], dataIndex: 'tag2' },
   ]);
-   return (
+  return (
     <ConfigProvider>
-    <div>
-      <div>默认固定搜索条件</div>
-      <Search
-        defaultDataIndex="name"
-        defaultSelectedDataIndex="name"
-        options={[{
-          label: '实例名称',
-          dataIndex: 'name',
-          template: 'input',
-          templateProps: {
-            placeholder: '按实例名称搜索',
-          },
-        }]}
-        onSearch={(value, dataIndex) => {
-          console.log(value, dataIndex)
-        }}
-      />
-      <br/><br/>
-      <Search
-        defaultDataIndex="name"
-        options={options2}
-        onSearch={(value, dataIndex) => {
-          console.log(value, dataIndex)
-        }}
-        suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}
-      />
-      <br/><br/>
-
-      <div>搜索条件成组</div>
-      <Search
-        defaultDataIndex="name"
-        defaultSelectedDataIndex="name"
-        options={options}
-        onSearch={(value, dataIndex, extra) => {
-          //@ts-ignore
-          setFilters([...filters, extra])
-        }}
-        suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}
-      />
+      <div>
+        <div>默认固定搜索条件</div>
+        <Search
+          defaultDataIndex="name"
+          defaultSelectedDataIndex="name"
+          options={[{
+            label: '实例名称',
+            dataIndex: 'name',
+            template: 'input',
+            templateProps: {
+              placeholder: '按实例名称搜索',
+            },
+          }]}
+          onSearch={(value, dataIndex) => {
+            console.log(value, dataIndex);
+          }}
+        />
+        <br /><br />
+        <Search
+          defaultDataIndex="name"
+          options={options2}
+          onSearch={(value, dataIndex) => {
+            console.log(value, dataIndex);
+          }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
+        />
+        <br /><br />
 
-      <div style={{marginTop: 8}}>
-        <SearchFilter
-          dataSource={filters}
-          onChange={(deletedFilter, remainFilters)=> {
-            setFilters(remainFilters)
+        <div>搜索条件成组</div>
+        <Search
+          defaultDataIndex="name"
+          defaultSelectedDataIndex="name"
+          options={options}
+          onSearch={(value, dataIndex, extra) => {
+            // @ts-ignore
+            setFilters([...filters, extra]);
+          }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
+        />
+        <Search
+          defaultDataIndex="name"
+          defaultSelectedDataIndex="name"
+          options={options}
+          prefixSelectMode="cascader"
+          onSearch={(value, dataIndex, extra) => {
+            // @ts-ignore
+            setFilters([...filters, extra]);
           }}
+          suggestions={[{ label: '实例名称', children: ['222222'] }, '33333333']}
         />
+
+        <div style={{ marginTop: 8 }}>
+          <SearchFilter
+            dataSource={filters}
+            onChange={(deletedFilter, remainFilters) => {
+              setFilters(remainFilters);
+            }}
+          />
+        </div>
       </div>
-    </div>
     </ConfigProvider>
-   );
- };
- 
- export default Demo1;
- 
+  );
+};
+
+export default Demo1;

package/dist/index.css

@@ -0,0 +1,73 @@
+body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop > ul {
+  padding: 8px;
+}
+body .xconsole-rcsearch-multi-pop .next-select-menu-item {
+  padding-left: 0px!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;
+}
+body .rc-search-prefix {
+  --menu-padding-horizontal: 24px;
+}
+body .rc-search.isWind {
+  --console-rc-search-label-color: #f7f7f7;
+  --console-rc-search-label-hover-color: #ebebeb;
+}
+body .rc-search.isWidget {
+  --console-rc-search-close-btn-top: 2px;
+  --console-rc-search-close-btn-left: -3px;
+  --icon-content-delete-filling: "\\E6A2";
+}
+body .rc-search-auto-complete [class*='select-menu-empty'] {
+  display: none;
+}
+
+.rc-search-taglist:not(.isWind) {
+  margin-top: -4px;
+}
+.rc-search-taglist:not(.isWind) .search-tags-tag.search-tags-tag {
+  font-weight: 600;
+}
+.rc-search-taglist:not(.isWind) .search-tags-tag.search-tags-tag [class*='-icon-close']::before {
+  content: var(--icon-content-delete-filling) !important;
+}
+.rc-search-taglist:not(.isWind) .search-tags-tag.search-tags-tag [class*='icon-close']:hover {
+  color: #181818 !important;
+}
+.rc-search-taglist:not(.isWind) .search-tags-tag.search-tags-tag:hover [class*='-icon-close']::before {
+  color: #181818 !important;
+}
+.rc-search-taglist .search-tags-tag.search-tags-tag {
+  margin-top: 4px;
+  font-weight: 400;
+  color: var(--color-text1-9, #333333) !important;
+}
+.rc-search-taglist .search-tags-tag.search-tags-tag .search-tags-tag-label {
+  font-weight: 500;
+  color: var(--color-text1-6, #808080);
+  margin-right: 8px;
+}
+.rc-search-taglist .search-tags-tag.search-tags-tag[class*='tag-closable'] > [class*='tag-close-btn'] {
+  margin-left: 12px;
+}
+.rc-search-taglist .search-tags-tag.search-tags-tag [class*='icon-close']:hover {
+  color: #808080 !important;
+}
+.rc-search-taglist .search-tags-tag:not(:last-child) {
+  margin-right: 8px;
+}
+.rc-search-taglist .search-tags-tag_empty {
+  color: var(--color-text1-6, #808080);
+}
+.rc-search-taglist .search-tags-tag-dot.rc-search-taglist .search-tags-tag-dot [class*='-badge-dot'] {
+  right: 4px;
+  top: 0px;
+}
+