@alicloud/console-components-search 0.1.1 → 0.2.0

package/doc-dist/log-deps-build.log

@@ -1,7 +1,7 @@
 开始构建微应用external依赖...
 BreezrPluginStyledComponentsIsolation  The plugin will trying to use the package's name as isolation id of styled-components. This behavior usually occurred on dev mode. And if you were received this warning on publish mode then you should to set `options.styledComponentStyleSheetId` implicitly.
 ℹ Compiling Webpack
-✔ Webpack: Compiled successfully in 10.35s
+✔ Webpack: Compiled successfully in 13.15s
  WARN  asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
 This can impact web performance.
 Assets: 

package/es/index.js

@@ -4,4 +4,4 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
 import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
 import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
 import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
-export { Search, SearchTagList, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };
+export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };

package/es/modeSingleSingle/InputPrefix.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["dataSource", "label"];
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Select } from '@alicloud/console-components';
+
+var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
+  var _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+      label = props.label,
+      reset = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition-item')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('condition-item-txt')
+  }, label), /*#__PURE__*/React.createElement(Icon, {
+    type: "caret-down",
+    size: "xxs"
+  }), /*#__PURE__*/React.createElement(Select, _extends({
+    className: classNames('condition-select'),
+    hasBorder: false,
+    dataSource: dataSource,
+    autoWidth: true
+  }, reset)));
+};
+
+export default SearchConditionSelectPrefix;

package/es/modeSingleSingle/index2.js

@@ -0,0 +1,342 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import classNames from 'classnames';
+import cloneDeep from 'lodash/cloneDeep';
+import groupBy from 'lodash/groupBy';
+import isArray from 'lodash/isArray';
+import React, { useState, useRef } from "react";
+import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
+import { SearchWarp, MultiBtnWarp } from "../style";
+import SearchConditionSelectPrefix from "./InputPrefix";
+var AutoComplete = Select.AutoComplete;
+/**
+ * 
+ * @param IRcSearchOptionsProps options
+ * @returns 
+ */
+
+var normalizeOptions = function normalizeOptions(options) {
+  var optionsCopy = cloneDeep(options);
+  optionsCopy.forEach(function (o) {
+    var _o$groupName;
+
+    return (_o$groupName = o.groupName) !== null && _o$groupName !== void 0 ? _o$groupName : o.groupName = "选择筛选条件";
+  });
+  return Object.entries(groupBy(optionsCopy, 'groupName')).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        groupName = _ref2[0],
+        children = _ref2[1];
+
+    return {
+      label: groupName,
+      children: children.map(function (l) {
+        return {
+          label: l.label,
+          value: l.dataIndex
+        };
+      })
+    };
+  });
+};
+
+var normalizeSelectDataSource = function normalizeSelectDataSource(title, list) {
+  return [{
+    label: title || '',
+    children: _toConsumableArray(list)
+  }];
+};
+
+var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
+  var opt = options.find(function (o) {
+    return o.dataIndex === dataIndex;
+  });
+  var valueLabel = value;
+
+  if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
+    var _opt$templateProps;
+
+    valueLabel = (_opt$templateProps = opt.templateProps) === null || _opt$templateProps === void 0 ? void 0 : _opt$templateProps.dataSource.find(function (d) {
+      return d.value === value;
+    }).label;
+  }
+
+  if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
+    var _opt$templateProps2, _opt$templateProps3;
+
+    console.log((_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
+      return value.indexOf(d.value) !== -1;
+    }));
+    valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
+      return value.indexOf(d.value) !== -1;
+    }).map(function (d) {
+      return d.label;
+    }).join('/');
+  }
+
+  return {
+    label: opt === null || opt === void 0 ? void 0 : opt.label,
+    valueLabel: valueLabel
+  };
+};
+
+var ComplexSearch = function ComplexSearch(props) {
+  var options = props.options,
+      fuzzy = props.fuzzy,
+      defaultDataIndex = props.defaultDataIndex,
+      placeholder = props.placeholder,
+      onSearch = props.onSearch,
+      onSuggest = props.onSuggest,
+      _props$suggestions = props.suggestions,
+      suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedFilterType = _useState2[0],
+      setSelectedFilterType = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var autoRef = useRef(null);
+  var field = Field.useField();
+  var init = field.init,
+      getValue = field.getValue,
+      reset = field.reset,
+      getError = field.getError;
+  var focusProps = {
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    }
+  }; //计算视图，根据内部状态和输入的 props 决定一些值
+
+  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
+  var defaultFilter = options.find(function (t) {
+    return t.dataIndex === defaultDataIndex;
+  });
+  /**
+   * 处理筛选类型选中的情况
+   */
+
+  var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
+    var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    setSelectedFilterType(options.find(function (o) {
+      return o.dataIndex === type;
+    }));
+    resetValue && reset();
+  };
+  /**
+   * 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
+   */
+
+
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
+    var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索，则直接处理
+
+    if (isFuzzySearch) {
+      if (actionType !== 'change') {
+        handleSearch();
+      } else {
+        onSuggest && onSuggest(value, defaultDataIndex || '');
+      }
+
+      return;
+    } // 否则处理筛选项改变的情况
+
+
+    handlerFilterTypeChange(value, false);
+  };
+
+  var handlerFilterClear = function handlerFilterClear() {
+    setSelectedFilterType(null);
+    reset();
+  };
+
+  var handleSearch = function handleSearch() {
+    if (onSearch) {
+      var value = getValue('searchValue');
+
+      if (defaultDataIndex && !selectedFilterType) {
+        onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
+      }
+
+      if (selectedFilterType) {
+        onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+      }
+    }
+
+    reset();
+    setFocused(false);
+  };
+
+  var handleKeyUp = function handleKeyUp(e) {
+    if (e.keyCode === 13 && e.currentTarget.value) {
+      handleSearch();
+      document.body.click();
+    }
+  };
+
+  var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
+    var searchValue = getValue('searchValue');
+    var checked = isArray(searchValue) && searchValue.some(function (v) {
+      return v === item.value;
+    });
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      checked: checked
+    }, item.label);
+  };
+
+  var renderSelectedFilter = function renderSelectedFilter() {
+    var _selectedFilterType$t, _selectedFilterType$t2;
+
+    var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
+    var searchValue = getValue('searchValue');
+
+    var props = _objectSpread({
+      hasBorder: false,
+      autoFocus: true,
+      hasClear: true,
+      key: type,
+      placeholder: (selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t = selectedFilterType.templateProps) === null || _selectedFilterType$t === void 0 ? void 0 : _selectedFilterType$t.placeholder) || "\u9ED8\u8BA4\u6309".concat(selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, "\u641C\u7D22")
+    }, focusProps);
+
+    var selectProps = {
+      dataSource: normalizeSelectDataSource(selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, (selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t2 = selectedFilterType.templateProps) === null || _selectedFilterType$t2 === void 0 ? void 0 : _selectedFilterType$t2.dataSource) || []),
+      defaultVisible: true,
+      popupStyle: {
+        width: 'auto'
+      }
+    };
+
+    switch (type) {
+      case 'input':
+        return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init('searchValue', {}), {
+          className: classNames('main-input', 'multi')
+        }, props, {
+          onKeyUp: handleKeyUp
+        }));
+
+      case 'select':
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          className: classNames('main-input', 'select')
+        }, init('searchValue', {
+          props: {
+            onChange: handleSearch
+          }
+        }), props, selectProps));
+
+      case 'multiple':
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          className: classNames('main-input', 'multi')
+        }, init('searchValue', {}), props, selectProps, {
+          itemRender: renderMultipleSelectorItem,
+          popupClassName: "xconsole-rcsearch-multi-pop",
+          mode: "multiple",
+          maxTagCount: 0,
+          menuProps: {
+            footer: /*#__PURE__*/React.createElement(MultiBtnWarp, {
+              prefix: prefix
+            }, /*#__PURE__*/React.createElement(Button, {
+              size: "small",
+              className: classNames("pri-btn"),
+              type: "primary",
+              disabled: !(searchValue !== null && searchValue !== void 0 && searchValue.length),
+              onClick: function onClick() {
+                handleSearch();
+              }
+            }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+              size: "small",
+              className: classNames("cancel-btn"),
+              type: "normal",
+              onClick: function onClick() {
+                reset();
+              }
+            }, "\u53D6\u6D88"))
+          }
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
+    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
+    return hasFilterTypeClearBtn && /*#__PURE__*/React.createElement("div", {
+      className: "clear-level1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefix, "input-control")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefix, "input-hint-wrap")
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "".concat(prefix, "icon ").concat(prefix, "icon-delete-filling ").concat(prefix, "medium ").concat(prefix, "input-hint ").concat(prefix, "input-clear-icon"),
+      role: "button",
+      "aria-label": "\u6E05\u9664",
+      onClick: function onClick() {
+        handlerFilterClear();
+      }
+    }))));
+  };
+
+  return /*#__PURE__*/React.createElement(SearchWarp, {
+    prefix: prefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('left-wrap', "".concat(prefix, "input"), {
+      'focus': focused
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition')
+  }, selectedFilterType ? /*#__PURE__*/React.createElement(SearchConditionSelectPrefix, {
+    dataSource: normalizeOptions(options),
+    label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
+    defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    }
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: classNames('forms')
+  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init('filterInputValue', {
+    props: {
+      // @ts-ignore
+      onChange: function onChange(value, actionType) {
+        handlerFilterTypeInput(value, actionType, isFuzzy);
+      }
+    }
+  }), {
+    ref: autoRef,
+    placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? "\u9ED8\u8BA4\u6309".concat(defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label, "\u641C\u7D22") : '请搜索',
+    className: classNames('main-input', 'multi'),
+    hasBorder: false,
+    onKeyUp: handleKeyUp,
+    dataSource: // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
+    // 则表示需要模糊搜索，调用 handleSuggest
+    isFuzzy ? suggestions : normalizeOptions(options),
+    popupStyle: {
+      width: 'auto'
+    }
+  }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/React.createElement("div", {
+    className: classNames('right-wrap')
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames('search-btn', {
+      'focus': focused
+    }),
+    onClick: handleSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "search"
+  }))));
+};
+
+export default ConfigProvider.config(ComplexSearch);

package/es/search.js

@@ -1,6 +1,5 @@
 import React from "react";
-import ModeSingleSingle from "./modeSingleSingle";
-import ModeSingleMulti from "./modeSingleMulti";
+import ComplexSearch from "./modeSingleSingle/index2";
 import classNames from 'classnames';
 import styled from "styled-components";
 import { baseClassName } from './constants';
@@ -20,5 +19,5 @@ export var Search = function Search(props) {
   }), /*#__PURE__*/React.createElement(SearchWrap, {
     className: classNames(baseClassName, className),
     style: style
-  }, simple ? /*#__PURE__*/React.createElement(ModeSingleSingle, props) : /*#__PURE__*/React.createElement(ModeSingleMulti, props)));
+  }, /*#__PURE__*/React.createElement(ComplexSearch, props)));
 };

package/es/searchTagList/index.js

@@ -2,14 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React from "react";
 import classNames from 'classnames';
 import { ConfigProvider, Tag } from '@alicloud/console-components';
-import LoggerProvider from '../provider/LoggerProvider';
 import { TagListWrap } from '../style';
 import { baseTagListClassName } from '../constants';
 var TagGroup = Tag.Group,
     ClosableTag = Tag.Closeable;
 
 var SearchTagList = function SearchTagList(props) {
-  var tagList = props.tagList,
+  var dataSource = props.dataSource,
       className = props.className,
       style = props.style,
       onChange = props.onChange,
@@ -17,7 +16,7 @@ var SearchTagList = function SearchTagList(props) {
       prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
   function onRemoveTag(item) {
-    var newTagList = _toConsumableArray(tagList);
+    var newTagList = _toConsumableArray(dataSource);
 
     if (onChange) {
       var resFindIndex = newTagList.findIndex(function (x) {
@@ -38,11 +37,7 @@ var SearchTagList = function SearchTagList(props) {
     prefix: prefix,
     className: classNames(baseTagListClassName, className),
     style: style
-  }, /*#__PURE__*/React.createElement(LoggerProvider, {
-    regionId: props.regionId,
-    resourceType: props.resourceType || '',
-    componentName: "RcSearch"
-  }), /*#__PURE__*/React.createElement(TagGroup, null, tagList && tagList.length > 0 && tagList.map(function (tagItem) {
+  }, /*#__PURE__*/React.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
     return /*#__PURE__*/React.createElement(ClosableTag, {
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
@@ -51,8 +46,8 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueShow);
-  }), tagList && tagList.length > 0 && /*#__PURE__*/React.createElement("a", {
+    }, tagItem.label, ":", tagItem.valueLabel);
+  }), dataSource && dataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
     className: "remove-btn",
     onClick: onRemoveAllTag
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));

package/es/style.js

@@ -6,7 +6,7 @@ var prefix = function prefix(props) {
 
 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;", "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);
+})(["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-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.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;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}"], prefix, prefix, prefix, prefix, prefix);
 var MenuContentWrap = styled.ul.withConfig({
   componentId: "sc-1afc1cn-1"
 })(["", "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);

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/index.d.ts

@@ -4,4 +4,4 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
 import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
 import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
 import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
-export { Search, SearchTagList, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };
+export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };

package/lib/index.js

@@ -35,7 +35,7 @@ Object.defineProperty(exports, "Search", {
     return _search.Search;
   }
 });
-Object.defineProperty(exports, "SearchTagList", {
+Object.defineProperty(exports, "SearchFilter", {
   enumerable: true,
   get: function get() {
     return _searchTagList.default;

package/lib/modeSingleSingle/InputPrefix.d.ts

@@ -0,0 +1,2 @@
+declare const SearchConditionSelectPrefix: (props: any) => JSX.Element;
+export default SearchConditionSelectPrefix;

package/lib/modeSingleSingle/InputPrefix.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _consoleComponents = require("@alicloud/console-components");
+
+var _excluded = ["dataSource", "label"];
+
+var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
+  var _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+      label = props.label,
+      reset = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('condition-item')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)('condition-item-txt')
+  }, label), /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
+    type: "caret-down",
+    size: "xxs"
+  }), /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
+    className: (0, _classnames.default)('condition-select'),
+    hasBorder: false,
+    dataSource: dataSource,
+    autoWidth: true
+  }, reset)));
+};
+
+var _default = SearchConditionSelectPrefix;
+exports.default = _default;

package/lib/modeSingleSingle/index2.d.ts

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