@ray-js/components 0.3.27 → 0.3.30

package/lib/DatePicker/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseProps } from '../types';
 import { TouchEventHandler } from '@ray-js/framework-shared';
 declare type changeValue = (e: {
@@ -19,6 +20,7 @@ export interface DatePickerProps extends BaseProps, TouchEventHandler {
     onCancel?: CancelEvent;
     confirmText?: string;
     cancelText?: string;
+    children?: React.ReactNode | string;
 }
 export declare const defaultProps: DatePickerProps;
 export interface IState {

package/lib/Form/Form.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _this=this,_jsxFileName="/drone/src/packages/components/src/Form/Form.native.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Form=function(){return React.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:10}},"\u6682\u672A\u5B9E\u73B0");};var _default=Form;exports.default=_default;

package/lib/Form/Form.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormProps } from './props';
+declare const Form: React.FC<FormProps>;
+export default Form;

package/lib/Form/Form.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _this=this,_jsxFileName="/drone/src/packages/components/src/Form/Form.native.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Form=function(){return React.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:10}},"\u6682\u672A\u5B9E\u73B0");};var _default=Form;exports.default=_default;

package/lib/Form/Form.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onSubmit", "onReset"];
+import * as React from 'react';
+import handleProps from '../utils/handleProps';
+import { useEventListener } from 'ahooks';
+
+var Form = function (props) {
+  var onSubmit = props.onSubmit,
+      onReset = props.onReset,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var currentNode = React.useRef(null);
+  useEventListener('submit', function (e) {
+    onSubmit(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'submit'
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('reset', function (e) {
+    onReset(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'reset'
+    }));
+  }, {
+    target: currentNode
+  }); // @ts-ignore
+
+  return /*#__PURE__*/React.createElement("ty-form", _extends({
+    ref: currentNode
+  }, handleProps(restProps)));
+};
+
+export default Form;

package/lib/Form/Form.native.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormProps } from './props';
+declare const Form: React.FC<FormProps>;
+export default Form;

package/lib/Form/Form.tuya.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormProps } from './props';
+declare const Form: React.FC<FormProps>;
+export default Form;

package/lib/Form/Form.tuya.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Form as RemaxForm } from '@ray-js/remax-tuya';
+
+var Form = function (props) {
+  return /*#__PURE__*/React.createElement(RemaxForm, props);
+};
+
+export default Form;

package/lib/Form/Form.web.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onSubmit", "onReset"];
+import * as React from 'react';
+import handleProps from '../utils/handleProps';
+import { useEventListener } from 'ahooks';
+
+var Form = function (props) {
+  var onSubmit = props.onSubmit,
+      onReset = props.onReset,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var currentNode = React.useRef(null);
+  useEventListener('submit', function (e) {
+    onSubmit(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'submit'
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('reset', function (e) {
+    onReset(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'reset'
+    }));
+  }, {
+    target: currentNode
+  }); // @ts-ignore
+
+  return /*#__PURE__*/React.createElement("ty-form", _extends({
+    ref: currentNode
+  }, handleProps(restProps)));
+};
+
+export default Form;

package/lib/Form/Form.wechat.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormProps } from './props';
+declare const Form: React.FC<FormProps>;
+export default Form;

package/lib/Form/Form.wechat.js

@@ -0,0 +1,33 @@
+import { Form as _Form } from "@remax/wechat/esm/hostComponents/Form/index";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onClick", "onLongClick", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart"];
+import * as React from 'react';
+import { useTouch } from '@ray-js/framework-shared';
+
+var Form = function (props) {
+  var onClick = props.onClick,
+      onLongClick = props.onLongClick,
+      onTouchCancel = props.onTouchCancel,
+      onTouchEnd = props.onTouchEnd,
+      onTouchMove = props.onTouchMove,
+      onTouchStart = props.onTouchStart,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useTouch = useTouch({
+    onLongClick: onLongClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchCancel,
+    onClick: onClick
+  }),
+      _useTouch2 = _slicedToArray(_useTouch, 2),
+      touching = _useTouch2[0],
+      handlers = _useTouch2[1];
+
+  return /*#__PURE__*/React.createElement(_Form, _extends({}, restProps, handlers));
+};
+
+export default Form;

package/lib/Form/index.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});var _exportNames={};exports.default=void 0;var _Form=_interopRequireDefault(require("./Form"));var _props=require("./props");Object.keys(_props).forEach(function(key){if(key==="default"||key==="__esModule")return;if(Object.prototype.hasOwnProperty.call(_exportNames,key))return;if(key in exports&&exports[key]===_props[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _props[key];}});});var _default=_Form.default;exports.default=_default;

package/lib/Form/index.d.ts

@@ -0,0 +1,3 @@
+import Form from './Form';
+export * from './props';
+export default Form;

package/lib/Form/index.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});var _exportNames={};exports.default=void 0;var _Form=_interopRequireDefault(require("./Form"));var _props=require("./props");Object.keys(_props).forEach(function(key){if(key==="default"||key==="__esModule")return;if(Object.prototype.hasOwnProperty.call(_exportNames,key))return;if(key in exports&&exports[key]===_props[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _props[key];}});});var _default=_Form.default;exports.default=_default;

package/lib/Form/index.js

@@ -0,0 +1,3 @@
+import Form from './Form';
+export * from './props';
+export default Form;

package/lib/Form/index.md

@@ -0,0 +1,30 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 表单组件
+---
+
+# Form
+
+表单。将组件内的用户输入的 input textarea checkbox-group radio-group picker switch slider 提交。
+
+当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
+
+## 导入
+
+```js
+import { Form } from '@ray-js/components'
+```
+
+## 示例代码
+
+<code src="./demos/basic.tsx" title="基本使用" background="#f2f4f6"/>
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- | --- |
+| onSubmit | eventhandle |  | 否 | 携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值 | Web |
+| onReset | eventhandle |  | 否 | 表单重置时会触发 reset 事件 | Web |

package/lib/Form/index.tuya.js

@@ -0,0 +1,3 @@
+import Form from './Form';
+export * from './props';
+export default Form;

package/lib/Form/index.web.js

@@ -0,0 +1,3 @@
+import Form from './Form';
+export * from './props';
+export default Form;

package/lib/Form/index.wechat.js

@@ -0,0 +1,3 @@
+import Form from './Form';
+export * from './props';
+export default Form;

package/lib/Form/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});

package/lib/Form/props.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from '../types';
+export declare type FormProps = BaseProps & {
+    onSubmit?(event: {
+        type: 'form';
+        origin: any;
+        value: any;
+    }): void;
+    onReset?(event: {
+        type: 'form';
+        origin: any;
+        value: any;
+    }): void;
+};

package/lib/Form/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});

package/lib/Form/props.js

@@ -0,0 +1 @@
+export {};

package/lib/Form/props.tuya.js

@@ -0,0 +1 @@
+export {};

package/lib/Form/props.web.js

@@ -0,0 +1 @@
+export {};

package/lib/Form/props.wechat.js

@@ -0,0 +1 @@
+export {};

package/lib/Icon/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Icon } from '@ray-js/components';
+import { Icon } from '@ray-js/components'
 ```
 
 ## 效果
@@ -28,6 +28,6 @@ import { Icon } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| type | string |  | 图标类型，类型名 请查看上方示例中 iconfont 的 font class 名 | 涂鸦、微信、RN |
-| size | number | 16 | 图标大小，单位 px | 涂鸦、微信、RN |
-| color | string | #333333 | 图标颜色 | 涂鸦、微信、RN |
+| type | string |  | 图标类型，类型名 请查看上方示例中 iconfont 的 font class 名 | 涂鸦、微信、RN、Web |
+| size | number | 16 | 图标大小，单位 px | 涂鸦、微信、RN、Web |
+| color | string | #333333 | 图标颜色 | 涂鸦、微信、RN、Web |

package/lib/Image/Image.js

@@ -1,92 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "className", "src", "style", "mode", "onClick", "onLoad", "onError"];
-import clsx from 'clsx';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
-var modeStyle = {
-  scaleToFill: {
-    backgroundSize: '100% 100%'
-  },
-  aspectFit: {
-    backgroundSize: 'contain',
-    backgroundPosition: 'center'
-  },
-  widthFix: {
-    backgroundSize: '100% 100%',
-    height: 'auto',
-    lineHeight: 0
-  },
-  heightFix: {
-    backgroundSize: '100% 100%',
-    width: 'auto',
-    lineHeight: 0
-  },
-  aspectFill: {
-    backgroundSize: 'cover',
-    backgroundPosition: 'center'
-  },
-  top: {
-    backgroundPosition: 'top'
-  },
-  bottom: {
-    backgroundPosition: 'bottom'
-  },
-  center: {
-    backgroundPosition: 'center'
-  },
-  left: {
-    backgroundPosition: 'center left'
-  },
-  right: {
-    backgroundPosition: 'center right'
-  },
-  'top left': {
-    backgroundPosition: 'top left'
-  },
-  'top right': {
-    backgroundPosition: 'top right'
-  },
-  'bottom left': {
-    backgroundPosition: 'bottom left'
-  },
-  'bottom right': {
-    backgroundPosition: 'bottom right'
-  }
-};
-var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      src = props.src,
-      style = props.style,
-      _props$mode = props.mode,
-      mode = _props$mode === void 0 ? 'scaleToFill' : _props$mode,
-      onClick = props.onClick,
-      onLoad = props.onLoad,
-      onError = props.onError,
-      restProps = _objectWithoutProperties(props, _excluded);
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
+var Image = /*#__PURE__*/React.forwardRef(function (props) {
+  var currentNode = React.useRef(null);
+  useEventListener('load', function (e) {
+    var _props$onLoad;
 
-  var isWidthFixMode = mode === 'widthFix';
-  var isHeightFixMode = mode === 'heightFix';
-  return /*#__PURE__*/React.createElement("div", _extends({
-    onClick: onClick,
-    className: clsx('ray-image', styles.image, className),
-    style: inlineStyle(style, {
-      backgroundImage: "url(".concat(src, ")"),
-      backgroundRepeat: "no-repeat"
-    }, modeStyle[mode])
-  }, restProps), /*#__PURE__*/React.createElement("img", {
-    ref: ref,
-    src: src,
-    style: {
-      visibility: 'hidden',
-      width: isWidthFixMode ? '100%' : isHeightFixMode ? 'auto' : undefined,
-      height: isWidthFixMode ? 'auto' : isHeightFixMode ? '100%' : '0px'
-    },
-    onLoad: onLoad,
-    onError: onError
-  }));
+    (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 ? void 0 : _props$onLoad.call(props, _objectSpread(_objectSpread({
+      type: e.type
+    }, e.detail), {}, {
+      origin: origin
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('error', function (e) {
+    var _props$onError;
+
+    (_props$onError = props.onError) === null || _props$onError === void 0 ? void 0 : _props$onError.call(props, _objectSpread(_objectSpread({
+      type: e.type
+    }, e.detail), {}, {
+      origin: origin
+    }));
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-image", _extends({}, handleProps(props), {
+      ref: currentNode
+    }))
+  );
 });
 Image.displayName = 'Image';
 export default Image;

package/lib/Image/Image.web.js

@@ -1,92 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "className", "src", "style", "mode", "onClick", "onLoad", "onError"];
-import clsx from 'clsx';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
-var modeStyle = {
-  scaleToFill: {
-    backgroundSize: '100% 100%'
-  },
-  aspectFit: {
-    backgroundSize: 'contain',
-    backgroundPosition: 'center'
-  },
-  widthFix: {
-    backgroundSize: '100% 100%',
-    height: 'auto',
-    lineHeight: 0
-  },
-  heightFix: {
-    backgroundSize: '100% 100%',
-    width: 'auto',
-    lineHeight: 0
-  },
-  aspectFill: {
-    backgroundSize: 'cover',
-    backgroundPosition: 'center'
-  },
-  top: {
-    backgroundPosition: 'top'
-  },
-  bottom: {
-    backgroundPosition: 'bottom'
-  },
-  center: {
-    backgroundPosition: 'center'
-  },
-  left: {
-    backgroundPosition: 'center left'
-  },
-  right: {
-    backgroundPosition: 'center right'
-  },
-  'top left': {
-    backgroundPosition: 'top left'
-  },
-  'top right': {
-    backgroundPosition: 'top right'
-  },
-  'bottom left': {
-    backgroundPosition: 'bottom left'
-  },
-  'bottom right': {
-    backgroundPosition: 'bottom right'
-  }
-};
-var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      src = props.src,
-      style = props.style,
-      _props$mode = props.mode,
-      mode = _props$mode === void 0 ? 'scaleToFill' : _props$mode,
-      onClick = props.onClick,
-      onLoad = props.onLoad,
-      onError = props.onError,
-      restProps = _objectWithoutProperties(props, _excluded);
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
+var Image = /*#__PURE__*/React.forwardRef(function (props) {
+  var currentNode = React.useRef(null);
+  useEventListener('load', function (e) {
+    var _props$onLoad;
 
-  var isWidthFixMode = mode === 'widthFix';
-  var isHeightFixMode = mode === 'heightFix';
-  return /*#__PURE__*/React.createElement("div", _extends({
-    onClick: onClick,
-    className: clsx('ray-image', styles.image, className),
-    style: inlineStyle(style, {
-      backgroundImage: "url(".concat(src, ")"),
-      backgroundRepeat: "no-repeat"
-    }, modeStyle[mode])
-  }, restProps), /*#__PURE__*/React.createElement("img", {
-    ref: ref,
-    src: src,
-    style: {
-      visibility: 'hidden',
-      width: isWidthFixMode ? '100%' : isHeightFixMode ? 'auto' : undefined,
-      height: isWidthFixMode ? 'auto' : isHeightFixMode ? '100%' : '0px'
-    },
-    onLoad: onLoad,
-    onError: onError
-  }));
+    (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 ? void 0 : _props$onLoad.call(props, _objectSpread(_objectSpread({
+      type: e.type
+    }, e.detail), {}, {
+      origin: origin
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('error', function (e) {
+    var _props$onError;
+
+    (_props$onError = props.onError) === null || _props$onError === void 0 ? void 0 : _props$onError.call(props, _objectSpread(_objectSpread({
+      type: e.type
+    }, e.detail), {}, {
+      origin: origin
+    }));
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-image", _extends({}, handleProps(props), {
+      ref: currentNode
+    }))
+  );
 });
 Image.displayName = 'Image';
 export default Image;

package/lib/Image/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Image } from '@ray-js/components';
+import { Image } from '@ray-js/components'
 ```
 
 ## 示例代码
@@ -24,27 +24,27 @@ import { Image } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| className | string |  | 样式名 | RN、涂鸦、微信 |
-| src | string |  | 图片地址 | RN、涂鸦、微信 |
-| mode | string | 'scaleToFill' | 图片裁剪、缩放的模式，RN 支持部分模式，具体见下表 | RN、涂鸦、微信 |
-| onLoad | (e: { width: number; height: number; origin }) => void | 'scaleToFill' | 图片裁剪、缩放的模式 | RN、涂鸦、微信 |
-| onError | (e: { errMsg: string; origin }) => void | 'scaleToFill' | 图片裁剪、缩放的模式 | RN、涂鸦、微信 |
+| className | string |  | 样式名 | RN、涂鸦、微信、Web |
+| src | string |  | 图片地址 | RN、涂鸦、微信、Web |
+| mode | string | 'scaleToFill' | 图片裁剪、缩放的模式，RN 支持部分模式，具体见下表 | RN、涂鸦、微信、Web |
+| onLoad | (e: { width: number; height: number; origin }) => void |  | 图片裁剪、缩放的模式 | RN、涂鸦、微信、Web |
+| onError | (e: { errMsg: string; origin }) => void |  | 图片裁剪、缩放的模式 | RN、涂鸦、微信、Web |
 
 ## mode 合法值
 
 | 值 | 说明 | 支持平台 |
 | --- | --- | --- |
-| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | RN、涂鸦、微信 |
-| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | RN、涂鸦、微信 |
-| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | RN、涂鸦、微信 |
-| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | RN、涂鸦、微信 |
-| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | 涂鸦、微信 |
-| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | 涂鸦、微信 |
-| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | 涂鸦、微信 |
-| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | 涂鸦、微信 |
-| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | 涂鸦、微信 |
-| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | 涂鸦、微信 |
-| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | 涂鸦、微信 |
-| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | 涂鸦、微信 |
-| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | 涂鸦、微信 |
-| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 | 涂鸦、微信 |
+| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | RN、涂鸦、微信、Web |
+| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | RN、涂鸦、微信、Web |
+| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | RN、涂鸦、微信、Web |
+| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | RN、涂鸦、微信、Web |
+| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | 涂鸦、微信、Web |
+| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | 涂鸦、微信、Web |
+| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | 涂鸦、微信、Web |
+| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | 涂鸦、微信、Web |
+| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | 涂鸦、微信、Web |
+| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | 涂鸦、微信、Web |
+| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | 涂鸦、微信、Web |
+| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | 涂鸦、微信、Web |
+| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | 涂鸦、微信、Web |
+| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 | 涂鸦、微信、Web |

package/lib/Image/props.d.ts

@@ -8,6 +8,7 @@ export interface ImageProps extends BaseProps, TouchEventHandler {
     mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom right' | 'bottom left';
     /** 当图片载入完毕时触发 */
     onLoad?: (e: {
+        type: 'load' | 'error';
         width: number;
         height: number;
         origin: RnLoadEvent | WxEvent;