@alicloud/console-components-search 0.2.39 → 0.2.40-beta.0

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/demos/demo1.demo.tsx +1 -1
  3. package/dist/index.js +90949 -96745
  4. package/es/searchTagList/index.js +40 -10
  5. package/es/style.js +1 -1
  6. package/lib/searchTagList/index.js +39 -9
  7. package/lib/style.js +1 -1
  8. package/package.json +15 -14
  9. package/LICENSE +0 -21
package/es/searchTagList/index.js CHANGED
@@ -4,7 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import React from 'react';
6
6
  import classNames from 'classnames';
7
- import { ConfigProvider, Tag } from '@alicloud/console-components';
7
+ import { Balloon, ConfigProvider, Tag } from '@alicloud/console-components';
8
8
  import isArray from 'lodash/isArray';
9
9
  import isObject from 'lodash/isObject';
10
10
  import { TagListWrap } from '../style';
@@ -24,6 +24,28 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
24
24
  }
25
25
  return isTag;
26
26
  };
27
+ var getFilterTitle = function getFilterTitle(tagItem) {
28
+ var label = tagItem.label || tagItem.dataIndex;
29
+ var value = tagItem.valueLabel || tagItem.value;
30
+ return label ? "".concat(label, ": ").concat(value) : String(value);
31
+ };
32
+ var getTagTitle = function getTagTitle(tag) {
33
+ return "".concat(tag === null || tag === void 0 ? void 0 : tag.tagKey, ": ").concat(tag === null || tag === void 0 ? void 0 : tag.tagValue);
34
+ };
35
+ var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
36
+ return /*#__PURE__*/React.createElement(Balloon, {
37
+ key: key,
38
+ trigger: trigger,
39
+ align: "t",
40
+ alignEdge: true,
41
+ needAdjust: true,
42
+ closable: false,
43
+ popupStyle: {
44
+ maxWidth: 480,
45
+ wordBreak: 'break-all'
46
+ }
47
+ }, content);
48
+ };
27
49
  var SearchTagList = function SearchTagList(props) {
28
50
  var dataSource = props.dataSource,
29
51
  className = props.className,
@@ -67,9 +89,11 @@ var SearchTagList = function SearchTagList(props) {
67
89
  var value = tagItem.value;
68
90
  if (isArray(value)) {
69
91
  return value.map(function (t) {
70
- return /*#__PURE__*/React.createElement(PureTag, {
92
+ var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
93
+ return renderWithBalloon(getTagTitle(t), /*#__PURE__*/React.createElement("span", {
94
+ className: "search-tags-tag-wrap"
95
+ }, /*#__PURE__*/React.createElement(PureTag, {
71
96
  showLabel: true,
72
- key: "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue),
73
97
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
74
98
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
75
99
  closable: true,
@@ -77,10 +101,12 @@ var SearchTagList = function SearchTagList(props) {
77
101
  onRemoveTag(tagItem, t);
78
102
  return true;
79
103
  }
80
- });
104
+ })), key);
81
105
  });
82
106
  }
83
- return /*#__PURE__*/React.createElement(PureTag, {
107
+ return renderWithBalloon(getTagTitle(value), /*#__PURE__*/React.createElement("span", {
108
+ className: "search-tags-tag-wrap"
109
+ }, /*#__PURE__*/React.createElement(PureTag, {
84
110
  showLabel: true,
85
111
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
86
112
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
@@ -89,7 +115,7 @@ var SearchTagList = function SearchTagList(props) {
89
115
  onRemoveFilter(tagItem);
90
116
  return true;
91
117
  }
92
- });
118
+ })));
93
119
  };
94
120
  var processDataSource = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.filter(function (t) {
95
121
  if (isArray(t === null || t === void 0 ? void 0 : t.value)) {
@@ -107,13 +133,17 @@ var SearchTagList = function SearchTagList(props) {
107
133
  prefix: prefix,
108
134
  className: classNames(baseTagListClassName, className, isWindClass),
109
135
  style: style
136
+ }, /*#__PURE__*/React.createElement("div", {
137
+ className: "search-tags-list"
110
138
  }, processDataSource.map(function (tagItem) {
111
139
  if (isTagLikeDataStructure(tagItem.value)) {
112
140
  return renderTags(tagItem);
113
141
  }
114
- return /*#__PURE__*/React.createElement(ClosableTag, {
142
+ var key = tagItem.dataIndex + tagItem.value;
143
+ return renderWithBalloon(getFilterTitle(tagItem), /*#__PURE__*/React.createElement("span", {
144
+ className: "search-tags-tag-wrap"
145
+ }, /*#__PURE__*/React.createElement(ClosableTag, {
115
146
  className: "search-tags-tag",
116
- key: tagItem.dataIndex + tagItem.value,
117
147
  type: "normal",
118
148
  size: "medium",
119
149
  onClose: function onClose() {
@@ -122,8 +152,8 @@ var SearchTagList = function SearchTagList(props) {
122
152
  }
123
153
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
124
154
  className: "search-tags-tag-label"
125
- }, tagItem.label), tagItem.valueLabel || tagItem.value));
126
- }), processDataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
155
+ }, tagItem.label), tagItem.valueLabel || tagItem.value))), key);
156
+ })), processDataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
127
157
  className: "remove-btn",
128
158
  onClick: onRemoveAllFilter
129
159
  }, message.clearFilter));
package/es/style.js CHANGED
@@ -13,5 +13,5 @@ var MultiBtnWarp = styled.div.withConfig({
13
13
  })(["padding:\"0 4px\";text-align:\"center\";.pri-btn{margin-right:8px;width:auto;min-width:auto;padding:3px 12px;}.cancel-btn{padding:3px 12px;width:auto;min-width:auto;}", "btn", "small:not(.isOnlyIcon):not(", "btn-text){min-width:auto;}"], prefix, prefix, prefix);
14
14
  var TagListWrap = styled.div.withConfig({
15
15
  componentId: "sc-1afc1cn-3"
16
- })(["", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{line-height:24px;margin-top:4px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
16
+ })(["--console-rc-search-tag-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;max-width:min(100%,var(--console-rc-search-tag-max-width));min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;max-width:min(100%,var(--console-rc-search-tag-max-width));}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;vertical-align:middle;max-width:calc(100% - var(--console-rc-search-tag-close-spacing) - var(--console-rc-search-tag-close-icon-width) - var(--console-rc-search-tag-close-padding-right));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
17
17
  export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };
package/lib/searchTagList/index.js CHANGED
@@ -31,6 +31,28 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
31
31
  }
32
32
  return isTag;
33
33
  };
34
+ var getFilterTitle = function getFilterTitle(tagItem) {
35
+ var label = tagItem.label || tagItem.dataIndex;
36
+ var value = tagItem.valueLabel || tagItem.value;
37
+ return label ? "".concat(label, ": ").concat(value) : String(value);
38
+ };
39
+ var getTagTitle = function getTagTitle(tag) {
40
+ return "".concat(tag === null || tag === void 0 ? void 0 : tag.tagKey, ": ").concat(tag === null || tag === void 0 ? void 0 : tag.tagValue);
41
+ };
42
+ var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
43
+ return /*#__PURE__*/_react.default.createElement(_consoleComponents.Balloon, {
44
+ key: key,
45
+ trigger: trigger,
46
+ align: "t",
47
+ alignEdge: true,
48
+ needAdjust: true,
49
+ closable: false,
50
+ popupStyle: {
51
+ maxWidth: 480,
52
+ wordBreak: 'break-all'
53
+ }
54
+ }, content);
55
+ };
34
56
  var SearchTagList = function SearchTagList(props) {
35
57
  var dataSource = props.dataSource,
36
58
  className = props.className,
@@ -74,9 +96,11 @@ var SearchTagList = function SearchTagList(props) {
74
96
  var value = tagItem.value;
75
97
  if ((0, _isArray.default)(value)) {
76
98
  return value.map(function (t) {
77
- return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
99
+ var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
100
+ return renderWithBalloon(getTagTitle(t), /*#__PURE__*/_react.default.createElement("span", {
101
+ className: "search-tags-tag-wrap"
102
+ }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
78
103
  showLabel: true,
79
- key: "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue),
80
104
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
81
105
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
82
106
  closable: true,
@@ -84,10 +108,12 @@ var SearchTagList = function SearchTagList(props) {
84
108
  onRemoveTag(tagItem, t);
85
109
  return true;
86
110
  }
87
- });
111
+ })), key);
88
112
  });
89
113
  }
90
- return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
114
+ return renderWithBalloon(getTagTitle(value), /*#__PURE__*/_react.default.createElement("span", {
115
+ className: "search-tags-tag-wrap"
116
+ }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
91
117
  showLabel: true,
92
118
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
93
119
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
@@ -96,7 +122,7 @@ var SearchTagList = function SearchTagList(props) {
96
122
  onRemoveFilter(tagItem);
97
123
  return true;
98
124
  }
99
- });
125
+ })));
100
126
  };
101
127
  var processDataSource = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.filter(function (t) {
102
128
  if ((0, _isArray.default)(t === null || t === void 0 ? void 0 : t.value)) {
@@ -114,13 +140,17 @@ var SearchTagList = function SearchTagList(props) {
114
140
  prefix: prefix,
115
141
  className: (0, _classnames.default)(_constants.baseTagListClassName, className, isWindClass),
116
142
  style: style
143
+ }, /*#__PURE__*/_react.default.createElement("div", {
144
+ className: "search-tags-list"
117
145
  }, processDataSource.map(function (tagItem) {
118
146
  if (isTagLikeDataStructure(tagItem.value)) {
119
147
  return renderTags(tagItem);
120
148
  }
121
- return /*#__PURE__*/_react.default.createElement(ClosableTag, {
149
+ var key = tagItem.dataIndex + tagItem.value;
150
+ return renderWithBalloon(getFilterTitle(tagItem), /*#__PURE__*/_react.default.createElement("span", {
151
+ className: "search-tags-tag-wrap"
152
+ }, /*#__PURE__*/_react.default.createElement(ClosableTag, {
122
153
  className: "search-tags-tag",
123
- key: tagItem.dataIndex + tagItem.value,
124
154
  type: "normal",
125
155
  size: "medium",
126
156
  onClose: function onClose() {
@@ -129,8 +159,8 @@ var SearchTagList = function SearchTagList(props) {
129
159
  }
130
160
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
131
161
  className: "search-tags-tag-label"
132
- }, tagItem.label), tagItem.valueLabel || tagItem.value));
133
- }), processDataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
162
+ }, tagItem.label), tagItem.valueLabel || tagItem.value))), key);
163
+ })), processDataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
134
164
  className: "remove-btn",
135
165
  onClick: onRemoveAllFilter
136
166
  }, _message.default.clearFilter));
package/lib/style.js CHANGED
@@ -20,4 +20,4 @@ var MultiBtnWarp = exports.MultiBtnWarp = _styledComponents.default.div.withConf
20
20
  })(["padding:\"0 4px\";text-align:\"center\";.pri-btn{margin-right:8px;width:auto;min-width:auto;padding:3px 12px;}.cancel-btn{padding:3px 12px;width:auto;min-width:auto;}", "btn", "small:not(.isOnlyIcon):not(", "btn-text){min-width:auto;}"], prefix, prefix, prefix);
21
21
  var TagListWrap = exports.TagListWrap = _styledComponents.default.div.withConfig({
22
22
  componentId: "sc-1afc1cn-3"
23
- })(["", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{line-height:24px;margin-top:4px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
23
+ })(["--console-rc-search-tag-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;max-width:min(100%,var(--console-rc-search-tag-max-width));min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;max-width:min(100%,var(--console-rc-search-tag-max-width));}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;vertical-align:middle;max-width:calc(100% - var(--console-rc-search-tag-close-spacing) - var(--console-rc-search-tag-close-icon-width) - var(--console-rc-search-tag-close-padding-right));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
package/package.json CHANGED
@@ -1,9 +1,22 @@
1
1
  {
2
2
  "name": "@alicloud/console-components-search",
3
- "version": "0.2.39",
3
+ "version": "0.2.40-beta.0",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "license": "MIT",
7
+ "scripts": {
8
+ "dev": "breezr start --config config/breezr.docs.config.ts",
9
+ "doc:build": "rm -rf doc-dist && breezr build --config config/breezr.docs.config.ts",
10
+ "doc:serve": "echo \"访问 https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-fe-test-rc-search-doc&servePath=http://localhost:5556/doc-dist/ ，预览本地打包好的文档资源！\n\n您还可以将文档资源部署到自己的cdn，然后将上述url中的servePath修改为自己的cdn地址，得到你自己的文档预览链接。\" && serve -l 5556 --cors",
11
+ "upload": "breezr upload --config config/breezr.docs.config.ts",
12
+ "upload:pre": "npm run upload -- --tag=pre",
13
+ "babel": "breezr build --engine babel",
14
+ "babel:esm": "breezr build --engine babel --es-module",
15
+ "types": "tsc -p src --emitDeclarationOnly",
16
+ "build": "breezr build --engine webpack",
17
+ "clean": "rm -rf dist lib es doc-dist",
18
+ "prepublishOnly": "npm run clean && npm run babel && npm run babel:esm && npm run types && npm run build"
19
+ },
7
20
  "devDependencies": {
8
21
  "@alicloud/console-toolkit-cli": "^1.2.0",
9
22
  "@alicloud/console-toolkit-preset-component": "^1.2.8",
@@ -34,17 +47,5 @@
34
47
  "@babel/runtime": "^7.27.6",
35
48
  "classnames": "^2.5.1",
36
49
  "js-cookie": "^2.0.0"
37
- },
38
- "scripts": {
39
- "dev": "breezr start --config config/breezr.docs.config.ts",
40
- "doc:build": "rm -rf doc-dist && breezr build --config config/breezr.docs.config.ts",
41
- "doc:serve": "echo \"访问 https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-fe-test-rc-search-doc&servePath=http://localhost:5556/doc-dist/ ，预览本地打包好的文档资源！\n\n您还可以将文档资源部署到自己的cdn，然后将上述url中的servePath修改为自己的cdn地址，得到你自己的文档预览链接。\" && serve -l 5556 --cors",
42
- "upload": "breezr upload --config config/breezr.docs.config.ts",
43
- "upload:pre": "npm run upload -- --tag=pre",
44
- "babel": "breezr build --engine babel",
45
- "babel:esm": "breezr build --engine babel --es-module",
46
- "types": "tsc -p src --emitDeclarationOnly",
47
- "build": "breezr build --engine webpack",
48
- "clean": "rm -rf dist lib es doc-dist"
49
50
  }
50
- }
51
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2019 Alibaba Cloud
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.