@ray-js/components 1.4.0 → 1.4.3

package/lib/Icon/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 _Icon=_interopRequireDefault(require("./Icon"));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=_Icon.default;exports.default=_default;

package/lib/Icon/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 _Icon=_interopRequireDefault(require("./Icon"));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=_Icon.default;exports.default=_default;

package/lib/Icon/index.md

@@ -0,0 +1,29 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 基础组件
+---
+
+# Icon
+
+图标
+
+## 导入
+
+```js
+import { Icon } from '@ray-js/components';
+```
+
+## 示例代码
+
+<code src="./demos/basic.tsx" title="基本用法" background="#f2f4f6"/>
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- |
+| type | string |  | 图标类型，类型名等于 https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3149224 iconfont 的 font class 名 | 涂鸦、微信、RN |
+| size | number | 16 | 图标大小，单位 px | 涂鸦、微信、RN |
+| color | string | #333333 | 图标颜色 | 涂鸦、微信、RN |

package/lib/Icon/index.tuya.js

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

package/lib/Icon/index.web.js

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

package/lib/Icon/index.wechat.js

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

package/lib/Icon/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultIconProps=void 0;var defaultIconProps={size:16,type:'icon-warning',color:'#333333'};exports.defaultIconProps=defaultIconProps;

package/lib/Icon/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultIconProps=void 0;var defaultIconProps={size:16,type:'icon-warning',color:'#333333'};exports.defaultIconProps=defaultIconProps;

package/lib/Icon/props.tuya.js

@@ -0,0 +1,5 @@
+export var defaultIconProps = {
+  size: 16,
+  type: 'icon-warning',
+  color: '#333333'
+};

package/lib/Icon/props.web.js

@@ -0,0 +1,5 @@
+export var defaultIconProps = {
+  size: 16,
+  type: 'icon-warning',
+  color: '#333333'
+};

package/lib/Icon/props.wechat.js

@@ -0,0 +1,5 @@
+export var defaultIconProps = {
+  size: 16,
+  type: 'icon-warning',
+  color: '#333333'
+};

package/lib/Image/Image.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports._Image=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _props=require("./props");var _jsxFileName="/Users/noyobo/home/gitlab/godzilla/ray/packages/components/src/Image/Image.native.tsx";var _excluded=["src","mode","style"];function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var resizeModeMap={scaleToFill:'stretch',aspectFit:'contain',aspectFill:'cover',center:'center'};var _Image=function(_React$Component){(0,_inherits2.default)(_Image,_React$Component);var _super=_createSuper(_Image);function _Image(){var _this;(0,_classCallCheck2.default)(this,_Image);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this.state={ratio:0,layoutWidth:0};_this.hasLayout=false;_this._onLoad=function(){var _this$props=_this.props,onLoad=_this$props.onLoad,src=_this$props.src;if(typeof onLoad==='function'){if(typeof src==='string'){_reactNative.Image.getSize(src,function(width,height){onLoad({width:width,height:height,origin:null});},function(){onLoad({width:0,height:0,origin:null});});}else{var iras=_reactNative.Image.resolveAssetSource(typeof src==='string'?{uri:src}:src);var _ref=iras||{width:0,height:0},width=_ref.width,height=_ref.height;onLoad({width:width,height:height,origin:null});}}};_this._onError=function(){var onError=_this.props.onError;!!onError&&onError({errMsg:'Image is on error',origin:null});};_this.onLayout=function(event){var _this$props2=_this.props,mode=_this$props2.mode,style=_this$props2.style;var layoutWidth=event.nativeEvent.layout.width;var flattenStyle=_reactNative.StyleSheet.flatten(style)||{};if(mode==='widthFix'&&typeof flattenStyle.width==='string'){if(_this.hasLayout)return;_this.setState({layoutWidth:layoutWidth});}if(_this.state.ratio){_this.hasLayout=true;}};_this.loadImg=function(props){var mode=props.mode,src=props.src;if(mode!=='widthFix')return;if(typeof src==='string'){_reactNative.Image.getSize(props.src,function(width,height){if(_this.hasLayout)return;_this.setState({ratio:height/width});});}else{var source=typeof props.src==='string'?{uri:props.src}:props.src;var _ref2=_reactNative.Image.resolveAssetSource(source)||{},width=_ref2.width,height=_ref2.height;if(_this.hasLayout&&!!_this.state.ratio)return;_this.setState({ratio:height/width});}};return _this;}(0,_createClass2.default)(_Image,[{key:"componentDidMount",value:function componentDidMount(){this.loadImg(this.props);}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){if(nextProps.src!==this.props.src){this.hasLayout=false;}return true;}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.src!==this.props.src){this.loadImg(this.props);}}},{key:"render",value:function render(){var _this2=this;var _this$props3=this.props,_this$props3$src=_this$props3.src,src=_this$props3$src===void 0?'':_this$props3$src,_this$props3$mode=_this$props3.mode,mode=_this$props3$mode===void 0?'scaleToFill':_this$props3$mode,style=_this$props3.style,rest=(0,_objectWithoutProperties2.default)(_this$props3,_excluded);var source=typeof src==='string'?{uri:src}:src;var resizeMode=resizeModeMap[mode];var flattenStyle=_reactNative.StyleSheet.flatten(style)||{};var defaultHeight=flattenStyle.height||225;var imageHeight=function(){if(mode==='widthFix'){if(typeof flattenStyle.width==='string'){return _this2.state.layoutWidth*_this2.state.ratio;}else if(typeof flattenStyle.width==='number'){return flattenStyle.width*_this2.state.ratio;}else{return 300*_this2.state.ratio;}}else{return defaultHeight;}}();return _react.default.createElement(_reactNative.Image,(0,_extends2.default)({},rest,{source:source,resizeMode:resizeMode,onLoad:this._onLoad,onError:this._onError,style:[{width:300},style,{height:imageHeight}],__self:this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:12}}));}}]);return _Image;}(_react.default.Component);exports._Image=_Image;_Image.defaultProps=_props.defaultImageProps;var _default=_Image;exports.default=_default;

package/lib/Image/Image.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports._Image=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _props=require("./props");var _jsxFileName="/Users/noyobo/home/gitlab/godzilla/ray/packages/components/src/Image/Image.native.tsx";var _excluded=["src","mode","style"];function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var resizeModeMap={scaleToFill:'stretch',aspectFit:'contain',aspectFill:'cover',center:'center'};var _Image=function(_React$Component){(0,_inherits2.default)(_Image,_React$Component);var _super=_createSuper(_Image);function _Image(){var _this;(0,_classCallCheck2.default)(this,_Image);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this.state={ratio:0,layoutWidth:0};_this.hasLayout=false;_this._onLoad=function(){var _this$props=_this.props,onLoad=_this$props.onLoad,src=_this$props.src;if(typeof onLoad==='function'){if(typeof src==='string'){_reactNative.Image.getSize(src,function(width,height){onLoad({width:width,height:height,origin:null});},function(){onLoad({width:0,height:0,origin:null});});}else{var iras=_reactNative.Image.resolveAssetSource(typeof src==='string'?{uri:src}:src);var _ref=iras||{width:0,height:0},width=_ref.width,height=_ref.height;onLoad({width:width,height:height,origin:null});}}};_this._onError=function(){var onError=_this.props.onError;!!onError&&onError({errMsg:'Image is on error',origin:null});};_this.onLayout=function(event){var _this$props2=_this.props,mode=_this$props2.mode,style=_this$props2.style;var layoutWidth=event.nativeEvent.layout.width;var flattenStyle=_reactNative.StyleSheet.flatten(style)||{};if(mode==='widthFix'&&typeof flattenStyle.width==='string'){if(_this.hasLayout)return;_this.setState({layoutWidth:layoutWidth});}if(_this.state.ratio){_this.hasLayout=true;}};_this.loadImg=function(props){var mode=props.mode,src=props.src;if(mode!=='widthFix')return;if(typeof src==='string'){_reactNative.Image.getSize(props.src,function(width,height){if(_this.hasLayout)return;_this.setState({ratio:height/width});});}else{var source=typeof props.src==='string'?{uri:props.src}:props.src;var _ref2=_reactNative.Image.resolveAssetSource(source)||{},width=_ref2.width,height=_ref2.height;if(_this.hasLayout&&!!_this.state.ratio)return;_this.setState({ratio:height/width});}};return _this;}(0,_createClass2.default)(_Image,[{key:"componentDidMount",value:function componentDidMount(){this.loadImg(this.props);}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){if(nextProps.src!==this.props.src){this.hasLayout=false;}return true;}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.src!==this.props.src){this.loadImg(this.props);}}},{key:"render",value:function render(){var _this2=this;var _this$props3=this.props,_this$props3$src=_this$props3.src,src=_this$props3$src===void 0?'':_this$props3$src,_this$props3$mode=_this$props3.mode,mode=_this$props3$mode===void 0?'scaleToFill':_this$props3$mode,style=_this$props3.style,rest=(0,_objectWithoutProperties2.default)(_this$props3,_excluded);var source=typeof src==='string'?{uri:src}:src;var resizeMode=resizeModeMap[mode];var flattenStyle=_reactNative.StyleSheet.flatten(style)||{};var defaultHeight=flattenStyle.height||225;var imageHeight=function(){if(mode==='widthFix'){if(typeof flattenStyle.width==='string'){return _this2.state.layoutWidth*_this2.state.ratio;}else if(typeof flattenStyle.width==='number'){return flattenStyle.width*_this2.state.ratio;}else{return 300*_this2.state.ratio;}}else{return defaultHeight;}}();return _react.default.createElement(_reactNative.Image,(0,_extends2.default)({},rest,{source:source,resizeMode:resizeMode,onLoad:this._onLoad,onError:this._onError,style:[{width:300},style,{height:imageHeight}],__self:this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:12}}));}}]);return _Image;}(_react.default.Component);exports._Image=_Image;_Image.defaultProps=_props.defaultImageProps;var _default=_Image;exports.default=_default;

package/lib/Image/Image.native.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LayoutChangeEvent, StyleProp, ImageStyle } from 'react-native';
+import { ImageProps } from './props';
+interface IProps extends Omit<ImageProps, 'mode' | 'style'> {
+    mode?: 'aspectFit' | 'aspectFill' | 'scaleToFill' | 'widthFix';
+    style?: StyleProp<ImageStyle>;
+}
+export interface ImageState {
+    ratio: number;
+    layoutWidth: number;
+}
+export declare class _Image extends React.Component<IProps, ImageState> {
+    static defaultProps: {
+        src: string;
+        mode: string;
+    };
+    state: ImageState;
+    hasLayout: boolean;
+    _onLoad: () => void;
+    _onError: () => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+    loadImg: (props: IProps) => void;
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: IProps): boolean;
+    componentDidUpdate(prevProps: IProps): void;
+    render(): JSX.Element;
+}
+export default _Image;

package/lib/Image/Image.tuya.d.ts

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

package/lib/Image/Image.tuya.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "mode"];
+import clsx from 'clsx';
+import * as React from 'react';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { Image as RemaxImage } from '@ray-js/remax-tuya';
+
+var Image = function (props) {
+  var style = props.style,
+      className = props.className,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'scaleToFill' : _props$mode,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RemaxImage, _extends({
+    style: inlineStyle(style),
+    className: clsx('ray-image', className),
+    mode: mode
+  }, restProps));
+};
+
+export default Image;

package/lib/Image/Image.web.js

@@ -0,0 +1,92 @@
+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 * 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);
+
+  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
+  }));
+});
+Image.displayName = 'Image';
+export default Image;

package/lib/Image/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 _Image=_interopRequireDefault(require("./Image"));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=_Image.default;exports.default=_default;

package/lib/Image/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 _Image=_interopRequireDefault(require("./Image"));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=_Image.default;exports.default=_default;

package/lib/Image/index.md

@@ -0,0 +1,50 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 基础组件
+---
+
+# Image
+
+图片
+
+## 导入
+
+```js
+import { Image } from '@ray-js/components';
+```
+
+## 示例代码
+
+<code src="./demos/aspectFill.tsx" title="基本使用" background="#f2f4f6"/>
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- |
+| 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、涂鸦、微信 |
+
+## mode 合法值
+
+| 值 | 说明 | 支持平台 |
+| --- | --- | --- |
+| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | RN、涂鸦、微信 |
+| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | RN、涂鸦、微信 |
+| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | RN、涂鸦、微信 |
+| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | RN、涂鸦、微信 |
+| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | 涂鸦、微信 |
+| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | 涂鸦、微信 |
+| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | 涂鸦、微信 |
+| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | 涂鸦、微信 |
+| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | 涂鸦、微信 |
+| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | 涂鸦、微信 |
+| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | 涂鸦、微信 |
+| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | 涂鸦、微信 |
+| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | 涂鸦、微信 |
+| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 | 涂鸦、微信 |

package/lib/Image/index.tuya.js

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

package/lib/Image/index.web.js

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

package/lib/Image/index.wechat.js

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

package/lib/Image/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultImageProps=void 0;var defaultImageProps={src:'',mode:'scaleToFill'};exports.defaultImageProps=defaultImageProps;

package/lib/Image/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultImageProps=void 0;var defaultImageProps={src:'',mode:'scaleToFill'};exports.defaultImageProps=defaultImageProps;

package/lib/Image/props.tuya.js

@@ -0,0 +1,4 @@
+export var defaultImageProps = {
+  src: '',
+  mode: 'scaleToFill'
+};

package/lib/Image/props.web.js

@@ -0,0 +1,4 @@
+export var defaultImageProps = {
+  src: '',
+  mode: 'scaleToFill'
+};

package/lib/Image/props.wechat.js

@@ -0,0 +1,4 @@
+export var defaultImageProps = {
+  src: '',
+  mode: 'scaleToFill'
+};

package/lib/Input/Input.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _props=require("./props");var _jsxFileName="/Users/noyobo/home/gitlab/godzilla/ray/packages/components/src/Input/Input.native.tsx";var _excluded=["style","value","type","password","placeholder","disabled","maxLength","focus","confirmType","selectionStart","selectionEnd","cursor","_multiline","_autoHeight"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var keyboardTypeMap={text:'default',number:'numeric',idcard:'default',digit:_reactNative.Platform.select({ios:'decimal-pad',android:'numeric'})||''};var Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){var _this;(0,_classCallCheck2.default)(this,Checkbox);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this.state={returnValue:undefined,height:0,value:undefined};_this._handleChangeText=function(text){var onInput=_this.props.onInput;_this.tmpValue=text||'';_this.setState({returnValue:text});typeof onInput==='function'&&onInput({type:'input',value:text,origin:null});};_this._handleSubmitEditing=function(event){var _this$props=_this.props,onConfirm=_this$props.onConfirm,_multiline=_this$props._multiline;if(_multiline)return;typeof onConfirm==='function'&&onConfirm({type:'confirm',value:_this.tmpValue,origin:event});};_this._handleBlur=function(event){var onBlur=_this.props.onBlur;typeof onBlur==='function'&&onBlur({type:'blur',value:_this.tmpValue,origin:event});};_this._handleFocus=function(event){var onFocus=_this.props.onFocus;var returnValue=_this.state.returnValue;_this.tmpValue=returnValue||'';typeof onFocus==='function'&&onFocus({type:'focus',value:_this.tmpValue,origin:event});};_this.onContentSizeChange=function(event){var _event$nativeEvent$co=event.nativeEvent.contentSize,width=_event$nativeEvent$co.width,height=_event$nativeEvent$co.height;if(width&&height){var _this$props2=_this.props,_multiline=_this$props2._multiline,_autoHeight=_this$props2._autoHeight,_onLineChange=_this$props2._onLineChange;if(!_multiline||!_autoHeight||height===_this.state.height)return;_this.lineCount+=height>_this.state.height?1:-1;console.log('lineCount',_this.lineCount,height);_onLineChange({height:height,lineCount:_this.lineCount,type:'linechange'});_this.setState({height:height});}};_this._handleKeyPress=function(event){var onConfirm=_this.props.onConfirm;var keyValue=event.nativeEvent.key;if(keyValue!=='Enter')return;typeof onConfirm==='function'&&onConfirm({type:'confirm',value:_this.tmpValue,origin:event});};return _this;}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){var _this$props3=this.props,style=_this$props3.style,value=_this$props3.value,type=_this$props3.type,password=_this$props3.password,placeholder=_this$props3.placeholder,disabled=_this$props3.disabled,maxLength=_this$props3.maxLength,focus=_this$props3.focus,confirmType=_this$props3.confirmType,selectionStart=_this$props3.selectionStart,selectionEnd=_this$props3.selectionEnd,cursor=_this$props3.cursor,_multiline=_this$props3._multiline,_autoHeight=_this$props3._autoHeight,rest=(0,_objectWithoutProperties2.default)(_this$props3,_excluded);var selection=function(){if(selectionStart>=0&&selectionEnd>=0){return{start:selectionStart,end:selectionEnd};}else if(typeof cursor==='number'){return{start:cursor,end:cursor};}}();var textAlignVertical=_multiline?'top':'auto';return _react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({},rest,{style:[{padding:4,backgroundColor:'#FFF'},style,_multiline&&_autoHeight&&{height:Math.max(35,this.state.height)}],defaultValue:value,secureTextEntry:!!password,placeholder:placeholder,editable:!disabled,maxLength:maxLength===-1?undefined:maxLength,returnKeyType:confirmType,keyboardType:keyboardTypeMap[type],autoFocus:!!focus,selection:selection,value:this.state.returnValue,onChangeText:this._handleChangeText,onBlur:this._handleBlur,onKeyPress:this._handleKeyPress,onFocus:this._handleFocus,multiline:!!_multiline,onEndEditing:this._handleSubmitEditing,onSubmitEditing:this._handleSubmitEditing,textAlignVertical:textAlignVertical,onContentSizeChange:this.onContentSizeChange,underlineColorAndroid:"rgba(0,0,0,0)",__self:this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:12}}));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){return props.value!==state.value?_objectSpread(_objectSpread({},state),{},{returnValue:props.value}):null;}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;Checkbox.defaultProps=_props.defaultInputProps;

package/lib/Input/Input.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _props=require("./props");var _jsxFileName="/Users/noyobo/home/gitlab/godzilla/ray/packages/components/src/Input/Input.native.tsx";var _excluded=["style","value","type","password","placeholder","disabled","maxLength","focus","confirmType","selectionStart","selectionEnd","cursor","_multiline","_autoHeight"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var keyboardTypeMap={text:'default',number:'numeric',idcard:'default',digit:_reactNative.Platform.select({ios:'decimal-pad',android:'numeric'})||''};var Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){var _this;(0,_classCallCheck2.default)(this,Checkbox);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this.state={returnValue:undefined,height:0,value:undefined};_this._handleChangeText=function(text){var onInput=_this.props.onInput;_this.tmpValue=text||'';_this.setState({returnValue:text});typeof onInput==='function'&&onInput({type:'input',value:text,origin:null});};_this._handleSubmitEditing=function(event){var _this$props=_this.props,onConfirm=_this$props.onConfirm,_multiline=_this$props._multiline;if(_multiline)return;typeof onConfirm==='function'&&onConfirm({type:'confirm',value:_this.tmpValue,origin:event});};_this._handleBlur=function(event){var onBlur=_this.props.onBlur;typeof onBlur==='function'&&onBlur({type:'blur',value:_this.tmpValue,origin:event});};_this._handleFocus=function(event){var onFocus=_this.props.onFocus;var returnValue=_this.state.returnValue;_this.tmpValue=returnValue||'';typeof onFocus==='function'&&onFocus({type:'focus',value:_this.tmpValue,origin:event});};_this.onContentSizeChange=function(event){var _event$nativeEvent$co=event.nativeEvent.contentSize,width=_event$nativeEvent$co.width,height=_event$nativeEvent$co.height;if(width&&height){var _this$props2=_this.props,_multiline=_this$props2._multiline,_autoHeight=_this$props2._autoHeight,_onLineChange=_this$props2._onLineChange;if(!_multiline||!_autoHeight||height===_this.state.height)return;_this.lineCount+=height>_this.state.height?1:-1;console.log('lineCount',_this.lineCount,height);_onLineChange({height:height,lineCount:_this.lineCount,type:'linechange'});_this.setState({height:height});}};_this._handleKeyPress=function(event){var onConfirm=_this.props.onConfirm;var keyValue=event.nativeEvent.key;if(keyValue!=='Enter')return;typeof onConfirm==='function'&&onConfirm({type:'confirm',value:_this.tmpValue,origin:event});};return _this;}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){var _this$props3=this.props,style=_this$props3.style,value=_this$props3.value,type=_this$props3.type,password=_this$props3.password,placeholder=_this$props3.placeholder,disabled=_this$props3.disabled,maxLength=_this$props3.maxLength,focus=_this$props3.focus,confirmType=_this$props3.confirmType,selectionStart=_this$props3.selectionStart,selectionEnd=_this$props3.selectionEnd,cursor=_this$props3.cursor,_multiline=_this$props3._multiline,_autoHeight=_this$props3._autoHeight,rest=(0,_objectWithoutProperties2.default)(_this$props3,_excluded);var selection=function(){if(selectionStart>=0&&selectionEnd>=0){return{start:selectionStart,end:selectionEnd};}else if(typeof cursor==='number'){return{start:cursor,end:cursor};}}();var textAlignVertical=_multiline?'top':'auto';return _react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({},rest,{style:[{padding:4,backgroundColor:'#FFF'},style,_multiline&&_autoHeight&&{height:Math.max(35,this.state.height)}],defaultValue:value,secureTextEntry:!!password,placeholder:placeholder,editable:!disabled,maxLength:maxLength===-1?undefined:maxLength,returnKeyType:confirmType,keyboardType:keyboardTypeMap[type],autoFocus:!!focus,selection:selection,value:this.state.returnValue,onChangeText:this._handleChangeText,onBlur:this._handleBlur,onKeyPress:this._handleKeyPress,onFocus:this._handleFocus,multiline:!!_multiline,onEndEditing:this._handleSubmitEditing,onSubmitEditing:this._handleSubmitEditing,textAlignVertical:textAlignVertical,onContentSizeChange:this.onContentSizeChange,underlineColorAndroid:"rgba(0,0,0,0)",__self:this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:12}}));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){return props.value!==state.value?_objectSpread(_objectSpread({},state),{},{returnValue:props.value}):null;}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;Checkbox.defaultProps=_props.defaultInputProps;

package/lib/Input/Input.native.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NativeSyntheticEvent, TextInputFocusEventData, TextInputEndEditingEventData, TextInputKeyPressEventData, TextInputContentSizeChangeEventData, StyleProp, ViewStyle } from 'react-native';
+import { InputProps } from './props';
+export interface IInputProps extends Omit<InputProps, 'style'> {
+    style?: StyleProp<ViewStyle>;
+    _multiline?: boolean;
+    _autoHeight?: boolean;
+    _onLineChange?: (evt: {
+        type: 'linechange';
+        height: number;
+        lineCount: number;
+    }) => void;
+}
+export interface InputState {
+    returnValue?: string;
+    height: number;
+    value?: string;
+}
+export default class Checkbox extends React.Component<IInputProps, InputState> {
+    static defaultProps: Partial<InputProps>;
+    static getDerivedStateFromProps(props: InputProps, state: InputState): InputState | null;
+    state: InputState;
+    tmpValue: string;
+    lineCount: number;
+    _handleChangeText: (text: string) => void;
+    _handleSubmitEditing: (event: NativeSyntheticEvent<TextInputEndEditingEventData>) => void;
+    _handleBlur: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    _handleFocus: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    onContentSizeChange: (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+    _handleKeyPress: (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
+    render(): JSX.Element;
+}

package/lib/Input/Input.tuya.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { InputProps } from './props';
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/lib/Input/Input.tuya.js

@@ -0,0 +1,86 @@
+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 = ["name", "id", "className", "style", "disabled", "type", "value", "focus", "maxLength", "onBlur", "onConfirm", "onFocus", "onInput", "password", "placeholder", "placeholderStyle"];
+import "core-js/modules/es.function.name.js";
+import * as React from 'react';
+import clsx from 'clsx';
+import { Input as RemaxInput } from '@ray-js/remax-tuya';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { defaultInputProps } from './props';
+import { nextFrame } from '../core';
+import styles from './index.module.less';
+var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var name = props.name,
+      id = props.id,
+      className = props.className,
+      style = props.style,
+      disabled = props.disabled,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      value = props.value,
+      focus = props.focus,
+      maxLength = props.maxLength,
+      onBlur = props.onBlur,
+      onConfirm = props.onConfirm,
+      onFocus = props.onFocus,
+      onInput = props.onInput,
+      password = props.password,
+      placeholder = props.placeholder,
+      placeholderStyle = props.placeholderStyle,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalValue = _React$useState2[0],
+      setInternalValue = _React$useState2[1];
+
+  var bufferValue = React.useRef(value);
+  React.useEffect(function () {
+    if (value !== bufferValue.current) {
+      // HACK: 避免重复设置相同 value 不渲染的问题
+      setInternalValue(bufferValue.current);
+      nextFrame(1).then(function () {
+        bufferValue.current = value;
+        setInternalValue(value);
+      });
+    }
+  }, [value]);
+  var selection = focus ? {
+    selectionStart: (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) || -1,
+    selectionEnd: (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) || -1
+  } : undefined;
+  return /*#__PURE__*/React.createElement(RemaxInput, _extends({
+    name: name //@ts-ignore
+    ,
+    ref: ref,
+    id: id,
+    style: inlineStyle(style),
+    className: clsx('ray-input', styles.input, className),
+    disabled: disabled,
+    type: type,
+    focus: focus,
+    password: password,
+    placeholder: placeholder,
+    placeholderStyle: inlineStyle(placeholderStyle),
+    maxlength: maxLength,
+    onInput: function (event) {
+      var value = event.detail.value; // 内部 value 管控
+
+      bufferValue.current = value;
+      event.value = value;
+      onInput === null || onInput === void 0 ? void 0 : onInput(event);
+    },
+    onBlur: onBlur,
+    onConfirm: function (event) {
+      var _event$detail$value = event.detail.value,
+          value = _event$detail$value === void 0 ? '' : _event$detail$value;
+      setInternalValue(value);
+      onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(event);
+    },
+    onFocus: onFocus,
+    value: internalValue
+  }, selection, restProps));
+});
+Input.defaultProps = defaultInputProps;
+export default Input;

package/lib/Input/Input.web.js

@@ -0,0 +1,100 @@
+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 = ["name", "id", "className", "style", "disabled", "type", "confirmType", "value", "focus", "maxLength", "onBlur", "onConfirm", "onFocus", "onInput", "password", "placeholder", "placeholderStyle"];
+import "core-js/modules/es.function.name.js";
+import * as React from 'react';
+import clsx from 'clsx';
+import { inlineStyle, useStylesheet } from '@ray-js/framework-shared';
+import { defaultInputProps } from './props';
+import { generateId } from '../core';
+import styles from './index.module.less';
+var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var name = props.name,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateId() : _props$id,
+      className = props.className,
+      style = props.style,
+      disabled = props.disabled,
+      type = props.type,
+      _props$confirmType = props.confirmType,
+      confirmType = _props$confirmType === void 0 ? 'done' : _props$confirmType,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      focus = props.focus,
+      maxLength = props.maxLength,
+      onBlur = props.onBlur,
+      onConfirm = props.onConfirm,
+      onFocus = props.onFocus,
+      onInput = props.onInput,
+      password = props.password,
+      placeholder = props.placeholder,
+      placeholderStyle = props.placeholderStyle,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useStylesheet = useStylesheet(inlineStyle(placeholderStyle)),
+      _useStylesheet2 = _slicedToArray(_useStylesheet, 1),
+      placeholderStyleClassName = _useStylesheet2[0];
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalValue = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var inputType = function () {
+    if (password) {
+      return 'password';
+    } else if (confirmType === 'search') {
+      return 'search';
+    }
+
+    return type;
+  }();
+
+  React.useEffect(function () {
+    var inputDOM = document.getElementById(id);
+
+    if (focus) {
+      inputDOM.focus();
+    } else {
+      inputDOM.blur();
+    }
+  }, [focus]);
+  React.useEffect(function () {
+    setValue(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
+    id: id,
+    name: name,
+    type: inputType,
+    onKeyPress: function (e) {
+      if (e.key === 'Enter' && typeof onConfirm === 'function') {
+        onConfirm(e);
+      }
+    },
+    style: inlineStyle(style),
+    disabled: disabled,
+    placeholder: placeholder,
+    value: internalValue,
+    maxLength: maxLength,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChange: function (event) {
+      var value = event.target.value;
+      event.detail = {
+        value: value
+      };
+      event.value = value;
+      setValue(value);
+      onInput === null || onInput === void 0 ? void 0 : onInput({
+        value: value,
+        origin: event
+      });
+    },
+    autoFocus: focus,
+    className: clsx('ray-input', styles.input, className, placeholderStyleClassName)
+  }, restProps));
+});
+Input.defaultProps = defaultInputProps;
+export default Input;

package/lib/Input/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 _Input=_interopRequireDefault(require("./Input"));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=_Input.default;exports.default=_default;

package/lib/Input/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 _Input=_interopRequireDefault(require("./Input"));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=_Input.default;exports.default=_default;