@qn-pandora/pandora-component 4.0.1 → 4.0.3

package/es/index.d.ts

@@ -7,6 +7,7 @@ export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter, INameLimiterProps } from './components/NameLimiter';
 export { default as Input, TInputProps } from './components/Input';
 export { default as Selector, ISelectorProps, IGroupOption as ISelectorGroupOption, IOptions as ISelectorOptions, SelectValue as ISelectValue } from './components/Selector';
+export { default as SelectorWidthChildren } from './components/Selector/SelectorWidthChildren';
 export { default as Table, ITableProps, IOptionItem as ITableOptionItem } from './components/Table';
 export { default as Steps } from './components/Steps';
 export { default as DateTimePicker, Time, EButtonType, IDateTimePickerProps } from './components/DateTimePicker';

package/es/index.js

@@ -7,6 +7,7 @@ export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter } from './components/NameLimiter';
 export { default as Input } from './components/Input';
 export { default as Selector } from './components/Selector';
+export { default as SelectorWidthChildren } from './components/Selector/SelectorWidthChildren';
 export { default as Table } from './components/Table';
 export { default as Steps } from './components/Steps';
 export { default as DateTimePicker, Time, EButtonType } from './components/DateTimePicker';

package/es/index.less

@@ -2,48 +2,48 @@
 @import './style\theme.less';
 @import './components\AutoComplete\style.less';
 @import './components\Breadcrumb\style.less';
-@import './components\Button\style.less';
 @import './components\Card\style.less';
+@import './components\Button\style.less';
 @import './components\Checkbox\style.less';
 @import './components\CheckTransformList\style.less';
 @import './components\CheckboxList\style.less';
 @import './components\Collapse\style.less';
 @import './components\CollapsiblePanel\style.less';
-@import './components\Input\style.less';
 @import './components\Drawer\style.less';
 @import './components\DateTimePicker\style.less';
+@import './components\Input\style.less';
 @import './components\KeyValuePair\style.less';
-@import './components\Modal\style.less';
 @import './components\Menu\style.less';
-@import './components\OptionList\style.less';
+@import './components\Modal\style.less';
 @import './components\NameExplainTooltip\style.less';
 @import './components\NameLimiter\style.less';
-@import './components\RadioGroup\style.less';
 @import './components\RangeInput\style.less';
-@import './components\Selector\style.less';
+@import './components\RadioGroup\style.less';
+@import './components\OptionList\style.less';
 @import './components\RemarkName\style.less';
-@import './components\Steps\style.less';
+@import './components\Selector\style.less';
 @import './components\Spin\style.less';
-@import './components\Tabs\style.less';
+@import './components\Steps\style.less';
 @import './components\Table\style.less';
-@import './components\Timeline\style.less';
 @import './components\TagList\style.less';
-@import './components\TreeSelector\style.less';
+@import './components\Tabs\style.less';
 @import './components\Transfer\style.less';
+@import './components\Timeline\style.less';
+@import './components\TreeSelector\style.less';
 @import './components\Card\RowExtra\style.less';
 @import './components\Card\SearchInput\style.less';
-@import './components\DateTimePicker\Base\style.less';
 @import './components\DateTimePicker\BaseMobile\style.less';
+@import './components\DateTimePicker\Base\style.less';
 @import './components\DateTimePicker\DisplayInput\style.less';
+@import './components\OptionList\OptionItem\style.less';
 @import './components\OptionList\InlineOptionList\style.less';
 @import './components\OptionList\PopoverOptionList\style.less';
-@import './components\OptionList\OptionItem\style.less';
 @import './components\Steps\ControlButton\style.less';
 @import './components\Table\ColumnTag\style.less';
-@import './components\TagList\Tag\style.less';
-@import './components\Timeline\TimelineItem\style.less';
 @import './components\TagList\TagSwitch\style.less';
-@import './components\Transfer\List\style.less';
+@import './components\TagList\Tag\style.less';
 @import './components\Transfer\ListBody\style.less';
+@import './components\Transfer\List\style.less';
+@import './components\Timeline\TimelineItem\style.less';
 @import './components\DateTimePicker\BaseMobile\Absolute\style.less';
 @import './components\DateTimePicker\Collapse\Panel\style.less';

package/lib/components/AutoComplete/index.js

@@ -34,13 +34,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var lodash_1 = require("lodash");
 var antd_1 = require("antd");
 var style_1 = require("../../constants/style");
 var debounce_1 = __importDefault(require("../../hoc/debounce"));
 function AutoComplete(props) {
     var _a;
     var className = props.className, dropdownClassName = props.dropdownClassName, ellipsis = props.ellipsis, other = __rest(props, ["className", "dropdownClassName", "ellipsis"]);
-    return (React.createElement(antd_1.AutoComplete, __assign({ className: classnames_1.default(className, style_1.SDK_PREFIX + "-auto-complete", style_1.SDK_PREFIX + "-selector"), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-selector-dropdown", (_a = {}, _a[style_1.SDK_PREFIX + "-selector-no-ellipsis"] = !ellipsis, _a), dropdownClassName) }, other)));
+    var filterOption = React.useCallback(function (inputValue, option) {
+        var prefix = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || '';
+        var _a = option || {}, value = _a.value, title = _a.title, children = _a.children, label = _a.label;
+        return children
+            ? lodash_1.isString(children)
+                ? lodash_1.includes(children.toLowerCase(), prefix)
+                : true
+            : label
+                ? lodash_1.isString(label)
+                    ? lodash_1.includes(label.toLowerCase(), prefix)
+                    : true
+                : title
+                    ? lodash_1.isString(title)
+                        ? lodash_1.includes(title.toLowerCase(), prefix)
+                        : true
+                    : lodash_1.isString(value)
+                        ? lodash_1.includes(value.toLowerCase(), prefix)
+                        : true;
+    }, []);
+    return (React.createElement(antd_1.AutoComplete, __assign({ className: classnames_1.default(className, style_1.SDK_PREFIX + "-auto-complete", style_1.SDK_PREFIX + "-selector"), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-selector-dropdown", (_a = {}, _a[style_1.SDK_PREFIX + "-selector-no-ellipsis"] = !ellipsis, _a), dropdownClassName), filterOption: filterOption, showSearch: true }, other)));
 }
 exports.AutoComplete = AutoComplete;
 exports.default = debounce_1.default(AutoComplete);

package/lib/components/DateTimePicker/transform.d.ts

@@ -1,6 +1,9 @@
-import { ITimeRange, ITime } from './constants';
+import moment from 'moment';
+import { ITimeRange, ITime, TimeShiftUnit } from './constants';
 export declare function transformToTime(time: ITimeRange): ITime;
 export declare function transformToTimeRange(time: ITime): ITimeRange;
+export declare function getTimeShiftUnit(time: string): TimeShiftUnit.Second | TimeShiftUnit;
+export declare function getRelativeTime(timeShift: string, time: moment.Moment): moment.Moment | undefined;
 export declare function calcFullTime(time?: ITimeRange): {
     start: number | undefined;
     end: number | undefined;

package/lib/components/DateTimePicker/transform.js

@@ -59,6 +59,7 @@ function getTimeShiftUnit(time) {
     }
     return constants_1.TimeShiftUnit.Second;
 }
+exports.getTimeShiftUnit = getTimeShiftUnit;
 function getRelativeTime(timeShift, time) {
     var timeShiftValue = parseFloat(timeShift) || 0;
     var timeShiftUnit = getTimeShiftUnit(timeShift);
@@ -66,6 +67,7 @@ function getRelativeTime(timeShift, time) {
         return moment_1.default(time).subtract(timeShiftValue, timeShiftUnit);
     }
 }
+exports.getRelativeTime = getRelativeTime;
 function calcFullTime(time) {
     if (!time) {
         return;

package/lib/components/Drawer/index.d.ts

@@ -1,4 +1,5 @@
-import * as React from 'react';
+/// <reference types="lodash" />
+import React from 'react';
 import { DrawerProps } from 'antd/es/drawer';
 import { Overwrite } from '../../models';
 declare type EventType = React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
@@ -52,8 +53,28 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
     getContainer?: string | HTMLElement | getContainerFunc | false;
     onClose?: (e: EventType) => void;
     afterVisibleChange?: (visible: boolean) => void;
+    /**
+     * 是否允许拖拽
+     */
+    canDrag?: boolean;
+    closeIconPlacement?: 'left' | 'right';
 }>;
-export declare function Drawer(props: React.PropsWithChildren<IDrawerProps>): JSX.Element;
+export declare class Drawer extends React.Component<React.PropsWithChildren<IDrawerProps>, any> {
+    isResizing: boolean;
+    realWidth: string | number | undefined;
+    throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
+    get closable(): boolean | undefined;
+    get extra(): {} | null | undefined;
+    setIsResizing(isResizing?: boolean): void;
+    setRealWidth(realWidth: string | number): void;
+    onMouseDown(): void;
+    onMouseUp(): void;
+    onMouseMove(e: any): void;
+    componentDidMount(): void;
+    UNSAFE_componentWillUpdate(nextProps: Readonly<React.PropsWithChildren<IDrawerProps>>): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
 declare const _default: (props: {
     className?: string | undefined;
     /**
@@ -103,7 +124,14 @@ declare const _default: (props: {
     getContainer?: string | false | HTMLElement | getContainerFunc | undefined;
     onClose?: ((e: EventType) => void) | undefined;
     afterVisibleChange?: ((visible: boolean) => void) | undefined;
+    /**
+     * 是否允许拖拽
+     */
+    canDrag?: boolean | undefined;
+    closeIconPlacement?: import("antd/es/collapse/Collapse").ExpandIconPosition;
 } & Pick<DrawerProps, "style" | "autoFocus" | "size" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
+    children?: React.ReactNode;
+} & {
     bodyStyle?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;

package/lib/components/Drawer/index.js

@@ -1,4 +1,17 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +23,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,25 +43,155 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var lodash_1 = require("lodash");
+var mobx_react_1 = require("mobx-react");
+var mobx_1 = require("mobx");
 var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
 var style_1 = require("../../constants/style");
 var popContainer_1 = __importDefault(require("../../hoc/popContainer"));
-function Drawer(props) {
-    var width = props.width, className = props.className, other = __rest(props, ["width", "className"]);
-    return (React.createElement(antd_1.Drawer, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-drawer", className), width: width || 'auto', zIndex: 1200 }, other)));
-}
+var bind_1 = __importDefault(require("../../utils/bind"));
+var MAX_WIDTH = 6000;
+var MIN_WIDTH = 300;
+var Drawer = /** @class */ (function (_super) {
+    __extends(Drawer, _super);
+    function Drawer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.isResizing = false;
+        _this.realWidth = _this.props.width;
+        _this.throttleMouseMove = lodash_1.throttle(function (e) { return _this.onMouseMove(e); }, 100);
+        return _this;
+    }
+    Object.defineProperty(Drawer.prototype, "closable", {
+        get: function () {
+            if (this.props.closable &&
+                this.props.closeIconPlacement &&
+                this.props.closeIconPlacement === 'right') {
+                return false;
+            }
+            return this.props.closable;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Drawer.prototype, "extra", {
+        get: function () {
+            if (this.props.closable && this.props.closeIconPlacement === 'right') {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    this.props.extra,
+                    react_1.default.createElement(icons_1.CloseOutlined, { onClick: this.props.onClose, className: style_1.SDK_PREFIX + "-drawer-right-close-icon" })));
+            }
+            return this.props.extra;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Drawer.prototype.setIsResizing = function (isResizing) {
+        if (isResizing === void 0) { isResizing = false; }
+        this.isResizing = isResizing;
+    };
+    Drawer.prototype.setRealWidth = function (realWidth) {
+        this.realWidth = realWidth;
+    };
+    Drawer.prototype.onMouseDown = function () {
+        this.setIsResizing(true);
+    };
+    Drawer.prototype.onMouseUp = function () {
+        this.setIsResizing(false);
+    };
+    Drawer.prototype.onMouseMove = function (e) {
+        if (this.isResizing) {
+            var offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
+            if (offsetRight > MIN_WIDTH && offsetRight < MAX_WIDTH) {
+                this.setRealWidth(offsetRight);
+            }
+        }
+    };
+    Drawer.prototype.componentDidMount = function () {
+        if (this.props.canDrag) {
+            document.addEventListener('mousemove', this.throttleMouseMove);
+            document.addEventListener('mouseup', this.onMouseUp);
+        }
+    };
+    Drawer.prototype.UNSAFE_componentWillUpdate = function (nextProps) {
+        if (nextProps.canDrag && !this.props.canDrag) {
+            document.addEventListener('mousemove', this.throttleMouseMove);
+            document.addEventListener('mouseup', this.onMouseUp);
+        }
+    };
+    Drawer.prototype.componentWillUnmount = function () {
+        document.removeEventListener('mousemove', this.throttleMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+    };
+    Drawer.prototype.render = function () {
+        var _a;
+        var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, visible = _b.visible, closable = _b.closable, extra = _b.extra, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra"]);
+        return (react_1.default.createElement(antd_1.Drawer, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-drawer", className, (_a = {},
+                _a[style_1.SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
+                _a)), width: this.realWidth || 'auto', zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra }, other),
+            canDrag && (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
+            children));
+    };
+    __decorate([
+        mobx_1.observable,
+        __metadata("design:type", Object)
+    ], Drawer.prototype, "isResizing", void 0);
+    __decorate([
+        mobx_1.observable,
+        __metadata("design:type", Object)
+    ], Drawer.prototype, "realWidth", void 0);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Drawer.prototype, "closable", null);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Drawer.prototype, "extra", null);
+    __decorate([
+        bind_1.default,
+        mobx_1.action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "setIsResizing", null);
+    __decorate([
+        bind_1.default,
+        mobx_1.action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "setRealWidth", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "onMouseDown", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "onMouseUp", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "onMouseMove", null);
+    Drawer = __decorate([
+        mobx_react_1.observer
+    ], Drawer);
+    return Drawer;
+}(react_1.default.Component));
 exports.Drawer = Drawer;
 exports.default = popContainer_1.default(Drawer);

package/lib/components/Drawer/style.css

@@ -259,7 +259,7 @@
 }
 .pandora-sdk-drawer .ant-drawer-content-wrapper {
   width: 50%;
-  min-width: 600px;
+  min-width: 300px;
 }
 .pandora-sdk-drawer .ant-drawer-content > div {
   position: relative;
@@ -269,3 +269,20 @@
   height: 60px;
   line-height: 60px;
 }
+.pandora-sdk-drawer-no-mask .ant-drawer-content-wrapper {
+  width: 100%;
+}
+.pandora-sdk-scroll-handler {
+  position: absolute;
+  width: 5px;
+  padding: 4px 0 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  cursor: ew-resize;
+}
+.pandora-sdk-drawer-right-close-icon {
+  margin-left: 8px;
+  font-size: 16px;
+}

package/lib/components/Drawer/style.less

@@ -4,7 +4,7 @@
 .@{sdk-prefix}-drawer {
   .@{ant-prefix}-drawer-content-wrapper {
     width: 50%;
-    min-width: 600px;
+    min-width: 300px;
   }
   .@{ant-prefix}-drawer-content > div {
     position: relative;
@@ -15,3 +15,25 @@
     line-height: 60px;
   }
 }
+
+.@{sdk-prefix}-drawer-no-mask {
+  .@{ant-prefix}-drawer-content-wrapper {
+    width: 100%;
+  }
+}
+
+.@{sdk-prefix}-scroll-handler {
+  position: absolute;
+  width: 5px;
+  padding: 4px 0 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  cursor: ew-resize;
+}
+
+.@{sdk-prefix}-drawer-right-close-icon {
+  margin-left: 8px;
+  font-size: 16px;
+}

package/lib/components/Selector/SelectorWidthChildren.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ISelectorProps, SelectValue } from './index';
+declare type IValue = string | number;
+export interface ISelectorOption {
+    key?: string;
+    text: string | React.ReactNode;
+    value: IValue;
+    disabled?: boolean;
+    filterText?: string;
+}
+export interface ISelectorWidthChildrenProps<VT> extends ISelectorProps<VT> {
+    options?: ISelectorOption[];
+}
+export default function SelectorWidthChildren<VT extends SelectValue>(props: ISelectorWidthChildrenProps<VT>): JSX.Element;
+export {};

package/lib/components/Selector/SelectorWidthChildren.js

@@ -0,0 +1,72 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var lodash_1 = require("lodash");
+var index_1 = __importDefault(require("./index"));
+// 下拉选项的是element时用于筛选过滤options
+function SelectorWidthChildren(props) {
+    var _a = __read(react_1.useState(''), 2), prefix = _a[0], setPrefix = _a[1];
+    var options = props.options, rest = __rest(props, ["options"]);
+    react_1.useEffect(function () {
+        setPrefix('');
+    }, []);
+    var filterOptions = react_1.useMemo(function () {
+        var search = prefix.toLowerCase();
+        return prefix && options
+            ? options.filter(function (option) {
+                return option.filterText &&
+                    lodash_1.includes(option.filterText.toLowerCase(), search);
+            })
+            : options;
+    }, [prefix, options]);
+    return (react_1.default.createElement(index_1.default, __assign({}, rest, { onSearch: setPrefix, searchValue: prefix, options: filterOptions, isCustomFilter: true })));
+}
+exports.default = SelectorWidthChildren;

package/lib/components/Selector/index.d.ts

@@ -52,6 +52,7 @@ export interface ISelectorProps<VT> extends Omit<SelectProps<VT>, 'options'> {
      * 下拉选项超出时用 '...' 来表示，默认 true
      */
     ellipsis?: boolean;
+    isCustomFilter?: boolean;
 }
 /**
  * 下拉选择组件封装
@@ -64,5 +65,6 @@ export default class Selector<VT extends SelectValue> extends React.Component<IS
         ellipsis: boolean;
     };
     handleCreateClick(e: any): void;
+    handleFilter(inputValue: string, option: any): boolean;
     render(): JSX.Element;
 }

package/lib/components/Selector/index.js

@@ -129,10 +129,18 @@ var Selector = /** @class */ (function (_super) {
             createOptionClick();
         }
     };
+    Selector.prototype.handleFilter = function (inputValue, option) {
+        if (this.props.isCustomFilter) {
+            return true;
+        }
+        return lodash_1.isString(option === null || option === void 0 ? void 0 : option.children)
+            ? (option === null || option === void 0 ? void 0 : option.children.toLowerCase().indexOf(inputValue.toLowerCase())) >= 0
+            : true;
+    };
     Selector.prototype.render = function () {
         var _a;
-        var _b = this.props, options = _b.options, groupOptions = _b.groupOptions, createOptionText = _b.createOptionText, selectAllOptionText = _b.selectAllOptionText, className = _b.className, dropdownClassName = _b.dropdownClassName, getPopupContainer = _b.getPopupContainer, ellipsis = _b.ellipsis, _c = _b.showArrow, showArrow = _c === void 0 ? true : _c, otherProps = __rest(_b, ["options", "groupOptions", "createOptionText", "selectAllOptionText", "className", "dropdownClassName", "getPopupContainer", "ellipsis", "showArrow"]);
-        return (React.createElement(antd_1.Select, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-selector", className), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-selector-dropdown", (_a = {}, _a[style_1.SDK_PREFIX + "-selector-no-ellipsis"] = !ellipsis, _a), dropdownClassName), getPopupContainer: getPopupContainer || this.context.getPopupContainer }, otherProps, { removeIcon: React.createElement(compatible_1.Icon, { type: "close-circle", theme: "filled", className: style_1.SDK_PREFIX + "-close-icon" }), showArrow: showArrow }),
+        var _b = this.props, options = _b.options, groupOptions = _b.groupOptions, createOptionText = _b.createOptionText, selectAllOptionText = _b.selectAllOptionText, className = _b.className, dropdownClassName = _b.dropdownClassName, getPopupContainer = _b.getPopupContainer, ellipsis = _b.ellipsis, _c = _b.showArrow, showArrow = _c === void 0 ? true : _c, isCustomFilter = _b.isCustomFilter, otherProps = __rest(_b, ["options", "groupOptions", "createOptionText", "selectAllOptionText", "className", "dropdownClassName", "getPopupContainer", "ellipsis", "showArrow", "isCustomFilter"]);
+        return (React.createElement(antd_1.Select, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-selector", className), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-selector-dropdown", (_a = {}, _a[style_1.SDK_PREFIX + "-selector-no-ellipsis"] = !ellipsis, _a), dropdownClassName), getPopupContainer: getPopupContainer || this.context.getPopupContainer, filterOption: this.handleFilter }, otherProps, { removeIcon: React.createElement(compatible_1.Icon, { type: "close-circle", theme: "filled", className: style_1.SDK_PREFIX + "-close-icon" }), showArrow: showArrow, showSearch: true }),
             createOptionText && (React.createElement(antd_1.Select.Option, __assign({}, { className: style_1.SDK_PREFIX + "-selector-create-option" }, { key: "selector_create", disabled: true }, noneValueOption),
                 React.createElement("a", { className: style_1.SDK_PREFIX + "-selector-create-lint", onClick: this.handleCreateClick }, createOptionText))),
             selectAllOptionText && (React.createElement(antd_1.Select.Option, __assign({}, { className: style_1.SDK_PREFIX + "-selector-create-option" }, { key: "selector_select_all", disabled: true }, noneValueOption),
@@ -151,6 +159,12 @@ var Selector = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Selector.prototype, "handleCreateClick", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], Selector.prototype, "handleFilter", null);
     return Selector;
 }(React.Component));
 exports.default = Selector;

package/lib/components/TreeSelector/index.js

@@ -38,7 +38,7 @@ var antd_1 = require("antd");
 var style_1 = require("../../constants/style");
 function TreeSelector(props) {
     var className = props.className, dropdownClassName = props.dropdownClassName, restProps = __rest(props, ["className", "dropdownClassName"]);
-    return (React.createElement(antd_1.TreeSelect, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-tree-select", className), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-tree-select-dropdown", dropdownClassName) }, restProps)));
+    return (React.createElement(antd_1.TreeSelect, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-tree-select", className), dropdownClassName: classnames_1.default(style_1.SDK_PREFIX + "-tree-select-dropdown", dropdownClassName), showSearch: true, treeNodeFilterProp: "title" }, restProps)));
 }
 exports.TreeSelector = TreeSelector;
 exports.default = TreeSelector;