react-fabric-canvas-designer
Version:
A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.
34 lines (33 loc) • 3.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
const InputRange = ({ min, step, max, value, onChange }) => {
const [number, setNumber] = useState(value || 0);
useEffect(() => {
setNumber(value);
}, [value]);
useEffect(() => {
onChange(number);
}, [number]);
const handleDecrement = () => {
setNumber(prevValue => {
if (min)
if (prevValue > min)
return prevValue - (step || 1);
else
return min;
else
return prevValue - (step || 1);
});
};
const handleIncrement = () => {
setNumber(prevValue => prevValue + (step || 1));
};
const handleChange = (event) => {
const newValue = parseFloat(event.target.value);
if (!isNaN(newValue)) {
setNumber(newValue);
}
};
return _jsx("div", { className: "py-2 px-3 mx-1 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700", children: _jsxs("div", { className: "flex items-center gap-x-1.5", children: [_jsx("button", { type: "button", tabIndex: -1, className: "size-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "aria-label": "Decrease", onClick: handleDecrement, children: _jsx("svg", { className: "shrink-0 size-3.5", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12h14" }) }) }), _jsx("input", { className: "p-0 w-full bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white", style: { MozAppearance: 'textfield' }, type: "range", "aria-roledescription": "Number field", value: number, min: min, step: step, max: max, onChange: handleChange }), _jsx("button", { tabIndex: -1, type: "button", className: "size-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "aria-label": "Increase", onClick: handleIncrement, children: _jsxs("svg", { className: "shrink-0 size-3.5", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5v14" })] }) })] }) });
};
export default InputRange;