@gm-mobile/react 1.1.7-beta.3 → 1.1.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/react",
-  "version": "1.1.7-beta.3",
+  "version": "1.1.8-beta.0",
   "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.7-beta.3",
+    "@gm-mobile/locales": "^1.1.8-beta.0",
     "classnames": "^2.2.6"
   },
-  "gitHead": "c01b6364ab1229c2e7e139423930ab01859f5924"
+  "gitHead": "c57de4f19f88ac2c1e89d07b3dc418756a8b1978"
 }

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,22 +12,21 @@ 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) {
@@ -37,7 +36,7 @@ class PickerColumn extends React.Component {
   }
 
   computeTranslate = (props) => {
-    const { options, value, columnHeight } = props
+    const { options, value, itemHeight, columnHeight } = props
     let selectedIndex = _.findIndex(options, (option) => option.value === value)
     if (selectedIndex < 0) {
       // throw new ReferenceError();
@@ -51,16 +50,10 @@ 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 - addHeight,
+      scrollerTranslate:
+        columnHeight / 2 - itemHeight / 2 - selectedIndex * itemHeight,
       minTranslate:
         columnHeight / 2 - itemHeight * options.length + itemHeight / 2,
       maxTranslate: columnHeight / 2 - itemHeight / 2,
@@ -160,17 +153,11 @@ class PickerColumn extends React.Component {
     const { options, renderOption, itemHeight, value } = this.props
     return options.map((option, index) => {
       const style = {
-        minHeight: itemHeight + 'px',
-        // height: itemHeight + 'px',
-        // lineHeight: itemHeight + 'px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        height: itemHeight + 'px',
+        lineHeight: itemHeight + 'px',
       }
       const className = `m-picker-item${
-        option.value === value
-          ? ' m-picker-highlight m-picker-item-selected m-border-1px-top-before m-border-1px-bottom-after'
-          : ''
+        option.value === value ? ' m-picker-item-selected' : ''
       }`
       return (
         <div
@@ -200,8 +187,7 @@ class PickerColumn extends React.Component {
     return (
       <div className='m-picker-column'>
         <div
-          // ref={(ref) => (this.refScroll = ref)}
-          ref={this.divRef}
+          ref={(ref) => (this.refScroll = ref)}
           className='m-picker-scroll'
           style={style}
           onTouchStart={this.handleTouchStart}

package/src/component/picker/style.less

@@ -24,16 +24,17 @@
     justify-content: center;
     height: 100%;
     padding: 0 12px;
-    -webkit-mask-box-image:
-      linear-gradient(
-        to top,
-        transparent,
-        transparent 5%,
-        white 20%,
-        white 80%,
-        transparent 95%,
-        transparent
-      );
+    // 影响大屏ios的效果
+    // -webkit-mask-box-image:
+    //   linear-gradient(
+    //     to top,
+    //     transparent,
+    //     transparent 5%,
+    //     white 20%,
+    //     white 80%,
+    //     transparent 95%,
+    //     transparent
+    //   );
 
     .m-picker-column {
       flex: 1 1;
@@ -50,10 +51,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 {