@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -1,136 +0,0 @@
-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';
-import styles from '../Slider/Slider.module.css';
-const sizeYClassNames = {
-    none: styles['Slider--sizeY-none'],
-    [SizeType.COMPACT]: styles['Slider--sizeY-compact']
-};
-export const UniversalSlider = ({ min =0 , max =100 , step , value =[
-    0,
-    0
-] , defaultValue , onChange , getRootRef , disabled , className , ...restProps })=>{
-    const [start, end] = value;
-    const isRange = start != null;
-    const gesture = React.useRef({
-        dragging: false,
-        startX: 0,
-        containerWidth: 0
-    }).current;
-    const container = useExternRef(getRootRef);
-    const thumbStart = React.useRef(null);
-    const thumbEnd = React.useRef(null);
-    const { sizeY ='none'  } = useAdaptivity();
-    const offsetToValue = (absolute)=>{
-        return rescale(absolute, [
-            0,
-            gesture.containerWidth
-        ], [
-            min,
-            max
-        ], {
-            step
-        });
-    };
-    const updateRange = (nextValue)=>{
-        if (start == null) {
-            return [
-                null,
-                nextValue
-            ];
-        }
-        const { dragging  } = gesture;
-        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;
-    };
-    const snapDirection = (pos, target)=>{
-        if (target === thumbStart.current) {
-            return 'start';
-        }
-        if (target === thumbEnd.current) {
-            return 'end';
-        }
-        return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
-    };
-    const onStart = (e)=>{
-        const boundingRect = container.current?.getBoundingClientRect();
-        gesture.containerWidth = boundingRect?.width ?? 0;
-        const absolutePosition = e.startX - (boundingRect?.left ?? 0);
-        const pos = offsetToValue(absolutePosition);
-        gesture.dragging = snapDirection(pos, e.originalEvent.target);
-        gesture.startX = absolutePosition;
-        onChange?.(updateRange(pos), e);
-        e.originalEvent.stopPropagation();
-    };
-    const onMove = (e)=>{
-        onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
-        e.originalEvent.stopPropagation();
-        e.originalEvent.preventDefault();
-    };
-    const onEnd = (e)=>{
-        gesture.dragging = false;
-        e.originalEvent.stopPropagation();
-    };
-    const toPercent = (v)=>(v - min) / (max - min) * 100;
-    const draggerStyle = isRange ? {
-        width: `${toPercent(end) - toPercent(start ?? 0)}%`,
-        left: `${toPercent(start ?? 0)}%`
-    } : {
-        width: `${toPercent(end)}%`
-    };
-    return /*#__PURE__*/ React.createElement(Touch, {
-        "data-value": isRange ? value.join(',') : value,
-        ...restProps,
-        ...disabled ? {} : {
-            onStart,
-            onMove,
-            onEnd
-        },
-        className: classNames(styles['Slider'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['Slider--disabled'], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        ref: container,
-        className: styles['Slider__in']
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Slider__dragger'],
-        style: draggerStyle
-    }, isRange && /*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['Slider__thumb'], styles['Slider__thumb--start']),
-        ref: thumbStart
-    }), /*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['Slider__thumb'], styles['Slider__thumb--end']),
-        ref: thumbEnd
-    }))));
-};
-
-//# sourceMappingURL=UniversalSlider.js.map

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

@@ -1 +0,0 @@
-{"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","styles","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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"}