@alicloud/console-components-search 0.1.0 → 0.1.3

package/es/modeSingleSingle/index.js

@@ -4,7 +4,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState } from "react";
 import classNames from 'classnames'; // import styled from "styled-components";
 
-import { Button, Icon, Select } from '@alicloud/console-components';
+import { Button, ConfigProvider, Icon, Select } from '@alicloud/console-components';
 import { SearchWarp } from "../style";
 import { getSelectOptionAdatp } from '../utils';
 var AutoComplete = Select.AutoComplete;
@@ -12,8 +12,9 @@ var AutoComplete = 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) {
@@ -47,7 +48,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>");
       });
     }
 
@@ -70,30 +71,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);
               } //
 
@@ -103,14 +98,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 = [{
@@ -120,7 +115,7 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
               setInputDataSource(newDataSource);
               setVisible(true);
 
-            case 18:
+            case 17:
             case "end":
               return _context.stop();
           }
@@ -136,19 +131,10 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
 
   function _selectChange() {
     _selectChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, dataIndex) {
-      var changeFileds;
       return _regeneratorRuntime.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();
           }
@@ -164,8 +150,10 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(SearchWarp, null, optionItem.template === 'input' && /*#__PURE__*/React.createElement("div", {
-    className: classNames('left-wrap', 'next-input')
+  return /*#__PURE__*/React.createElement(SearchWarp, {
+    prefix: prefix
+  }, optionItem.template === 'input' && /*#__PURE__*/React.createElement("div", {
+    className: classNames('left-wrap', "".concat(prefix, "input"))
   }, /*#__PURE__*/React.createElement(AutoComplete, {
     className: classNames('main-input', 'single'),
     placeholder: optionItem.templateProps.placeholder || "\u9ED8\u8BA4\u6309".concat(optionItem.label, "\u641C\u7D22"),
@@ -183,7 +171,7 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
       inputChange(value, actionType, optionItem.dataIndex);
     }
   })), optionItem.template === 'select' && /*#__PURE__*/React.createElement("div", {
-    className: classNames('left-wrap', 'next-input')
+    className: classNames('left-wrap', "".concat(prefix, "input"))
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('condition')
   }, /*#__PURE__*/React.createElement("span", {
@@ -210,4 +198,4 @@ var ModeSingleSingle = function ModeSingleSingle(props) {
   }))));
 };
 
-export default ModeSingleSingle;
+export default ConfigProvider.config(ModeSingleSingle);

package/es/search.js

@@ -10,7 +10,8 @@ var SearchWrap = styled.div.withConfig({
 })(["height:32px;width:400px;display:inline-block;vertical-align:top;"]);
 export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoggerProvider, {
     regionId: props.regionId,
@@ -19,5 +20,5 @@ export var Search = function Search(props) {
   }), /*#__PURE__*/React.createElement(SearchWrap, {
     className: classNames(baseClassName, className),
     style: style
-  }, mode === 'single-single' && /*#__PURE__*/React.createElement(ModeSingleSingle, props), mode === 'single-multi' && /*#__PURE__*/React.createElement(ModeSingleMulti, props), mode === 'multi-multi' && /*#__PURE__*/React.createElement(ModeSingleMulti, props)));
+  }, simple ? /*#__PURE__*/React.createElement(ModeSingleSingle, props) : /*#__PURE__*/React.createElement(ModeSingleMulti, props)));
 };

package/es/searchTagList/index.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React from "react";
 import classNames from 'classnames';
-import { Tag } from '@alicloud/console-components';
+import { ConfigProvider, Tag } from '@alicloud/console-components';
 import LoggerProvider from '../provider/LoggerProvider';
 import { TagListWrap } from '../style';
 import { baseTagListClassName } from '../constants';
@@ -12,7 +12,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 = _toConsumableArray(tagList);
@@ -33,6 +35,7 @@ var SearchTagList = function SearchTagList(props) {
   }
 
   return /*#__PURE__*/React.createElement(TagListWrap, {
+    prefix: prefix,
     className: classNames(baseTagListClassName, className),
     style: style
   }, /*#__PURE__*/React.createElement(LoggerProvider, {
@@ -55,4 +58,4 @@ var SearchTagList = function SearchTagList(props) {
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));
 };
 
-export default SearchTagList;
+export default ConfigProvider.config(SearchTagList);

package/es/style.js

@@ -1,14 +1,19 @@
 import styled from "styled-components";
+
+var prefix = function prefix(props) {
+  return props.prefix ? ".".concat(props.prefix) : '.next-';
+};
+
 var SearchWarp = styled.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);
 var MenuContentWrap = styled.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);
 var MultiBtnWarp = styled.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);
 var TagListWrap = styled.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);
 export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };

package/es/useCssVar.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLayoutEffect, useState } from 'react';
+import { ConfigProvider } from '@alicloud/console-components';
+var nextId = 0;
+export function useCssVar(cssVarName) {
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      v = _useState2[0],
+      setV = _useState2[1];
+
+  var refElement = ConfigProvider.useRefElement();
+  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/lib/modeSingleMulti/index.d.ts

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