@nutui/nutui-react 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/esm/Drag.js

@@ -1,17 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["attract", "direction", "boundary", "children", "className"];
+var _excluded = ["attract", "direction", "boundary", "children", "className", "style"];
 
 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) { _defineProperty(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; }
 
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
+import { useDrag } from '@use-gesture/react';
+import { useSpring, animated } from '@react-spring/web';
 import '@bem-react/classname';
 var defaultProps = {
   attract: false,
-  direction: 'all',
+  direction: undefined,
   boundary: {
     top: 0,
     left: 0,
@@ -28,163 +31,122 @@ var Drag = function Drag(props) {
       boundary = _defaultProps$props.boundary,
       children = _defaultProps$props.children,
       className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
       reset = _objectWithoutProperties(_defaultProps$props, _excluded);
 
   var b = cn('drag');
-  var elWidth = useRef(0);
-  var elHeight = useRef(0);
-  var screenWidth = useRef(0);
-  var screenHeight = useRef(0);
-  var startTop = useRef(0);
-  var startLeft = useRef(0);
-  useRef(0);
-  useRef(0);
-  var xPum = useRef(0);
-  var yPum = useRef(0);
-  var position = useRef({
-    x: 0,
-    y: 0
+
+  var _useState = useState(boundary),
+      _useState2 = _slicedToArray(_useState, 2),
+      boundaryState = _useState2[0],
+      setBoundaryState = _useState2[1];
+
+  var myDrag = useRef(null);
+
+  var _useSpring = useSpring(function () {
+    return {
+      x: 0,
+      y: 0
+    };
+  }),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      currstyle = _useSpring2[0],
+      api = _useSpring2[1];
+
+  var screen = useRef({
+    clientWidth: 0,
+    clientHeight: 0
   });
-  useRef({
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+  var element = useRef({
+    offsetWidth: 0,
+    offsetHeight: 0
   });
-  var myDrag = useRef(null);
 
   var getInfo = function getInfo() {
     var el = myDrag.current;
 
     if (el) {
-      var domElem = document.documentElement;
-      elWidth.current = el.offsetWidth;
-      elHeight.current = el.offsetHeight;
-      screenWidth.current = domElem.clientWidth;
-      screenHeight.current = domElem.clientHeight;
-    }
-  };
-
-  var goLeft = function goLeft(target) {
-    if (boundary.left) {
-      if (+target.style.left.split('px')[0] > boundary.left) {
-        target.style.left = +target.style.left.split('px')[0] - 10 + 'px';
-        window.requestAnimationFrame(function () {
-          goLeft(target);
-        });
-      } else {
-        target.style.left = "".concat(boundary.left, "px");
-      }
-    } else {
-      if (+target.style.left.split('px')[0] > 10) {
-        target.style.left = +target.style.left.split('px')[0] - 10 + 'px';
-        window.requestAnimationFrame(function () {
-          goLeft(target);
-        });
-      } else {
-        target.style.left = '0px';
-      }
-    }
-  };
-
-  var goRight = function goRight(target, rightLocation) {
-    if (rightLocation - parseInt(target.style.left.split('px')[0]) > 10) {
-      target.style.left = parseInt(target.style.left.split('px')[0]) + 10 + 'px';
-      window.requestAnimationFrame(function () {
-        goRight(target, rightLocation);
+      var offsetWidth = el.offsetWidth,
+          offsetHeight = el.offsetHeight,
+          offsetTop = el.offsetTop,
+          offsetLeft = el.offsetLeft;
+      var _document$documentEle = document.documentElement,
+          clientWidth = _document$documentEle.clientWidth,
+          clientHeight = _document$documentEle.clientHeight;
+      var top = boundary.top,
+          left = boundary.left,
+          bottom = boundary.bottom,
+          right = boundary.right;
+      element.current = {
+        offsetWidth: offsetWidth,
+        offsetHeight: offsetHeight
+      };
+      screen.current = {
+        clientWidth: clientWidth,
+        clientHeight: clientHeight
+      };
+      setBoundaryState({
+        top: -offsetTop + top,
+        left: -offsetLeft + left,
+        bottom: clientHeight - offsetHeight - offsetTop - bottom,
+        right: clientWidth - offsetWidth - offsetLeft - right
       });
-    } else {
-      target.style.left = rightLocation + 'px';
-    }
-  };
-
-  var touchMove = function touchMove(e) {
-    e.preventDefault();
-    var target = e.currentTarget;
-
-    if (e.targetTouches.length === 1) {
-      var touch = e.targetTouches[0];
-      var x = touch.clientX - position.current.x;
-      var y = touch.clientY - position.current.y;
-      xPum.current = startLeft.current + x;
-      yPum.current = startTop.current + y;
-      var rightLocation = screenWidth.current - elWidth.current - boundary.right;
-
-      if (Math.abs(xPum.current) > rightLocation) {
-        xPum.current = rightLocation;
-      } else if (xPum.current <= boundary.left) {
-        xPum.current = boundary.left;
-      }
-
-      if (yPum.current < boundary.top) {
-        yPum.current = boundary.top;
-      } else if (yPum.current > screenHeight.current - elHeight.current - boundary.bottom) {
-        yPum.current = screenHeight.current - elHeight.current - boundary.bottom;
-      }
-
-      if (props.direction != 'y') {
-        target.style.left = "".concat(xPum.current, "px");
-      }
-
-      if (props.direction != 'x') {
-        target.style.top = "".concat(yPum.current, "px");
-      }
     }
   };
 
-  var touchEnd = function touchEnd(e) {
-    var target = e.currentTarget;
-    var touch = e.changedTouches[0];
-    var currX = touch.clientX;
-    var rightLocation = screenWidth.current - elWidth.current - boundary.right;
-
-    if (currX > rightLocation) {
-      currX = rightLocation;
-    } else if (currX < boundary.left) {
-      currX = boundary.left;
-    } else {
-      currX = currX < screenWidth.current / 2 ? boundary.left : rightLocation;
-    }
-
-    if (props.direction != 'y' && props.attract) {
-      if (currX < screenWidth.current / 2) {
-        window.requestAnimationFrame(function () {
-          goLeft(target);
-        });
-      } else {
-        window.requestAnimationFrame(function () {
-          goRight(target, rightLocation);
-        });
+  var bind = useDrag(function (_ref) {
+    var down = _ref.down,
+        last = _ref.last,
+        _ref$offset = _slicedToArray(_ref.offset, 2),
+        x = _ref$offset[0],
+        y = _ref$offset[1];
+
+    api.start({
+      x: x,
+      y: y,
+      immediate: down
+    });
+
+    if (last) {
+      if (props.direction != 'y' && props.attract) {
+        if (x < (screen.current.clientWidth - element.current.offsetWidth) / 2) {
+          console.log(x);
+          window.requestAnimationFrame(function () {
+            api.start({
+              x: boundaryState.left,
+              y: y,
+              immediate: down
+            });
+          });
+        } else {
+          window.requestAnimationFrame(function () {
+            api.start({
+              x: screen.current.clientWidth - element.current.offsetWidth + boundaryState.left,
+              y: y,
+              immediate: down
+            });
+          });
+        }
       }
     }
-  };
-
-  var touchStart = function touchStart(e) {
-    var target = e.currentTarget;
-    var touches = e.touches[0];
-    startTop.current = target.offsetTop;
-    startLeft.current = target.offsetLeft;
-    position.current = {
-      x: touches.clientX,
-      y: touches.clientY
-    };
-    target.removeEventListener('touchmove', touchMove, false);
-    target.removeEventListener('touchend', touchEnd, false);
-    target.addEventListener('touchmove', touchMove, false);
-    target.addEventListener('touchend', touchEnd, false);
-  };
-
+  }, {
+    from: function from() {
+      return [currstyle.x.get(), currstyle.y.get()];
+    },
+    axis: direction,
+    bounds: boundaryState
+  });
   useEffect(function () {
     getInfo();
-  }, []);
+  }, [myDrag]);
   return React__default.createElement("div", _objectSpread(_objectSpread({
+    style: style,
     className: "".concat(b(), " ").concat(className)
   }, reset), {}, {
-    ref: myDrag,
-    onTouchStart: function onTouchStart(event) {
-      return touchStart(event);
-    }
-  }), children);
+    ref: myDrag
+  }), React__default.createElement(animated.div, _objectSpread({
+    style: currstyle
+  }, bind()), children));
 };
 
 Drag.defaultProps = defaultProps;

package/dist/esm/Elevator/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/elevator/elevator.scss'

package/dist/esm/Elevator.js

@@ -120,13 +120,7 @@ var Elevator = function Elevator(props) {
     });
     scrollTo(index);
     var target = e.currentTarget;
-    target.removeEventListener('touchmove', function () {
-      return touchMove(e);
-    }, false);
     target.removeEventListener('touchend', touchEnd, false);
-    target.addEventListener('touchmove', function () {
-      return touchMove(e);
-    }, false);
     target.addEventListener('touchend', touchEnd, false);
   };
 
@@ -185,6 +179,9 @@ var Elevator = function Elevator(props) {
     className: b('bars'),
     onTouchStart: function onTouchStart(event) {
       return touchStart(event);
+    },
+    onTouchMove: function onTouchMove(event) {
+      return touchMove(event);
     }
   }, React__default.createElement("div", {
     className: b('bars__inner')

package/dist/esm/FixedNav/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/fixednav/fixednav.scss'

package/dist/esm/Icon/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/icon/icon.scss'

package/dist/esm/Infiniteloading/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/infiniteloading/infiniteloading.scss'

package/dist/esm/Input/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/input/input.scss'

package/dist/esm/Input.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
-import { I as Icon } from './icon-63c0d58f.js';
+import Icon from './Icon.js';
 import '@bem-react/classname';
 
 function trimExtraChar(value, _char, regExp) {

package/dist/esm/InputNumber/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/inputnumber/inputnumber.scss'

package/dist/esm/Layout/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/layout/layout.scss'

package/dist/esm/NavBar/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/navbar/navbar.scss'

package/dist/esm/NoticeBar/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/noticebar/noticebar.scss'

package/dist/esm/Notify/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/notify/notify.scss'

package/dist/esm/Overlay/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/overlay/overlay.scss'

package/dist/esm/Pagination/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/pagination/pagination.scss'

package/dist/esm/Picker/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/picker/picker.scss'