@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/transfer/list.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { KeyWiseTransferItem, RenderResult, SelectAllLabel, TransferDirection, TransferLocale } from './index';
+import type { PaginationType } from './interface';
+import type { TransferListBodyProps } from './ListBody';
+import DefaultListBody from './ListBody';
+export interface RenderedItem<RecordType> {
+    renderedText: string;
+    renderedEl: React.ReactNode;
+    item: RecordType;
+}
+type RenderListFunction<T> = (props: TransferListBodyProps<T>) => React.ReactNode;
+export interface TransferListProps<RecordType> extends TransferLocale {
+    prefixCls: string;
+    titleText: React.ReactNode;
+    dataSource: RecordType[];
+    filterOption?: (filterText: string, item: RecordType) => boolean;
+    style?: React.CSSProperties;
+    checkedKeys: string[];
+    handleFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onItemSelect: (key: string, check: boolean) => void;
+    onItemSelectAll: (dataSource: string[], checkAll: boolean) => void;
+    onItemRemove?: (keys: string[]) => void;
+    handleClear: () => void;
+    /** Render item */
+    render?: (item: RecordType) => RenderResult;
+    showSearch?: boolean;
+    searchPlaceholder: string;
+    itemUnit: string;
+    itemsUnit: string;
+    renderList?: RenderListFunction<RecordType>;
+    footer?: (props: TransferListProps<RecordType>, info?: {
+        direction: TransferDirection;
+    }) => React.ReactNode;
+    onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
+    disabled?: boolean;
+    direction: TransferDirection;
+    showSelectAll?: boolean;
+    selectAllLabel?: SelectAllLabel;
+    showRemove?: boolean;
+    pagination?: PaginationType;
+}
+interface TransferListState {
+    /** Filter input value */
+    filterValue: string;
+}
+export default class TransferList<RecordType extends KeyWiseTransferItem> extends React.PureComponent<TransferListProps<RecordType>, TransferListState> {
+    timer: number;
+    triggerScrollTimer: number;
+    defaultListBodyRef: React.RefObject<DefaultListBody<RecordType>>;
+    constructor(props: TransferListProps<RecordType>);
+    componentWillUnmount(): void;
+    getCheckStatus(filteredItems: RecordType[]): "none" | "all" | "part";
+    getFilteredItems(dataSource: RecordType[], filterValue: string): {
+        filteredItems: RecordType[];
+        filteredRenderItems: RenderedItem<RecordType>[];
+    };
+    handleFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleClear: () => void;
+    matchFilter: (text: string, item: RecordType) => boolean;
+    renderListBody: (renderList: RenderListFunction<RecordType> | undefined, props: TransferListBodyProps<RecordType>) => {
+        customize: boolean;
+        bodyContent: React.ReactNode;
+    };
+    getListBody(prefixCls: string, searchPlaceholder: string, filterValue: string, filteredItems: RecordType[], notFoundContent: React.ReactNode | React.ReactNode, filteredRenderItems: RenderedItem<RecordType>[], checkedKeys: string[], renderList?: RenderListFunction<RecordType>, showSearch?: boolean, disabled?: boolean): React.ReactNode;
+    getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls, }: {
+        filteredItems: RecordType[];
+        onItemSelectAll: (dataSource: string[], checkAll: boolean) => void;
+        disabled?: boolean;
+        prefixCls?: string;
+    }): false | JSX.Element;
+    renderItem: (item: RecordType) => RenderedItem<RecordType>;
+    getSelectAllLabel: (selectedCount: number, totalCount: number) => React.ReactNode;
+    render(): JSX.Element;
+}
+export {};

package/lib/transfer/list.js

@@ -0,0 +1,429 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _checkbox = _interopRequireDefault(require("../checkbox"));
+
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _ListBody = _interopRequireWildcard(require("./ListBody"));
+
+var _search = _interopRequireDefault(require("./search"));
+
+var defaultRender = function defaultRender() {
+  return null;
+};
+
+function isRenderResultPlainObject(result) {
+  return !!(result && !(0, _reactNode.isValidElement)(result) && Object.prototype.toString.call(result) === '[object Object]');
+}
+
+function getEnabledItemKeys(items) {
+  return items.filter(function (data) {
+    return !data.disabled;
+  }).map(function (data) {
+    return data.key;
+  });
+}
+
+var TransferList = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2["default"])(TransferList, _React$PureComponent);
+
+  var _super = (0, _createSuper2["default"])(TransferList);
+
+  function TransferList(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TransferList);
+    _this = _super.call(this, props);
+    _this.defaultListBodyRef = /*#__PURE__*/React.createRef(); // =============================== Filter ===============================
+
+    _this.handleFilter = function (e) {
+      var handleFilter = _this.props.handleFilter;
+      var filterValue = e.target.value;
+
+      _this.setState({
+        filterValue: filterValue
+      });
+
+      handleFilter(e);
+    };
+
+    _this.handleClear = function () {
+      var handleClear = _this.props.handleClear;
+
+      _this.setState({
+        filterValue: ''
+      });
+
+      handleClear();
+    };
+
+    _this.matchFilter = function (text, item) {
+      var filterValue = _this.state.filterValue;
+      var filterOption = _this.props.filterOption;
+
+      if (filterOption) {
+        return filterOption(filterValue, item);
+      }
+
+      return text.includes(filterValue);
+    }; // =============================== Render ===============================
+
+
+    _this.renderListBody = function (renderList, props) {
+      var bodyContent = renderList ? renderList(props) : null;
+      var customize = !!bodyContent;
+
+      if (!customize) {
+        bodyContent = /*#__PURE__*/React.createElement(_ListBody["default"], (0, _extends2["default"])({
+          ref: _this.defaultListBodyRef
+        }, props));
+      }
+
+      return {
+        customize: customize,
+        bodyContent: bodyContent
+      };
+    };
+
+    _this.renderItem = function (item) {
+      var _this$props$render = _this.props.render,
+          render = _this$props$render === void 0 ? defaultRender : _this$props$render;
+      var renderResult = render(item);
+      var isRenderResultPlain = isRenderResultPlainObject(renderResult);
+      return {
+        renderedText: isRenderResultPlain ? renderResult.value : renderResult,
+        renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
+        item: item
+      };
+    };
+
+    _this.getSelectAllLabel = function (selectedCount, totalCount) {
+      var _this$props = _this.props,
+          itemsUnit = _this$props.itemsUnit,
+          itemUnit = _this$props.itemUnit,
+          selectAllLabel = _this$props.selectAllLabel;
+
+      if (selectAllLabel) {
+        return typeof selectAllLabel === 'function' ? selectAllLabel({
+          selectedCount: selectedCount,
+          totalCount: totalCount
+        }) : selectAllLabel;
+      }
+
+      var unit = totalCount > 1 ? itemsUnit : itemUnit;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (selectedCount > 0 ? "".concat(selectedCount, "/") : '') + totalCount, " ", unit);
+    };
+
+    _this.state = {
+      filterValue: ''
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TransferList, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.triggerScrollTimer);
+    }
+  }, {
+    key: "getCheckStatus",
+    value: function getCheckStatus(filteredItems) {
+      var checkedKeys = this.props.checkedKeys;
+
+      if (checkedKeys.length === 0) {
+        return 'none';
+      }
+
+      if (filteredItems.every(function (item) {
+        return checkedKeys.includes(item.key) || !!item.disabled;
+      })) {
+        return 'all';
+      }
+
+      return 'part';
+    } // ================================ Item ================================
+
+  }, {
+    key: "getFilteredItems",
+    value: function getFilteredItems(dataSource, filterValue) {
+      var _this2 = this;
+
+      var filteredItems = [];
+      var filteredRenderItems = [];
+      dataSource.forEach(function (item) {
+        var renderedItem = _this2.renderItem(item);
+
+        var renderedText = renderedItem.renderedText; // Filter skip
+
+        if (filterValue && !_this2.matchFilter(renderedText, item)) {
+          return null;
+        }
+
+        filteredItems.push(item);
+        filteredRenderItems.push(renderedItem);
+      });
+      return {
+        filteredItems: filteredItems,
+        filteredRenderItems: filteredRenderItems
+      };
+    }
+  }, {
+    key: "getListBody",
+    value: function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
+      var _this3 = this;
+
+      var search = showSearch ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-body-search-wrapper")
+      }, /*#__PURE__*/React.createElement(_search["default"], {
+        prefixCls: "".concat(prefixCls, "-search"),
+        onChange: this.handleFilter,
+        handleClear: this.handleClear,
+        placeholder: searchPlaceholder,
+        value: filterValue,
+        disabled: disabled
+      })) : null;
+
+      var _this$renderListBody = this.renderListBody(renderList, (0, _extends2["default"])((0, _extends2["default"])({}, (0, _omit["default"])(this.props, _ListBody.OmitProps)), {
+        filteredItems: filteredItems,
+        filteredRenderItems: filteredRenderItems,
+        selectedKeys: checkedKeys
+      })),
+          bodyContent = _this$renderListBody.bodyContent,
+          customize = _this$renderListBody.customize;
+
+      var getNotFoundContent = function getNotFoundContent() {
+        var contentIndex = _this3.props.direction === 'left' ? 0 : 1;
+        return Array.isArray(notFoundContent) ? notFoundContent[contentIndex] : notFoundContent;
+      };
+
+      var bodyNode; // We should wrap customize list body in a classNamed div to use flex layout.
+
+      if (customize) {
+        bodyNode = /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-body-customize-wrapper")
+        }, bodyContent);
+      } else {
+        bodyNode = filteredItems.length ? bodyContent : /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-body-not-found")
+        }, getNotFoundContent());
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _classnames["default"])(showSearch ? "".concat(prefixCls, "-body ").concat(prefixCls, "-body-with-search") : "".concat(prefixCls, "-body"))
+      }, search, bodyNode);
+    }
+  }, {
+    key: "getCheckBox",
+    value: function getCheckBox(_ref) {
+      var filteredItems = _ref.filteredItems,
+          onItemSelectAll = _ref.onItemSelectAll,
+          disabled = _ref.disabled,
+          prefixCls = _ref.prefixCls;
+      var checkStatus = this.getCheckStatus(filteredItems);
+      var checkedAll = checkStatus === 'all';
+      var checkAllCheckbox = /*#__PURE__*/React.createElement(_checkbox["default"], {
+        disabled: disabled,
+        checked: checkedAll,
+        indeterminate: checkStatus === 'part',
+        className: "".concat(prefixCls, "-checkbox"),
+        onChange: function onChange() {
+          // Only select enabled items
+          onItemSelectAll(filteredItems.filter(function (item) {
+            return !item.disabled;
+          }).map(function (_ref2) {
+            var key = _ref2.key;
+            return key;
+          }), !checkedAll);
+        }
+      });
+      return checkAllCheckbox;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this4 = this;
+
+      var filterValue = this.state.filterValue;
+      var _this$props2 = this.props,
+          prefixCls = _this$props2.prefixCls,
+          _this$props2$dataSour = _this$props2.dataSource,
+          dataSource = _this$props2$dataSour === void 0 ? [] : _this$props2$dataSour,
+          _this$props2$titleTex = _this$props2.titleText,
+          titleText = _this$props2$titleTex === void 0 ? '' : _this$props2$titleTex,
+          checkedKeys = _this$props2.checkedKeys,
+          disabled = _this$props2.disabled,
+          footer = _this$props2.footer,
+          _this$props2$showSear = _this$props2.showSearch,
+          showSearch = _this$props2$showSear === void 0 ? false : _this$props2$showSear,
+          style = _this$props2.style,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          notFoundContent = _this$props2.notFoundContent,
+          selectAll = _this$props2.selectAll,
+          selectCurrent = _this$props2.selectCurrent,
+          selectInvert = _this$props2.selectInvert,
+          removeAll = _this$props2.removeAll,
+          removeCurrent = _this$props2.removeCurrent,
+          renderList = _this$props2.renderList,
+          onItemSelectAll = _this$props2.onItemSelectAll,
+          onItemRemove = _this$props2.onItemRemove,
+          _this$props2$showSele = _this$props2.showSelectAll,
+          showSelectAll = _this$props2$showSele === void 0 ? true : _this$props2$showSele,
+          showRemove = _this$props2.showRemove,
+          pagination = _this$props2.pagination,
+          direction = _this$props2.direction; // Custom Layout
+
+      var footerDom = footer && (footer.length < 2 ? footer(this.props) : footer(this.props, {
+        direction: direction
+      }));
+      var listCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-pagination"), !!pagination), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-footer"), !!footerDom), _classNames)); // ====================== Get filtered, checked item list ======================
+
+      var _this$getFilteredItem = this.getFilteredItems(dataSource, filterValue),
+          filteredItems = _this$getFilteredItem.filteredItems,
+          filteredRenderItems = _this$getFilteredItem.filteredRenderItems; // ================================= List Body =================================
+
+
+      var listBody = this.getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled); // ================================ List Footer ================================
+
+      var listFooter = footerDom ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-footer")
+      }, footerDom) : null;
+      var checkAllCheckbox = !showRemove && !pagination && this.getCheckBox({
+        filteredItems: filteredItems,
+        onItemSelectAll: onItemSelectAll,
+        disabled: disabled,
+        prefixCls: prefixCls
+      });
+      var items;
+
+      if (showRemove) {
+        items = [
+        /* Remove Current Page */
+        pagination ? {
+          key: 'removeCurrent',
+          onClick: function onClick() {
+            var _a;
+
+            var pageKeys = getEnabledItemKeys((((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(function (entity) {
+              return entity.item;
+            }));
+            onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(pageKeys);
+          },
+          label: removeCurrent
+        } : null,
+        /* Remove All */
+        {
+          key: 'removeAll',
+          onClick: function onClick() {
+            onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(getEnabledItemKeys(filteredItems));
+          },
+          label: removeAll
+        }].filter(function (item) {
+          return item;
+        });
+      } else {
+        items = [{
+          key: 'selectAll',
+          onClick: function onClick() {
+            var keys = getEnabledItemKeys(filteredItems);
+            onItemSelectAll(keys, keys.length !== checkedKeys.length);
+          },
+          label: selectAll
+        }, pagination ? {
+          key: 'selectCurrent',
+          onClick: function onClick() {
+            var _a;
+
+            var pageItems = ((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || [];
+            onItemSelectAll(getEnabledItemKeys(pageItems.map(function (entity) {
+              return entity.item;
+            })), true);
+          },
+          label: selectCurrent
+        } : null, {
+          key: 'selectInvert',
+          onClick: function onClick() {
+            var _a;
+
+            var availableKeys;
+
+            if (pagination) {
+              availableKeys = getEnabledItemKeys((((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(function (entity) {
+                return entity.item;
+              }));
+            } else {
+              availableKeys = getEnabledItemKeys(filteredItems);
+            }
+
+            var checkedKeySet = new Set(checkedKeys);
+            var newCheckedKeys = [];
+            var newUnCheckedKeys = [];
+            availableKeys.forEach(function (key) {
+              if (checkedKeySet.has(key)) {
+                newUnCheckedKeys.push(key);
+              } else {
+                newCheckedKeys.push(key);
+              }
+            });
+            onItemSelectAll(newCheckedKeys, true);
+            onItemSelectAll(newUnCheckedKeys, false);
+          },
+          label: selectInvert
+        }];
+      }
+
+      var dropdown = /*#__PURE__*/React.createElement(_dropdown["default"], {
+        className: "".concat(prefixCls, "-header-dropdown"),
+        menu: {
+          items: items
+        },
+        disabled: disabled
+      }, /*#__PURE__*/React.createElement(_DownOutlined["default"], null)); // ================================== Render ===================================
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: listCls,
+        style: style
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-header")
+      }, showSelectAll ? /*#__PURE__*/React.createElement(React.Fragment, null, checkAllCheckbox, dropdown) : null, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-header-selected")
+      }, this.getSelectAllLabel(checkedKeys.length, filteredItems.length)), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-header-title")
+      }, titleText)), listBody, listFooter);
+    }
+  }]);
+  return TransferList;
+}(React.PureComponent);
+
+exports["default"] = TransferList;

package/lib/transfer/operation.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { DirectionType } from '../config-provider';
+export interface TransferOperationProps {
+    className?: string;
+    leftArrowText?: string;
+    rightArrowText?: string;
+    moveToLeft?: React.MouseEventHandler<HTMLButtonElement>;
+    moveToRight?: React.MouseEventHandler<HTMLButtonElement>;
+    leftActive?: boolean;
+    rightActive?: boolean;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    direction?: DirectionType;
+    oneWay?: boolean;
+}
+declare const Operation: ({ disabled, moveToLeft, moveToRight, leftArrowText, rightArrowText, leftActive, rightActive, className, style, direction, oneWay, }: TransferOperationProps) => JSX.Element;
+export default Operation;

package/lib/transfer/operation.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
+
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var Operation = function Operation(_ref) {
+  var disabled = _ref.disabled,
+      moveToLeft = _ref.moveToLeft,
+      moveToRight = _ref.moveToRight,
+      _ref$leftArrowText = _ref.leftArrowText,
+      leftArrowText = _ref$leftArrowText === void 0 ? '' : _ref$leftArrowText,
+      _ref$rightArrowText = _ref.rightArrowText,
+      rightArrowText = _ref$rightArrowText === void 0 ? '' : _ref$rightArrowText,
+      leftActive = _ref.leftActive,
+      rightActive = _ref.rightActive,
+      className = _ref.className,
+      style = _ref.style,
+      direction = _ref.direction,
+      oneWay = _ref.oneWay;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, /*#__PURE__*/React.createElement(_button["default"], {
+    type: "primary",
+    size: "small",
+    disabled: disabled || !rightActive,
+    onClick: moveToRight,
+    icon: direction !== 'rtl' ? /*#__PURE__*/React.createElement(_RightOutlined["default"], null) : /*#__PURE__*/React.createElement(_LeftOutlined["default"], null)
+  }, rightArrowText), !oneWay && /*#__PURE__*/React.createElement(_button["default"], {
+    type: "primary",
+    size: "small",
+    disabled: disabled || !leftActive,
+    onClick: moveToLeft,
+    icon: direction !== 'rtl' ? /*#__PURE__*/React.createElement(_LeftOutlined["default"], null) : /*#__PURE__*/React.createElement(_RightOutlined["default"], null)
+  }, leftArrowText));
+};
+
+var _default = Operation;
+exports["default"] = _default;

package/lib/transfer/search.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface TransferSearchProps {
+    prefixCls?: string;
+    placeholder?: string;
+    onChange?: (e: React.FormEvent<HTMLElement>) => void;
+    handleClear?: () => void;
+    value?: string;
+    disabled?: boolean;
+}
+export default function Search(props: TransferSearchProps): JSX.Element;

package/lib/transfer/search.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Search;
+
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+function Search(props) {
+  var _props$placeholder = props.placeholder,
+      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
+      value = props.value,
+      prefixCls = props.prefixCls,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      handleClear = props.handleClear;
+  var handleChange = React.useCallback(function (e) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+
+    if (e.target.value === '') {
+      handleClear === null || handleClear === void 0 ? void 0 : handleClear();
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(_input["default"], {
+    placeholder: placeholder,
+    className: prefixCls,
+    value: value,
+    onChange: handleChange,
+    disabled: disabled,
+    allowClear: true,
+    prefix: /*#__PURE__*/React.createElement(_SearchOutlined["default"], null)
+  });
+}

package/lib/transfer/style/css.js

@@ -0,0 +1,17 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");
+
+require("../../button/style/css");
+
+require("../../checkbox/style/css");
+
+require("../../dropdown/style/css");
+
+require("../../empty/style/css");
+
+require("../../input/style/css");
+
+require("../../pagination/style/css");