@alicloud/console-components-search 0.2.1 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config/components-with-style.tsx +1 -1
- package/demos/demo1.demo.tsx +15 -3
- package/doc-dist/10.js +1 -1
- package/doc-dist/14.js +1 -1
- package/doc-dist/deps/main.css +1 -1
- package/doc-dist/deps/main.js +8 -8
- package/doc-dist/deps/main.os.css +1 -1
- package/doc-dist/log-deps-build.log +3 -3
- package/es/constants.js +4 -1
- package/es/modeSingleSingle/index2.js +44 -20
- package/es/searchTagList/PureTag.js +57 -0
- package/es/searchTagList/index.js +84 -10
- package/es/style.js +1 -1
- package/lib/constants.d.ts +2 -0
- package/lib/constants.js +6 -2
- package/lib/index.d.ts +1 -0
- package/lib/modeSingleSingle/index2.js +45 -20
- package/lib/searchTagList/PureTag.d.ts +14 -0
- package/lib/searchTagList/PureTag.js +71 -0
- package/lib/searchTagList/index.js +86 -10
- package/lib/style.js +1 -1
- package/lib/types/IRcSearchTagItemProps.type.d.ts +3 -3
- package/lib/types/IRcSearchTagListProps.type.d.ts +6 -2
- package/package.json +2 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from '@alicloud/console-components'
|
|
2
|
-
import '@alicloud/console-components/dist/
|
|
2
|
+
import '@alicloud/console-components/dist/wind.css'
|
package/demos/demo1.demo.tsx
CHANGED
|
@@ -91,7 +91,7 @@ let options2 = [
|
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
const Demo1: React.FC<{}> = (props) => {
|
|
94
|
-
const [filters, setFilters] = useState([]);
|
|
94
|
+
const [filters, setFilters] = useState<any>([]);
|
|
95
95
|
console.log(filters)
|
|
96
96
|
return (
|
|
97
97
|
<div>
|
|
@@ -119,8 +119,20 @@ let options2 = [
|
|
|
119
119
|
<div style={{marginTop: 8}}>
|
|
120
120
|
<SearchFilter
|
|
121
121
|
dataSource={filters}
|
|
122
|
-
onChange={(
|
|
123
|
-
setFilters(
|
|
122
|
+
onChange={(deletedFilter, remainFilters)=> {
|
|
123
|
+
setFilters(remainFilters)
|
|
124
|
+
}}
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div style={{marginTop: 8}}>
|
|
129
|
+
<SearchFilter
|
|
130
|
+
dataSource={[
|
|
131
|
+
{label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},
|
|
132
|
+
{value: [{tagKey: 'xxxx', tagValue: 'xxxxxx'}, {tagKey: 'xx2xx', tagValue: 'xxxxxx'}], dataIndex: 'tag'}
|
|
133
|
+
]}
|
|
134
|
+
onChange={(deletedFilter, remainFilters)=> {
|
|
135
|
+
console.log(deletedFilter, remainFilters);
|
|
124
136
|
}}
|
|
125
137
|
/>
|
|
126
138
|
</div>
|
package/doc-dist/10.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{680:function(e,a,n){"use strict";n.r(a),n.d(a,"demo",(function(){return
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{680:function(e,a,n){"use strict";n.r(a),n.d(a,"demo",(function(){return b})),n.d(a,"meta",(function(){return v})),n.d(a,"code",(function(){return x})),n.d(a,"imports",(function(){return i})),n.d(a,"deps",(function(){return m}));var l={};n.r(l),n.d(l,"default",(function(){return s}));var t=n(5),r=n(1),o=n(0),c=n.n(o),d=n(63),u=[{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"}],p=[{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"}]}}],s=function(e){var a=Object(o.useState)([]),n=Object(r.a)(a,2),l=n[0],s=n[1];return console.log(l),c.a.createElement("div",null,c.a.createElement(d.Search,{defaultDataIndex:"name",options:p,onSearch:function(e,a){console.log(e,a)},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),c.a.createElement("br",null),c.a.createElement("br",null),c.a.createElement("div",null,"搜索条件成组"),c.a.createElement(d.Search,{defaultDataIndex:"name",options:u,onSearch:function(e,a,n){s([].concat(Object(t.a)(l),[n]))},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),c.a.createElement("div",{style:{marginTop:8}},c.a.createElement(d.SearchFilter,{dataSource:l,onChange:function(e,a){s(a)}})),c.a.createElement("div",{style:{marginTop:8}},c.a.createElement(d.SearchFilter,{dataSource:[{label:"实例名称",value:"xxxxxx",dataIndex:"name"},{value:[{tagKey:"xxxx",tagValue:"xxxxxx"},{tagKey:"xx2xx",tagValue:"xxxxxx"}],dataIndex:"tag"}],onChange:function(e,a){console.log(e,a)}})))};const i=["react","@alicloud/console-components-search","react"],x="/**\n * @title 场景1\n */\n\nimport React from \"react\";\nimport { Search, SearchFilter } from \"@alicloud/console-components-search\";\nimport { useState } from \"react\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n groupName:\"test\"\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test\"\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test2\"\n }\n]\n\nlet options2 = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n const [filters, setFilters] = useState<any>([]);\n console.log(filters)\n return (\n <div>\n <Search\n defaultDataIndex=\"name\"\n options={options2}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n <br/><br/>\n\n <div>搜索条件成组</div>\n <Search\n defaultDataIndex=\"name\"\n options={options}\n onSearch={(value, dataIndex, extra) => {\n //@ts-ignore\n setFilters([...filters, extra])\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n\n <div style={{marginTop: 8}}>\n <SearchFilter\n dataSource={filters}\n onChange={(deletedFilter, remainFilters)=> {\n setFilters(remainFilters)\n }}\n />\n </div>\n\n <div style={{marginTop: 8}}>\n <SearchFilter\n dataSource={[\n {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},\n {value: [{tagKey: 'xxxx', tagValue: 'xxxxxx'}, {tagKey: 'xx2xx', tagValue: 'xxxxxx'}], dataIndex: 'tag'}\n ]}\n onChange={(deletedFilter, remainFilters)=> {\n console.log(deletedFilter, remainFilters);\n }}\n />\n </div>\n </div>\n );\n };\n \n export default Demo1;\n ",m={react:o,"@alicloud/console-components-search":d,react:o},{default:b,meta:v={}}=l}}]);
|
|
6
6
|
}})
|
package/doc-dist/14.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[14],{685:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"IRcSearchTagListProps",documentation:"",properties:[{name:"className",typeText:" string",documentation:"类名"},{name:"style",typeText:" any",documentation:"样式"},{name:"dataSource",typeText:" IRcSearchTagItemProps[]",documentation:"筛选项"},{name:"regionId",typeText:" string",documentation:"regionId"},{name:"resourceType",typeText:" string",documentation:"resourceType"},{name:"onChange",typeText:" (
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[14],{685:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"IRcSearchTagListProps",documentation:"",properties:[{name:"className",typeText:" string",documentation:"类名"},{name:"style",typeText:" any",documentation:"样式"},{name:"dataSource",typeText:" IRcSearchTagItemProps[]",documentation:"筛选项"},{name:"regionId",typeText:" string",documentation:"regionId"},{name:"resourceType",typeText:" string",documentation:"resourceType"},{name:"onChange",typeText:" (deletedFilter: IRcSearchTagItemProps, remainFilters: IRcSearchTagItemProps[]) => void",documentation:"当删减 tag 时， 返回新的筛选项"},{name:"onClear",typeText:" () => void",documentation:"清除山选项"}]}}}]);
|
|
6
6
|
}})
|
package/doc-dist/deps/main.css
CHANGED
|
@@ -1 +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-rc-search-popup{margin-top:4px}
|
|
1
|
+
body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop>ul{padding:8px}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}.console-tags-tag.console-tags-tag{font-weight:600;color:var(--color-text1-9,#333)!important}.console-tags-tag.console-tags-tag .console-tags-tag-label{color:var(--color-text1-6,grey);margin-right:8px}.console-tags-tag.console-tags-tag[class*=tag-closable]>[class*=tag-close-btn]{margin-left:12px}.console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag:hover [class*=-icon-close]{color:#181818}.console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag [class*=-icon-close]:before{content:var(--icon-content-delete-filling)}.console-tags-tag:not(:last-child){margin-right:8px}.console-tags-tag_empty{color:var(--color-text1-6,grey)}.console-tags-tag-dot.console-tags-tag-dot [class*=-badge-dot]{right:4px;top:0}
|