@tarojs/components 3.5.7-alpha.6 → 3.6.0-canary.0

package/dist/collection/components/picker-view/picker-view-column.js

@@ -1,14 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Host, Listen, Element, Event, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { debounce } from '../../utils';
 export class PickerViewColumn {
   constructor() {
-    // 初始化的选中位置
-    this.initialPosition = '0';
-    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
-    this.paddingVertical = 0;
-    this.isInit = false;
-    this.isMove = false;
     // 滚动结束自动回到合适的位置
     this.handleSelected = debounce(() => {
       const childList = this.el.childNodes;
@@ -33,6 +26,11 @@ export class PickerViewColumn {
       });
       this.onSelectEnd.emit();
     }, 500);
+    this.col = undefined;
+    this.initialPosition = '0';
+    this.paddingVertical = 0;
+    this.isInit = false;
+    this.isMove = false;
   }
   onScroll(_event) {
     if (!this.isMove) {
@@ -79,147 +77,160 @@ export class PickerViewColumn {
     return (h(Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
   }
   static get is() { return "taro-picker-view-column-core"; }
-  static get originalStyleUrls() { return {
-    "$": ["./style/column.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["./style/column.css"]
-  }; }
-  static get properties() { return {
-    "col": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "col",
-      "reflect": false
-    },
-    "initialPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "initial-position",
-      "reflect": false,
-      "defaultValue": "'0'"
-    },
-    "paddingVertical": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "padding-vertical",
-      "reflect": false,
-      "defaultValue": "0"
-    }
-  }; }
-  static get states() { return {
-    "isInit": {},
-    "isMove": {}
-  }; }
-  static get events() { return [{
-      "method": "onChange",
-      "name": "onselect",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "onSelectStart",
-      "name": "onselectstart",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["./style/column.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["./style/column.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "col": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "onSelectEnd",
-      "name": "onselectend",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "initialPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-position",
+        "reflect": false,
+        "defaultValue": "'0'"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "paddingVertical": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-vertical",
+        "reflect": false,
+        "defaultValue": "0"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isInit": {},
+      "isMove": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onChange",
+        "name": "onselect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onSelectStart",
+        "name": "onselectstart",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onSelectEnd",
+        "name": "onselectend",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "scroll",
-      "method": "onScroll",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseup",
-      "method": "onMouseEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseout",
-      "method": "onMouseEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "onMouseEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "touchend",
-      "method": "onTouchEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "onScroll",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseup",
+        "method": "onMouseEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseout",
+        "method": "onMouseEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseleave",
+        "method": "onMouseEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchend",
+        "method": "onTouchEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
 }
+//# sourceMappingURL=picker-view-column.js.map

package/dist/collection/components/picker-view/picker-view-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-view-column.js","sourceRoot":"","sources":["../../../src/components/picker-view/picker-view-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Element, Event, EventEmitter, Prop, State } from '@stencil/core'\n\nimport { debounce } from '../../utils'\n\n@Component({\n  tag: 'taro-picker-view-column-core',\n  styleUrl: './style/column.scss'\n})\nexport class PickerViewColumn {\n  // 当前 ref\n  @Element() el: HTMLElement\n\n  // 标记属于 picker 第几列\n  @Prop() col: string\n\n  // 初始化的选中位置\n  @Prop({ attribute: 'initial-position' }) initialPosition = '0'\n\n  // 滑动距离上下留白区域-通过父视图和 indicator 计算而来\n  @Prop({ attribute: 'padding-vertical' }) paddingVertical = 0\n\n  @State()\n  isInit: boolean = false\n\n  @State()\n  isMove: boolean = false\n\n  // 选中后的结果回调\n  @Event({ eventName: 'onselect' }) onChange: EventEmitter\n  @Event({ eventName: 'onselectstart' }) onSelectStart: EventEmitter\n  @Event({ eventName: 'onselectend' }) onSelectEnd: EventEmitter\n\n  @Listen('scroll')\n  onScroll(_event: UIEvent) {\n    if (!this.isMove) {\n      this.isMove = true\n      this.onSelectStart.emit()\n    }\n    this.handleSelected()\n  }\n\n  @Listen('mouseup')\n  @Listen('mouseout')\n  @Listen('mouseleave')\n  onMouseEnd() {\n    if (!this.isMove) return\n    this.isMove = false\n    this.handleSelected()\n  }\n\n  @Listen('touchend')\n  onTouchEnd() {\n    this.isMove = false\n    this.handleSelected()\n  }\n\n  componentDidUpdate() {\n    if (!this.isInit) {\n      this.isInit = true\n      const childList = this.el.childNodes\n      let idx = 0\n      let sum = 0\n      for (const index in childList) {\n        const item = childList[index] as HTMLElement\n        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {\n          break\n        }\n        sum += item.offsetHeight\n        idx++\n      }\n      this.el.scrollTo({ top: sum })\n      if (idx >= childList.length) {\n        this.onChange.emit({\n          curIndex: this.col,\n          selectedIndex: idx - 1\n        })\n      }\n    }\n  }\n\n  // 滚动结束自动回到合适的位置\n  handleSelected = debounce(() => {\n    const childList = this.el.childNodes\n    let sum = 0\n    let selectedIndex: string = '0'\n    for (const index in childList) {\n      const item = childList[index] as HTMLElement\n      const itemHeight = item.offsetHeight\n      if (sum + itemHeight / 2.0 > this.el.scrollTop) {\n        selectedIndex = index\n        break\n      }\n      sum += itemHeight\n    }\n\n    this.el.scrollTo({\n      top: sum,\n      behavior: 'smooth'\n    })\n    this.onChange.emit({\n      curIndex: this.col,\n      selectedIndex: selectedIndex\n    })\n    this.onSelectEnd.emit()\n  }, 500)\n\n  render() {\n    const { paddingVertical = 0 } = this\n    return (\n      <Host\n        class=\"taro-picker-view-column-container\"\n        style={{ 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` }}\n      />\n    )\n  }\n}\n"]}