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

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

@@ -1,8 +1,14 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Host, Element, Prop, Event, Listen } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import classNames from 'classnames';
 import { convertStyle } from '../../utils';
 export class PickerView {
+  constructor() {
+    this.indicatorStyle = undefined;
+    this.indicatorClass = undefined;
+    this.value = undefined;
+    this.maskStyle = undefined;
+    this.maskClass = undefined;
+  }
   onSelect(e) {
     e.stopPropagation();
     if (e.target.tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE')
@@ -57,169 +63,175 @@ export class PickerView {
     const indicatorStyle = convertStyle(this.indicatorStyle);
     const maskTopStyle = convertStyle(this.maskStyle);
     const maskBottomStyle = convertStyle(this.maskStyle);
-    return (h(Host, { class: "taro-picker-view-container" },
-      h("slot", null),
-      h("div", { class: "taro-picker-view-mask-container" },
-        h("div", { class: maskTopCls, style: maskTopStyle }),
-        h("div", { class: indicatorCls, style: indicatorStyle, ref: indicator => (this.indicator = indicator) }),
-        h("div", { class: maskBtmCls, style: maskBottomStyle }))));
+    return (h(Host, { class: "taro-picker-view-container" }, h("slot", null), h("div", { class: "taro-picker-view-mask-container" }, h("div", { class: maskTopCls, style: maskTopStyle }), h("div", { class: indicatorCls, style: indicatorStyle, ref: indicator => (this.indicator = indicator) }), h("div", { class: maskBtmCls, style: maskBottomStyle }))));
   }
   static get is() { return "taro-picker-view-core"; }
-  static get originalStyleUrls() { return {
-    "$": ["./style/index.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["./style/index.css"]
-  }; }
-  static get properties() { return {
-    "indicatorStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "indicator-style",
-      "reflect": false
-    },
-    "indicatorClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "indicator-class",
-      "reflect": false
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "number[]",
-        "resolved": "number[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "maskStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mask-style",
-      "reflect": false
-    },
-    "maskClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["./style/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["./style/index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "indicatorStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indicator-style",
+        "reflect": false
       },
-      "attribute": "mask-class",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "onChange",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "indicatorClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indicator-class",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "onPickStart",
-      "name": "pickstart",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "onPickEnd",
-      "name": "pickend",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "maskStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mask-style",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "maskClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mask-class",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onChange",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onPickStart",
+        "name": "pickstart",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onPickEnd",
+        "name": "pickend",
+        "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": "onselect",
-      "method": "onSelect",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "onselectstart",
-      "method": "onSelectStart",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "onselectend",
-      "method": "onPickerColEnd",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "onselect",
+        "method": "onSelect",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "onselectstart",
+        "method": "onSelectStart",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "onselectend",
+        "method": "onPickerColEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
+//# sourceMappingURL=picker-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker-view.js","sourceRoot":"","sources":["../../../src/components/picker-view/picker-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core'\nimport classNames from 'classnames'\n\nimport { convertStyle } from '../../utils'\n\n@Component({\n  tag: 'taro-picker-view-core',\n  styleUrl: './style/index.scss'\n})\nexport class PickerView {\n  private indicator: HTMLDivElement | undefined\n  // 当前ref\n  @Element() el: HTMLElement\n  // 指示标的样式\n  @Prop() indicatorStyle: string\n  @Prop() indicatorClass: string\n\n  // 初始化的数据\n  @Prop() value: number[]\n\n  // 蒙层特效\n  @Prop() maskStyle: string\n\n  // 蒙层特效\n  @Prop() maskClass: string\n\n  // 外部回调\n  @Event({\n    eventName: 'change'\n  })\n  onChange: EventEmitter\n\n  @Event({\n    eventName: 'pickstart'\n  })\n  onPickStart: EventEmitter\n\n  @Event({\n    eventName: 'pickend'\n  })\n  onPickEnd: EventEmitter\n\n  @Listen('onselect')\n  onSelect(e: CustomEvent<{ curIndex: string; selectedIndex: string }>) {\n    e.stopPropagation()\n    if ((e.target as Element).tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE') return\n    let _curIndex: number = +e.detail.curIndex\n    let _selectedIndex = +e.detail.selectedIndex\n    this.value[_curIndex] = _selectedIndex\n    this.onChange.emit({ value: this.value })\n  }\n\n  @Listen('onselectstart')\n  onSelectStart(e: CustomEvent<{ curIndex: string; selectedIndex: string }>) {\n    e.stopPropagation()\n    if ((e.target as Element).tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE') return\n    this.onPickStart.emit()\n  }\n\n  @Listen('onselectend')\n  onPickerColEnd(e: CustomEvent<{ curIndex: string; selectedIndex: string }>) {\n    e.stopPropagation()\n    if ((e.target as Element).tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE') return\n    this.onPickEnd.emit()\n  }\n\n  componentDidLoad() {\n    const childList = this.el.querySelectorAll('taro-picker-view-column-core')\n    childList.forEach((element, index) => {\n      element.setAttribute('col', `${index}`)\n      let selectIndex = '0'\n      if (!!this.value && this.value.length > index) {\n        selectIndex = `${this.value[index]}`\n      }\n      const pickerHeight = this.el.getBoundingClientRect().height\n      const indicatorHeight = this.indicator?.offsetHeight || 0\n      const paddingVertical = (pickerHeight - indicatorHeight) / 2.0\n      element.setAttribute('initial-position', `${selectIndex}`)\n      element.setAttribute('padding-vertical', `${paddingVertical}`)\n    })\n  }\n\n  // 过滤非 PickerViewColumn 组件\n  componentDidRender() {\n    this.el.childNodes.forEach(item => {\n      const childEle = item as HTMLElement\n      if (\n        'TARO-PICKER-VIEW-COLUMN-CORE' !== childEle.tagName &&\n        childEle.className !== 'taro-picker-view-mask-container'\n      ) {\n        this.el.removeChild(item)\n      }\n    })\n  }\n\n  render() {\n    const indicatorCls = classNames('taro-picker-view-mask-indicator', this.indicatorClass)\n    const maskTopCls = classNames('taro-picker-view-mask-top', this.maskClass)\n    const maskBtmCls = classNames('taro-picker-view-mask-bottom', this.maskClass)\n    const indicatorStyle = convertStyle(this.indicatorStyle)\n    const maskTopStyle = convertStyle(this.maskStyle)\n    const maskBottomStyle = convertStyle(this.maskStyle)\n\n    return (\n      <Host class=\"taro-picker-view-container\">\n        <slot />\n        <div class=\"taro-picker-view-mask-container\">\n          <div class={maskTopCls} style={maskTopStyle} />\n          <div class={indicatorCls} style={indicatorStyle} ref={indicator => (this.indicator = indicator)} />\n          <div class={maskBtmCls} style={maskBottomStyle} />\n        </div>\n      </Host>\n    )\n  }\n}\n"]}