@nutui/nutui-react 0.1.0-beta.1

package/dist/esm/Checkbox.js

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["iconName", "iconSize", "label", "className", "textPosition", "iconActiveName", "checked", "disabled", "onChange"];
+
+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, { useState, useEffect } from 'react';
+import { I as Icon } from './icon-63c0d58f.js';
+import CheckboxGroup from './CheckboxGroup.js';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  checked: false,
+  disabled: false,
+  textPosition: 'right',
+  iconSize: 18,
+  iconName: 'check-normal',
+  iconActiveName: 'checked',
+  onChange: function onChange(state, label) {}
+};
+
+var Checkbox = function Checkbox(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children;
+
+  var b = cn('checkbox');
+
+  var iconName = props.iconName,
+      iconSize = props.iconSize,
+      label = props.label,
+      className = props.className,
+      textPosition = props.textPosition,
+      iconActiveName = props.iconActiveName,
+      checked = props.checked,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerChecked = _useState2[0],
+      setInnerChecked = _useState2[1];
+
+  var _useState3 = useState(disabled),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerDisabled = _useState4[0],
+      setDisabled = _useState4[1];
+
+  useEffect(function () {
+    setInnerChecked(checked);
+    setDisabled(disabled);
+  }, [disabled, checked]);
+
+  var renderIcon = function renderIcon() {
+    return React__default.createElement(Icon, {
+      name: innerChecked ? iconActiveName : iconName,
+      size: iconSize,
+      color: color()
+    });
+  };
+
+  var color = function color() {
+    return !innerDisabled ? !innerChecked ? '#d6d6d6' : '#fa2c19' : '#f5f5f5';
+  };
+
+  var renderLabel = function renderLabel() {
+    return React__default.createElement("span", {
+      className: "".concat(b('label', {
+        disabled: innerDisabled
+      }), " ")
+    }, label || children);
+  };
+
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    onChange && onChange(!innerChecked, label || children);
+    return setInnerChecked(!innerChecked);
+  };
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "".concat(b({
+      reverse: textPosition === 'left'
+    }), " ").concat(className || '')
+  }, rest), {}, {
+    onClick: handleClick
+  }), renderIcon(), renderLabel());
+};
+
+Checkbox.defaultProps = defaultProps;
+Checkbox.displayName = 'NutCheckBox';
+Checkbox.Group = CheckboxGroup;
+export { Checkbox as default };

package/dist/esm/CheckboxGroup.js

@@ -0,0 +1,107 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "disabled", "onChange", "checkedValue"];
+
+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, { useState, useImperativeHandle, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  disabled: false,
+  checkedValue: [],
+  onChange: function onChange(value) {}
+};
+var CheckboxGroup = React__default.forwardRef(function (props, ref) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children;
+
+  var b = cn('checkboxgroup');
+
+  var className = props.className,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      checkedValue = props.checkedValue,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(disabled),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerDisabled = _useState2[0],
+      setInnerDisabled = _useState2[1];
+
+  var _useState3 = useState(checkedValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerValue = _useState4[0],
+      setInnerValue = _useState4[1];
+
+  useImperativeHandle(ref, function () {
+    return {
+      toggleAll: function toggleAll(state) {
+        console.log(state);
+
+        if (state === false) {
+          setInnerValue([]);
+        } else {
+          var childrenLabel = [];
+          React__default.Children.map(children, function (child) {
+            var childProps = child.props;
+            childrenLabel.push(childProps.label || child.children);
+          });
+          setInnerValue(childrenLabel);
+        }
+      }
+    };
+  });
+  useEffect(function () {
+    setInnerDisabled(disabled);
+    setInnerValue(checkedValue);
+  }, [disabled, checkedValue]);
+
+  function handleChildChange(state, label) {
+    if (innerValue) {
+      var clippedValue = [];
+
+      if (state) {
+        clippedValue = [].concat(_toConsumableArray(innerValue), [label]);
+      } else {
+        innerValue === null || innerValue === void 0 ? void 0 : innerValue.splice(innerValue === null || innerValue === void 0 ? void 0 : innerValue.indexOf(label), 1);
+        clippedValue = _toConsumableArray(innerValue);
+      }
+
+      setInnerValue(clippedValue);
+      onChange && onChange(clippedValue);
+    }
+  }
+
+  function validateChildChecked(child) {
+    if (!innerValue) return false;
+    return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
+  }
+
+  function cloneChildren() {
+    return React__default.Children.map(children, function (child, index) {
+      var childChecked = validateChildChecked(child);
+
+      if (child.type.displayName !== 'NutCheckBox') {
+        return React__default.cloneElement(child);
+      }
+
+      return React__default.cloneElement(child, {
+        disabled: innerDisabled,
+        checked: childChecked,
+        onChange: handleChildChange
+      });
+    });
+  }
+
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className || '')
+  }, rest), cloneChildren());
+});
+CheckboxGroup.defaultProps = defaultProps;
+CheckboxGroup.displayName = 'NutCheckboxGroup';
+export { CheckboxGroup as default };

package/dist/esm/CircleProgress.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "strokeInnerWidth", "progress", "isAuto", "progressOption", "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 from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import classNames from 'classnames';
+import '@bem-react/classname';
+var defaultProps = {
+  strokeInnerWidth: 10,
+  progress: 10,
+  isAuto: false,
+  progressOption: {}
+};
+
+var CircleProgress = function CircleProgress(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      strokeInnerWidth = _defaultProps$props.strokeInnerWidth,
+      progress = _defaultProps$props.progress,
+      isAuto = _defaultProps$props.isAuto,
+      progressOption = _defaultProps$props.progressOption,
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('circleprogress');
+  var classes = classNames(className, b(''));
+
+  var option = function option() {
+    // 所有进度条的可配置项
+    var baseOption = {
+      radius: 50,
+      strokeOutWidth: 10,
+      backColor: '#d9d9d9',
+      progressColor: 'red',
+      cy: 1,
+      cx: 1,
+      size: 1,
+      startPosition: ''
+    };
+    Object.assign(baseOption, progressOption); // 圆心位置自动生成
+
+    baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth;
+    baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2;
+    baseOption.startPosition = 'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')';
+    return baseOption;
+  };
+
+  var styles = _objectSpread({
+    height: "".concat(option().size, "px"),
+    width: "".concat(option().size, "px")
+  }, style);
+
+  var arcLength = function arcLength() {
+    var circleLength = Math.floor(2 * Math.PI * option().radius);
+    var progressLength = progress / 100 * circleLength;
+    return "".concat(progressLength, ",").concat(circleLength);
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
+    style: styles
+  }, restProps), React__default.createElement("svg", {
+    height: option().size,
+    width: option().size,
+    "x-mlns": "http://www.w3.org/200/svg"
+  }, React__default.createElement("circle", {
+    r: option().radius,
+    cx: option().cx,
+    cy: option().cy,
+    stroke: option().backColor,
+    strokeWidth: option().strokeOutWidth,
+    fill: "none"
+  }), React__default.createElement("circle", {
+    r: option().radius,
+    cx: option().cx,
+    cy: option().cy,
+    stroke: option().progressColor,
+    strokeWidth: strokeInnerWidth,
+    strokeDasharray: arcLength(),
+    transform: option().startPosition,
+    fill: "none",
+    strokeLinecap: "round",
+    style: {
+      transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s'
+    }
+  })), React__default.createElement("div", {
+    className: "nut-circleprogress-content"
+  }, !isAuto ? "".concat(progress, "%") : React__default.createElement(React__default.Fragment, null, children)));
+};
+
+CircleProgress.defaultProps = defaultProps;
+CircleProgress.displayName = 'NutCircleProgress';
+export { CircleProgress as default };

package/dist/esm/Collapse.js

@@ -0,0 +1,108 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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, { memo, useState, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  activeName: ['0'],
+  accordion: false,
+  icon: '',
+  iconSize: '16px',
+  iconColor: '',
+  rotate: 180
+};
+
+function areEqual(prevProps, nextProps) {
+  return JSON.stringify(prevProps.activeName) == JSON.stringify(nextProps.activeName);
+}
+
+var Collapse = memo(function (props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      activeName = _defaultProps$props.activeName,
+      accordion = _defaultProps$props.accordion,
+      icon = _defaultProps$props.icon,
+      rotate = _defaultProps$props.rotate,
+      iconSize = _defaultProps$props.iconSize,
+      iconColor = _defaultProps$props.iconColor,
+      change = _defaultProps$props.change;
+
+  var childrenDom = React__default.Children.toArray(children);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      defaultOpenIndex = _useState2[0],
+      setDefaultOpenIndex = _useState2[1];
+
+  var handleActiveName = function handleActiveName() {
+    var activeArr = [];
+
+    if (!Array.isArray(activeName)) {
+      activeArr.push(activeName.toString());
+    } else {
+      //数组
+      if (accordion && activeName.length > 1) {
+        console.warn('手风琴模式不支持传递多个打开页签');
+      }
+
+      var activeNameStr = activeName.map(function (item) {
+        return item.toString();
+      });
+      activeArr = _toConsumableArray(activeNameStr);
+    }
+
+    return activeArr;
+  };
+
+  var colBem = cn('collapse');
+  useEffect(function () {
+    var activeArr = handleActiveName();
+    setDefaultOpenIndex(activeArr);
+  }, [activeName]);
+
+  var _onToggle = function onToggle(isOpen, name) {
+    var newOpenIndex = _toConsumableArray(defaultOpenIndex);
+
+    if (isOpen) {
+      //当前状态为true，则变为false,闭合
+      var removeIndex = newOpenIndex.findIndex(function (value) {
+        return value === name;
+      });
+      newOpenIndex.splice(removeIndex, 1);
+    } else {
+      //当前状态为false，变为true，展开
+      if (accordion) {
+        newOpenIndex = [name];
+      } else {
+        newOpenIndex.push(name);
+      }
+    }
+
+    setDefaultOpenIndex(newOpenIndex);
+    change && change(!isOpen, name);
+  };
+
+  return React__default.createElement("div", {
+    className: colBem()
+  }, childrenDom.map(function (item, index) {
+    return React__default.cloneElement(item, {
+      isOpen: defaultOpenIndex.includes(item.props.name),
+      onToggle: function onToggle(isOpen, name) {
+        return _onToggle(isOpen, name);
+      },
+      icon: icon,
+      rotate: rotate,
+      iconSize: iconSize,
+      iconColor: iconColor
+    });
+  }));
+}, areEqual);
+Collapse.defaultProps = defaultProps;
+Collapse.displayName = 'NutCollapse';
+export { Collapse as default };

package/dist/esm/Divider.js

@@ -0,0 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import classNames from 'classnames';
+import '@bem-react/classname';
+var defaultProps = {
+  contentPosition: 'center',
+  dashed: false,
+  hairline: true
+};
+
+var Divider = function Divider(props) {
+  var _classNames;
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      contentPosition = _defaultProps$props.contentPosition,
+      dashed = _defaultProps$props.dashed,
+      hairline = _defaultProps$props.hairline,
+      styles = _defaultProps$props.styles,
+      className = _defaultProps$props.className;
+
+  var dividerBem = cn('divider');
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, dividerBem(), true), _defineProperty(_classNames, dividerBem('center'), children), _defineProperty(_classNames, dividerBem('left'), contentPosition === 'left'), _defineProperty(_classNames, dividerBem('right'), contentPosition === 'right'), _defineProperty(_classNames, dividerBem('dashed'), dashed), _defineProperty(_classNames, dividerBem('hairline'), hairline), _classNames));
+  return React__default.createElement("div", {
+    className: "".concat(classes, " ").concat(className || ''),
+    style: styles
+  }, children);
+};
+
+Divider.defaultProps = defaultProps;
+Divider.displayName = 'NutDivider';
+export { Divider as default };

package/dist/esm/Drag.js

@@ -0,0 +1,192 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["attract", "direction", "boundary", "children", "className"];
+
+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 { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  attract: false,
+  direction: 'all',
+  boundary: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  className: ''
+};
+
+var Drag = function Drag(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      attract = _defaultProps$props.attract,
+      direction = _defaultProps$props.direction,
+      boundary = _defaultProps$props.boundary,
+      children = _defaultProps$props.children,
+      className = _defaultProps$props.className,
+      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
+  });
+  useRef({
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 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);
+      });
+    } 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 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);
+  };
+
+  useEffect(function () {
+    getInfo();
+  }, []);
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "".concat(b(), " ").concat(className)
+  }, reset), {}, {
+    ref: myDrag,
+    onTouchStart: function onTouchStart(event) {
+      return touchStart(event);
+    }
+  }), children);
+};
+
+Drag.defaultProps = defaultProps;
+Drag.displayName = 'NutDrag';
+export { Drag as default };