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

package/dist/collection/components/image/image.js

@@ -1,8 +1,9 @@
-import { Component, Prop, h, Host, State, Event } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import classNames from 'classnames';
 import('intersection-observer');
 export class Image {
   constructor() {
+    this.src = undefined;
     this.mode = 'scaleToFill';
     this.lazyLoad = false;
     this.nativeProps = {};
@@ -44,119 +45,130 @@ export class Image {
     return (h(Host, { class: cls }, lazyLoad ? (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
   }
   static get is() { return "taro-image-core"; }
-  static get originalStyleUrls() { return {
-    "$": ["./style/index.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["./style/index.css"]
-  }; }
-  static get properties() { return {
-    "src": {
-      "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 {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": false
       },
-      "attribute": "src",
-      "reflect": false
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Mode",
-        "resolved": "\"aspectFill\" | \"aspectFit\" | \"bottom left\" | \"bottom right\" | \"bottom\" | \"center\" | \"heightFix\" | \"left\" | \"right\" | \"scaleToFill\" | \"top left\" | \"top right\" | \"top\" | \"widthFix\"",
-        "references": {
-          "Mode": {
-            "location": "local"
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Mode",
+          "resolved": "\"aspectFill\" | \"aspectFit\" | \"bottom left\" | \"bottom right\" | \"bottom\" | \"center\" | \"heightFix\" | \"left\" | \"right\" | \"scaleToFill\" | \"top left\" | \"top right\" | \"top\" | \"widthFix\"",
+          "references": {
+            "Mode": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'scaleToFill'"
-    },
-    "lazyLoad": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "lazy-load",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "nativeProps": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{}",
-        "resolved": "{}",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'scaleToFill'"
       },
-      "defaultValue": "{}"
-    }
-  }; }
-  static get states() { return {
-    "aspectFillMode": {}
-  }; }
-  static get events() { return [{
-      "method": "onLoad",
-      "name": "load",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "lazyLoad": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lazy-load",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "nativeProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{}",
+          "resolved": "{}",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
       }
-    }, {
-      "method": "onError",
-      "name": "error",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "aspectFillMode": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onLoad",
+        "name": "load",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onError",
+        "name": "error",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }
+//# sourceMappingURL=image.js.map

package/dist/collection/components/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/image/image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Host, State, Event, EventEmitter } from '@stencil/core'\nimport classNames from 'classnames'\n\nimport('intersection-observer')\n\nexport type Mode =\n  'scaleToFill'\n  | 'aspectFit'\n  | 'aspectFill'\n  | 'widthFix'\n  | 'heightFix'\n  | 'top'\n  | 'bottom'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top left'\n  | 'top right'\n  | 'bottom left'\n  | 'bottom right'\n\n@Component({\n  tag: 'taro-image-core',\n  styleUrl: './style/index.scss'\n})\nexport class Image implements ComponentInterface {\n  @Prop() src: string\n  @Prop() mode: Mode = 'scaleToFill'\n  @Prop() lazyLoad = false\n  @Prop() nativeProps = {}\n\n  @State() aspectFillMode = 'width'\n\n  @Event({\n    eventName: 'load'\n  }) onLoad: EventEmitter\n\n  @Event({\n    eventName: 'error'\n  }) onError: EventEmitter\n\n  private imgRef: HTMLImageElement\n\n  componentDidLoad () {\n    if (!this.lazyLoad) return\n\n    const lazyImg = new IntersectionObserver(entries => {\n      // 异步 api 关系\n      if (entries[entries.length - 1].isIntersecting) {\n        lazyImg.unobserve(this.imgRef)\n        this.imgRef.src = this.src\n      }\n    }, {\n      rootMargin: '300px 0px'\n    })\n\n    lazyImg.observe(this.imgRef)\n  }\n\n  imageOnLoad () {\n    const {\n      width,\n      height,\n      naturalWidth,\n      naturalHeight\n    } = this.imgRef\n\n    this.onLoad.emit({\n      width,\n      height\n    })\n\n    this.aspectFillMode = naturalWidth > naturalHeight ? 'width' : 'height'\n  }\n\n  imageOnError () {\n    this.onError.emit()\n  }\n\n  render () {\n    const {\n      src,\n      mode = 'scaleToFill',\n      lazyLoad = false,\n      aspectFillMode = 'width',\n      imageOnLoad,\n      imageOnError,\n      nativeProps\n    } = this\n\n    const cls = classNames({\n      'taro-img__widthfix': mode === 'widthFix'\n    })\n    const imgCls = classNames(\n      `taro-img__mode-${mode.toLowerCase().replace(/\\s/g, '')}`,\n      {\n        [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'\n      }\n    )\n\n    return (\n      <Host class={cls}>\n        {lazyLoad ? (\n          <img\n            ref={img => (this.imgRef = img!)}\n            class={imgCls}\n            onLoad={imageOnLoad.bind(this)}\n            onError={imageOnError.bind(this)}\n            {...nativeProps}\n          />\n        ) : (\n          <img\n            ref={img => (this.imgRef = img!)}\n            class={imgCls}\n            src={src}\n            onLoad={imageOnLoad.bind(this)}\n            onError={imageOnError.bind(this)}\n            {...nativeProps}\n          />\n        )}\n      </Host>\n    )\n  }\n}\n"]}