@alicloud/console-components-search 0.1.0 → 0.1.3

package/lib/modeSingleSingle/index.js

@@ -35,8 +35,9 @@ var AutoComplete = _consoleComponents.Select.AutoComplete;
 var ModeSingleSingle = function ModeSingleSingle(props) {
   var options = props.options,
       onSuggest = props.onSuggest,
-      onChange = props.onChange,
-      onSearch = props.onSearch;
+      onSearch = props.onSearch,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
   var optionItem = options[0];
 
   if (!optionItem.templateProps) {
@@ -70,7 +71,7 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
       var key = searchKey.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
       var reg = new RegExp("(".concat(key, ")"), 'ig');
       label = label.replace(reg, function (x) {
-        return "<span class=\"next-select-highlight\" style=\"background-color: #EFF3F8;font-weight: 500;\">".concat(x, "</span>");
+        return "<span class=\"".concat(prefix, "-select-highlight\" style=\"background-color: #EFF3F8;font-weight: 500;\">").concat(x, "</span>");
       });
     }
 
@@ -93,30 +94,24 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (!(actionType === 'itemClick' && onChange)) {
-                _context.next = 8;
+              if (!(actionType === 'itemClick')) {
+                _context.next = 7;
                 break;
               }
 
               changeFileds = Object.create({});
               changeFileds[dataIndex] = value;
-              onChange(changeFileds, changeFileds);
               setAllFileds(changeFileds);
               setVisible(false);
-              _context.next = 18;
+              _context.next = 17;
               break;
 
-            case 8:
+            case 7:
               setInputValue(value); // fuzzyDisable
 
               if (!optionItem.templateProps || !optionItem.templateProps.fuzzyDisable) {
                 _changeFileds = Object.create({});
                 _changeFileds[dataIndex] = value;
-
-                if (onChange) {
-                  onChange(_changeFileds, _changeFileds);
-                }
-
                 setAllFileds(_changeFileds);
               } //
 
@@ -126,14 +121,14 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
               }
 
               if (!onSuggest) {
-                _context.next = 18;
+                _context.next = 17;
                 break;
               }
 
-              _context.next = 14;
+              _context.next = 13;
               return onSuggest(value, dataIndex);
 
-            case 14:
+            case 13:
               list = _context.sent;
               // console.log('res suggest', res);
               newDataSource = [{
@@ -143,7 +138,7 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
               setInputDataSource(newDataSource);
               setVisible(true);
 
-            case 18:
+            case 17:
             case "end":
               return _context.stop();
           }
@@ -159,19 +154,10 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
 
   function _selectChange() {
     _selectChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(value, dataIndex) {
-      var changeFileds;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              if (onChange) {
-                changeFileds = Object.create({});
-                changeFileds[dataIndex] = value;
-                onChange(changeFileds, changeFileds);
-                setAllFileds(changeFileds);
-              }
-
-            case 1:
             case "end":
               return _context2.stop();
           }
@@ -187,8 +173,10 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
     }
   }
 
-  return /*#__PURE__*/_react.default.createElement(_style.SearchWarp, null, optionItem.template === 'input' && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('left-wrap', 'next-input')
+  return /*#__PURE__*/_react.default.createElement(_style.SearchWarp, {
+    prefix: prefix
+  }, optionItem.template === 'input' && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('left-wrap', "".concat(prefix, "input"))
   }, /*#__PURE__*/_react.default.createElement(AutoComplete, {
     className: (0, _classnames.default)('main-input', 'single'),
     placeholder: optionItem.templateProps.placeholder || "\u9ED8\u8BA4\u6309".concat(optionItem.label, "\u641C\u7D22"),
@@ -206,7 +194,7 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
       inputChange(value, actionType, optionItem.dataIndex);
     }
   })), optionItem.template === 'select' && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('left-wrap', 'next-input')
+    className: (0, _classnames.default)('left-wrap', "".concat(prefix, "input"))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('condition')
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -233,5 +221,6 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
   }))));
 };
 
-var _default = ModeSingleSingle;
+var _default = _consoleComponents.ConfigProvider.config(ModeSingleSingle);
+
 exports.default = _default;

package/lib/provider/LoggerProvider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface LoggerProviderProps {
-    regionId: string;
+    regionId?: string;
     resourceType: string;
     componentName: string;
 }

package/lib/search.js

@@ -27,7 +27,8 @@ var SearchWrap = _styledComponents.default.div.withConfig({
 
 var Search = function Search(props) {
   var className = props.className,
-      mode = props.mode,
+      _props$simple = props.simple,
+      simple = _props$simple === void 0 ? false : _props$simple,
       style = props.style;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LoggerProvider.default, {
     regionId: props.regionId,
@@ -36,7 +37,7 @@ var Search = function Search(props) {
   }), /*#__PURE__*/_react.default.createElement(SearchWrap, {
     className: (0, _classnames.default)(_constants.baseClassName, className),
     style: style
-  }, mode === 'single-single' && /*#__PURE__*/_react.default.createElement(_modeSingleSingle.default, props), mode === 'single-multi' && /*#__PURE__*/_react.default.createElement(_modeSingleMulti.default, props), mode === 'multi-multi' && /*#__PURE__*/_react.default.createElement(_modeSingleMulti.default, props)));
+  }, simple ? /*#__PURE__*/_react.default.createElement(_modeSingleSingle.default, props) : /*#__PURE__*/_react.default.createElement(_modeSingleMulti.default, props)));
 };
 
 exports.Search = Search;

package/lib/searchTagList/index.d.ts

@@ -1,4 +1,2 @@
-import React from "react";
-import { IRcSearchTagListProps } from '../types/IRcSearchTagListProps.type';
-declare const SearchTagList: React.FC<IRcSearchTagListProps>;
-export default SearchTagList;
+declare const _default: any;
+export default _default;

package/lib/searchTagList/index.js

@@ -28,7 +28,9 @@ var SearchTagList = function SearchTagList(props) {
   var tagList = props.tagList,
       className = props.className,
       style = props.style,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
   function onRemoveTag(item) {
     var newTagList = (0, _toConsumableArray2.default)(tagList);
@@ -49,6 +51,7 @@ var SearchTagList = function SearchTagList(props) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_style.TagListWrap, {
+    prefix: prefix,
     className: (0, _classnames.default)(_constants.baseTagListClassName, className),
     style: style
   }, /*#__PURE__*/_react.default.createElement(_LoggerProvider.default, {
@@ -71,5 +74,6 @@ var SearchTagList = function SearchTagList(props) {
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));
 };
 
-var _default = SearchTagList;
+var _default = _consoleComponents.ConfigProvider.config(SearchTagList);
+
 exports.default = _default;

package/lib/style.d.ts

@@ -1,5 +1,13 @@
-declare const SearchWarp: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuContentWrap: import("styled-components").StyledComponent<"ul", any, {}, never>;
-declare const MultiBtnWarp: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const TagListWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const SearchWarp: import("styled-components").StyledComponent<"div", any, {
+    prefix: string;
+}, never>;
+declare const MenuContentWrap: import("styled-components").StyledComponent<"ul", any, {
+    prefix: string;
+}, never>;
+declare const MultiBtnWarp: import("styled-components").StyledComponent<"div", any, {
+    prefix: string;
+}, never>;
+declare const TagListWrap: import("styled-components").StyledComponent<"div", any, {
+    prefix: string;
+}, never>;
 export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };

package/lib/style.js

@@ -9,26 +9,30 @@ exports.TagListWrap = exports.SearchWarp = exports.MultiBtnWarp = exports.MenuCo
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var prefix = function prefix(props) {
+  return props.prefix ? ".".concat(props.prefix) : '.next-';
+};
+
 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;}.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;.next-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%;}.next-input,.xdemo-input{height:auto;box-shadow:none;}}.xdemo-input.xdemo-medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;border-bottom-left-radius:0;border-top-left-radius:0;border-left:none;}}"]);
+})(["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);
 
 exports.SearchWarp = SearchWarp;
 
 var MenuContentWrap = _styledComponents.default.ul.withConfig({
   componentId: "sc-1afc1cn-1"
-})([".next-tag-small.next-tag-closable > .next-tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}.next-tag-small.next-tag-closable > .next-tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}.next-tag-small.next-tag-closable > .next-tag-close-btn .next-icon:before,.next-tag-small.next-tag-closable > .next-tag-close-btn .next-icon .next-icon-remote{font-size:13px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}"]);
+})(["", "tag-small", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}", "tag-small", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:13px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 
 exports.MenuContentWrap = MenuContentWrap;
 
 var MultiBtnWarp = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-2"
-})(["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;}.next-btn.next-small:not(.isOnlyIcon):not(.next-btn-text){min-width:auto;}"]);
+})(["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);
 
 exports.MultiBtnWarp = MultiBtnWarp;
 
 var TagListWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-3"
-})([".next-tag-medium.next-tag-closable > .next-tag-close-btn{margin-left:8px;padding-right:6px;}.next-tag-medium.next-tag-closable > .next-tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}.next-tag-medium.next-tag-closable > .next-tag-close-btn .next-icon:before,.next-tag-medium.next-tag-closable > .next-tag-close-btn .next-icon .next-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;}"]);
+})(["", "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);
 
 exports.TagListWrap = TagListWrap;

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

@@ -16,11 +16,12 @@ export interface IRcSearchOptionsProps {
      *  - select：单选<br />
      *  - multiple：多选<br />
      */
-    template: string;
+    template?: string;
     /**
      * 定义传给表单项的属性
      * templateProps.placeholder
      * templateProps.dataSource
      */
-    templateProps: any;
+    templateProps?: any;
+    groupName?: string;
 }

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

@@ -2,13 +2,10 @@ import { IRcSearchOptionsProps } from './IRcSearchOptions.type';
 import { IRcSearchTagItemProps } from './IRcSearchTagItemProps.type';
 export interface IRcSearchProps {
     /**
-     * 组件适应的场景:<br />
-     *  - 场景一：single-single：单维度单类别单选<br />
-     *  - 场景二：single-multi：单维度多类别单选<br />
-     *  - 场景三：multi-multi：多维度多类别单选<br />
-     * @default "single-single"
+     * 是否是简单搜索， 不支持多 filter, 但是支持模糊
+     * @default false
      */
-    mode?: "single-single" | "single-multi" | "multi-multi" | string;
+    simple?: boolean;
     /**
      * 类名
      */
@@ -39,23 +36,15 @@ export interface IRcSearchProps {
     /**
      * regionId
      */
-    regionId: string;
+    regionId?: string;
     /**
      * resourceType
      */
     resourceType?: string;
     /**
-     * 点击搜索按钮， 触发搜索回调。
+     * 搜索触发
      */
-    onSearch?: (allFileds: any) => void;
-    /**
-     * 包括onInput的回车；onSelect； 对Tag的增减。
-     */
-    onChange?: (changeFileds: any, allFileds: any) => void;
-    /**
-     * input的input
-     */
-    onInput?: () => void;
+    onSearch?: (allFields: any) => void;
     /**
      * 模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表
      */
@@ -69,8 +58,4 @@ export interface IRcSearchProps {
      * 提供单选和多选, 触发。
      */
     onSelect?: () => void;
-    /**
-     * tag有增减时。
-     */
-    onTagChange?: (newTags: any) => void;
 }

package/lib/useCssVar.d.ts

@@ -0,0 +1 @@
+export declare function useCssVar(cssVarName: string): string;

package/lib/useCssVar.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCssVar = useCssVar;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _consoleComponents = require("@alicloud/console-components");
+
+var nextId = 0;
+
+function useCssVar(cssVarName) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      v = _useState2[0],
+      setV = _useState2[1];
+
+  var refElement = _consoleComponents.ConfigProvider.useRefElement();
+
+  (0, _react.useLayoutEffect)(function () {
+    var _window$__recheck_css;
+
+    check(); // @ts-ignore
+
+    var checkArr = window['__recheck_css_var'] = (_window$__recheck_css = window['__recheck_css_var']) !== null && _window$__recheck_css !== void 0 ? _window$__recheck_css : [];
+
+    while (checkArr[nextId]) {
+      // 如果一个页面下有份此组件库（即有多个nextId指针），需要避免冲突
+      nextId++;
+    }
+
+    var id = nextId++;
+    checkArr[id] = check;
+    return function () {
+      delete checkArr[id];
+    };
+
+    function check() {
+      var _window$getComputedSt, _window$getComputedSt2, _window;
+
+      var val = (_window$getComputedSt = (_window$getComputedSt2 = (_window = window).getComputedStyle) === null || _window$getComputedSt2 === void 0 ? void 0 : _window$getComputedSt2.call(_window, refElement).getPropertyValue(cssVarName)) !== null && _window$getComputedSt !== void 0 ? _window$getComputedSt : '';
+      setV(val);
+    }
+  }, [refElement, cssVarName]);
+  return v;
+}

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "lib/index.js",
-  "module": "es/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
   "scripts": {