@gmfe/react 2.14.2-beta.3 → 2.14.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/react",
-  "version": "2.14.2-beta.3",
+  "version": "2.14.3-beta.1",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.2-beta.3",
+    "@gmfe/locales": "^2.14.3-beta.1",
     "big.js": "^5.2.2",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
@@ -35,5 +35,5 @@
     "prop-types": "^15.7.2",
     "react-window": "^1.8.5"
   },
-  "gitHead": "fbd88a020d964c841d71b29238ebdb318bd6cf54"
+  "gitHead": "c5be68d326092fe47e9dfa07982298775a033755"
 }

package/src/component/cascader/cascader.js

@@ -220,10 +220,10 @@ class Cascader extends React.Component {
     const value = []
     if (selected.length > 0) {
       _.each(selected, (v, i) => {
-        const match = _.find(i === 0 ? data : value[i - 1]?.children, val => {
+        const match = _.find(i === 0 ? data : value[i - 1].children, val => {
           return v === val.value
         })
-        match && value.push(match)
+        value.push(match)
       })
     }
 
@@ -316,23 +316,23 @@ class Cascader extends React.Component {
     const value = []
     if (selected.length > 0) {
       _.each(selected, (v, i) => {
-        const match = _.find(i === 0 ? data : value[i - 1]?.children, val => {
+        const match = _.find(i === 0 ? data : value[i - 1].children, val => {
           return v === val.value
         })
-        match && value.push(match)
+        value.push(match)
       })
     }
 
     if (!filtrable) {
       return valueRender
         ? valueRender(value)
-        : _.map(value, v => v?.name).join(',')
+        : _.map(value, v => v.name).join(',')
     }
 
     return filterInput === null
       ? valueRender
         ? valueRender(value)
-        : _.map(value, v => v?.name).join(',')
+        : _.map(value, v => v.name).join(',')
       : filterInput
   }
 
@@ -346,10 +346,10 @@ class Cascader extends React.Component {
     const value = []
     if (selected.length > 0) {
       _.each(selected, (v, i) => {
-        const match = _.find(i === 0 ? data : value[i - 1]?.children, val => {
+        const match = _.find(i === 0 ? data : value[i - 1].children, val => {
           return v === val.value
         })
-        match && value.push(match)
+        value.push(match)
       })
     }
 

package/src/component/more_select/base.js

@@ -33,8 +33,8 @@ class Base extends React.Component {
       // keyboard 默认第一个位置
       willActiveIndex: props.isKeyboard ? 0 : null,
       _style: {}
+      // isOnComposition: false
     }
-
     // 要后于 this.state 执行，因为 getFilterData 用到 searchValue
 
     // 有选择才有意义
@@ -49,6 +49,12 @@ class Base extends React.Component {
     }
   }
 
+  isOnComposition = false
+
+  setInputValue = () => {
+    this.ref.current.value = this.state.searchValue || ''
+  }
+
   apiDoFocus = () => {
     // 唤起 popover，input autoFocus 会自动聚焦，但是这种方式本质是显示 UI
     // this.popoverRef.current.apiDoSetActive(true)
@@ -77,6 +83,11 @@ class Base extends React.Component {
     const dom = findDOMNode(this)
     const _style = { width: dom.offsetWidth }
     this.setState({ _style })
+    this.setInputValue()
+  }
+
+  componentDidUpdate() {
+    this.setInputValue()
   }
 
   componentWillUnmount() {
@@ -102,10 +113,21 @@ class Base extends React.Component {
     this.setState({
       searchValue
     })
-
+    if (this.isOnComposition && this.props.isEnableChineseCheck) return
     this.debounceDoSearch(searchValue)
   }
 
+  handleComposition = evt => {
+    if (evt.type === 'compositionend') {
+      this.isOnComposition = false
+      if (navigator.userAgent.indexOf('Chrome') > -1) {
+        this.handleChange(evt)
+      }
+      return
+    }
+    this.isOnComposition = true
+  }
+
   handleSelected = values => {
     const { onSelect, data, multiple, selected } = this.props
     const items = []
@@ -241,7 +263,8 @@ class Base extends React.Component {
       renderListItem,
       searchPlaceholder,
       listHeight,
-      popupClassName
+      popupClassName,
+      isEnableChineseCheck
     } = this.props
 
     const { loading, searchValue, willActiveIndex } = this.state
@@ -254,14 +277,28 @@ class Base extends React.Component {
         onKeyDown={this.handlePopupKeyDown}
       >
         <div className='gm-more-select-popup-input'>
-          <input
-            autoFocus
-            className='form-control'
-            type='text'
-            value={searchValue}
-            onChange={this.handleChange}
-            placeholder={searchPlaceholder}
-          />
+          {isEnableChineseCheck ? (
+            <input
+              autoFocus
+              className='form-control'
+              type='text'
+              // value={searchValue}
+              onChange={this.handleChange}
+              placeholder={searchPlaceholder}
+              onCompositionStart={this.handleComposition}
+              onCompositionUpdate={this.handleComposition}
+              onCompositionEnd={this.handleComposition}
+            />
+          ) : (
+            <input
+              autoFocus
+              className='form-control'
+              type='text'
+              value={searchValue}
+              onChange={this.handleChange}
+              placeholder={searchPlaceholder}
+            />
+          )}
         </div>
         <div style={{ height: listHeight }}>
           {loading && (
@@ -433,6 +470,7 @@ Base.propTypes = {
   selected: PropTypes.array.isRequired, // item 数组。 非 value，也非引用，原因是想解耦 selected 和 data 的关系。这样当
   onSelect: PropTypes.func.isRequired, // 返回 item 数组
   multiple: PropTypes.bool,
+  isEnableChineseCheck: PropTypes.bool, // 是否开启中文检查
 
   // 状态
   disabled: PropTypes.bool,