@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/RangeSlider/UniversalSlider.js

@@ -1,133 +1,154 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "disabled", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { rescale } from '../../helpers/math';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useExternRef } from '../../hooks/useExternRef';
-import { SizeType } from '../../lib/adaptivity';
-import { Touch } from '../Touch/Touch';
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSlider--sizeY-none"
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { rescale } from "../../helpers/math";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
+import { SizeType } from "../../lib/adaptivity";
+import { Touch } from "../Touch/Touch";
+var sizeYClassNames = _define_property({
+    none: "vkuiSlider--sizeY-none"
 }, SizeType.COMPACT, "vkuiSlider--sizeY-compact");
-export var UniversalSlider = function UniversalSlider(_ref) {
-  var _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    step = _ref.step,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? [0, 0] : _ref$value,
-    defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    getRootRef = _ref.getRootRef,
-    disabled = _ref.disabled,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _value = _slicedToArray(value, 2),
-    start = _value[0],
-    end = _value[1];
-  var isRange = start != null;
-  var gesture = React.useRef({
-    dragging: false,
-    startX: 0,
-    containerWidth: 0
-  }).current;
-  var container = useExternRef(getRootRef);
-  var thumbStart = React.useRef(null);
-  var thumbEnd = React.useRef(null);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var offsetToValue = function offsetToValue(absolute) {
-    return rescale(absolute, [0, gesture.containerWidth], [min, max], {
-      step: step
-    });
-  };
-  var updateRange = function updateRange(nextValue) {
-    if (start == null) {
-      return [null, nextValue];
-    }
-    var dragging = gesture.dragging;
-    if (dragging === 'start') {
-      if (nextValue > end) {
-        // "перехватиться", если перетянули за конец
-        gesture.dragging = 'end';
-        return [end, nextValue];
-      }
-      return [nextValue, end];
-    }
-    if (dragging === 'end') {
-      if (nextValue < start) {
-        // "перехватиться", если перетянули за начало
-        gesture.dragging = 'start';
-        return [nextValue, start];
-      }
-      return [start, nextValue];
-    }
-    return value;
-  };
-  var snapDirection = function snapDirection(pos, target) {
-    if (target === thumbStart.current) {
-      return 'start';
-    }
-    if (target === thumbEnd.current) {
-      return 'end';
-    }
-    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
-  };
-  var onStart = function onStart(e) {
-    var _container$current, _boundingRect$width, _boundingRect$left;
-    var boundingRect = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.getBoundingClientRect();
-    gesture.containerWidth = (_boundingRect$width = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _boundingRect$width !== void 0 ? _boundingRect$width : 0;
-    var absolutePosition = e.startX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
-    var pos = offsetToValue(absolutePosition);
-    gesture.dragging = snapDirection(pos, e.originalEvent.target);
-    gesture.startX = absolutePosition;
-    onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(pos), e);
-    e.originalEvent.stopPropagation();
-  };
-  var onMove = function onMove(e) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
-    e.originalEvent.stopPropagation();
-    e.originalEvent.preventDefault();
-  };
-  var onEnd = function onEnd(e) {
-    gesture.dragging = false;
-    e.originalEvent.stopPropagation();
-  };
-  var toPercent = function toPercent(v) {
-    return (v - min) / (max - min) * 100;
-  };
-  var draggerStyle = isRange ? {
-    width: "".concat(toPercent(end) - toPercent(start !== null && start !== void 0 ? start : 0), "%"),
-    left: "".concat(toPercent(start !== null && start !== void 0 ? start : 0), "%")
-  } : {
-    width: "".concat(toPercent(end), "%")
-  };
-  return /*#__PURE__*/React.createElement(Touch, _extends({
-    "data-value": isRange ? value.join(',') : value
-  }, restProps, disabled ? {} : {
-    onStart: onStart,
-    onMove: onMove,
-    onEnd: onEnd
-  }, {
-    className: classNames("vkuiSlider", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiSlider--disabled", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: container,
-    className: "vkuiSlider__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSlider__dragger",
-    style: draggerStyle
-  }, isRange && /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
-    ref: thumbStart
-  }), /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
-    ref: thumbEnd
-  }))));
+export var UniversalSlider = function(_param) {
+    var _param_min = _param.min, min = _param_min === void 0 ? 0 : _param_min, _param_max = _param.max, max = _param_max === void 0 ? 100 : _param_max, step = _param.step, _param_value = _param.value, value = _param_value === void 0 ? [
+        0,
+        0
+    ] : _param_value, defaultValue = _param.defaultValue, onChange = _param.onChange, getRootRef = _param.getRootRef, disabled = _param.disabled, className = _param.className, restProps = _object_without_properties(_param, [
+        "min",
+        "max",
+        "step",
+        "value",
+        "defaultValue",
+        "onChange",
+        "getRootRef",
+        "disabled",
+        "className"
+    ]);
+    var _value = _sliced_to_array(value, 2), start = _value[0], end = _value[1];
+    var isRange = start != null;
+    var gesture = React.useRef({
+        dragging: false,
+        startX: 0,
+        containerWidth: 0
+    }).current;
+    var container = useExternRef(getRootRef);
+    var thumbStart = React.useRef(null);
+    var thumbEnd = React.useRef(null);
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var offsetToValue = function(absolute) {
+        return rescale(absolute, [
+            0,
+            gesture.containerWidth
+        ], [
+            min,
+            max
+        ], {
+            step: step
+        });
+    };
+    var updateRange = function(nextValue) {
+        if (start == null) {
+            return [
+                null,
+                nextValue
+            ];
+        }
+        var dragging = gesture.dragging;
+        if (dragging === "start") {
+            if (nextValue > end) {
+                // "перехватиться", если перетянули за конец
+                gesture.dragging = "end";
+                return [
+                    end,
+                    nextValue
+                ];
+            }
+            return [
+                nextValue,
+                end
+            ];
+        }
+        if (dragging === "end") {
+            if (nextValue < start) {
+                // "перехватиться", если перетянули за начало
+                gesture.dragging = "start";
+                return [
+                    nextValue,
+                    start
+                ];
+            }
+            return [
+                start,
+                nextValue
+            ];
+        }
+        return value;
+    };
+    var snapDirection = function(pos, target) {
+        if (target === thumbStart.current) {
+            return "start";
+        }
+        if (target === thumbEnd.current) {
+            return "end";
+        }
+        return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? "start" : "end";
+    };
+    var onStart = function(e) {
+        var _container_current;
+        var boundingRect = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect();
+        var _boundingRect_width;
+        gesture.containerWidth = (_boundingRect_width = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _boundingRect_width !== void 0 ? _boundingRect_width : 0;
+        var _boundingRect_left;
+        var absolutePosition = e.startX - ((_boundingRect_left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect_left !== void 0 ? _boundingRect_left : 0);
+        var pos = offsetToValue(absolutePosition);
+        gesture.dragging = snapDirection(pos, e.originalEvent.target);
+        gesture.startX = absolutePosition;
+        onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(pos), e);
+        e.originalEvent.stopPropagation();
+    };
+    var onMove = function(e) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
+        e.originalEvent.stopPropagation();
+        e.originalEvent.preventDefault();
+    };
+    var onEnd = function(e) {
+        gesture.dragging = false;
+        e.originalEvent.stopPropagation();
+    };
+    var toPercent = function(v) {
+        return (v - min) / (max - min) * 100;
+    };
+    var draggerStyle = isRange ? {
+        width: "".concat(toPercent(end) - toPercent(start !== null && start !== void 0 ? start : 0), "%"),
+        left: "".concat(toPercent(start !== null && start !== void 0 ? start : 0), "%")
+    } : {
+        width: "".concat(toPercent(end), "%")
+    };
+    return /*#__PURE__*/ React.createElement(Touch, _object_spread_props(_object_spread({
+        "data-value": isRange ? value.join(",") : value
+    }, restProps, disabled ? {} : {
+        onStart: onStart,
+        onMove: onMove,
+        onEnd: onEnd
+    }), {
+        className: classNames("vkuiSlider", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiSlider--disabled", className)
+    }), /*#__PURE__*/ React.createElement("div", {
+        ref: container,
+        className: "vkuiSlider__in"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSlider__dragger",
+        style: draggerStyle
+    }, isRange && /*#__PURE__*/ React.createElement("span", {
+        className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
+        ref: thumbStart
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
+        ref: thumbEnd
+    }))));
 };
+
 //# sourceMappingURL=UniversalSlider.js.map

package/dist/components/RangeSlider/UniversalSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalSlider.js","names":["React","classNames","rescale","useAdaptivity","useExternRef","SizeType","Touch","sizeYClassNames","none","COMPACT","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","REGULAR"],"sources":["../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { rescale } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport styles from '../Slider/Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { rescale } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport styles from '../Slider/Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","rescale","useAdaptivity","useExternRef","SizeType","Touch","sizeYClassNames","none","COMPACT","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","data-value","join","REGULAR","div","ref","style","span"],"mappings":"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"}

package/dist/components/Removable/Removable.js

@@ -1,134 +1,120 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
-import * as React from 'react';
-import { Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useDOM } from '../../lib/dom';
-import { Platform } from '../../lib/platform';
-import { getTitleFromChildren } from '../../lib/utils';
-import { IconButton } from '../IconButton/IconButton';
-import { Tappable } from '../Tappable/Tappable';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+import { Icon24Cancel } from "@vkontakte/icons";
+import { classNames, noop } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useDOM } from "../../lib/dom";
+import { Platform } from "../../lib/platform";
+import { getTitleFromChildren } from "../../lib/utils";
+import { IconButton } from "../IconButton/IconButton";
+import { Tappable } from "../Tappable/Tappable";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
- */
-var RemovableIos = function RemovableIos(_ref) {
-  var onRemove = _ref.onRemove,
-    removePlaceholder = _ref.removePlaceholder,
-    removePlaceholderString = _ref.removePlaceholderString,
-    children = _ref.children;
-  var _useDOM = useDOM(),
-    window = _useDOM.window;
-  var removeButtonRef = React.useRef(null);
-  var disabledRef = React.useRef(true);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    removeOffset = _React$useState2[0],
-    updateRemoveOffset = _React$useState2[1];
-  useGlobalEventListener(window, 'click', function () {
-    if (removeOffset > 0) {
-      updateRemoveOffset(0);
-    }
-  }, {
-    capture: true
-  });
-  var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
-    if (removeOffset > 0) {
-      var _removeButtonRef$curr;
-      removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef$curr = removeButtonRef.current) === null || _removeButtonRef$curr === void 0 ? void 0 : _removeButtonRef$curr.focus();
-    } else {
-      disabledRef.current = true;
-    }
-  };
-  var onRemoveActivateClick = function onRemoveActivateClick(e) {
-    e.stopPropagation();
-    if (!removeButtonRef.current) {
-      return;
-    }
-    var offsetWidth = removeButtonRef.current.offsetWidth;
-    disabledRef.current = false;
-    updateRemoveOffset(offsetWidth);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content",
-    style: {
-      transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
-    },
-    onTransitionEnd: onRemoveTransitionEnd
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    hasActive: false,
-    hasHover: false,
-    "aria-label": removePlaceholderString,
-    className: classNames("vkuiRemovable__action", "vkuiRemovable__toggle"),
-    onClick: onRemoveActivateClick,
-    disabled: removeOffset > 0
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "vkuiRemovable__toggle-in",
-    role: "presentation"
-  })), children, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__offset",
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement(Tappable, {
-    Component: "button",
-    hasActive: false,
-    hasHover: false,
-    disabled: disabledRef.current,
-    getRootRef: removeButtonRef,
-    className: "vkuiRemovable__remove",
-    onClick: onRemove
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__remove-in"
-  }, removePlaceholder)));
+ */ var RemovableIos = function(param) {
+    var onRemove = param.onRemove, removePlaceholder = param.removePlaceholder, removePlaceholderString = param.removePlaceholderString, children = param.children;
+    var window = useDOM().window;
+    var removeButtonRef = React.useRef(null);
+    var disabledRef = React.useRef(true);
+    var _React_useState = _sliced_to_array(React.useState(0), 2), removeOffset = _React_useState[0], updateRemoveOffset = _React_useState[1];
+    useGlobalEventListener(window, "click", function() {
+        if (removeOffset > 0) {
+            updateRemoveOffset(0);
+        }
+    }, {
+        capture: true
+    });
+    var onRemoveTransitionEnd = function() {
+        if (removeOffset > 0) {
+            var _removeButtonRef_current;
+            removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef_current = removeButtonRef.current) === null || _removeButtonRef_current === void 0 ? void 0 : _removeButtonRef_current.focus();
+        } else {
+            disabledRef.current = true;
+        }
+    };
+    var onRemoveActivateClick = function(e) {
+        e.stopPropagation();
+        if (!removeButtonRef.current) {
+            return;
+        }
+        var offsetWidth = removeButtonRef.current.offsetWidth;
+        disabledRef.current = false;
+        updateRemoveOffset(offsetWidth);
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiRemovable__content", "vkuiInternalRemovable__content"),
+        style: {
+            transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
+        },
+        onTransitionEnd: onRemoveTransitionEnd
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        hasActive: false,
+        hasHover: false,
+        "aria-label": removePlaceholderString,
+        className: classNames("vkuiRemovable__action", "vkuiRemovable__toggle"),
+        onClick: onRemoveActivateClick,
+        disabled: removeOffset > 0
+    }, /*#__PURE__*/ React.createElement("i", {
+        className: "vkuiRemovable__toggle-in",
+        role: "presentation"
+    })), children, /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiRemovable__offset",
+        "aria-hidden": true
+    }), /*#__PURE__*/ React.createElement(Tappable, {
+        Component: "button",
+        hasActive: false,
+        hasHover: false,
+        disabled: disabledRef.current,
+        getRootRef: removeButtonRef,
+        className: "vkuiRemovable__remove",
+        onClick: onRemove
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiRemovable__remove-in"
+    }, removePlaceholder)));
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
- */
-export var Removable = function Removable(_ref2) {
-  var getRootRef = _ref2.getRootRef,
-    children = _ref2.children,
-    _ref2$onRemove = _ref2.onRemove,
-    onRemove = _ref2$onRemove === void 0 ? noop : _ref2$onRemove,
-    _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? 'center' : _ref2$align,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  var platform = usePlatform();
-  var ref = useExternRef(getRootRef);
-  var onRemoveClick = function onRemoveClick(e) {
-    e.preventDefault();
-    onRemove(e);
-  };
-  var removePlaceholderString = getTitleFromChildren(removePlaceholder);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: ref,
-    className: classNames("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], className)
-  }), platform !== Platform.IOS && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content"
-  }, children, /*#__PURE__*/React.createElement(IconButton, {
-    activeMode: "opacity",
-    hoverMode: "opacity",
-    className: "vkuiRemovable__action",
-    onClick: onRemoveClick,
-    "aria-label": removePlaceholderString
-  }, /*#__PURE__*/React.createElement(Icon24Cancel, {
-    role: "presentation"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__offset",
-    "aria-hidden": true
-  })), platform === Platform.IOS && /*#__PURE__*/React.createElement(RemovableIos, {
-    onRemove: onRemoveClick,
-    removePlaceholder: removePlaceholder,
-    removePlaceholderString: removePlaceholderString
-  }, children));
-};
-var styles = {
-  "Removable--align-start": "vkuiRemovable--align-start",
-  "Removable--align-center": "vkuiRemovable--align-center"
+ */ export var Removable = function(_param) {
+    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, restProps = _object_without_properties(_param, [
+        "getRootRef",
+        "children",
+        "onRemove",
+        "removePlaceholder",
+        "align",
+        "className"
+    ]);
+    var platform = usePlatform();
+    var ref = useExternRef(getRootRef);
+    var onRemoveClick = function(e) {
+        e.preventDefault();
+        onRemove(e);
+    };
+    var removePlaceholderString = getTitleFromChildren(removePlaceholder);
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        ref: ref,
+        className: classNames(platform === Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", className)
+    }), platform !== Platform.IOS && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiRemovable__content", "vkuiInternalRemovable__content")
+    }, children, /*#__PURE__*/ React.createElement(IconButton, {
+        activeMode: "opacity",
+        hoverMode: "opacity",
+        className: "vkuiRemovable__action",
+        onClick: onRemoveClick,
+        "aria-label": removePlaceholderString
+    }, /*#__PURE__*/ React.createElement(Icon24Cancel, {
+        role: "presentation"
+    })), /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiRemovable__offset",
+        "aria-hidden": true
+    })), platform === Platform.IOS && /*#__PURE__*/ React.createElement(RemovableIos, {
+        onRemove: onRemoveClick,
+        removePlaceholder: removePlaceholder,
+        removePlaceholderString: removePlaceholderString
+    }, children));
 };
+
 //# sourceMappingURL=Removable.js.map