@ray-js/components 0.3.0-beta.1c347991

package/lib/ScrollView/ScrollView.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));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=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _utils=require("../utils");var _jsxFileName="/drone/src/packages/components/src/ScrollView/ScrollView.native.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}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 _ScrollView=function(_React$Component){(0,_inherits2.default)(_ScrollView,_React$Component);var _super=_createSuper(_ScrollView);function _ScrollView(){var _this;(0,_classCallCheck2.default)(this,_ScrollView);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={snapScrollTop:0,snapScrollLeft:0};_this._scrollMetrics={contentLength:0,dOffset:0,dt:10,offset:0,offsetX:0,offsetY:0,timestamp:0,velocity:0,visibleLength:0};_this.$scrollView=React.createRef();_this._sentEndForContentLength=0;_this._scrollEventThrottle=50;_this._hasCallScrollToUpperInRange=true;_this._hasCallScrollToLowerInRange=false;_this._selectLength=function(metrics){var scrollX=_this.props.scrollX;return!scrollX?metrics.height:metrics.width;};_this._selectOffset=function(metrics){var scrollX=_this.props.scrollX;return!scrollX?metrics.y:metrics.x;};_this._maybeCallOnStartReached=function(e){var _this$props=_this.props,onScrollToUpper=_this$props.onScrollToUpper,upperThreshold=_this$props.upperThreshold,scrollX=_this$props.scrollX;var offset=_this._scrollMetrics.offset;if(onScrollToUpper&&offset<=upperThreshold){if(!_this._hasCallScrollToUpperInRange){typeof onScrollToUpper==='function'&&onScrollToUpper({type:'scrolltoupper',direction:scrollX?'left':'top',origin:e});_this._hasCallScrollToUpperInRange=true;}}else{_this._hasCallScrollToUpperInRange=false;}};_this._maybeCallOnEndReached=function(e){var _this$props2=_this.props,onScrollToLower=_this$props2.onScrollToLower,lowerThreshold=_this$props2.lowerThreshold,scrollX=_this$props2.scrollX;var _this$_scrollMetrics=_this._scrollMetrics,contentLength=_this$_scrollMetrics.contentLength,visibleLength=_this$_scrollMetrics.visibleLength,offset=_this$_scrollMetrics.offset;if(onScrollToLower&&contentLength-visibleLength-offset<lowerThreshold){if(!_this._hasCallScrollToLowerInRange){_this._hasDataChangedSinceEndReached=false;_this._hasCallScrollToLowerInRange=true;_this._sentEndForContentLength=_this._scrollMetrics.contentLength;typeof onScrollToLower==='function'&&onScrollToLower({type:'scrolltolower',direction:scrollX?'right':'bottom',origin:e});}}else{_this._hasCallScrollToLowerInRange=false;}};_this._onContentSizeChange=function(width,height){_this._scrollMetrics.contentLength=_this._selectLength({height:height,width:width});};_this._onScrollEndDrag=function(e){var velocity=e.nativeEvent.velocity;if(velocity){_this._scrollMetrics.velocity=_this._selectOffset(velocity);}};_this._onMomentumScrollEnd=function(){_this._scrollMetrics.velocity=0;};_this._onLayout=function(e){_this._scrollMetrics.visibleLength=_this._selectLength(e.nativeEvent.layout);};_this._onScroll=function(e){var onScroll=_this.props.onScroll;var scrollLeft=e.nativeEvent.contentOffset.x;var scrollTop=e.nativeEvent.contentOffset.y;var scrollHeight=e.nativeEvent.contentSize.height;var scrollWidth=e.nativeEvent.contentSize.width;typeof onScroll==='function'&&onScroll({type:'scroll',scrollLeft:scrollLeft,scrollTop:scrollTop,scrollHeight:scrollHeight,scrollWidth:scrollWidth,deltaX:scrollLeft-_this._scrollMetrics.offsetX,deltaY:scrollTop-_this._scrollMetrics.offsetY,origin:e});var timestamp=e.timeStamp;var visibleLength=_this._selectLength(e.nativeEvent.layoutMeasurement);var contentLength=_this._selectLength(e.nativeEvent.contentSize);var offset=_this._selectOffset(e.nativeEvent.contentOffset);var dt=Math.max(1,timestamp-_this._scrollMetrics.timestamp);var dOffset=offset-_this._scrollMetrics.offset;_this._scrollMetrics={contentLength:contentLength,dt:dt,dOffset:dOffset,offset:offset,offsetX:scrollLeft,offsetY:scrollTop,timestamp:timestamp,velocity:dOffset/dt,visibleLength:visibleLength};_this._maybeCallOnStartReached(e);_this._maybeCallOnEndReached(e);};_this.scrollToOffset=function(){var x=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;var y=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var node=_this.$scrollView.current;if(node){node.scrollTo({x:x,y:y,animated:!!_this.props.scrollWithAnimation});}};return _this;}(0,_createClass2.default)(_ScrollView,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;if(this.state.snapScrollTop||this.state.snapScrollLeft){this._initialScrollIndexTimeout=setTimeout(function(){_this2.scrollToOffset(_this2.state.snapScrollLeft,_this2.state.snapScrollTop);},0);}}},{key:"getSnapshotBeforeUpdate",value:function getSnapshotBeforeUpdate(prevProps,prevState){if(prevProps.scrollTop!==undefined){return this._scrollMetrics.offsetY!==this.state.snapScrollTop||this._scrollMetrics.offsetX!==this.state.snapScrollLeft;}return prevState.snapScrollTop!==this.state.snapScrollTop||prevState.snapScrollLeft!==this.state.snapScrollLeft;}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState,snapshot){if(snapshot){this.scrollToOffset(this.state.snapScrollLeft,this.state.snapScrollTop);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this._initialScrollIndexTimeout&&clearTimeout(this._initialScrollIndexTimeout);}},{key:"render",value:function render(){var _this$props3=this.props,children=_this$props3.children,style=_this$props3.style,scrollX=_this$props3.scrollX;var flattenStyle=_reactNative.StyleSheet.flatten(style);var wrapperStyle=(0,_utils.omit)(flattenStyle,['alignItems','justifyContent']);var _contentContainerStyle={};if(flattenStyle){flattenStyle.alignItems&&(_contentContainerStyle.alignItems=flattenStyle.alignItems);flattenStyle.justifyContent&&(_contentContainerStyle.justifyContent=flattenStyle.justifyContent);}var scrollElementProps=_objectSpread(_objectSpread({horizontal:scrollX,onContentSizeChange:this._onContentSizeChange,onLayout:this._onLayout,onScroll:this._onScroll,onScrollEndDrag:this._onScrollEndDrag,onMomentumScrollEnd:this._onMomentumScrollEnd,scrollEventThrottle:this._scrollEventThrottle,style:wrapperStyle,contentContainerStyle:[_contentContainerStyle]},(0,_utils.omit)(this.props,['style','scrollX','upperThreshold','lowerThreshold','scrollTop','scrollLeft','scrollWithAnimation','onScrollToUpper','onScrollToLower','onScroll','contentContainerStyle','horizontal','onContentSizeChange','onLayout','onScroll','onScrollEndDrag','onMomentumScrollEnd','scrollEventThrottle','scrollsToTop','style','contentContainerStyle','data','renderItem','keyExtractor'])),{},{ref:this.$scrollView});return React.createElement(_reactNative.ScrollView,(0,_extends2.default)({},scrollElementProps,{__self:this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:12}}),children);}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){return state.snapScrollTop!==props.scrollTop||state.snapScrollLeft!==props.scrollLeft?{snapScrollTop:props.scrollTop||0,snapScrollLeft:props.scrollLeft||0}:null;}}]);return _ScrollView;}(React.Component);_ScrollView.defaultProps={upperThreshold:50,lowerThreshold:50,scrollX:false};var _default=_ScrollView;exports.default=_default;

package/lib/ScrollView/ScrollView.js

@@ -0,0 +1,169 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["scrollX", "scrollY", "scrollLeft", "scrollTop", "scrollIntoView", "scrollWithAnimation", "className", "style", "upperThreshold", "lowerThreshold", "onScroll", "onScrollToUpper", "onScrollToLower", "showScrollbar"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { tween } from 'shifty';
+import View from '../View';
+import { defaultScrollViewProps } from './props';
+import styles from './index.module.less';
+
+var ScrollView = function (props) {
+  // TODO 支持 scrollIntoView
+  var scrollX = props.scrollX,
+      scrollY = props.scrollY,
+      scrollLeft = props.scrollLeft,
+      scrollTop = props.scrollTop,
+      scrollIntoView = props.scrollIntoView,
+      scrollWithAnimation = props.scrollWithAnimation,
+      className = props.className,
+      style = props.style,
+      _props$upperThreshold = props.upperThreshold,
+      upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
+      _props$lowerThreshold = props.lowerThreshold,
+      lowerThreshold = _props$lowerThreshold === void 0 ? 50 : _props$lowerThreshold,
+      onScroll = props.onScroll,
+      onScrollToUpper = props.onScrollToUpper,
+      onScrollToLower = props.onScrollToLower,
+      showScrollbar = props.showScrollbar,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var internalStyle = {};
+
+  if (scrollX) {
+    internalStyle.overflowX = 'auto';
+    internalStyle.overflowY = 'hidden';
+  }
+
+  if (scrollY) {
+    internalStyle.overflowY = 'auto';
+    internalStyle.overflowX = 'hidden';
+  }
+
+  var rootDom = React.useRef();
+  var scrollLeftRecord = React.useRef(0);
+  var scrollTopRecord = React.useRef(0);
+  var beforeScrollDistance = 0;
+  var direction = 'down';
+  React.useEffect(function () {
+    scrollX && doScrollLeft(scrollLeft);
+  }, [scrollLeft]);
+  React.useEffect(function () {
+    scrollY && doScrollTop(scrollTop);
+  }, [scrollTop]);
+
+  function doScrollLeft() {
+    var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    if (rootDom && rootDom.current && scrollLeft !== scrollLeftRecord.current) {
+      if (scrollWithAnimation && scrollLeftRecord.current) {
+        tween({
+          from: {
+            l: scrollLeftRecord.current
+          },
+          to: {
+            l: scrollLeft
+          },
+          duration: 100,
+          step: function step(_ref) {
+            var l = _ref.l;
+            rootDom.current.scrollLeft = l;
+          }
+        }).then(function () {
+          rootDom.current.scrollLeft = scrollLeft;
+          scrollLeftRecord.current = scrollLeft;
+        });
+      } else {
+        scrollLeftRecord.current = scrollLeft;
+        rootDom.current.scrollLeft = scrollLeft;
+      }
+    }
+  }
+
+  function doScrollTop() {
+    var scrollTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    if (rootDom && rootDom.current && scrollTop !== scrollTopRecord.current) {
+      if (scrollWithAnimation && scrollTopRecord.current) {
+        tween({
+          from: {
+            l: scrollTopRecord.current
+          },
+          to: {
+            l: scrollTop
+          },
+          duration: 100,
+          step: function step(_ref2) {
+            var l = _ref2.l;
+            rootDom.current.scrollTop = l;
+          }
+        }).then(function () {
+          rootDom.current.scrollTop = scrollTop;
+          scrollTopRecord.current = scrollTop;
+        });
+      } else {
+        scrollTopRecord.current = scrollTop;
+        rootDom.current.scrollTop = scrollTop;
+      }
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(View, _extends({
+    ref: function ref(dom) {
+      if (dom) {
+        rootDom.current = dom;
+      }
+    },
+    className: clsx('ray-scroll-view', styles.scrollView, className),
+    onScroll: function handleOnScroll(e) {
+      // TODO: 增加 event.detail
+
+      /**
+       * deltaX: 0
+       * deltaY: -13
+       * scrollHeight: 1320
+       * scrollLeft: 0
+       * scrollTop: 126
+       * scrollWidth: 387
+       */
+      if (rootDom && rootDom.current) {
+        e.detail = rootDom.current;
+        var _rootDom$current = rootDom.current,
+            offsetHeight = _rootDom$current.offsetHeight,
+            _scrollTop = _rootDom$current.scrollTop,
+            scrollHeight = _rootDom$current.scrollHeight,
+            _scrollLeft = _rootDom$current.scrollLeft,
+            offsetWidth = _rootDom$current.offsetWidth,
+            scrollWidth = _rootDom$current.scrollWidth; // 记录手动滑的位置
+
+        scrollLeftRecord.current = rootDom.current.scrollLeft;
+        scrollTopRecord.current = rootDom.current.scrollTop;
+
+        if (scrollY && beforeScrollDistance !== _scrollTop) {
+          direction = beforeScrollDistance - _scrollTop > 0 ? 'up' : 'down';
+          beforeScrollDistance = _scrollTop;
+        }
+
+        if (scrollX && beforeScrollDistance !== _scrollLeft) {
+          direction = beforeScrollDistance - _scrollLeft > 0 ? 'left' : 'right';
+          beforeScrollDistance = _scrollLeft;
+        }
+
+        if (scrollY && direction === 'down' && offsetHeight + _scrollTop + lowerThreshold >= scrollHeight || scrollX && direction === 'right' && offsetWidth + _scrollLeft + lowerThreshold >= scrollWidth) {
+          onScrollToLower && onScrollToLower();
+        }
+
+        if (scrollY && direction === 'up' && _scrollTop <= upperThreshold || scrollX && direction === 'left' && _scrollLeft <= upperThreshold) {
+          onScrollToUpper && onScrollToUpper();
+        }
+      }
+
+      onScroll && onScroll(e);
+    },
+    style: _objectSpread(_objectSpread({}, internalStyle), style)
+  }, restProps), props.children);
+};
+
+ScrollView.defaultProps = defaultScrollViewProps;
+export default ScrollView;

package/lib/ScrollView/ScrollView.native.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
+import { ScrollViewProps } from './Props';
+export declare type ScrollMetrics = {
+    contentLength: number;
+    dOffset: number;
+    dt: number;
+    offset: number;
+    offsetX: number;
+    offsetY: number;
+    timestamp: number;
+    velocity: number;
+    visibleLength: number;
+};
+export interface ScrollViewState {
+    snapScrollTop: number;
+    snapScrollLeft: number;
+}
+declare class _ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
+    static defaultProps: {
+        upperThreshold: number;
+        lowerThreshold: number;
+        scrollX: boolean;
+    };
+    static getDerivedStateFromProps(props: ScrollViewProps, state: ScrollViewState): ScrollViewState | null;
+    state: ScrollViewState;
+    _scrollMetrics: ScrollMetrics;
+    $scrollView: React.RefObject<any>;
+    _hasDataChangedSinceEndReached: boolean;
+    _sentEndForContentLength: number;
+    _scrollEventThrottle: number;
+    _hasCallScrollToUpperInRange: boolean;
+    _hasCallScrollToLowerInRange: boolean;
+    _initialScrollIndexTimeout: any;
+    _selectLength: (metrics: {
+        height: number;
+        width: number;
+    }) => number;
+    _selectOffset: (metrics: {
+        x: number;
+        y: number;
+    }) => number;
+    _maybeCallOnStartReached: (e: any) => void;
+    _maybeCallOnEndReached: (e: any) => void;
+    _onContentSizeChange: (width: number, height: number) => void;
+    _onScrollEndDrag: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    _onMomentumScrollEnd: () => void;
+    _onLayout: (e: LayoutChangeEvent) => void;
+    _onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    scrollToOffset: (x?: number, y?: number) => void;
+    componentDidMount(): void;
+    getSnapshotBeforeUpdate(prevProps: ScrollViewProps, prevState: ScrollViewState): boolean;
+    componentDidUpdate(prevProps: ScrollViewProps, prevState: ScrollViewState, snapshot: boolean): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export default _ScrollView;

package/lib/ScrollView/ScrollView.tuya.d.ts

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

package/lib/ScrollView/ScrollView.tuya.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style"];
+import * as React from 'react';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { ScrollView as RemaxScrollView } from '@ray-js/remax-tuya';
+import { defaultScrollViewProps } from './props';
+
+var ScrollView = function (props) {
+  var style = props.style,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RemaxScrollView, _extends({
+    style: inlineStyle(style),
+    enhanced: true
+  }, restProps));
+};
+
+ScrollView.defaultProps = defaultScrollViewProps;
+export default ScrollView;

package/lib/ScrollView/ScrollView.web.js

@@ -0,0 +1,169 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["scrollX", "scrollY", "scrollLeft", "scrollTop", "scrollIntoView", "scrollWithAnimation", "className", "style", "upperThreshold", "lowerThreshold", "onScroll", "onScrollToUpper", "onScrollToLower", "showScrollbar"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { tween } from 'shifty';
+import View from '../View';
+import { defaultScrollViewProps } from './props';
+import styles from './index.module.less';
+
+var ScrollView = function (props) {
+  // TODO 支持 scrollIntoView
+  var scrollX = props.scrollX,
+      scrollY = props.scrollY,
+      scrollLeft = props.scrollLeft,
+      scrollTop = props.scrollTop,
+      scrollIntoView = props.scrollIntoView,
+      scrollWithAnimation = props.scrollWithAnimation,
+      className = props.className,
+      style = props.style,
+      _props$upperThreshold = props.upperThreshold,
+      upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
+      _props$lowerThreshold = props.lowerThreshold,
+      lowerThreshold = _props$lowerThreshold === void 0 ? 50 : _props$lowerThreshold,
+      onScroll = props.onScroll,
+      onScrollToUpper = props.onScrollToUpper,
+      onScrollToLower = props.onScrollToLower,
+      showScrollbar = props.showScrollbar,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var internalStyle = {};
+
+  if (scrollX) {
+    internalStyle.overflowX = 'auto';
+    internalStyle.overflowY = 'hidden';
+  }
+
+  if (scrollY) {
+    internalStyle.overflowY = 'auto';
+    internalStyle.overflowX = 'hidden';
+  }
+
+  var rootDom = React.useRef();
+  var scrollLeftRecord = React.useRef(0);
+  var scrollTopRecord = React.useRef(0);
+  var beforeScrollDistance = 0;
+  var direction = 'down';
+  React.useEffect(function () {
+    scrollX && doScrollLeft(scrollLeft);
+  }, [scrollLeft]);
+  React.useEffect(function () {
+    scrollY && doScrollTop(scrollTop);
+  }, [scrollTop]);
+
+  function doScrollLeft() {
+    var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    if (rootDom && rootDom.current && scrollLeft !== scrollLeftRecord.current) {
+      if (scrollWithAnimation && scrollLeftRecord.current) {
+        tween({
+          from: {
+            l: scrollLeftRecord.current
+          },
+          to: {
+            l: scrollLeft
+          },
+          duration: 100,
+          step: function step(_ref) {
+            var l = _ref.l;
+            rootDom.current.scrollLeft = l;
+          }
+        }).then(function () {
+          rootDom.current.scrollLeft = scrollLeft;
+          scrollLeftRecord.current = scrollLeft;
+        });
+      } else {
+        scrollLeftRecord.current = scrollLeft;
+        rootDom.current.scrollLeft = scrollLeft;
+      }
+    }
+  }
+
+  function doScrollTop() {
+    var scrollTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    if (rootDom && rootDom.current && scrollTop !== scrollTopRecord.current) {
+      if (scrollWithAnimation && scrollTopRecord.current) {
+        tween({
+          from: {
+            l: scrollTopRecord.current
+          },
+          to: {
+            l: scrollTop
+          },
+          duration: 100,
+          step: function step(_ref2) {
+            var l = _ref2.l;
+            rootDom.current.scrollTop = l;
+          }
+        }).then(function () {
+          rootDom.current.scrollTop = scrollTop;
+          scrollTopRecord.current = scrollTop;
+        });
+      } else {
+        scrollTopRecord.current = scrollTop;
+        rootDom.current.scrollTop = scrollTop;
+      }
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(View, _extends({
+    ref: function ref(dom) {
+      if (dom) {
+        rootDom.current = dom;
+      }
+    },
+    className: clsx('ray-scroll-view', styles.scrollView, className),
+    onScroll: function handleOnScroll(e) {
+      // TODO: 增加 event.detail
+
+      /**
+       * deltaX: 0
+       * deltaY: -13
+       * scrollHeight: 1320
+       * scrollLeft: 0
+       * scrollTop: 126
+       * scrollWidth: 387
+       */
+      if (rootDom && rootDom.current) {
+        e.detail = rootDom.current;
+        var _rootDom$current = rootDom.current,
+            offsetHeight = _rootDom$current.offsetHeight,
+            _scrollTop = _rootDom$current.scrollTop,
+            scrollHeight = _rootDom$current.scrollHeight,
+            _scrollLeft = _rootDom$current.scrollLeft,
+            offsetWidth = _rootDom$current.offsetWidth,
+            scrollWidth = _rootDom$current.scrollWidth; // 记录手动滑的位置
+
+        scrollLeftRecord.current = rootDom.current.scrollLeft;
+        scrollTopRecord.current = rootDom.current.scrollTop;
+
+        if (scrollY && beforeScrollDistance !== _scrollTop) {
+          direction = beforeScrollDistance - _scrollTop > 0 ? 'up' : 'down';
+          beforeScrollDistance = _scrollTop;
+        }
+
+        if (scrollX && beforeScrollDistance !== _scrollLeft) {
+          direction = beforeScrollDistance - _scrollLeft > 0 ? 'left' : 'right';
+          beforeScrollDistance = _scrollLeft;
+        }
+
+        if (scrollY && direction === 'down' && offsetHeight + _scrollTop + lowerThreshold >= scrollHeight || scrollX && direction === 'right' && offsetWidth + _scrollLeft + lowerThreshold >= scrollWidth) {
+          onScrollToLower && onScrollToLower();
+        }
+
+        if (scrollY && direction === 'up' && _scrollTop <= upperThreshold || scrollX && direction === 'left' && _scrollLeft <= upperThreshold) {
+          onScrollToUpper && onScrollToUpper();
+        }
+      }
+
+      onScroll && onScroll(e);
+    },
+    style: _objectSpread(_objectSpread({}, internalStyle), style)
+  }, restProps), props.children);
+};
+
+ScrollView.defaultProps = defaultScrollViewProps;
+export default ScrollView;

package/lib/ScrollView/ScrollView.wechat.d.ts

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

package/lib/ScrollView/ScrollView.wechat.js

@@ -0,0 +1,20 @@
+import { ScrollView as _ScrollView } from "@remax/wechat/esm/hostComponents/ScrollView/index";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style"];
+import * as React from 'react';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { defaultScrollViewProps } from './props';
+
+var ScrollView = function (props) {
+  var style = props.style,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(_ScrollView, _extends({
+    style: inlineStyle(style),
+    enhanced: true
+  }, restProps));
+};
+
+ScrollView.defaultProps = defaultScrollViewProps;
+export default ScrollView;

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

package/lib/ScrollView/index.d.ts

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

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

package/lib/ScrollView/index.js

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

package/lib/ScrollView/index.md

@@ -0,0 +1,37 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 视图容器
+---
+
+# ScrollView
+
+滚动容器
+
+## 代码演示
+
+<code src="./demos/VerticalScroll.tsx" title="纵向滚动" background="#f2f4f6" />
+<code src="./demos/HorizontalScroll.tsx" title="横向滚动" background="#f2f4f6" />
+
+## 导入
+
+```js
+import { ScrollView } from '@ray-js/components';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- |
+| scrollX | boolean | false | 允许横向滚动 | 涂鸦、微信、RN |
+| scrollY | boolean | false | 允许纵向滚动 | 涂鸦、微信、RN |
+| scrollTop | number |  | 设置竖向滚动条位置 | 涂鸦、微信、RN |
+| scrollLeft | number |  | 设置横向滚动条位置 | 涂鸦、微信、RN |
+| scrollWithAnimation | boolean |  | 在设置滚动条位置时使用动画过渡 | 涂鸦、微信、RN |
+| upperThreshold | number | 50 | 距顶部/左边多远时，触发 onScrollToUpper 事件 | 涂鸦、微信、RN |
+| lowerThreshold | number | 50 | 距底部/右边多远时，触发 onScrollToLower 事件 | 涂鸦、微信、RN |
+| onScrollToUpper | func(event: { type: 'scrolltoupper'; direction: 'top' or'left'; origin: any }) |  | 滚动到顶部/左边时触发 | 涂鸦、微信、RN |
+| onScrollToLower | func(event: { type: 'scrolltolower'; direction: 'bottom' or 'right'; origin: any }) |  | 滚动到底部/右边时触发 | 涂鸦、微信、RN |
+| onScroll | func(vent: { type: 'scroll'; scrollLeft: number; scrollTop: number; scrollHeight: number; scrollWidth: number; deltaX: number; deltaY: number; origin: any }) |  | 滚动时触发 | 涂鸦、微信、RN |

package/lib/ScrollView/index.module.less

@@ -0,0 +1,6 @@
+.scrollView {
+  box-sizing: content-box;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/lib/ScrollView/index.tuya.js

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

package/lib/ScrollView/index.web.js

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

package/lib/ScrollView/index.wechat.js

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

package/lib/ScrollView/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultScrollViewProps=void 0;var defaultScrollViewProps={scrollX:false,scrollY:false,scrollWithAnimation:false};exports.defaultScrollViewProps=defaultScrollViewProps;

package/lib/ScrollView/props.d.ts

@@ -0,0 +1,43 @@
+import { BaseProps } from '../types';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { GenericEvent as WxScrollEvent } from '@remax/wechat';
+export interface ScrollViewProps extends BaseProps {
+    /** (default: false) 允许横向滚动 1.0.0 */
+    scrollX?: boolean;
+    /** (default: false) 允许纵向滚动 1.0.0 */
+    scrollY?: boolean;
+    /** 设置竖向滚动条位置 1.0.0 */
+    scrollTop?: number;
+    /** 设置横向滚动条位置 1.0.0 */
+    scrollLeft?: number;
+    /** (default: 50) 距顶部/左边多远时，触发 onScrollToUpper 事件 1.0.0 */
+    upperThreshold?: number;
+    /** (default: 50) 距底部/右边多远时，触发 onScrollToLower 事件 1.0.0 */
+    lowerThreshold?: number;
+    /** (default: false) 在设置滚动条位置时使用动画过渡 1.0.0 */
+    scrollWithAnimation?: boolean;
+    /** 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0 */
+    onScroll?: (event: {
+        type: 'scroll';
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+        deltaX: number;
+        deltaY: number;
+        origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent;
+    }) => any;
+    /** 滚动到顶部/左边时触发 1.0.0 */
+    onScrollToUpper?: (event: {
+        type: 'scrolltoupper';
+        direction: 'top' | 'left';
+        origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent | Event;
+    }) => any;
+    /** 滚动到底部/右边时触发 1.0.0 */
+    onScrollToLower?: (event: {
+        type: 'scrolltolower';
+        direction: 'bottom' | 'right';
+        origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent | Event;
+    }) => any;
+}
+export declare const defaultScrollViewProps: ScrollViewProps;

package/lib/ScrollView/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultScrollViewProps=void 0;var defaultScrollViewProps={scrollX:false,scrollY:false,scrollWithAnimation:false};exports.defaultScrollViewProps=defaultScrollViewProps;

package/lib/ScrollView/props.js

@@ -0,0 +1,5 @@
+export var defaultScrollViewProps = {
+  scrollX: false,
+  scrollY: false,
+  scrollWithAnimation: false
+};

package/lib/ScrollView/props.tuya.js

@@ -0,0 +1,5 @@
+export var defaultScrollViewProps = {
+  scrollX: false,
+  scrollY: false,
+  scrollWithAnimation: false
+};

package/lib/ScrollView/props.web.js

@@ -0,0 +1,5 @@
+export var defaultScrollViewProps = {
+  scrollX: false,
+  scrollY: false,
+  scrollWithAnimation: false
+};

package/lib/ScrollView/props.wechat.js

@@ -0,0 +1,5 @@
+export var defaultScrollViewProps = {
+  scrollX: false,
+  scrollY: false,
+  scrollWithAnimation: false
+};

package/lib/Slider/Slider.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=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 _slider=_interopRequireDefault(require("tuya-panel-slider/lib/slider"));var _props=require("./props");var _jsxFileName="/drone/src/packages/components/src/Slider/Slider.native.tsx";var _excluded=["min","max","step","backgroundColor","activeColor","blockSize","blockColor","onChange","onChanging","showValue"];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 Slider=function(_React$Component){(0,_inherits2.default)(Slider,_React$Component);var _super=_createSuper(Slider);function Slider(props){var _this;(0,_classCallCheck2.default)(this,Slider);_this=_super.call(this,props);_this.state={currentValue:props.value};return _this;}(0,_createClass2.default)(Slider,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.value!==this.props.value){this.setState({currentValue:this.props.value});}}},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,min=_this$props.min,max=_this$props.max,step=_this$props.step,backgroundColor=_this$props.backgroundColor,activeColor=_this$props.activeColor,blockSize=_this$props.blockSize,blockColor=_this$props.blockColor,onChange=_this$props.onChange,onChanging=_this$props.onChanging,showValue=_this$props.showValue,rest=(0,_objectWithoutProperties2.default)(_this$props,_excluded);return _react.default.createElement(_reactNative.View,{style:[{flexDirection:'row',alignItems:'center'}],__self:this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:12}},_react.default.createElement(_slider.default,(0,_extends2.default)({trackStyle:{width:312,height:4}},rest,{minimumValue:min,maximumValue:max,stepValue:step,maximumTrackTintColor:backgroundColor,minimumTrackTintColor:activeColor,thumbTouchSize:{width:blockSize,height:blockSize},thumbTintColor:blockColor,onSlidingComplete:function onSlidingComplete(value){_this2.setState({currentValue:value});typeof onChange==='function'&&onChange({type:'change',value:value,origin:undefined});},onValueChange:function onValueChange(value){_this2.setState({currentValue:value});typeof onChanging==='function'&&onChanging({type:'changing',value:value,origin:undefined});},__self:this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:9}})),showValue&&_react.default.createElement(_reactNative.Text,{style:[{marginLeft:15}],__self:this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:23}},this.state.currentValue));}}]);return Slider;}(_react.default.Component);exports.default=Slider;Slider.defaultProps=_props.sliderDefault;

package/lib/Slider/Slider.d.ts

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