@furystack/shades-nipple/esm/nipple.js

A Nipple component wrapper for FuryStack Shades

import { Shade, createComponent } from '@furystack/shades';
import nipplejs from 'nipplejs';
export const NippleComponent = Shade({
    customElementName: 'shade-nipple',
    render: ({ children, props, useDisposable, useRef }) => {
        const zoneRef = useRef('zone');
        useDisposable('nipple-init', () => {
            let manager;
            queueMicrotask(() => {
                if (!zoneRef.current)
                    return;
                manager = nipplejs.create({
                    zone: zoneRef.current,
                    ...props.managerOptions,
                });
                if (props.onStart) {
                    manager.on('start', props.onStart);
                }
                if (props.onEnd) {
                    manager.on('end', props.onEnd);
                }
                if (props.onDir) {
                    manager.on('dir', props.onDir);
                }
                if (props.onMove) {
                    manager.on('move', props.onMove);
                }
            });
            return { [Symbol.dispose]: () => manager?.destroy() };
        });
        if (children) {
            return createComponent("div", { ref: zoneRef }, children);
        }
        return createComponent("div", { ref: zoneRef });
    },
});
//# sourceMappingURL=nipple.js.map