@ray-js/components 0.5.3 → 0.5.5

package/lib/DatePicker/DatePicker.native.js

@@ -0,0 +1,449 @@
+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.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.number.constructor.js";
+import React from 'react';
+import { View, TouchableOpacity, Platform, Text, StyleSheet } from 'react-native';
+import { defaultProps } from './props';
+import Modal from '../Modal';
+import PickerView from '../PickerView';
+
+var DatePicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(DatePicker, _React$Component);
+
+  var _super = _createSuper(DatePicker);
+
+  function DatePicker(props) {
+    var _this;
+
+    _classCallCheck(this, DatePicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "format", function (time) {
+      var year = time.getFullYear(); //获取年份。
+
+      var month = time.getMonth() + 1; //获取月份。
+
+      var day = time.getDate(); //获取天
+
+      return {
+        year: year,
+        month: month,
+        day: day
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getDateListArr", function () {
+      var _this$props = _this.props,
+          start = _this$props.start,
+          end = _this$props.end; //获取开始时间和结束时间的时间戳
+
+      var startTime = new Date(start).getTime();
+      var endTime = new Date(end).getTime();
+      var dateArr = []; // 存放区间数据的数组
+
+      var stamp;
+
+      for (stamp = startTime; stamp <= endTime;) {
+        dateArr.push(_this.format(new Date(stamp)));
+        stamp += 24 * 60 * 60 * 1000;
+      } //此时的dateArr 格式为[{year: 2020, month: 10, day: 1},{year: 2020, month: 10, day: 2},....]  可以在这里打印下看看
+
+
+      var listArr = []; // 存放转换后的数组  把扁平化的数据转换为 层级结构的
+
+      dateArr.forEach(function (item, index) {
+        if (index === 0) {
+          listArr.push({
+            year: item.year,
+            monthArr: [{
+              yearItem: item.year,
+              month: item.month,
+              dayArr: [item.day]
+            }]
+          });
+        } else {
+          // 不是第一次,就需要两个数组对比如果有一样的就再对比
+          //some()函数  用于检测数组中的元素是否满足指定条件.
+          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
+          var yearFlag = listArr.some(function (listItem) {
+            // 如果年份相等,就要循环月份数组
+            if (listItem.year == item.year) {
+              // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
+              var monthFlag = listItem.monthArr.some(function (monthItem) {
+                // 如果月份相等,就把天push进去,return true
+                if (monthItem.month == item.month) {
+                  monthItem.dayArr.push(item.day);
+                  return true;
+                }
+              }); //  如果月开关是fasle 就代表月份没有一样的 push就行了
+
+              if (!monthFlag) {
+                listItem.monthArr.push({
+                  yearItem: item.year,
+                  month: item.month,
+                  dayArr: [item.day]
+                });
+              }
+
+              return true;
+            }
+          }); //  如果年开关是fasle 就代表年份没有一样的 push就行了
+
+          if (!yearFlag) {
+            // 如果年份不相等,年份数组push
+            listArr.push({
+              year: item.year,
+              monthArr: [{
+                yearItem: item.year,
+                month: item.month,
+                dayArr: [item.day]
+              }]
+            });
+          }
+        }
+      });
+      return listArr;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getCurrentValue", function (value) {
+      var valueTime = new Date(value).getTime();
+
+      var _this$format = _this.format(new Date(valueTime)),
+          year = _this$format.year,
+          month = _this$format.month,
+          day = _this$format.day;
+
+      return {
+        currentYear: year,
+        currentMonth: month,
+        currentDay: day
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "calculateValue", function (value) {
+      if (value < 10) {
+        return "0".concat(value);
+      } else {
+        return "".concat(value);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getRangeAndValue", function (value) {
+      var fields = _this.props.fields;
+
+      var dateListArr = _this.getDateListArr();
+
+      var _this$getCurrentValue = _this.getCurrentValue(value),
+          currentYear = _this$getCurrentValue.currentYear,
+          currentMonth = _this$getCurrentValue.currentMonth,
+          currentDay = _this$getCurrentValue.currentDay;
+
+      var yearArr = [];
+      var monthArr = [];
+      var dayArr = [];
+      var range = [];
+      dateListArr.forEach(function (item) {
+        yearArr.push("".concat(item.year));
+
+        if (item.year === currentYear) {
+          item.monthArr.forEach(function (monthItem) {
+            monthArr.push(_this.calculateValue(monthItem.month));
+
+            if (monthItem.month === currentMonth) {
+              monthItem.dayArr.forEach(function (dayItem) {
+                dayArr.push(_this.calculateValue(dayItem));
+              });
+            }
+          });
+        }
+      });
+
+      switch (fields) {
+        case 'year':
+          range.push.apply(range, yearArr);
+          return {
+            range: range,
+            currentValue: yearArr.indexOf("".concat(currentYear)),
+            dateListArr: dateListArr
+          };
+
+        case 'month':
+          range.push(yearArr, monthArr);
+          return {
+            range: range,
+            currentValue: [yearArr.indexOf("".concat(currentYear)), monthArr.indexOf(_this.calculateValue(currentMonth))],
+            dateListArr: dateListArr
+          };
+
+        case 'day':
+          range.push(yearArr, monthArr, dayArr);
+          return {
+            range: range,
+            currentValue: [yearArr.indexOf("".concat(currentYear)), monthArr.indexOf(_this.calculateValue(currentMonth)), dayArr.indexOf(_this.calculateValue(currentDay))],
+            dateListArr: dateListArr
+          };
+
+        default:
+          return {
+            range: [],
+            currentValue: [],
+            dateListArr: dateListArr
+          };
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleCancel", function () {
+      var onCancel = _this.props.onCancel;
+      typeof onCancel === 'function' && onCancel({
+        type: 'cancel',
+        origin: null
+      });
+
+      _this.setState({
+        visible: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleConfirm", function () {
+      var _this$state = _this.state,
+          changeValue = _this$state.changeValue,
+          range = _this$state.range;
+      var _this$props2 = _this.props,
+          onChange = _this$props2.onChange,
+          fields = _this$props2.fields;
+      var result = '';
+
+      if (fields === 'day') {
+        result = range[0][changeValue[0]] + '-' + range[1][changeValue[1]] + '-' + range[2][changeValue[2]];
+      } else if (fields === 'month') {
+        result = range[0][changeValue[0]] + '-' + range[1][changeValue[1]];
+      } else {
+        result = range[changeValue];
+      }
+
+      console.log('result', result);
+      typeof onChange === 'function' && onChange({
+        type: 'change',
+        value: result,
+        origin: null
+      });
+
+      _this.setState({
+        visible: false,
+        value: changeValue
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handlePickerChange", function (event) {
+      var value = event.value,
+          column = event.column;
+      var fields = _this.props.fields;
+      var range = _this.state.range;
+
+      if (fields === 'year') {
+        _this.setState({
+          changeValue: value
+        });
+      } else if (fields === 'month') {
+        var year = "".concat(range[0][value[0]]);
+        var month = "".concat(range[1][value[1]]);
+        var endYear = range[0][range[0].length - 1];
+
+        var _this$getRangeAndValu = _this.getRangeAndValue(year),
+            newRange = _this$getRangeAndValu.range;
+
+        var monthIndex = newRange[1].indexOf(month);
+        value[1] = monthIndex === -1 ? year === endYear ? newRange[1].length - 1 : 0 : monthIndex;
+
+        if (column === 0) {
+          _this.setState({
+            changeValue: value,
+            range: newRange
+          });
+        } else {
+          _this.setState({
+            changeValue: value,
+            range: newRange
+          });
+        }
+      } else {
+        var _year = "".concat(range[0][value[0]]);
+
+        var _month = "".concat(range[1][value[1]]);
+
+        var day = "".concat(range[2][value[2]]);
+
+        if (column === 0) {
+          var _this$getRangeAndValu2 = _this.getRangeAndValue("".concat(_year, "-").concat(_month, "-").concat(day)),
+              _newRange = _this$getRangeAndValu2.range;
+
+          var _monthIndex = _newRange[1].indexOf(_month);
+
+          var startMonth = _newRange[1][0];
+          value[1] = _monthIndex === -1 ? Number(_month) < Number(startMonth) ? 0 : _newRange[1].length - 1 : _monthIndex; // 订正月份
+
+          _month = "".concat(_newRange[1][value[1]]);
+
+          var _this$getRangeAndValu3 = _this.getRangeAndValue("".concat(_year, "-").concat(_month, "-").concat(day)),
+              modifiedRange = _this$getRangeAndValu3.range;
+
+          var dayIndex = modifiedRange[2].indexOf(day);
+          var startDay = modifiedRange[2][0];
+          value[2] = dayIndex === -1 ? Number(day) < Number(startDay) ? 0 : modifiedRange[2].length - 1 : dayIndex;
+
+          _this.setState({
+            changeValue: value,
+            range: modifiedRange
+          });
+        } else if (column === 1) {
+          var _this$getRangeAndValu4 = _this.getRangeAndValue("".concat(_year, "-").concat(_month)),
+              _newRange2 = _this$getRangeAndValu4.range;
+
+          var _dayIndex = _newRange2[2].indexOf(day);
+
+          var _startDay = _newRange2[2][0];
+          value[2] = _dayIndex === -1 ? Number(day) < Number(_startDay) ? 0 : _newRange2[2].length - 1 : _dayIndex;
+
+          _this.setState({
+            changeValue: value,
+            range: _newRange2
+          });
+        } else {
+          _this.setState({
+            changeValue: value
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTitleView", function () {
+      var _this$props3 = _this.props,
+          confirmText = _this$props3.confirmText,
+          cancelText = _this$props3.cancelText;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.title
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        style: styles.button,
+        activeOpacity: 0.8,
+        onPress: _this._handleCancel
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.text
+      }, cancelText)), /*#__PURE__*/React.createElement(TouchableOpacity, {
+        style: styles.button,
+        activeOpacity: 0.8,
+        onPress: _this._handleConfirm
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [styles.text, {
+          color: '#007AFF'
+        }]
+      }, confirmText)));
+    });
+
+    var _this$getRangeAndValu5 = _this.getRangeAndValue(props.value || props.start),
+        _range = _this$getRangeAndValu5.range,
+        currentValue = _this$getRangeAndValu5.currentValue,
+        _dateListArr = _this$getRangeAndValu5.dateListArr;
+
+    _this.state = {
+      visible: false,
+      value: currentValue,
+      changeValue: currentValue,
+      dateListArr: _dateListArr,
+      range: _range
+    };
+    return _this;
+  }
+
+  _createClass(DatePicker, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props4 = this.props,
+          value = _this$props4.value,
+          start = _this$props4.start;
+
+      var _this$getRangeAndValu6 = this.getRangeAndValue(value || start),
+          range = _this$getRangeAndValu6.range,
+          currentValue = _this$getRangeAndValu6.currentValue;
+
+      if (value !== prevProps.value) {
+        this.setState({
+          value: currentValue,
+          range: range
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props5 = this.props,
+          children = _this$props5.children,
+          disabled = _this$props5.disabled;
+      var _this$state2 = this.state,
+          visible = _this$state2.visible,
+          value = _this$state2.value,
+          range = _this$state2.range;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: function onPress() {
+          return _this2.setState({
+            visible: true
+          });
+        },
+        disabled: disabled,
+        activeOpacity: 0.8
+      }, children), /*#__PURE__*/React.createElement(Modal, {
+        show: visible,
+        position: 'bottom'
+      }, this.renderTitleView(), Platform.OS === 'android' && /*#__PURE__*/React.createElement(View, {
+        style: {
+          backgroundColor: '#fff',
+          height: 2
+        }
+      }), /*#__PURE__*/React.createElement(PickerView, {
+        range: range,
+        value: value,
+        style: {
+          backgroundColor: '#fff'
+        },
+        onChange: this._handlePickerChange
+      })));
+    }
+  }]);
+
+  return DatePicker;
+}(React.Component);
+
+_defineProperty(DatePicker, "displayName", '_DatePicker');
+
+_defineProperty(DatePicker, "defaultProps", defaultProps);
+
+export { DatePicker as default };
+var styles = StyleSheet.create({
+  button: {
+    height: 54,
+    width: 68,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    borderBottomColor: 'rgba(0, 0, 0, 0.05)',
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  text: {
+    fontSize: 18,
+    color: '#333'
+  }
+});

package/lib/DatePicker/DatePicker.wechat.js

@@ -1,4 +1,3 @@
-import { Picker as _Picker } from "@ray-core/wechat/esm/hostComponents/Picker/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 = ["className", "style", "id", "onLongClick", "onTouchStart", "onT
 import clsx from 'clsx';
 import * as React from 'react';
 import { inlineStyle, useTouch } from '@ray-js/framework-shared';
+import { Picker as RemaxPicker } from '@ray-core/wechat';
 
 var DatePicker = function (props) {
   var className = props.className,
@@ -33,7 +33,7 @@ var DatePicker = function (props) {
       touching = _useTouch2[0],
       handlers = _useTouch2[1];
 
-  return /*#__PURE__*/React.createElement(_Picker, _extends({
+  return /*#__PURE__*/React.createElement(RemaxPicker, _extends({
     mode: "date",
     onChange: function handleChange(e) {
       onChange === null || onChange === void 0 ? void 0 : onChange({

package/lib/Form/Form.native.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+
+var Form = function () {
+  return /*#__PURE__*/React.createElement(Text, null, "\u6682\u672A\u5B9E\u73B0");
+};
+
+export default Form;

package/lib/Form/Form.wechat.js

@@ -1,9 +1,9 @@
-import { Form as _Form } from "@ray-core/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 { Form as RemaxForm } from '@ray-core/wechat';
 import { useTouch } from '@ray-js/framework-shared';
 
 var Form = function (props) {
@@ -27,7 +27,7 @@ var Form = function (props) {
       touching = _useTouch2[0],
       handlers = _useTouch2[1];
 
-  return /*#__PURE__*/React.createElement(_Form, _extends({}, restProps, handlers));
+  return /*#__PURE__*/React.createElement(RemaxForm, _extends({}, restProps, handlers));
 };
 
 export default Form;

package/lib/Icon/Icon.native.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/**
+ * ✔ type
+ * ✔ size
+ * ✔ color
+ */
+import React from 'react';
+import { View, Image } from 'react-native';
+import IconFont from 'tuya-panel-icon';
+import { iconList } from '../assets/icons';
+import iconJson from './iconfont-rn/iconfont.json';
+
+var _Icon = function (props) {
+  var style = props.style,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'success_no_circle' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 23 : _props$size,
+      color = props.color;
+  var iconColor = color;
+
+  if (iconJson[type]) {
+    return /*#__PURE__*/React.createElement(IconFont, _extends({}, props, {
+      d: iconJson[type],
+      size: size,
+      color: iconColor
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, {
+      width: size,
+      height: size
+    }]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: iconList[type],
+    style: {
+      width: size,
+      height: size,
+      tintColor: iconColor
+    },
+    tintColor: iconColor
+  }));
+};
+
+_Icon.displayName = '_Icon';
+export default _Icon;