@kaiheila/ui-components 1.0.0 → 1.0.2

package/dist/ui-components.js

@@ -2205,7 +2205,8 @@ const OptionList = _ref => {
     labelKey = "label",
     valueKey = "value",
     loadComponent,
-    onSelect
+    onSelect,
+    onReachBottom
   } = _ref;
   const containerRef = (0,external_react_namespaceObject.useRef)(null);
   const ids = (0,external_react_namespaceObject.useMemo)(() => filterData.map(item => item[valueKey]), [filterData, valueKey]);
@@ -2213,9 +2214,16 @@ 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
   });
   return /*#__PURE__*/external_react_default().createElement("ul", {
     className: "selector-search-option theme-scroll-bar",
@@ -2235,10 +2243,14 @@ const OptionList = _ref => {
       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) => {
+    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];
     const disabled = disabledValues.includes(value);
+    if (!item) return null;
     return /*#__PURE__*/external_react_default().createElement("li", {
       className: external_classnames_default()("selector-search-option-item", {
         disabled
@@ -2278,7 +2290,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
@@ -2301,7 +2315,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         showList: false,
         keyword: ''
       }, () => {
-        this.changeFilterData();
+        this.changeFilterData(true);
       });
       document.removeEventListener('click', this.hide);
     });
@@ -2327,7 +2341,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
         this.setState({
           keyword: ''
         }, () => {
-          this.changeFilterData();
+          this.changeFilterData(true);
         });
         document.removeEventListener('click', this.hide);
       }
@@ -2344,10 +2358,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;
@@ -2360,6 +2374,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;
@@ -2370,16 +2390,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
@@ -2387,21 +2415,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
       });
 
@@ -2436,7 +2464,8 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       showList: false,
       keyword: '',
       filterData: [],
-      optionsStyle: {}
+      optionsStyle: {},
+      currentItem: null
     };
     this.selectRef = /*#__PURE__*/external_react_default().createRef();
   }
@@ -2473,6 +2502,7 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       placeholder,
       renderOption,
       disabledValues = [],
+      onReachBottom,
       labelKey = 'label',
       valueKey = 'value',
       loadComponent
@@ -2514,7 +2544,8 @@ class SelectorSearch extends external_react_namespaceObject.Component {
       labelKey: labelKey,
       valueKey: valueKey,
       loadComponent: loadComponent,
-      onSelect: this.select
+      onSelect: this.select,
+      onReachBottom: onReachBottom
     }) : null);
   }
 }
@@ -2530,7 +2561,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
 
@@ -5614,7 +5648,7 @@ class TimeSelector extends external_react_namespaceObject.Component {
 
 /* harmony default export */ const time_selector = (TimeSelector);
 ;// ./package.json
-const package_namespaceObject = {"rE":"1.0.0"};
+const package_namespaceObject = {"rE":"1.0.2"};
 ;// ./src/index.js
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaiheila/ui-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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"
   },