etudes 0.29.0 → 0.30.0

package/lib/Slider.d.ts

@@ -19,7 +19,7 @@ export declare type Props = {
     knobHeight?: number;
     knobWidth?: number;
     orientation?: Orientation;
-    defaultPosition?: number;
+    position?: number;
     onDragEnd?: () => void;
     onDragStart?: () => void;
     onPositionChange?: (position: number) => void;
@@ -29,8 +29,8 @@ export declare type Props = {
     labelCSS?: CSSProp<any>;
     breakpoints?: readonly number[];
     autoSnap?: boolean;
-    defaultIndex?: number;
+    index?: number;
     onIndexChange?: (index: number) => void;
 };
 export declare function generateBreakpoints(length: number): readonly number[];
-export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, defaultPosition, isLabelVisible, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, defaultIndex, onIndexChange, }: Props): JSX.Element;
+export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, position, isLabelVisible, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, index, onIndexChange, }: Props): JSX.Element;

package/lib/Slider.js

@@ -72,11 +72,7 @@ function generateBreakpoints(length) {
 }
 exports.generateBreakpoints = generateBreakpoints;
 function Slider(_a) {
-    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.defaultPosition, defaultPosition = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? false : _k, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
-    function setLivePosition(value) {
-        livePosition.current = value;
-        setPosition(value);
-    }
+    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.position, position = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? true : _k, index = _a.index, onIndexChange = _a.onIndexChange;
     function getClosestIndex() {
         if (!breakpoints)
             return -1;
@@ -84,7 +80,7 @@ function Slider(_a) {
         var minDelta = NaN;
         for (var i = 0, n = breakpoints.length; i < n; i++) {
             var breakpoint = getPositionByIndex(i);
-            var delta = Math.abs(position - breakpoint);
+            var delta = Math.abs(livePosition.current - breakpoint);
             if (isNaN(minDelta) || (delta < minDelta)) {
                 minDelta = delta;
                 index = i;
@@ -97,6 +93,12 @@ function Slider(_a) {
             return NaN;
         return breakpoints[index];
     }
+    function setLivePosition(value) {
+        livePosition.current = value;
+        _setPosition(value);
+        if (breakpoints)
+            _setIndex(getClosestIndex());
+    }
     function initInteractivity() {
         var knob = knobRef.current;
         if (!knob || interactjs_1.default.isSet(knob))
@@ -124,7 +126,7 @@ function Slider(_a) {
     function onKnobDragMove(delta) {
         var _a;
         var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        var naturalPosition = isInverted ? (1 - livePosition.current) : livePosition.current;
+        var naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current;
         var naturalNewPositionX = naturalPosition * rect.width + delta;
         var naturalNewPositionY = naturalPosition * rect.height + delta;
         var naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width));
@@ -145,10 +147,11 @@ function Slider(_a) {
     }
     var rootRef = (0, react_1.useRef)(null);
     var knobRef = (0, react_1.useRef)(null);
-    var livePosition = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
-    var _l = __read((0, react_1.useState)(livePosition.current), 2), position = _l[0], setPosition = _l[1];
-    var _m = __read((0, react_1.useState)(undefined), 2), isDragging = _m[0], setIsDragging = _m[1];
-    var naturalPosition = isInverted ? 1 - position : position;
+    var livePosition = (0, react_1.useRef)((breakpoints !== undefined && index !== undefined) ? getPositionByIndex(index) : position);
+    var _l = __read((0, react_1.useState)(livePosition.current), 2), _position = _l[0], _setPosition = _l[1];
+    var _m = __read((0, react_1.useState)(getClosestIndex()), 2), _index = _m[0], _setIndex = _m[1];
+    var _o = __read((0, react_1.useState)(undefined), 2), isDragging = _o[0], setIsDragging = _o[1];
+    var naturalPosition = isInverted ? 1 - _position : _position;
     (0, react_1.useEffect)(function () {
         initInteractivity();
         return function () {
@@ -156,15 +159,35 @@ function Slider(_a) {
         };
     }, []);
     (0, react_1.useEffect)(function () {
-        snapToClosestBreakpointIfNeeded();
-    }, [autoSnap]);
+        if (breakpoints && index !== undefined)
+            return;
+        if (position === livePosition.current)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(position);
+    }, [position]);
+    (0, react_1.useEffect)(function () {
+        if (!breakpoints || index === undefined)
+            return;
+        var position = getPositionByIndex(index);
+        if (position === livePosition.current)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(position);
+    }, [index]);
     (0, react_1.useEffect)(function () {
         if (onlyDispatchesOnDragEnd && isDragging)
             return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position);
-        if (breakpoints)
-            onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
-    }, [position]);
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(_position);
+    }, [_position]);
+    (0, react_1.useEffect)(function () {
+        if (onlyDispatchesOnDragEnd && isDragging)
+            return;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(_index);
+    }, [_index]);
+    (0, react_1.useEffect)(function () {
+        snapToClosestBreakpointIfNeeded();
+    }, [autoSnap]);
     return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
         react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
                 top: 0,
@@ -175,22 +198,22 @@ function Slider(_a) {
             } }),
         react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
                 left: '50%',
-                top: "".concat(position * 100, "%"),
+                top: "".concat(_position * 100, "%"),
                 transition: isDragging === false ? 'top 100ms ease-out' : 'none',
             } : {
-                left: "".concat(position * 100, "%"),
+                left: "".concat(_position * 100, "%"),
                 top: '50%',
                 transition: isDragging === false ? 'left 100ms ease-out' : 'none',
             })) },
             react_1.default.createElement(StyledKnob, { className: (0, classnames_1.default)({
-                    'at-end': isInverted ? (position === 0) : (position === 1),
-                    'at-start': isInverted ? (position === 1) : (position === 0),
+                    'at-end': isInverted ? (_position === 0) : (_position === 1),
+                    'at-start': isInverted ? (_position === 1) : (_position === 0),
                     'dragging': isDragging === true,
                     'idle': isDragging === false,
                 }), css: knobCSS, style: {
                     height: "".concat(knobHeight, "px"),
                     width: "".concat(knobWidth, "px"),
-                } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(position, getClosestIndex()))))),
+                } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(_position, getClosestIndex()))))),
         react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
                 bottom: 0,
                 height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nexport type GutterCSSProps = Readonly<{\n  orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobHeight: number\n}>\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Indicates if the label is visible by the knob. Note that this is only applicable if\n   * `labelProvider` is set.\n   */\n  isLabelVisible?: boolean\n\n  /**\n   * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n   * slider position and cloest breakpoint index (if breakpoints are provided).\n   *\n   * @param position - The current slider position.\n   * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n   *                breakpoints are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * The default position. This is ignored if `defaultIndex` and breakpoints are provided.\n   */\n  defaultPosition?: number\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   */\n  onPositionChange?: (position: number) => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n\n  // The following props are only used if `breakpoints` are provided.\n\n  /**\n   * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n   * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n   * ensure that there are at least two: one for the start of the gutter and one for the end.\n   */\n  breakpoints?: readonly number[]\n\n  /**\n   * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n   * provided.\n   */\n  autoSnap?: boolean\n\n  /**\n   * The default index. This is only used if breakpoints are provided. On the other hand, if\n   * breakpoints are provided, the default position will be calculated based on this value, making\n   * `defaultPosition` irrelevant.\n   */\n  defaultIndex?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n   * that this is only invoked if breakpoints are provided, because otherwise there will be no\n   * indexes.\n   *\n   * @param index - The current breakpoint index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const pos = interval * i\n    return pos\n  })\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  defaultPosition = 0,\n  isLabelVisible = true,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n  breakpoints,\n  autoSnap = false,\n  defaultIndex,\n  onIndexChange,\n}: Props) {\n  /**\n   * Sets the current position. The position should be normalized. That is, inversion should be\n   * taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param value - The value to set the position to.\n   */\n  function setLivePosition(value: number) {\n    livePosition.current = value\n    setPosition(value)\n  }\n\n  /**\n   * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n   * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n   *\n   * @returns The closest index.\n   */\n  function getClosestIndex(): number {\n    if (!breakpoints) return -1\n\n    let index = 0\n    let minDelta = NaN\n\n    for (let i = 0, n = breakpoints.length; i < n; i++) {\n      const breakpoint = getPositionByIndex(i)\n      const delta = Math.abs(position - breakpoint)\n\n      if (isNaN(minDelta) || (delta < minDelta)) {\n        minDelta = delta\n        index = i\n      }\n    }\n\n    return index\n  }\n\n  /**\n   * Gets the position by breakpoint index. This value ranges between 0 - 1, inclusive.\n   *\n   * @param index - The breakpoint index.\n   *\n   * @returns The position. If for whatever reason the position cannot be determined, NaN is\n   *          returned.\n   */\n  function getPositionByIndex(index: number): number {\n    if (!breakpoints) return NaN\n    return breakpoints[index]\n  }\n\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob) return\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging.\n   */\n  function onKnobDragStart() {\n    setIsDragging(true)\n\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? (1 - livePosition.current) : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? (1 - naturalNewPosition) : naturalNewPosition\n\n    setIsDragging(true)\n    setLivePosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging.\n   */\n  function onKnobDragStop() {\n    setIsDragging(false)\n    snapToClosestBreakpointIfNeeded()\n\n    onDragEnd?.()\n  }\n\n  /**\n   * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n   * auto-snapping feature is disabled, this method does nothing.\n   */\n  function snapToClosestBreakpointIfNeeded() {\n    if (!autoSnap || !breakpoints) return\n    const position = getPositionByIndex(getClosestIndex())\n    setLivePosition(position)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n  const livePosition = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\n\n  const [position, setPosition] = useState(livePosition.current)\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - position : position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    snapToClosestBreakpointIfNeeded()\n  }, [autoSnap])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onPositionChange?.(position)\n    if (breakpoints) onIndexChange?.(getClosestIndex())\n  }, [position])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${position*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${position*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging === true,\n            'idle': isDragging === false,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {breakpoints && isLabelVisible && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position, getClosestIndex())}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps>`\n  background: #fff;\n  position: absolute;\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nexport type GutterCSSProps = Readonly<{\n  orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobHeight: number\n}>\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Indicates if the label is visible by the knob. Note that this is only applicable if\n   * `labelProvider` is set.\n   */\n  isLabelVisible?: boolean\n\n  /**\n   * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n   * slider position and cloest breakpoint index (if breakpoints are provided).\n   *\n   * @param position - The current slider position.\n   * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n   *                breakpoints are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * The current position. This is ignored if `index` and `breakpoints` are provided.\n   */\n  position?: number\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   */\n  onPositionChange?: (position: number) => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n\n  // The following props are only used if `breakpoints` are provided.\n\n  /**\n   * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n   * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n   * ensure that there are at least two: one for the start of the gutter and one for the end.\n   */\n  breakpoints?: readonly number[]\n\n  /**\n   * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n   * provided.\n   */\n  autoSnap?: boolean\n\n  /**\n   * The current index. This is only used if breakpoints are provided. On the other hand, if\n   * breakpoints are provided, the current position will be calculated based on this value, making\n   * `position` irrelevant.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n   * that this is only invoked if breakpoints are provided, because otherwise there will be no\n   * indexes.\n   *\n   * @param index - The current breakpoint index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const pos = interval * i\n    return pos\n  })\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  position = 0,\n  isLabelVisible = true,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n  breakpoints,\n  autoSnap = true,\n  index,\n  onIndexChange,\n}: Props) {\n  /**\n   * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n   * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n   *\n   * @returns The closest index.\n   */\n  function getClosestIndex(): number {\n    if (!breakpoints) return -1\n\n    let index = 0\n    let minDelta = NaN\n\n    for (let i = 0, n = breakpoints.length; i < n; i++) {\n      const breakpoint = getPositionByIndex(i)\n      const delta = Math.abs(livePosition.current - breakpoint)\n\n      if (isNaN(minDelta) || (delta < minDelta)) {\n        minDelta = delta\n        index = i\n      }\n    }\n\n    return index\n  }\n\n  /**\n   * Gets the position by breakpoint index. This value ranges between 0 - 1, inclusive.\n   *\n   * @param index - The breakpoint index.\n   *\n   * @returns The position. If for whatever reason the position cannot be determined, NaN is\n   *          returned.\n   */\n  function getPositionByIndex(index: number): number {\n    if (!breakpoints) return NaN\n    return breakpoints[index]\n  }\n\n  /**\n   * Sets the current live position. The live position is different from the position state value.\n   * Because states are asynchronous by nature, this live position value is used to record position\n   * changes when drag event happens. This position should be normalized. That is, inversion should\n   * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param value - The value to set the position to.\n   */\n  function setLivePosition(value: number) {\n    livePosition.current = value\n    _setPosition(value)\n    if (breakpoints) _setIndex(getClosestIndex())\n  }\n\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob) return\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging.\n   */\n  function onKnobDragStart() {\n    setIsDragging(true)\n\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? (1 - naturalNewPosition) : naturalNewPosition\n\n    setIsDragging(true)\n    setLivePosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging.\n   */\n  function onKnobDragStop() {\n    setIsDragging(false)\n    snapToClosestBreakpointIfNeeded()\n\n    onDragEnd?.()\n  }\n\n  /**\n   * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n   * auto-snapping feature is disabled, this method does nothing.\n   */\n  function snapToClosestBreakpointIfNeeded() {\n    if (!autoSnap || !breakpoints) return\n    const position = getPositionByIndex(getClosestIndex())\n    setLivePosition(position)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const livePosition = useRef((breakpoints !== undefined && index !== undefined) ? getPositionByIndex(index) : position)\n\n  const [_position, _setPosition] = useState(livePosition.current)\n  const [_index, _setIndex] = useState(getClosestIndex())\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - _position : _position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (breakpoints && index !== undefined) return\n    if (position === livePosition.current) return\n\n    setIsDragging(undefined)\n    setLivePosition(position)\n  }, [position])\n\n  useEffect(() => {\n    if (!breakpoints || index === undefined) return\n\n    const position = getPositionByIndex(index)\n\n    if (position === livePosition.current) return\n\n    setIsDragging(undefined)\n    setLivePosition(position)\n  }, [index])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onPositionChange?.(_position)\n  }, [_position])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onIndexChange?.(_index)\n  }, [_index])\n\n  useEffect(() => {\n    snapToClosestBreakpointIfNeeded()\n  }, [autoSnap])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${_position*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${_position*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (_position === 0) : (_position === 1),\n            'at-start': isInverted ? (_position === 1) : (_position === 0),\n            'dragging': isDragging === true,\n            'idle': isDragging === false,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {breakpoints && isLabelVisible && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position, getClosestIndex())}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps>`\n  background: #fff;\n  position: absolute;\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {