@corva/ui 0.65.0-1-test → 0.65.0-2

package/components/AdvancedSlider/AdvancedSlider.js

@@ -1,495 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useRef, useState, useEffect, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core';
-import Resizable from 're-resizable';
-import { withSize } from 'react-sizeme';
-import classNames from 'classnames';
-import { noop } from 'lodash';
-import { useThrottledCallback } from '../shared/useThrottledCallback.js';
-import { Handle } from './Handle.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-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; }
-var AdvancedSlider = function AdvancedSlider(_ref) {
-  var _classnames, _classnames2;
-  var min = _ref.min,
-    max = _ref.max,
-    value = _ref.value,
-    size = _ref.size,
-    orientation = _ref.orientation,
-    valueFormatter = _ref.valueFormatter,
-    displayFormatter = _ref.displayFormatter,
-    editableHandles = _ref.editableHandles,
-    onChange = _ref.onChange,
-    onStop = _ref.onStop,
-    reversed = _ref.reversed,
-    handlePosition = _ref.handlePosition,
-    handleClasses = _ref.handleClasses;
-  var classes = useStyles();
-  var headRef = useRef(null);
-  var tailRef = useRef(null);
-  var _useState = useState(valueFormatter(value === null || value === void 0 ? void 0 : value.at(0))),
-    _useState2 = _slicedToArray(_useState, 2),
-    head = _useState2[0],
-    setHead = _useState2[1];
-  var _useState3 = useState(valueFormatter(value === null || value === void 0 ? void 0 : value.at(1))),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tail = _useState4[0],
-    setTail = _useState4[1];
-  var sliderStateOnCapturing = useRef(null); // NOTE: Store slider state on capturing the handle
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isHandleCaptured = _useState6[0],
-    setIsHandleCaptured = _useState6[1]; // NOTE: user grabbed slider handle
-
-  // NOTE: Overwrite head/tail values based on props
-  useEffect(function () {
-    if (!sliderStateOnCapturing.current) {
-      setHead(Math.min(valueFormatter(value === null || value === void 0 ? void 0 : value.at(0)), valueFormatter(value === null || value === void 0 ? void 0 : value.at(1))));
-      setTail(Math.max(valueFormatter(value === null || value === void 0 ? void 0 : value.at(0)), valueFormatter(value === null || value === void 0 ? void 0 : value.at(1))));
-    }
-  }, [value === null || value === void 0 ? void 0 : value.at(0), value === null || value === void 0 ? void 0 : value.at(1)]);
-
-  // NOTE: Resize blocks based on values
-  useEffect(function () {
-    if (orientation === 'horizontal') {
-      var headWidth = size.width / (max - min) * (head - min);
-      var tailWidth = size.width / (max - min) * (max - tail);
-      headRef.current.updateSize({
-        width: !reversed ? headWidth : tailWidth,
-        height: size.height
-      });
-      tailRef.current.updateSize({
-        width: !reversed ? tailWidth : headWidth,
-        height: size.height
-      });
-    } else if (orientation === 'vertical') {
-      var headHeight = size.height / (max - min) * (head - min);
-      var tailHeight = size.height / (max - min) * (max - tail);
-      headRef.current.updateSize({
-        width: size.width,
-        height: !reversed ? headHeight : tailHeight
-      });
-      tailRef.current.updateSize({
-        width: size.width,
-        height: !reversed ? tailHeight : headHeight
-      });
-    }
-  }, [min, max, head, tail, size.width, size.height, orientation]);
-
-  // NOTE: Add event listener when slider handle is captured
-  useEffect(function () {
-    if (isHandleCaptured) {
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-      document.addEventListener('touchmove', onTouchMove);
-      document.addEventListener('touchend', onTouchEnd);
-    } else {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-    }
-    return function () {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-    };
-  }, [isHandleCaptured]);
-  var onResize = useThrottledCallback(function (e, direction, refToElement) {
-    sliderStateOnCapturing.current = 'onResize Event'; // anything
-
-    var elemWidth = refToElement.clientWidth;
-    var elemHeight = refToElement.clientHeight;
-    var nextHead;
-    var nextTail;
-    if (direction === 'right') {
-      // Horizontal head
-      if (!reversed) {
-        nextHead = valueFormatter(min + elemWidth / size.width * (max - min));
-      } else {
-        nextTail = valueFormatter(max - elemWidth / size.width * (max - min));
-      }
-    } else if (direction === 'left') {
-      // Horizontal tail
-      if (!reversed) {
-        nextTail = valueFormatter(max - elemWidth / size.width * (max - min));
-      } else {
-        nextHead = valueFormatter(min + elemWidth / size.width * (max - min));
-      }
-    } else if (direction === 'bottom') {
-      // Vertical head
-      if (!reversed) {
-        nextHead = valueFormatter(min + elemHeight / size.height * (max - min));
-      } else {
-        nextTail = valueFormatter(max - elemHeight / size.height * (max - min));
-      }
-    } else if (direction === 'top') {
-      // Vertical tail
-      if (!reversed) {
-        nextTail = valueFormatter(max - elemHeight / size.height * (max - min));
-      } else {
-        nextHead = valueFormatter(min + elemHeight / size.height * (max - min));
-      }
-    }
-    nextHead = Math.min(nextHead, tail);
-    nextTail = Math.max(nextTail, head);
-    setHead(function (prev) {
-      return nextHead || prev;
-    });
-    setTail(function (prev) {
-      return nextTail || prev;
-    });
-    onChange([nextHead || head, nextTail || tail]);
-  });
-  var onResizeStop = useThrottledCallback(function /* e, direction, refToElement, delta */
-  () {
-    sliderStateOnCapturing.current = null;
-    onStop();
-  });
-
-  // NOTE: Store mouse position and head, tail values. Triggered by onMouseDown and onTouchStart
-  var rememberInitialState = function rememberInitialState(xPos, yPos) {
-    sliderStateOnCapturing.current = {
-      xPos: xPos,
-      yPos: yPos,
-      head: head,
-      tail: tail
-    };
-  };
-  var calculateNextState = function calculateNextState(xPos, yPos) {
-    if (sliderStateOnCapturing.current) {
-      var diffPixel;
-      var diffValue;
-
-      // NOTE: Calculate next head, tail values based on mouse move
-      if (orientation === 'horizontal') {
-        diffPixel = sliderStateOnCapturing.current.xPos - xPos;
-        diffValue = diffPixel / size.width * (max - min);
-      } else if (orientation === 'vertical') {
-        diffPixel = sliderStateOnCapturing.current.yPos - yPos;
-        diffValue = diffPixel / size.height * (max - min);
-      }
-      var headComputed = sliderStateOnCapturing.current.head - diffValue * (!reversed ? 1 : -1);
-      var tailComputed = sliderStateOnCapturing.current.tail - diffValue * (!reversed ? 1 : -1);
-      var originalGap = sliderStateOnCapturing.current.tail - sliderStateOnCapturing.current.head;
-      var nextHead;
-      var nextTail;
-      if (headComputed <= min) {
-        nextHead = min;
-        nextTail = min + originalGap;
-      } else if (tailComputed >= max) {
-        nextHead = max - originalGap;
-        nextTail = max;
-      } else {
-        nextHead = headComputed;
-        nextTail = tailComputed;
-      }
-      nextHead = valueFormatter(nextHead);
-      nextTail = valueFormatter(nextTail);
-      setHead(nextHead);
-      setTail(nextTail);
-      onChange([nextHead, nextTail]);
-    }
-  };
-
-  // NOTE: Mouse event handlers for the drag handle (middle)
-  var onMouseDown = function onMouseDown(e) {
-    rememberInitialState(e.clientX, e.clientY);
-    setIsHandleCaptured(true);
-  };
-  var onMouseMove = useThrottledCallback(function (e) {
-    calculateNextState(e.clientX, e.clientY);
-  });
-  var onMouseUp = useThrottledCallback(function () {
-    sliderStateOnCapturing.current = null;
-    setIsHandleCaptured(false);
-  });
-
-  // NOTE: Touch event handlers for the drag handle (middle)
-  var onTouchStart = function onTouchStart(e) {
-    rememberInitialState(e.touches[0].pageX, e.touches[0].pageY);
-    setIsHandleCaptured(true);
-  };
-  var onTouchMove = useThrottledCallback(function (e) {
-    calculateNextState(e.touches[0].pageX, e.touches[0].pageY);
-  });
-  var onTouchEnd = useThrottledCallback(function () {
-    sliderStateOnCapturing.current = null;
-    setIsHandleCaptured(false);
-  });
-
-  // NOTE: Callbacks for head/tail input fields
-  var onChangeHead = useThrottledCallback(function (nextHead) {
-    setHead(nextHead);
-    onChange([nextHead, tail]);
-  });
-  var onChangeTail = useThrottledCallback(function (newTail) {
-    setTail(newTail);
-    onChange([head, newTail]);
-  });
-  var isSmallGap = useMemo(function () {
-    var gap = (tail - head) / (max - min) * (orientation === 'vertical' ? size.height : size.width);
-    return gap < 30;
-  }, [min, max, head, tail]);
-  var getHandleComponent = function getHandleComponent(placement) {
-    var headHandleProps = {
-      min: min,
-      max: tail,
-      value: head,
-      onChange: onChangeHead
-    };
-    var tailHandleProps = {
-      min: head,
-      max: max,
-      value: tail,
-      onChange: onChangeTail
-    };
-    if (placement === 'head') {
-      return /*#__PURE__*/jsx(Handle, _objectSpread({
-        placement: "head",
-        readOnly: !editableHandles,
-        displayFormatter: displayFormatter,
-        orientation: orientation,
-        classes: handleClasses
-      }, !reversed ? headHandleProps : tailHandleProps));
-    } else if (placement === 'tail') {
-      return /*#__PURE__*/jsx(Handle, _objectSpread({
-        placement: "tail",
-        readOnly: !editableHandles,
-        displayFormatter: displayFormatter,
-        orientation: orientation,
-        classes: handleClasses
-      }, !reversed ? tailHandleProps : headHandleProps));
-    }
-    return null;
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: classes.rootWrapper,
-    children: /*#__PURE__*/jsxs("div", {
-      className: classNames(classes.root, (_classnames = {}, _defineProperty(_classnames, classes.horizontalRoot, orientation === 'horizontal'), _defineProperty(_classnames, classes.verticalRoot, orientation === 'vertical'), _classnames)),
-      children: [/*#__PURE__*/jsx(Resizable, {
-        ref: headRef,
-        minHeight: 0,
-        minWidth: 0,
-        enable: {
-          right: orientation === 'horizontal',
-          bottom: orientation === 'vertical'
-        },
-        handleComponent: {
-          right: function right() {
-            return getHandleComponent('head');
-          },
-          bottom: function bottom() {
-            return getHandleComponent('head');
-          }
-        },
-        onResize: onResize,
-        onResizeStop: onResizeStop
-      }), /*#__PURE__*/jsx("div", {
-        className: classes.body,
-        onMouseDown: onMouseDown,
-        onTouchStart: onTouchStart,
-        children: !isSmallGap ? /*#__PURE__*/jsx("div", {
-          className: classes.bodyHandleIcon,
-          children: /*#__PURE__*/jsx(HandleIcon, {
-            orientation: orientation
-          })
-        }) : /*#__PURE__*/jsx("div", {
-          className: classNames((_classnames2 = {}, _defineProperty(_classnames2, classes.horizontalBodyHandle, orientation === 'horizontal'), _defineProperty(_classnames2, classes.verticalBodyHandle, orientation === 'vertical'), _defineProperty(_classnames2, classes.leftBodyHandle, handlePosition === 'left'), _defineProperty(_classnames2, classes.rightBodyHandle, handlePosition === 'right'), _defineProperty(_classnames2, classes.topBodyHandle, handlePosition === 'top'), _defineProperty(_classnames2, classes.bottomBodyHandle, handlePosition === 'bottom'), _classnames2)),
-          children: /*#__PURE__*/jsx("div", {
-            className: classes.bodyHandle,
-            children: /*#__PURE__*/jsx(HandleIcon, {
-              orientation: "vertical"
-            })
-          })
-        })
-      }), /*#__PURE__*/jsx(Resizable, {
-        ref: tailRef,
-        minHeight: 0,
-        minWidth: 0,
-        enable: {
-          left: orientation === 'horizontal',
-          top: orientation === 'vertical'
-        },
-        handleComponent: {
-          left: function left() {
-            return getHandleComponent('tail');
-          },
-          top: function top() {
-            return getHandleComponent('tail');
-          }
-        },
-        onResize: onResize,
-        onResizeStop: onResizeStop
-      })]
-    })
-  });
-};
-AdvancedSlider.defaultProps = {
-  orientation: 'horizontal',
-  valueFormatter: Math.floor,
-  displayFormatter: function displayFormatter(value) {
-    return value;
-  },
-  onChange: noop,
-  onStop: noop,
-  reversed: false,
-  editableHandles: true,
-  handleClasses: {}
-};
-var AdvancedSlider$1 = withSize({
-  monitorWidth: true,
-  monitorHeight: true
-})(AdvancedSlider);
-var HandleIcon = function HandleIcon(_ref2) {
-  var orientation = _ref2.orientation;
-  return orientation === 'horizontal' ? /*#__PURE__*/jsxs("svg", {
-    width: "8",
-    height: "13",
-    viewBox: "0 0 8 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsx("rect", {
-      x: "7.5",
-      y: "0.5",
-      width: "12",
-      height: "1",
-      transform: "rotate(90 7.5 0.5)"
-    }), /*#__PURE__*/jsx("rect", {
-      x: "4.5",
-      y: "0.5",
-      width: "12",
-      height: "1",
-      transform: "rotate(90 4.5 0.5)"
-    }), /*#__PURE__*/jsx("rect", {
-      x: "1.5",
-      y: "0.5",
-      width: "12",
-      height: "1",
-      transform: "rotate(90 1.5 0.5)"
-    })]
-  }) : /*#__PURE__*/jsxs("svg", {
-    width: "12",
-    height: "7",
-    viewBox: "0 0 12 7",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsx("rect", {
-      width: "12",
-      height: "1"
-    }), /*#__PURE__*/jsx("rect", {
-      y: "3",
-      width: "12",
-      height: "1"
-    }), /*#__PURE__*/jsx("rect", {
-      y: "6",
-      width: "12",
-      height: "1"
-    })]
-  });
-};
-var useStyles = makeStyles({
-  rootWrapper: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    zIndex: 100
-  },
-  root: {
-    position: 'absolute',
-    // Set this to absolute to prevent sizeme growth
-    width: '100%',
-    height: '100%',
-    zIndex: 100,
-    '&:hover $body': {
-      background: '#008BA366'
-    },
-    '&:hover $bodyHandle': {
-      visibility: 'visible'
-    }
-  },
-  horizontalRoot: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  verticalRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column'
-  },
-  body: {
-    position: 'relative',
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    userSelect: 'none',
-    background: '#3B3B3B66',
-    color: '#BDBDBD',
-    '& svg': {
-      fill: 'currentColor'
-    },
-    '&:hover': {
-      cursor: 'grab',
-      background: '#008BA366',
-      color: '#FFFFFF'
-    },
-    '&:active': {
-      cursor: 'grabbing'
-    },
-    '&:hover $bodyHandleIcon': {
-      visibility: 'visible'
-    }
-  },
-  horizontalBodyHandle: {
-    position: 'absolute',
-    bottom: -24
-  },
-  verticalBodyHandle: {
-    position: 'absolute',
-    left: -24
-  },
-  leftBodyHandle: {
-    position: 'absolute',
-    left: -24,
-    right: 'auto'
-  },
-  rightBodyHandle: {
-    position: 'absolute',
-    right: -24,
-    left: 'auto'
-  },
-  topBodyHandle: {
-    position: 'absolute',
-    top: -24,
-    bottom: 'auto'
-  },
-  bottomBodyHandle: {
-    position: 'absolute',
-    bottom: -24,
-    top: 'auto'
-  },
-  bodyHandle: {
-    width: 24,
-    height: 24,
-    borderRadius: '50%',
-    background: '#03BCD4',
-    color: '#FFFFFF',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    visibility: 'hidden'
-  },
-  bodyHandleIcon: {
-    visibility: 'hidden'
-  }
-});
-
-export { AdvancedSlider$1 as default };
-//# sourceMappingURL=AdvancedSlider.js.map
+import t from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import{useRef as o,useState as n,useEffect as i,useMemo as r}from"react";import{makeStyles as a}from"@material-ui/core";import l from"re-resizable";import{withSize as d}from"react-sizeme";import h from"classnames";import{noop as c}from"lodash";import{useThrottledCallback as u}from"../shared/useThrottledCallback.js";import{Handle as s}from"./Handle.js";import{jsx as m,jsxs as v}from"react/jsx-runtime";function f(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function p(e){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?f(Object(n),!0).forEach((function(o){t(e,o,n[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var g=function(a){var d,c,f=a.min,g=a.max,b=a.value,z=a.size,H=a.orientation,x=a.valueFormatter,B=a.displayFormatter,O=a.editableHandles,F=a.onChange,j=a.onStop,E=a.reversed,P=a.handlePosition,C=a.handleClasses,L=w(),S=o(null),D=o(null),R=n(x(null==b?void 0:b.at(0))),I=e(R,2),k=I[0],M=I[1],N=n(x(null==b?void 0:b.at(1))),W=e(N,2),X=W[0],Y=W[1],A=o(null),T=n(!1),$=e(T,2),q=$[0],G=$[1];i((function(){A.current||(M(Math.min(x(null==b?void 0:b.at(0)),x(null==b?void 0:b.at(1)))),Y(Math.max(x(null==b?void 0:b.at(0)),x(null==b?void 0:b.at(1)))))}),[null==b?void 0:b.at(0),null==b?void 0:b.at(1)]),i((function(){if("horizontal"===H){var t=z.width/(g-f)*(k-f),e=z.width/(g-f)*(g-X);S.current.updateSize({width:E?e:t,height:z.height}),D.current.updateSize({width:E?t:e,height:z.height})}else if("vertical"===H){var o=z.height/(g-f)*(k-f),n=z.height/(g-f)*(g-X);S.current.updateSize({width:z.width,height:E?n:o}),D.current.updateSize({width:z.width,height:E?o:n})}}),[f,g,k,X,z.width,z.height,H]),i((function(){return q?(document.addEventListener("mousemove",V),document.addEventListener("mouseup",Z),document.addEventListener("touchmove",_),document.addEventListener("touchend",tt)):(document.removeEventListener("mousemove",V),document.removeEventListener("mouseup",Z),document.removeEventListener("touchmove",_),document.removeEventListener("touchend",tt)),function(){document.removeEventListener("mousemove",V),document.removeEventListener("mouseup",Z),document.removeEventListener("touchmove",_),document.removeEventListener("touchend",tt)}}),[q]);var J=u((function(t,e,o){A.current="onResize Event";var n,i,r=o.clientWidth,a=o.clientHeight;"right"===e?E?i=x(g-r/z.width*(g-f)):n=x(f+r/z.width*(g-f)):"left"===e?E?n=x(f+r/z.width*(g-f)):i=x(g-r/z.width*(g-f)):"bottom"===e?E?i=x(g-a/z.height*(g-f)):n=x(f+a/z.height*(g-f)):"top"===e&&(E?n=x(f+a/z.height*(g-f)):i=x(g-a/z.height*(g-f))),n=Math.min(n,X),i=Math.max(i,k),M((function(t){return n||t})),Y((function(t){return i||t})),F([n||k,i||X])})),K=u((function(){A.current=null,j()})),Q=function(t,e){A.current={xPos:t,yPos:e,head:k,tail:X}},U=function(t,e){if(A.current){var o;"horizontal"===H?o=(A.current.xPos-t)/z.width*(g-f):"vertical"===H&&(o=(A.current.yPos-e)/z.height*(g-f));var n,i,r=A.current.head-o*(E?-1:1),a=A.current.tail-o*(E?-1:1),l=A.current.tail-A.current.head;r<=f?(n=f,i=f+l):a>=g?(n=g-l,i=g):(n=r,i=a),n=x(n),i=x(i),M(n),Y(i),F([n,i])}},V=u((function(t){U(t.clientX,t.clientY)})),Z=u((function(){A.current=null,G(!1)})),_=u((function(t){U(t.touches[0].pageX,t.touches[0].pageY)})),tt=u((function(){A.current=null,G(!1)})),et=u((function(t){M(t),F([t,X])})),ot=u((function(t){Y(t),F([k,t])})),nt=r((function(){return(X-k)/(g-f)*("vertical"===H?z.height:z.width)<30}),[f,g,k,X]),it=function(t){var e={min:f,max:X,value:k,onChange:et},o={min:k,max:g,value:X,onChange:ot};return"head"===t?m(s,p({placement:"head",readOnly:!O,displayFormatter:B,orientation:H,classes:C},E?o:e)):"tail"===t?m(s,p({placement:"tail",readOnly:!O,displayFormatter:B,orientation:H,classes:C},E?e:o)):null};return m("div",{className:L.rootWrapper,children:v("div",{className:h(L.root,(d={},t(d,L.horizontalRoot,"horizontal"===H),t(d,L.verticalRoot,"vertical"===H),d)),children:[m(l,{ref:S,minHeight:0,minWidth:0,enable:{right:"horizontal"===H,bottom:"vertical"===H},handleComponent:{right:function(){return it("head")},bottom:function(){return it("head")}},onResize:J,onResizeStop:K}),m("div",{className:L.body,onMouseDown:function(t){Q(t.clientX,t.clientY),G(!0)},onTouchStart:function(t){Q(t.touches[0].pageX,t.touches[0].pageY),G(!0)},children:m("div",nt?{className:h((c={},t(c,L.horizontalBodyHandle,"horizontal"===H),t(c,L.verticalBodyHandle,"vertical"===H),t(c,L.leftBodyHandle,"left"===P),t(c,L.rightBodyHandle,"right"===P),t(c,L.topBodyHandle,"top"===P),t(c,L.bottomBodyHandle,"bottom"===P),c)),children:m("div",{className:L.bodyHandle,children:m(y,{orientation:"vertical"})})}:{className:L.bodyHandleIcon,children:m(y,{orientation:H})})}),m(l,{ref:D,minHeight:0,minWidth:0,enable:{left:"horizontal"===H,top:"vertical"===H},handleComponent:{left:function(){return it("tail")},top:function(){return it("tail")}},onResize:J,onResizeStop:K})]})})};g.defaultProps={orientation:"horizontal",valueFormatter:Math.floor,displayFormatter:function(t){return t},onChange:c,onStop:c,reversed:!1,editableHandles:!0,handleClasses:{}};var b=d({monitorWidth:!0,monitorHeight:!0})(g),y=function(t){var e=t.orientation;return v("svg","horizontal"===e?{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[m("rect",{x:"7.5",y:"0.5",width:"12",height:"1",transform:"rotate(90 7.5 0.5)"}),m("rect",{x:"4.5",y:"0.5",width:"12",height:"1",transform:"rotate(90 4.5 0.5)"}),m("rect",{x:"1.5",y:"0.5",width:"12",height:"1",transform:"rotate(90 1.5 0.5)"})]}:{width:"12",height:"7",viewBox:"0 0 12 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[m("rect",{width:"12",height:"1"}),m("rect",{y:"3",width:"12",height:"1"}),m("rect",{y:"6",width:"12",height:"1"})]})},w=a({rootWrapper:{position:"relative",width:"100%",height:"100%",zIndex:100},root:{position:"absolute",width:"100%",height:"100%",zIndex:100,"&:hover $body":{background:"#008BA366"},"&:hover $bodyHandle":{visibility:"visible"}},horizontalRoot:{display:"flex",alignItems:"center"},verticalRoot:{display:"flex",alignItems:"center",flexDirection:"column"},body:{position:"relative",flex:1,width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",background:"#3B3B3B66",color:"#BDBDBD","& svg":{fill:"currentColor"},"&:hover":{cursor:"grab",background:"#008BA366",color:"#FFFFFF"},"&:active":{cursor:"grabbing"},"&:hover $bodyHandleIcon":{visibility:"visible"}},horizontalBodyHandle:{position:"absolute",bottom:-24},verticalBodyHandle:{position:"absolute",left:-24},leftBodyHandle:{position:"absolute",left:-24,right:"auto"},rightBodyHandle:{position:"absolute",right:-24,left:"auto"},topBodyHandle:{position:"absolute",top:-24,bottom:"auto"},bottomBodyHandle:{position:"absolute",bottom:-24,top:"auto"},bodyHandle:{width:24,height:24,borderRadius:"50%",background:"#03BCD4",color:"#FFFFFF",display:"flex",alignItems:"center",justifyContent:"center",visibility:"hidden"},bodyHandleIcon:{visibility:"hidden"}});export{b as default};