@ray-js/components 0.5.4 → 0.5.6-beta-1

package/lib/PickerViewColumn/PickerViewColumn.native.js

@@ -0,0 +1,175 @@
+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 "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Platform, requireNativeComponent, processColor, View } from 'react-native';
+import { RatioUtils } from '@ray-js/ray-panel-utils';
+import { isTwoArray } from '../utils';
+var width = RatioUtils.width;
+var TYRCTPicker = requireNativeComponent('TYRCTPicker');
+var WheelPickerView = requireNativeComponent('TYRCTWheelViewManager');
+
+var _Picker = /*#__PURE__*/function (_React$Component) {
+  _inherits(_Picker, _React$Component);
+
+  var _super = _createSuper(_Picker);
+
+  function _Picker(props) {
+    var _this;
+
+    _classCallCheck(this, _Picker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getItem", function () {
+      var range = _this.props.range;
+      var isOnly = !isTwoArray(range);
+
+      if (isOnly) {
+        return range.map(function (item) {
+          return {
+            label: item,
+            value: item
+          };
+        });
+      }
+
+      return range.map(function (item) {
+        return item.map(function (data) {
+          return {
+            label: data,
+            value: data
+          };
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onItemSelected", function (event, isOnly, index) {
+      var newIndex = event.nativeEvent.newIndex;
+      var onChange = _this.props.onChange;
+
+      if (isOnly) {
+        _this.setState({
+          selectIdx: newIndex
+        });
+
+        typeof onChange === 'function' && onChange({
+          type: 'change',
+          value: newIndex
+        });
+      } else {
+        var selectIdx = _this.state.selectIdx;
+        var newSelectArr = selectIdx.concat([]);
+        newSelectArr[index] = newIndex;
+        typeof onChange === 'function' && onChange({
+          type: 'change',
+          value: newSelectArr,
+          column: index
+        });
+
+        _this.setState({
+          selectIdx: newSelectArr
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderPickerItem", function (item, selectIdx, isOnly, index) {
+      var _this$props = _this.props,
+          style = _this$props.style,
+          fontSize = _this$props.fontSize;
+
+      var items = _this.getItem();
+
+      var theme = {
+        dividerColor: 'rgba(0, 0, 0, 0.05)',
+        fontColor: 'rgba(0,0,0,0.9)',
+        fontSize: fontSize || isOnly ? 24 : items.length < 3 ? 24 : 20
+      };
+      var length = isOnly ? 1 : items.length;
+      return Platform.OS === 'android' ? /*#__PURE__*/React.createElement(WheelPickerView, {
+        key: index,
+        style: [{
+          width: width / length,
+          height: 216
+        }, style],
+        items: item,
+        itemTextColor: theme.fontColor,
+        selectedItemTextColor: theme.fontColor,
+        dividerColor: theme.dividerColor,
+        visibleItemCount: 5,
+        itemAlign: 'center',
+        selectedIndex: selectIdx,
+        textSize: theme.fontSize,
+        loop: false,
+        onChange: function onChange(e) {
+          return _this.onItemSelected(e, isOnly, index);
+        }
+      }) : /*#__PURE__*/React.createElement(TYRCTPicker, {
+        key: index,
+        style: [{
+          width: width / length,
+          height: 216
+        }, style],
+        items: item,
+        itemPadding: 14,
+        selectedIndex: selectIdx,
+        separatorColor: processColor(theme.dividerColor),
+        color: processColor(theme.fontColor),
+        textAlign: 1,
+        fontSize: theme.fontSize,
+        fontWeight: 'normal',
+        onChange: function onChange(e) {
+          return _this.onItemSelected(e, isOnly, index);
+        }
+      });
+    });
+
+    _this.state = {
+      selectIdx: props.value
+    };
+    return _this;
+  }
+
+  _createClass(_Picker, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.value !== this.props.value) {
+        this.setState({
+          selectIdx: this.props.value
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var selectIdx = this.state.selectIdx;
+      var items = this.getItem();
+      var isOnly = !isTwoArray(items);
+      return isOnly ? this.renderPickerItem(items, selectIdx, isOnly, 0) : /*#__PURE__*/React.createElement(View, {
+        style: {
+          flexDirection: 'row',
+          overflow: 'hidden'
+        }
+      }, items.map(function (item, idx) {
+        return _this2.renderPickerItem(item, selectIdx[idx], isOnly, idx);
+      }));
+    }
+  }]);
+
+  return _Picker;
+}(React.Component);
+
+_defineProperty(_Picker, "displayName", '_PickerView');
+
+_defineProperty(_Picker, "defaultProps", {
+  value: 0
+});
+
+export { _Picker as default };

package/lib/RadialGradient/RadialGradient.native.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.map.js";
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { RadialGradient as Gradient, Defs, Stop, Rect } from 'react-native-svg';
+import { defaultRadialGradient } from './props';
+
+var RadialGradient = function (props) {
+  var width = props.width,
+      height = props.height,
+      style = props.style,
+      rx = props.rx,
+      ry = props.ry,
+      fx = props.fx,
+      fy = props.fy,
+      stops = props.stops,
+      children = props.children;
+  var gradientId = Math.random().toString(36).substring(7);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, {
+      width: width,
+      height: height
+    }]
+  }, /*#__PURE__*/React.createElement(Svg, {
+    height: height,
+    style: style,
+    width: width
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Gradient, {
+    id: gradientId,
+    cx: fx,
+    cy: fy,
+    fx: fx,
+    fy: fy,
+    rx: rx,
+    ry: ry
+  }, stops.map(function (x) {
+    return /*#__PURE__*/React.createElement(Stop, _extends({
+      key: x.offset
+    }, x));
+  }))), /*#__PURE__*/React.createElement(Rect, {
+    fill: "url(#".concat(gradientId, ")"),
+    height: height,
+    width: width,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/React.isValidElement(children) && children));
+};
+
+RadialGradient.defaultProps = defaultRadialGradient;
+export default RadialGradient;

package/lib/Radio/Radio.native.js

@@ -0,0 +1,132 @@
+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 "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { TouchableWithoutFeedback, View, StyleSheet } from 'react-native';
+import Icon from '../Icon';
+
+var _Radio = /*#__PURE__*/function (_React$Component) {
+  _inherits(_Radio, _React$Component);
+
+  var _super = _createSuper(_Radio);
+
+  function _Radio() {
+    var _this;
+
+    _classCallCheck(this, _Radio);
+
+    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), "$touchable", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      checked: _this.props.checked
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_simulateNativePress", function (evt) {
+      var node = _this.$touchable.current;
+      node && node.props.onPress && node.props.onPress(evt);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPress", function () {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          onChange = _this$props.onChange,
+          value = _this$props.value;
+      if (disabled) return;
+      typeof onChange === 'function' && onChange({
+        value: value,
+        checked: !_this.state.checked,
+        type: 'change'
+      });
+
+      _this.setState({
+        checked: !_this.state.checked
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(_Radio, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.checked !== this.props.checked) {
+        this.setState({
+          checked: this.props.checked
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          style = _this$props2.style,
+          color = _this$props2.color,
+          disabled = _this$props2.disabled;
+      var checked = this.state.checked;
+      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: this.onPress,
+        ref: this.$touchable
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.container
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.wrapper, {
+          backgroundColor: disabled ? 'rgba(0,0,0,0.2)' : checked ? '#007AFF' : '#FFF',
+          borderColor: disabled ? 'rgba(0,0,0,0.2)' : checked ? '#007AFF' : 'rgba(0,0,0,0.2)'
+        }, style]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "success_no_circle",
+        size: 12,
+        color: color,
+        style: [styles.wrapperIcon, checked && styles.wrapperCheckedIcon]
+      })), /*#__PURE__*/React.createElement(View, {
+        style: {
+          flexGrow: 0
+        }
+      }, this.props.children)));
+    }
+  }]);
+
+  return _Radio;
+}(React.Component);
+
+_defineProperty(_Radio, "displayName", '_Radio');
+
+_defineProperty(_Radio, "defaultProps", {
+  value: '',
+  color: '#FFF',
+  checked: false,
+  disabled: false
+});
+
+export default _Radio;
+var styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 18,
+    height: 18,
+    borderWidth: 1,
+    borderRadius: 9,
+    overflow: 'hidden'
+  },
+  wrapperIcon: {
+    opacity: 0
+  },
+  wrapperCheckedIcon: {
+    opacity: 1
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});

package/lib/Radio/Radio.wechat.js

@@ -1,10 +1,10 @@
-import { Radio as _Radio } from "@ray-core/wechat/esm/hostComponents/Radio/index";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "style", "id", "color"];
 import clsx from 'clsx';
 import * as React from 'react';
 import { inlineStyle } from '@ray-js/framework-shared';
+import { Radio as RemaxRadio } from '@ray-core/wechat';
 
 var Radio = function (props) {
   var className = props.className,
@@ -13,7 +13,7 @@ var Radio = function (props) {
       color = props.color,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(_Radio, _extends({
+  return /*#__PURE__*/React.createElement(RemaxRadio, _extends({
     id: id,
     color: color || '#007aff',
     style: inlineStyle(style),

package/lib/RadioGroup/RadioGroup.native.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { View, Text } from 'react-native';
+import Radio from '../Radio';
+
+var RadioGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(RadioGroup, _React$Component);
+
+  var _super = _createSuper(RadioGroup);
+
+  function RadioGroup(props) {
+    var _this;
+
+    _classCallCheck(this, RadioGroup);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getValueData", function (options) {
+      return options.filter(function (item) {
+        return item.checked;
+      }).map(function (item) {
+        return item.value;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleChange", function (event, index) {
+      var onChange = _this.props.onChange;
+      var options = _this.state.options;
+      var newOptions = options.concat([]);
+      newOptions[index] = _objectSpread(_objectSpread({}, newOptions[index]), event);
+
+      _this.setState({
+        options: newOptions
+      });
+
+      typeof onChange === 'function' && onChange({
+        type: 'change',
+        value: _this.getValueData(newOptions)
+      });
+    });
+
+    _this.state = {
+      options: props.options
+    };
+    return _this;
+  }
+
+  _createClass(RadioGroup, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          style = _this$props.style,
+          disabled = _this$props.disabled;
+      var options = this.state.options;
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          flexDirection: 'row'
+        }, style]
+      }, options.length && options.map(function (item, index) {
+        var data = disabled ? _objectSpread(_objectSpread({}, item), {}, {
+          disabled: disabled
+        }) : item;
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: index ? 5 : 0
+          },
+          key: Math.random()
+        }, /*#__PURE__*/React.createElement(Radio, _extends({}, data, {
+          onChange: function onChange(event) {
+            return _this2._handleChange(event, index);
+          }
+        })), item.label && /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginLeft: 5
+          }
+        }, item.label));
+      }));
+    }
+  }]);
+
+  return RadioGroup;
+}(React.Component);
+
+export { RadioGroup as default };

package/lib/RadioGroup/RadioGroup.wechat.js

@@ -1,7 +1,7 @@
-import { RadioGroup as _RadioGroup } from "@ray-core/wechat/esm/hostComponents/RadioGroup/index";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import { RadioGroup as RemaxRadioGroup } from '@ray-core/wechat';
 import Radio from '../Radio';
 import Label from '../Label';
 
@@ -12,7 +12,7 @@ var RadioGroup = function (props) {
       _props$onChange = props.onChange,
       onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
       children = props.children;
-  return /*#__PURE__*/React.createElement(_RadioGroup, {
+  return /*#__PURE__*/React.createElement(RemaxRadioGroup, {
     name: name,
     onChange: function handleOnChange(e) {
       !disabled && onChange(e);