etudes 5.2.0 → 5.3.0

package/components/Slider.js

@@ -1,53 +1,9 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderLabel = exports.SliderKnob = exports.SliderTrack = exports.Slider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
-var utils_1 = require("../utils");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Rect } from 'spase';
+import { useDragValueEffect } from '../hooks/useDragValueEffect.js';
+import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 /**
  * A slider component supporting both horizontal and vertical orientations whose
  * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way
@@ -62,142 +18,125 @@ var utils_1 = require("../utils");
  * @exports SliderTrack The component for the slide track on either side of the
  *                      knob.
  */
-exports.Slider = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var children = _a.children, className = _a.className, _f = _a.isInverted, isInverted = _f === void 0 ? false : _f, _g = _a.isTrackInteractive, isTrackInteractive = _g === void 0 ? true : _g, _h = _a.knobHeight, knobHeight = _h === void 0 ? 30 : _h, _j = _a.knobWidth, knobWidth = _j === void 0 ? 30 : _j, labelProvider = _a.labelProvider, _k = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _k === void 0 ? false : _k, _l = _a.orientation, orientation = _l === void 0 ? 'vertical' : _l, _m = _a.position, externalPosition = _m === void 0 ? 0 : _m, _o = _a.trackPadding, trackPadding = _o === void 0 ? 0 : _o, _p = _a.usesDefaultStyles, usesDefaultStyles = _p === void 0 ? false : _p, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, props = __rest(_a, ["children", "className", "isInverted", "isTrackInteractive", "knobHeight", "knobWidth", "labelProvider", "onlyDispatchesOnDragEnd", "orientation", "position", "trackPadding", "usesDefaultStyles", "onDragEnd", "onDragStart", "onPositionChange"]);
-    var mapDragValueToPosition = function (value, dx, dy) {
-        var _a;
-        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        var truePosition = isInverted ? 1 - value : value;
-        var trueNewPositionX = truePosition * rect.width + dx;
-        var trueNewPositionY = truePosition * rect.height + dy;
-        var trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width));
-        var normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition;
+export const Slider = forwardRef(({ children, className, isInverted = false, isTrackInteractive = true, knobHeight = 30, knobWidth = 30, labelProvider, onlyDispatchesOnDragEnd = false, orientation = 'vertical', position: externalPosition = 0, trackPadding = 0, usesDefaultStyles = false, onDragEnd, onDragStart, onPositionChange, ...props }, ref) => {
+    const mapDragValueToPosition = (value, dx, dy) => {
+        const rect = Rect.from(bodyRef.current) ?? new Rect();
+        const truePosition = isInverted ? 1 - value : value;
+        const trueNewPositionX = truePosition * rect.width + dx;
+        const trueNewPositionY = truePosition * rect.height + dy;
+        const trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width));
+        const normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition;
         return normalizedPosition;
     };
-    var trackClickHandler = function (event) {
-        var _a;
+    const trackClickHandler = (event) => {
         if (!isTrackInteractive)
             return;
-        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        const rect = Rect.from(bodyRef.current) ?? new Rect();
         switch (orientation) {
             case 'horizontal': {
-                var trackPosition = (event.clientX - rect.left) / rect.width;
-                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                const trackPosition = (event.clientX - rect.left) / rect.width;
+                const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
                 setPosition(normalizedPosition);
                 break;
             }
             case 'vertical': {
-                var trackPosition = (event.clientY - rect.top) / rect.height;
-                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                const trackPosition = (event.clientY - rect.top) / rect.height;
+                const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
                 setPosition(normalizedPosition);
                 break;
             }
             default: break;
         }
     };
-    var bodyRef = (0, react_1.useRef)(null);
-    var knobContainerRef = (0, react_1.useRef)(null);
-    var _q = (0, useDragValueEffect_1.useDragValueEffect)(knobContainerRef, {
+    const bodyRef = useRef(null);
+    const knobContainerRef = useRef(null);
+    const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragValueEffect(knobContainerRef, {
         initialValue: externalPosition,
         transform: mapDragValueToPosition,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-    }), _r = __read(_q.isDragging, 1), isDragging = _r[0], _s = __read(_q.isReleasing, 1), isReleasing = _s[0], _t = __read(_q.value, 2), position = _t[0], setPosition = _t[1];
+        onDragStart,
+        onDragEnd,
+    });
     // Natural position is the position affecting internal components accounting
     // for `isInverted`.
-    var naturalPosition = isInverted ? 1 - position : position;
-    var isAtEnd = isInverted ? position === 0 : position === 1;
-    var isAtStart = isInverted ? position === 1 : position === 0;
-    (0, react_1.useEffect)(function () {
+    const naturalPosition = isInverted ? 1 - position : position;
+    const isAtEnd = isInverted ? position === 0 : position === 1;
+    const isAtStart = isInverted ? position === 1 : position === 0;
+    useEffect(() => {
         if (isDragging || externalPosition === position)
             return;
         setPosition(externalPosition);
     }, [externalPosition]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isDragging && onlyDispatchesOnDragEnd)
             return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position, isDragging);
+        onPositionChange?.(position, isDragging);
     }, [position]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isDragging || !onlyDispatchesOnDragEnd)
             return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position, true);
+        onPositionChange?.(position, true);
     }, [isDragging]);
-    var components = (0, utils_1.asComponentDict)(children, {
-        knob: exports.SliderKnob,
-        label: exports.SliderLabel,
-        track: exports.SliderTrack,
+    const components = asComponentDict(children, {
+        knob: SliderKnob,
+        label: SliderLabel,
+        track: SliderTrack,
     });
-    var fixedClassNames = getFixedClassNames({ orientation: orientation, isAtEnd: isAtEnd, isAtStart: isAtStart, isDragging: isDragging, isReleasing: isReleasing });
-    var fixedStyles = getFixedStyles({ orientation: orientation, isDragging: isDragging, naturalPosition: naturalPosition, knobHeight: knobHeight, knobWidth: knobWidth, isTrackInteractive: isTrackInteractive });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight: knobHeight }) : undefined;
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'slider', children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: fixedStyles.body, children: [(0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                    className: (0, clsx_1.default)('start', fixedClassNames.track),
-                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
-                        height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+    const fixedClassNames = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing });
+    const fixedStyles = getFixedStyles({ orientation, isDragging, naturalPosition, knobHeight, knobWidth, isTrackInteractive });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined;
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(SliderTrack, { style: defaultStyles?.track }), {
+                    className: clsx('start', fixedClassNames.track),
+                    style: styles(fixedStyles.track, orientation === 'vertical' ? {
+                        height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
                         top: '0',
                     } : {
                         left: '0',
-                        width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                        width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,
                     }),
                     onClick: trackClickHandler,
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, utils_1.cloneStyledElement)((_c = components.track) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                    className: (0, clsx_1.default)('end', fixedClassNames.track),
-                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
+                }, _jsx("div", { style: fixedStyles.trackHitbox })), cloneStyledElement(components.track ?? _jsx(SliderTrack, { style: defaultStyles?.track }), {
+                    className: clsx('end', fixedClassNames.track),
+                    style: styles(fixedStyles.track, orientation === 'vertical' ? {
                         bottom: '0',
-                        height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                        height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
                     } : {
                         right: '0',
-                        width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                        width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,
                     }),
                     onClick: trackClickHandler,
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, jsx_runtime_1.jsx)("button", { ref: knobContainerRef, style: fixedStyles.knobContainer, children: (0, utils_1.cloneStyledElement)((_d = components.knob) !== null && _d !== void 0 ? _d : (0, jsx_runtime_1.jsx)(exports.SliderKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
-                        className: (0, clsx_1.default)(fixedClassNames.knob),
-                        style: (0, utils_1.styles)(fixedStyles.knob),
-                    }, labelProvider && (0, utils_1.cloneStyledElement)((_e = components.label) !== null && _e !== void 0 ? _e : (0, jsx_runtime_1.jsx)(exports.SliderLabel, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label }), {
-                        className: (0, clsx_1.default)(fixedClassNames.label),
-                        style: (0, utils_1.styles)(fixedStyles.label),
-                    }, labelProvider(position))) })] }) })));
+                }, _jsx("div", { style: fixedStyles.trackHitbox })), _jsx("button", { ref: knobContainerRef, style: fixedStyles.knobContainer, children: cloneStyledElement(components.knob ?? _jsx(SliderKnob, { style: defaultStyles?.knob }), {
+                        className: clsx(fixedClassNames.knob),
+                        style: styles(fixedStyles.knob),
+                    }, labelProvider && cloneStyledElement(components.label ?? _jsx(SliderLabel, { style: defaultStyles?.label }), {
+                        className: clsx(fixedClassNames.label),
+                        style: styles(fixedStyles.label),
+                    }, labelProvider(position))) })] }) }));
 });
-Object.defineProperty(exports.Slider, 'displayName', { value: 'Slider', writable: false });
-var SliderTrack = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'track' }));
-};
-exports.SliderTrack = SliderTrack;
-var SliderKnob = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'knob' }));
-};
-exports.SliderKnob = SliderKnob;
-var SliderLabel = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'label' }));
-};
-exports.SliderLabel = SliderLabel;
-function getFixedClassNames(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b, _c = _a.isAtEnd, isAtEnd = _c === void 0 ? false : _c, _d = _a.isAtStart, isAtStart = _d === void 0 ? false : _d, _e = _a.isDragging, isDragging = _e === void 0 ? false : _e, _f = _a.isReleasing, isReleasing = _f === void 0 ? false : _f;
-    return (0, utils_1.asClassNameDict)({
-        root: (0, clsx_1.default)(orientation, {
+Object.defineProperty(Slider, 'displayName', { value: 'Slider', writable: false });
+export const SliderTrack = ({ ...props }) => _jsx("div", { ...props, "data-child": 'track' });
+export const SliderKnob = ({ ...props }) => _jsx("div", { ...props, "data-child": 'knob' });
+export const SliderLabel = ({ ...props }) => _jsx("div", { ...props, "data-child": 'label' });
+function getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {
+    return asClassNameDict({
+        root: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        track: (0, clsx_1.default)(orientation, {
+        track: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        knob: (0, clsx_1.default)(orientation, {
+        knob: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        label: (0, clsx_1.default)(orientation, {
+        label: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
@@ -205,42 +144,54 @@ function getFixedClassNames(_a) {
         }),
     });
 }
-function getFixedStyles(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b, _c = _a.isDragging, isDragging = _c === void 0 ? false : _c, _d = _a.naturalPosition, naturalPosition = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 0 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 0 : _f, _g = _a.isTrackInteractive, isTrackInteractive = _g === void 0 ? true : _g;
-    return (0, utils_1.asStyleDict)({
+function getFixedStyles({ orientation = 'vertical', isDragging = false, naturalPosition = 0, knobHeight = 0, knobWidth = 0, isTrackInteractive = true }) {
+    return asStyleDict({
         body: {
             height: '100%',
             width: '100%',
         },
-        knobContainer: __assign({ background: 'none', border: 'none', outline: 'none', position: 'absolute', transform: 'translate3d(-50%, -50%, 0)', zIndex: '1' }, orientation === 'vertical' ? {
-            left: '50%',
-            top: "".concat(naturalPosition * 100, "%"),
-            transition: isDragging === false ? 'top 100ms ease-out' : 'none',
-        } : {
-            left: "".concat(naturalPosition * 100, "%"),
-            top: '50%',
-            transition: isDragging === false ? 'left 100ms ease-out' : 'none',
-        }),
+        knobContainer: {
+            background: 'none',
+            border: 'none',
+            outline: 'none',
+            position: 'absolute',
+            transform: 'translate3d(-50%, -50%, 0)',
+            zIndex: '1',
+            ...orientation === 'vertical' ? {
+                left: '50%',
+                top: `${naturalPosition * 100}%`,
+                transition: isDragging === false ? 'top 100ms ease-out' : 'none',
+            } : {
+                left: `${naturalPosition * 100}%`,
+                top: '50%',
+                transition: isDragging === false ? 'left 100ms ease-out' : 'none',
+            },
+        },
         knob: {
-            height: "".concat(knobHeight, "px"),
+            height: `${knobHeight}px`,
             touchAction: 'none',
-            width: "".concat(knobWidth, "px"),
+            width: `${knobWidth}px`,
         },
         label: {
             pointerEvents: 'none',
             userSelect: 'none',
         },
-        track: __assign({ cursor: isTrackInteractive ? 'pointer' : 'auto', pointerEvents: isTrackInteractive ? 'auto' : 'none', position: 'absolute' }, orientation === 'vertical' ? {
-            left: '0',
-            margin: '0 auto',
-            right: '0',
-            width: '100%',
-        } : {
-            bottom: '0',
-            height: '100%',
-            margin: 'auto 0',
-            top: '0',
-        }),
+        track: {
+            cursor: isTrackInteractive ? 'pointer' : 'auto',
+            pointerEvents: isTrackInteractive ? 'auto' : 'none',
+            position: 'absolute',
+            ...orientation === 'vertical' ? {
+                left: '0',
+                margin: '0 auto',
+                right: '0',
+                width: '100%',
+            } : {
+                bottom: '0',
+                height: '100%',
+                margin: 'auto 0',
+                top: '0',
+            },
+        },
         trackHitbox: {
             height: '100%',
             minHeight: '20px',
@@ -251,9 +202,8 @@ function getFixedStyles(_a) {
         },
     });
 }
-function getDefaultStyles(_a) {
-    var _b = _a.knobHeight, knobHeight = _b === void 0 ? 0 : _b;
-    return (0, utils_1.asStyleDict)({
+function getDefaultStyles({ knobHeight = 0 }) {
+    return asStyleDict({
         knob: {
             alignItems: 'center',
             background: '#fff',
@@ -264,11 +214,10 @@ function getDefaultStyles(_a) {
         label: {
             color: '#000',
             fontSize: '12px',
-            lineHeight: "".concat(knobHeight, "px"),
+            lineHeight: `${knobHeight}px`,
         },
         track: {
             background: '#fff',
         },
     });
 }
-//# sourceMappingURL=Slider.js.map