@gm-mobile/react 1.1.6 → 1.1.7-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/react",
-  "version": "1.1.6",
+  "version": "1.1.7-beta.3",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -27,8 +27,8 @@
   "dependencies": {
     "@gm-common/number": "^2.2.9",
     "@gm-common/tool": "^2.2.9",
-    "@gm-mobile/locales": "^1.1.6",
+    "@gm-mobile/locales": "^1.1.7-beta.3",
     "classnames": "^2.2.6"
   },
-  "gitHead": "986c6402ca51357b144807b533a6575371602783"
+  "gitHead": "c01b6364ab1229c2e7e139423930ab01859f5924"
 }

package/src/component/picker/component/picker.js

@@ -51,10 +51,10 @@ const Picker = ({
             onChange={handleChange}
           />
         ))}
-        <div
+        {/* <div
           className='m-picker-highlight m-border-1px-top-before m-border-1px-bottom-after'
           style={highlightStyle}
-        />
+        /> */}
       </div>
     </div>
   )

package/src/component/picker/component/picker_column.js

@@ -12,21 +12,22 @@ class PickerColumn extends React.Component {
       startScrollerTranslate: 0,
       ...this.computeTranslate(props),
     }
+    this.divRef = React.createRef()
   }
 
-  componentDidMount() {
-    ReactDOM.findDOMNode(this.refScroll).addEventListener(
-      'touchmove',
-      this.handleTouchMove
-    )
-  }
+  // componentDidMount() {
+  //   ReactDOM.findDOMNode(this.refScroll).addEventListener(
+  //     'touchmove',
+  //     this.handleTouchMove
+  //   )
+  // }
 
-  componentWillUnmount() {
-    ReactDOM.findDOMNode(this.refScroll).removeEventListener(
-      'touchmove',
-      this.handleTouchMove
-    )
-  }
+  // componentWillUnmount() {
+  //   ReactDOM.findDOMNode(this.refScroll).removeEventListener(
+  //     'touchmove',
+  //     this.handleTouchMove
+  //   )
+  // }
 
   componentWillReceiveProps(nextProps) {
     if (this.state.isMoving) {
@@ -36,7 +37,7 @@ class PickerColumn extends React.Component {
   }
 
   computeTranslate = (props) => {
-    const { options, value, itemHeight, columnHeight } = props
+    const { options, value, columnHeight } = props
     let selectedIndex = _.findIndex(options, (option) => option.value === value)
     if (selectedIndex < 0) {
       // throw new ReferenceError();
@@ -50,10 +51,16 @@ class PickerColumn extends React.Component {
       this.handleOptionSelected(options[0])
       selectedIndex = 0
     }
-
+    // 获取到当前元素的高度
+    const itemHeight =
+      this.divRef?.current?.childNodes?.[selectedIndex]?.clientHeight ?? 40
+    let addHeight = 40
+    // 计算translate3d要移动的距离
+    for (let i = 0; i < selectedIndex; i++) {
+      addHeight += this.divRef?.current?.childNodes?.[i]?.clientHeight ?? 40
+    }
     return {
-      scrollerTranslate:
-        columnHeight / 2 - itemHeight / 2 - selectedIndex * itemHeight,
+      scrollerTranslate: columnHeight / 2 - itemHeight / 2 - addHeight,
       minTranslate:
         columnHeight / 2 - itemHeight * options.length + itemHeight / 2,
       maxTranslate: columnHeight / 2 - itemHeight / 2,
@@ -153,11 +160,17 @@ class PickerColumn extends React.Component {
     const { options, renderOption, itemHeight, value } = this.props
     return options.map((option, index) => {
       const style = {
-        height: itemHeight + 'px',
-        lineHeight: itemHeight + 'px',
+        minHeight: itemHeight + 'px',
+        // height: itemHeight + 'px',
+        // lineHeight: itemHeight + 'px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
       }
       const className = `m-picker-item${
-        option.value === value ? ' m-picker-item-selected' : ''
+        option.value === value
+          ? ' m-picker-highlight m-picker-item-selected m-border-1px-top-before m-border-1px-bottom-after'
+          : ''
       }`
       return (
         <div
@@ -187,7 +200,8 @@ class PickerColumn extends React.Component {
     return (
       <div className='m-picker-column'>
         <div
-          ref={(ref) => (this.refScroll = ref)}
+          // ref={(ref) => (this.refScroll = ref)}
+          ref={this.divRef}
           className='m-picker-scroll'
           style={style}
           onTouchStart={this.handleTouchStart}

package/src/component/picker/style.less

@@ -50,10 +50,10 @@
       .m-picker-item {
         position: relative;
         padding: 0 4px;
-        white-space: nowrap;
+        // white-space: nowrap;
         color: var(--m-color-desc);
-        overflow: hidden;
-        text-overflow: ellipsis;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
         cursor: pointer;
 
         &.m-picker-item-selected {