fix cascader select treeSelect compressed when data sync update (#1595)

sheinsight · Apr 28, 2022 · 3bd5bea · 3bd5bea
1 parent 23a39f6
commit 3bd5bea
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 35 deletions.
diff --git a/site/pages/components/Select/example-01-multiple.js b/site/pages/components/Select/example-01-multiple.js
@@ -20,7 +20,7 @@ const data = [
 export default class extends Component {
   constructor(props) {
     super(props)
-    this.state = { value: 'pink' }
+    this.state = { value: ['pink'] }
   }
 
   handleChange = (value, d, c) => {

diff --git a/src/Cascader/Result.js b/src/Cascader/Result.js
@@ -61,20 +61,7 @@ class Result extends PureComponent {
   }
 
   componentDidUpdate(preProps) {
-    const { compressed, value = [], onFilter } = this.props
-    if (compressed) {
-      if ((preProps.value || []).join('') !== (value || []).join('')) {
-        this.resetMore()
-      } else if (value.length && this.shouldResetMore) {
-        this.shouldResetMore = false
-        this.state.more = getResetMore(
-          onFilter,
-          this.resultEl,
-          this.resultEl.querySelectorAll(`.${cascaderClass('item')}`)
-        )
-        this.forceUpdate()
-      }
-    }
+    this.updateMore(preProps)
   }
 
   componentWillUnmount() {
@@ -91,6 +78,25 @@ class Result extends PureComponent {
     this.resultEl = el
   }
 
+  updateMore(preProps) {
+    const { compressed, value = [], onFilter, data } = this.props
+    if (compressed) {
+      if ((preProps.value || []).join('') !== (value || []).join('')) {
+        this.resetMore()
+      } else if ((preProps.data || []).length !== (data || []).length) {
+        this.resetMore()
+      } else if (value.length && this.shouldResetMore) {
+        this.shouldResetMore = false
+        this.state.more = getResetMore(
+          onFilter,
+          this.resultEl,
+          this.resultEl.querySelectorAll(`.${cascaderClass('item')}`)
+        )
+        this.forceUpdate()
+      }
+    }
+  }
+
   resetMore() {
     if (!this.props.compressed) return
     this.shouldResetMore = true
@@ -301,6 +307,7 @@ Result.propTypes = {
   showList: PropTypes.func,
   size: PropTypes.string,
   showArrow: PropTypes.bool,
+  data: PropTypes.array,
 }
 
 Result.defaultProps = {

diff --git a/src/Select/Result.js b/src/Select/Result.js
@@ -79,9 +79,37 @@ class Result extends PureComponent {
   }
 
   componentDidUpdate(preProps) {
-    const { result, compressed, onFilter } = this.props
+    this.updateMore(preProps)
+  }
+
+  componentWillUnmount() {
+    if (this.cancelResizeObserver) this.cancelResizeObserver()
+  }
+
+  bindResult(el) {
+    this.resultEl = el
+  }
+
+  updateMore(preProps) {
+    const { result, compressed, onFilter, renderResult, renderUnmatched } = this.props
     if (compressed) {
-      if ((preProps.result || []).join('') !== (result || []).join('')) {
+      let shouldRest = false
+      if (preProps.result.length !== result.length) {
+        shouldRest = true
+      } else {
+        let i = preProps.result.length - 1
+        while (i >= 0) {
+          const before = getResultContent(preProps.result[i], preProps.renderResult, preProps.renderUnmatched)
+          const now = getResultContent(result[i], renderResult, renderUnmatched)
+          if (before !== now) {
+            shouldRest = true
+            break
+          }
+          i -= 1
+        }
+      }
+
+      if (shouldRest) {
         this.resetMore()
       } else if (result.length && this.shouldResetMore) {
         this.shouldResetMore = false
@@ -95,14 +123,6 @@ class Result extends PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    if (this.cancelResizeObserver) this.cancelResizeObserver()
-  }
-
-  bindResult(el) {
-    this.resultEl = el
-  }
-
   resetMore() {
     if (!this.props.compressed) return
     this.shouldResetMore = true

diff --git a/src/TreeSelect/Result.js b/src/TreeSelect/Result.js
@@ -57,9 +57,37 @@ class Result extends PureComponent {
   }
 
   componentDidUpdate(preProps) {
-    const { result, compressed, onFilter } = this.props
+    this.updateMore(preProps)
+  }
+
+  componentWillUnmount() {
+    if (this.cancelResizeObserver) this.cancelResizeObserver()
+  }
+
+  bindResult(el) {
+    this.resultEl = el
+  }
+
+  updateMore(preProps) {
+    const { result, compressed, onFilter, renderResult, renderUnmatched } = this.props
     if (compressed) {
-      if ((preProps.result || []).join('') !== (result || []).join('')) {
+      let shouldRest = false
+      if (preProps.result.length !== result.length) {
+        shouldRest = true
+      } else {
+        let i = preProps.result.length - 1
+        while (i >= 0) {
+          const before = getResultContent(preProps.result[i], preProps.renderResult, preProps.renderUnmatched)
+          const now = getResultContent(result[i], renderResult, renderUnmatched)
+          if (before !== now) {
+            shouldRest = true
+            break
+          }
+          i -= 1
+        }
+      }
+
+      if (shouldRest) {
         this.resetMore()
       } else if (result.length && this.shouldResetMore) {
         this.shouldResetMore = false
@@ -73,14 +101,6 @@ class Result extends PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    if (this.cancelResizeObserver) this.cancelResizeObserver()
-  }
-
-  bindResult(el) {
-    this.resultEl = el
-  }
-
   resetMore() {
     if (!this.props.compressed) return
     this.shouldResetMore = true