@ray-js/components 0.5.4 → 0.5.5

package/lib/Image/Image.native.js

@@ -0,0 +1,219 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["src", "mode", "style"];
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { defaultImageProps } from './props';
+var resizeModeMap = {
+  scaleToFill: 'stretch',
+  aspectFit: 'contain',
+  aspectFill: 'cover',
+  center: 'center'
+};
+export var _Image = /*#__PURE__*/function (_React$Component) {
+  _inherits(_Image, _React$Component);
+
+  var _super = _createSuper(_Image);
+
+  function _Image() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      ratio: 0,
+      layoutWidth: 0
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hasLayout", false);
+
+    _defineProperty(_assertThisInitialized(_this), "_onLoad", function () {
+      var _this$props = _this.props,
+          onLoad = _this$props.onLoad,
+          src = _this$props.src;
+
+      if (typeof onLoad === 'function') {
+        if (typeof src === 'string') {
+          Image.getSize(src, function (width, height) {
+            onLoad({
+              width: width,
+              height: height,
+              origin: null
+            });
+          }, function () {
+            onLoad({
+              width: 0,
+              height: 0,
+              origin: null
+            });
+          });
+        } else {
+          var iras = 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
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onError", function () {
+      var onError = _this.props.onError;
+      !!onError && onError({
+        errMsg: 'Image is on error',
+        origin: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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 = 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;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadImg", function (props) {
+      var mode = props.mode,
+          src = props.src;
+      if (mode !== 'widthFix') return;
+
+      if (typeof src === 'string') {
+        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 = Image.resolveAssetSource(source) || {},
+            width = _ref2.width,
+            height = _ref2.height;
+
+        if (_this.hasLayout && !!_this.state.ratio) return;
+
+        _this.setState({
+          ratio: height / width
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(_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 = _objectWithoutProperties(_this$props3, _excluded);
+
+      var source = typeof src === 'string' ? {
+        uri: src
+      } : src;
+      var resizeMode = resizeModeMap[mode];
+      var flattenStyle = 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 /*#__PURE__*/React.createElement(Image, _extends({}, rest, {
+        source: source,
+        resizeMode: resizeMode,
+        onLoad: this._onLoad,
+        onError: this._onError,
+        style: [{
+          width: 300
+        }, style, {
+          height: imageHeight
+        }]
+      }));
+    }
+  }]);
+
+  return _Image;
+}(React.Component);
+
+_defineProperty(_Image, "defaultProps", defaultImageProps);
+
+export default _Image;

package/lib/Image/Image.wechat.js

@@ -1,4 +1,3 @@
-import { Image as _Image } from "@ray-core/wechat/esm/hostComponents/Image/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";
@@ -6,6 +5,7 @@ var _excluded = ["style", "className", "onClick", "onLongClick", "onTouchCancel"
 import clsx from 'clsx';
 import * as React from 'react';
 import { inlineStyle, useTouch } from '@ray-js/framework-shared';
+import { Image as RemaxImage } from '@ray-core/wechat';
 
 var Image = function (props) {
   var style = props.style,
@@ -34,7 +34,7 @@ var Image = function (props) {
       touching = _useTouch2[0],
       handlers = _useTouch2[1];
 
-  return /*#__PURE__*/React.createElement(_Image, _extends({
+  return /*#__PURE__*/React.createElement(RemaxImage, _extends({
     style: inlineStyle(style),
     className: clsx('ray-image', className),
     mode: mode,

package/lib/Input/Input.native.js

@@ -0,0 +1,212 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["style", "value", "type", "password", "placeholder", "disabled", "maxLength", "focus", "confirmType", "selectionStart", "selectionEnd", "cursor", "_multiline", "_autoHeight"];
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { Platform, TextInput } from 'react-native';
+import { defaultInputProps } from './props';
+var keyboardTypeMap = {
+  text: 'default',
+  number: 'numeric',
+  idcard: 'default',
+  digit: Platform.select({
+    ios: 'decimal-pad',
+    android: 'numeric'
+  }) || ''
+};
+
+var Checkbox = /*#__PURE__*/function (_React$Component) {
+  _inherits(Checkbox, _React$Component);
+
+  var _super = _createSuper(Checkbox);
+
+  function Checkbox() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      returnValue: undefined,
+      height: 0,
+      value: undefined
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleBlur", function (event) {
+      var onBlur = _this.props.onBlur;
+      typeof onBlur === 'function' && onBlur({
+        type: 'blur',
+        value: _this.tmpValue,
+        origin: event
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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;
+  }
+
+  _createClass(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 = _objectWithoutProperties(_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 /*#__PURE__*/React.createElement(TextInput, _extends({}, 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)"
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return props.value !== state.value ? _objectSpread(_objectSpread({}, state), {}, {
+        returnValue: props.value
+      }) : null;
+    }
+  }]);
+
+  return Checkbox;
+}(React.Component);
+
+_defineProperty(Checkbox, "defaultProps", defaultInputProps);
+
+export { Checkbox as default };

package/lib/Input/Input.wechat.js

@@ -1,4 +1,3 @@
-import { Input as _Input } from "@ray-core/wechat/esm/hostComponents/Input/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";
@@ -6,6 +5,7 @@ var _excluded = ["name", "id", "className", "style", "disabled", "type", "value"
 import "core-js/modules/es.function.name.js";
 import * as React from 'react';
 import clsx from 'clsx';
+import { Input as RemaxInput } from '@ray-core/wechat';
 import { inlineStyle } from '@ray-js/framework-shared';
 import { defaultInputProps } from './props';
 import { nextFrame } from '../core';
@@ -50,7 +50,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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(_Input, _extends({
+  return /*#__PURE__*/React.createElement(RemaxInput, _extends({
     name: name //@ts-ignore
     ,
     ref: ref,

package/lib/IpcPlayer/IpcPlayer.js

@@ -1 +1,7 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _this=this,_jsxFileName="/drone/src/packages/components/src/IpcPlayer/IpcPlayer.tsx";var IpcPlayer=function(){return _react.default.createElement("div",{__self:_this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:10}},"web\u7AEF\u6682\u672A\u5B9E\u73B0");};var _default=IpcPlayer;exports.default=_default;
+import React from 'react';
+
+var IpcPlayer = function () {
+  return /*#__PURE__*/React.createElement("div", null, "web\u7AEF\u6682\u672A\u5B9E\u73B0");
+};
+
+export default IpcPlayer;

package/lib/Label/Label.native.js

@@ -0,0 +1,29 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { View } from 'react-native';
+
+var Checkbox = /*#__PURE__*/function (_React$Component) {
+  _inherits(Checkbox, _React$Component);
+
+  var _super = _createSuper(Checkbox);
+
+  function Checkbox() {
+    _classCallCheck(this, Checkbox);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Checkbox, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
+    }
+  }]);
+
+  return Checkbox;
+}(React.Component);
+
+export { Checkbox as default };

package/lib/Label/Label.wechat.js

@@ -1,7 +1,7 @@
-import { Label as _Label } from "@ray-core/wechat/esm/hostComponents/Label/index";
 import * as React from 'react';
 import clsx from 'clsx';
 import { inlineStyle } from '@ray-js/framework-shared';
+import { Label as RemaxLabel } from '@ray-core/wechat';
 import styles from './index.module.less';
 
 var Label = function (props) {
@@ -10,7 +10,7 @@ var Label = function (props) {
       className = props.className,
       htmlFor = props.htmlFor,
       children = props.children;
-  return /*#__PURE__*/React.createElement(_Label, {
+  return /*#__PURE__*/React.createElement(RemaxLabel, {
     for: htmlFor,
     id: id,
     style: inlineStyle(style),

package/lib/LinearGradient/LinearGradient.native.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.map.js";
+import color from 'color';
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { LinearGradient as Gradient, Defs, Stop, Rect } from 'react-native-svg';
+import { NumberUtils } from '@ray-js/ray-panel-utils';
+import { defaultLinearGradient } from './props';
+var numToHexString = NumberUtils.numToHexString;
+
+var LinearGradient = function (props) {
+  var style = props.style,
+      stops = props.stops,
+      x1 = props.x1,
+      x2 = props.x2,
+      y1 = props.y1,
+      y2 = props.y2,
+      height = props.height,
+      width = props.width,
+      children = props.children;
+  var gradientId = Math.random().toString(36).substring(7);
+  var stopView = [];
+  Object.keys(stops).forEach(function (k) {
+    var stopColor = color(stops[k]);
+    stopView.push( /*#__PURE__*/React.createElement(Stop, {
+      key: k,
+      offset: k,
+      stopColor: "#".concat(numToHexString(stopColor.rgbNumber(), 6)),
+      stopOpacity: stopColor.alpha()
+    }));
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, {
+      width: width,
+      height: height,
+      overflow: 'hidden'
+    }]
+  }, /*#__PURE__*/React.createElement(Svg, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Gradient, {
+    id: gradientId,
+    x1: x1,
+    x2: x2,
+    y1: y1,
+    y2: y2
+  }, stopView.map(function (d) {
+    return d;
+  }))), /*#__PURE__*/React.createElement(Rect, {
+    width: width,
+    height: height,
+    fill: "url(#".concat(gradientId, ")")
+  }), /*#__PURE__*/React.isValidElement(children) && children));
+};
+
+LinearGradient.default = defaultLinearGradient;
+export default LinearGradient;

package/lib/Modal/Modal.native.js

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { Modal, StyleSheet, View, TouchableHighlight } from 'react-native';
+var ALIGN = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
+
+var TYModal = /*#__PURE__*/function (_React$Component) {
+  _inherits(TYModal, _React$Component);
+
+  var _super = _createSuper(TYModal);
+
+  function TYModal(props) {
+    var _this;
+
+    _classCallCheck(this, TYModal);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_handleMaskPress", function () {
+      var onClickOverlay = _this.props.onClickOverlay;
+      typeof onClickOverlay === 'function' && onClickOverlay({
+        type: 'clickoverlay'
+      });
+    });
+
+    _this.state = {
+      visible: props.show
+    };
+    return _this;
+  }
+
+  _createClass(TYModal, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var show = this.props.show;
+
+      if (show !== prevProps.show) {
+        this.setState({
+          visible: !!show
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          position = _this$props.position,
+          overlayStyle = _this$props.overlayStyle,
+          customStyle = _this$props.customStyle,
+          overlay = _this$props.overlay;
+      var visible = this.state.visible;
+      var maskColor = overlay ? 'rgba(0, 0, 0, 0.7)' : 'transparent';
+      var maskContainer = [StyleSheet.absoluteFill, position && {
+        justifyContent: ALIGN[position]
+      }, {
+        flex: 1,
+        backgroundColor: maskColor
+      }, overlayStyle];
+      return /*#__PURE__*/React.createElement(Modal, {
+        animationType: "fade",
+        onRequestClose: this._handleMaskPress,
+        visible: visible,
+        transparent: true
+      }, /*#__PURE__*/React.createElement(TouchableHighlight, {
+        style: maskContainer,
+        underlayColor: maskColor,
+        onPress: this._handleMaskPress,
+        activeOpacity: 1
+      }, /*#__PURE__*/React.createElement(View, {
+        onStartShouldSetResponder: function onStartShouldSetResponder() {
+          return true;
+        },
+        style: customStyle
+      }, children)));
+    }
+  }]);
+
+  return TYModal;
+}(React.Component);
+
+_defineProperty(TYModal, "defaultProps", {
+  position: 'center',
+  onClickOverlay: null,
+  overlayStyle: null,
+  overlay: true,
+  customStyle: null
+});
+
+export default TYModal;