@dank-inc/react-sketchy/lib/SketchBrowser.js

React Wrapper component for sketchy!

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);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cloneElement, useEffect, useState } from "react";
export var SketchBrowser = function (_a) {
    var controls = _a.controls, sketches = _a.sketches, children = _a.children, _b = _a.dimensions, dimensions = _b === void 0 ? [400, 400] : _b, animate = _a.animate, wrap = _a.wrap;
    var _c = useState(0), index = _c[0], setIndex = _c[1];
    useEffect(function () {
        if (!controls)
            return;
        var controlListener = function (e) {
            if (e.key === "e")
                next();
            if (e.key === "q")
                prev();
        };
        document.addEventListener("keypress", controlListener);
        return function () { return document.removeEventListener("keypress", controlListener); };
    });
    var prev = function () {
        if (index > 0)
            setIndex(index - 1);
        else
            setIndex(sketches.length - 1);
    };
    var next = function () {
        if (index < sketches.length - 1)
            setIndex(index + 1);
        else
            setIndex(0);
    };
    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "sketch-nav" }, { children: [_jsx("button", __assign({ onClick: prev }, { children: "Prev" }), void 0),
                    _jsx("h3", { children: "Sketches!" }, void 0),
                    _jsxs("p", { children: ["index: ", index + 1, " / ", sketches.length] }, void 0),
                    _jsx("button", __assign({ onClick: next }, { children: "Next" }), void 0)] }), void 0),
            cloneElement(children, { sketch: sketches[index], dimensions: dimensions, animate: animate })] }, void 0));
};