@alicloud/console-components-search 0.2.37-alpha.0 → 0.2.37-alpha.1

package/demos/demo1.demo.tsx

@@ -110,7 +110,7 @@ const Demo1: React.FC<{}> = (props) => {
         />
         <Search
           defaultDataIndex="name"
-          defaultSelectedDataIndex="name"
+          // defaultSelectedDataIndex="name"
           options={options}
           prefixSelectMode="cascader"
           onSearch={(value, dataIndex, extra) => {

package/dist/index.js

@@ -90281,7 +90281,7 @@ var highlightKeyword = function (value, keywords) {
         endValue));
 };
 var ComplexSearch = function (props) {
-    var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c, _d = props.prefixSelectMode, prefixSelectMode = _d === void 0 ? 'select' : _d;
+    var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c, _d = props.prefixSelectMode, prefixSelectMode = _d === void 0 ? 'select' : _d, prefixSelectItemRender = props.prefixSelectItemRender;
     var _e = (0, react_1.useState)(options.find(function (o) { return o.dataIndex === defaultSelectedDataIndex; })), selectedFilterType = _e[0], setSelectedFilterType = _e[1];
     var _f = (0, react_1.useState)(false), focused = _f[0], setFocused = _f[1];
     var autoRef = (0, react_1.useRef)(null);
@@ -90429,9 +90429,17 @@ var ComplexSearch = function (props) {
             react_1.default.createElement("div", { className: (0, classnames_1.default)('condition') }, selectedFilterType ? (react_1.default.createElement(InputPrefix_1.default, { type: prefixSelectMode, 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 (value) {
                     console.log(value);
                     handlerFilterTypeChange(value);
-                } })) : null),
+                }, itemRender: prefixSelectItemRender })) : null),
             react_1.default.createElement("div", { className: (0, classnames_1.default)('forms') },
-                !selectedFilterType ? (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
+                !selectedFilterType && prefixSelectMode === 'cascader' ? react_1.default.createElement(console_components_1.CascaderSelect, { className: (0, classnames_1.default)('main-input', 'multi'), hasBorder: false, dataSource: normalizeOptions(options), placeholder: placeholder ||
+                        ((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
+                            ? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
+                                value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,
+                            })
+                            : ''), onChange: function (value) {
+                        handlerFilterTypeChange(value);
+                    }, itemRender: prefixSelectItemRender }) : null,
+                !selectedFilterType && prefixSelectMode === 'select' ? (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
                     props: {
                         // @ts-ignore
                         onChange: function (value, actionType, option) {
@@ -90440,7 +90448,7 @@ var ComplexSearch = function (props) {
                     },
                 }), { autoHighlightFirstItem: false, 
                     // @ts-ignore
-                    itemRender: highlightItem, placeholder: placeholder ||
+                    itemRender: prefixSelectItemRender || highlightItem, placeholder: placeholder ||
                         ((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
                             ? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
                                 value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,

package/es/ComplexSearch/index.js

@@ -9,7 +9,7 @@ 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 { Button, Icon, Select, ConfigProvider, Field, Checkbox, CascaderSelect } from '@alicloud/console-components';
 import { isPlainObject, template } from 'lodash';
 import { SearchWarp, MultiBtnWarp } from '../style';
 import SearchConditionSelectPrefix from './InputPrefix';
@@ -111,7 +111,8 @@ var ComplexSearch = function ComplexSearch(props) {
     _props$prefix = props.prefix,
     prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
     _props$prefixSelectMo = props.prefixSelectMode,
-    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo;
+    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
+    prefixSelectItemRender = props.prefixSelectItemRender;
   var _useState = useState(options.find(function (o) {
       return o.dataIndex === defaultSelectedDataIndex;
     })),
@@ -334,10 +335,22 @@ var ComplexSearch = function ComplexSearch(props) {
     onChange: function onChange(value) {
       console.log(value);
       handlerFilterTypeChange(value);
-    }
+    },
+    itemRender: prefixSelectItemRender
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames('forms')
-  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
+  }, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/React.createElement(CascaderSelect, {
+    className: classNames('main-input', 'multi'),
+    hasBorder: false,
+    dataSource: normalizeOptions(options),
+    placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
+      value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
+    }) : ''),
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    },
+    itemRender: prefixSelectItemRender
+  }) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType, option) {
@@ -348,7 +361,7 @@ var ComplexSearch = function ComplexSearch(props) {
     autoHighlightFirstItem: false
     // @ts-ignore
     ,
-    itemRender: highlightItem,
+    itemRender: prefixSelectItemRender || highlightItem,
     placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
     }) : ''),

package/lib/ComplexSearch/index.js

@@ -120,7 +120,8 @@ var ComplexSearch = function ComplexSearch(props) {
     _props$prefix = props.prefix,
     prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
     _props$prefixSelectMo = props.prefixSelectMode,
-    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo;
+    prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
+    prefixSelectItemRender = props.prefixSelectItemRender;
   var _useState = (0, _react.useState)(options.find(function (o) {
       return o.dataIndex === defaultSelectedDataIndex;
     })),
@@ -343,10 +344,22 @@ var ComplexSearch = function ComplexSearch(props) {
     onChange: function onChange(value) {
       console.log(value);
       handlerFilterTypeChange(value);
-    }
+    },
+    itemRender: prefixSelectItemRender
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('forms')
-  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
+  }, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/_react.default.createElement(_consoleComponents.CascaderSelect, {
+    className: (0, _classnames.default)('main-input', 'multi'),
+    hasBorder: false,
+    dataSource: normalizeOptions(options),
+    placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
+      value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
+    }) : ''),
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    },
+    itemRender: prefixSelectItemRender
+  }) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType, option) {
@@ -357,7 +370,7 @@ var ComplexSearch = function ComplexSearch(props) {
     autoHighlightFirstItem: false
     // @ts-ignore
     ,
-    itemRender: highlightItem,
+    itemRender: prefixSelectItemRender || highlightItem,
     placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
     }) : ''),

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化，因此你可以使用接口来定义Props，从而能便捷地将Props的信息通过文档透出。
  *
@@ -67,4 +68,10 @@ export interface IRcSearchProps {
      * 前缀选择器类型
      */
     prefixSelectMode?: 'select' | 'cascader';
+    /**
+     * 前缀选择器 item 渲染
+     * @param item
+     * @returns
+     */
+    prefixSelectItemRender?: (item: any) => React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.2.37-alpha.0",
+  "version": "0.2.37-alpha.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",