nexpi-ui/lib/Slider.js

An elegant and minimalist Next.js 14 component library

"use client";
import { useState, useEffect, useRef } from 'react';
import styles from './styles/Slider.module.css';
import React from 'react';
var getColor = function (variant) {
    switch (variant) {
        case 'primary':
            return '--nxp-primary-color';
        case 'secondary':
            return '--nxp-secondary-color';
        case 'success':
            return '--nxp-green';
        case 'warning':
            return '--nxp-orange';
        case 'danger':
            return '--nxp-red';
        case 'info':
            return '--nxp-violet';
        case 'notice':
            return '--nxp-blue';
        default:
            return '--nxp-secondary-color';
    }
};
var Slider = function (_a) {
    var percent = _a.percent, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, onChange = _a.onChange;
    var _c = useState(false), isDragging = _c[0], setIsDragging = _c[1];
    var canvasRef = useRef(null);
    var handleMouseDown = function () {
        setIsDragging(true);
    };
    var handleMouseUp = function () {
        setIsDragging(false);
    };
    var handleMouseMove = function (e) {
        if (isDragging) {
            var canvas = canvasRef.current;
            if (canvas) {
                var rect = canvas.getBoundingClientRect();
                var clientX = void 0;
                if (e instanceof MouseEvent) {
                    clientX = e.clientX;
                }
                else if (e instanceof TouchEvent) {
                    clientX = e.touches[0].clientX;
                }
                if (clientX !== undefined) {
                    var newPercent = Math.min(Math.max(0, (clientX - rect.left) / rect.width), 1) * 100;
                    onChange(newPercent);
                }
            }
        }
    };
    useEffect(function () {
        var canvas = canvasRef.current;
        if (!canvas) {
            return;
        }
        var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
        if (!ctx) {
            return;
        }
        var computedStyle = getComputedStyle(document.documentElement);
        var color = computedStyle.getPropertyValue(getColor(variant));
        if (ctx) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = color.trim();
            ctx.fillRect(0, 0, percent * 3, 10);
        }
    }, [percent, variant]);
    useEffect(function () {
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
        document.addEventListener('touchmove', handleMouseMove);
        document.addEventListener('touchend', handleMouseUp);
        return function () {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            document.removeEventListener('touchmove', handleMouseMove);
            document.removeEventListener('touchend', handleMouseUp);
        };
    }, [isDragging]);
    return (React.createElement("div", { className: styles.slider, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown },
        React.createElement("canvas", { ref: canvasRef, width: 300, height: 10 }),
        React.createElement("div", { className: styles.thumb, style: { left: "".concat(percent, "%") } })));
};
export default Slider;
//# sourceMappingURL=Slider.js.map