@kaiheila/ui-components 1.0.1 → 1.0.3

package/dist/ui-components.js

@@ -2196,7 +2196,7 @@ const logic_models_react_namespaceObject = require("@kookapp/logic-models-react"
 
 
 const OptionList = _ref => {
-  var _visibleRange$visible;
+  var _visibleRange$visible, _visibleRange$visible2;
   let {
     filterData,
     optionsStyle,
@@ -2205,7 +2205,9 @@ const OptionList = _ref => {
     labelKey = "label",
     valueKey = "value",
     loadComponent,
-    onSelect
+    onSelect,
+    onReachBottom,
+    loading = false
   } = _ref;
   const containerRef = (0,external_react_namespaceObject.useRef)(null);
   const ids = (0,external_react_namespaceObject.useMemo)(() => filterData.map(item => item[valueKey]), [filterData, valueKey]);
@@ -2213,10 +2215,18 @@ const OptionList = _ref => {
     visibleRange
   } = (0,logic_models_react_namespaceObject.useListVirtualScroll)({
     ids,
-    heightRender: 34 // 注意：这里需要手动维护跟样式上的高度一致，如果不能维护一致的话就需要写动态高度逻辑
+    heightRender: id => {
+      if ((0,logic_models_react_namespaceObject.isSentinelId)(id)) {
+        // 所有元素必须有高度，否则滚动位置无法计算到该元素
+        return 1;
+      }
+      return 34;
+    } // 注意：这里需要手动维护跟样式上的高度一致，如果不能维护一致的话就需要写动态高度逻辑
   }, {
-    containerRef
+    containerRef,
+    onReachBottom
   });
+  const empty = (visibleRange === null || visibleRange === void 0 || (_visibleRange$visible = visibleRange.visibleIds) === null || _visibleRange$visible === void 0 ? void 0 : _visibleRange$visible.length) == 0 || (visibleRange === null || visibleRange === void 0 || (_visibleRange$visible2 = visibleRange.visibleIds) === null || _visibleRange$visible2 === void 0 ? void 0 : _visibleRange$visible2.every(id => (0,logic_models_react_namespaceObject.isSentinelId)(id)));
   return /*#__PURE__*/external_react_default().createElement("ul", {
     className: "selector-search-option theme-scroll-bar",
     style: optionsStyle,
@@ -2234,7 +2244,10 @@ const OptionList = _ref => {
       padding: 8,
       transform: "translateY(".concat(visibleRange === null || visibleRange === void 0 ? void 0 : visibleRange.topSpace, "px)")
     }
-  }, (visibleRange === null || visibleRange === void 0 || (_visibleRange$visible = visibleRange.visibleIds) === null || _visibleRange$visible === void 0 ? void 0 : _visibleRange$visible.length) > 0 ? visibleRange === null || visibleRange === void 0 ? void 0 : visibleRange.visibleIds.map((id, i) => {
+  }, !empty ? visibleRange === null || visibleRange === void 0 ? void 0 : visibleRange.visibleIds.map((id, i) => {
+    if ((0,logic_models_react_namespaceObject.isSentinelId)(id)) {
+      return null;
+    }
     const item = filterData.find(item => item[valueKey] === id);
     const label = item === null || item === void 0 ? void 0 : item[labelKey];
     const value = item === null || item === void 0 ? void 0 : item[valueKey];
@@ -2252,7 +2265,9 @@ const OptionList = _ref => {
       key: value + i,
       title: label
     }, renderOption ? renderOption(item) : label);
-  }) : /*#__PURE__*/external_react_default().createElement("li", {
+  }) : loading ? /*#__PURE__*/external_react_default().createElement("li", {
+    key: "none"
+  }, "\u52A0\u8F7D\u4E2D...") : /*#__PURE__*/external_react_default().createElement("li", {
     key: "none"
   }, "\u6CA1\u6709\u4EFB\u4F55\u5185\u5BB9")));
 };
@@ -2279,7 +2294,9 @@ function selector_search_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
 
 class SelectorSearch extends external_react_namespaceObject.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     selector_search_defineProperty(this, "calcOptionsStyle", () => {
       const {
         current
@@ -2302,7 +2319,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         showList: false,
         keyword: ''
       }, () => {
-        this.changeFilterData();
+        this.changeFilterData(true);
       });
       document.removeEventListener('click', this.hide);
     });
@@ -2328,7 +2345,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         this.setState({
           keyword: ''
         }, () => {
-          this.changeFilterData();
+          this.changeFilterData(true);
         });
         document.removeEventListener('click', this.hide);
       }
@@ -2345,10 +2362,10 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         event.nativeEvent.stopImmediatePropagation();
         return;
       }
-      this.hide();
       this.setState({
-        keyword: ''
+        currentItem: this.props.data.find(item => item[this.props.valueKey] == value)
       });
+      this.hide();
       const {
         onChange
       } = this.props;
@@ -2361,6 +2378,12 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         data = [],
         value
       } = this.props;
+      const {
+        currentItem
+      } = this.state;
+      if (currentItem && currentItem[valueKey] == value) {
+        return currentItem[labelKey] || '';
+      }
       return (data.find(item => {
         if (item[valueKey] === value) {
           return item;
@@ -2371,16 +2394,24 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       this.setState({
         keyword: value
       }, () => {
-        this.changeFilterData();
+        this.changeFilterData(true);
       });
     });
-    selector_search_defineProperty(this, "changeFilterData", () => {
-      const keyword = this.state.keyword.trim().toLocaleLowerCase();
+    selector_search_defineProperty(this, "changeFilterData", function () {
+      let updateFilterData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      const keyword = _this.state.keyword.trim().toLocaleLowerCase();
+
+      // 受控模式下，组件渲染后的状态变更由受控逻辑接管，直接调用 keywordChange 回调
+      if (_this.props.controlled && updateFilterData) {
+        var _this$props$keywordCh, _this$props;
+        (_this$props$keywordCh = (_this$props = _this.props).keywordChange) === null || _this$props$keywordCh === void 0 || _this$props$keywordCh.call(_this$props, keyword);
+        return;
+      }
       let filterData = [];
       const {
         getData,
         onSearchResultChange
-      } = this.props;
+      } = _this.props;
       if (typeof getData == 'function') {
         getData({
           keyword
@@ -2388,21 +2419,21 @@ class SelectorSearch extends external_react_namespaceObject.Component {
           let {
             list
           } = _ref;
-          this.setState({
+          _this.setState({
             filterData: list
           });
         });
         return;
       }
       if (keyword == '') {
-        filterData = this.props.data || [];
+        filterData = _this.props.data || [];
       } else {
-        filterData = (this.props.data || []).filter(item => {
-          let label = item[this.props.labelKey || 'label'];
+        filterData = (_this.props.data || []).filter(item => {
+          let label = item[_this.props.labelKey || 'label'];
           return label.toLocaleLowerCase().includes(keyword);
         });
       }
-      this.setState({
+      _this.setState({
         filterData
       });
 
@@ -2437,7 +2468,8 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       showList: false,
       keyword: '',
       filterData: [],
-      optionsStyle: {}
+      optionsStyle: {},
+      currentItem: null
     };
     this.selectRef = /*#__PURE__*/external_react_default().createRef();
   }
@@ -2474,6 +2506,8 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       placeholder,
       renderOption,
       disabledValues = [],
+      onReachBottom,
+      loading,
       labelKey = 'label',
       valueKey = 'value',
       loadComponent
@@ -2508,6 +2542,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
     }, label)), /*#__PURE__*/external_react_default().createElement("span", {
       className: "dropdown-icon"
     }, /*#__PURE__*/external_react_default().createElement(IconDropDown, null))), showList ? /*#__PURE__*/external_react_default().createElement(selector_search_OptionList, {
+      loading: loading,
       filterData: filterData,
       optionsStyle: optionsStyle,
       renderOption: renderOption,
@@ -2515,7 +2550,8 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       labelKey: labelKey,
       valueKey: valueKey,
       loadComponent: loadComponent,
-      onSelect: this.select
+      onSelect: this.select,
+      onReachBottom: onReachBottom
     }) : null);
   }
 }
@@ -2531,7 +2567,10 @@ selector_search_defineProperty(SelectorSearch, "propTypes", {
   onSearchResultChange: (external_prop_types_default()).func,
   // 搜索结果change
   onBlur: (external_prop_types_default()).func,
-  onFocus: (external_prop_types_default()).func
+  onFocus: (external_prop_types_default()).func,
+  controlled: (external_prop_types_default()).bool,
+  keywordChange: (external_prop_types_default()).func
+  // loading: PropTypes.bool, // 如果是loading 则在filter面板显示 转圈
 });
 ;// ./src/components/selector-search/index.js
 
@@ -5615,7 +5654,7 @@ class TimeSelector extends external_react_namespaceObject.Component {
 
 /* harmony default export */ const time_selector = (TimeSelector);
 ;// ./package.json
-const package_namespaceObject = {"rE":"1.0.1"};
+const package_namespaceObject = {"rE":"1.0.3"};
 ;// ./src/index.js
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaiheila/ui-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "开黑啦 UI Components",
   "main": "dist/ui-components.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
-    "@kookapp/logic-models-react": "^1.0.1",
+    "@kookapp/logic-models-react": "1.0.7",
     "babel-loader": "^8.2.2",
     "classnames": "^2.3.1",
     "css-loader": "^6.7.1",
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "peerDependencies": {
-    "@kookapp/logic-models-react": "^1.0.1",
+    "@kookapp/logic-models-react": "^1.0.7",
     "react": "^18",
     "react-dom": "^18"
   },