@adecore/ui 0.25.6 → 0.25.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Wipe.js +1 -1
- package/package.json +1 -1
- package/src/Wipe.tsx +4 -1
package/dist/Wipe.js
CHANGED
|
@@ -43,5 +43,5 @@ export function Wipe({ value: split, onValueChange: onSplit, before, after, labe
|
|
|
43
43
|
e.stopPropagation();
|
|
44
44
|
onSplit(next);
|
|
45
45
|
}
|
|
46
|
-
return (_jsxs("div", { ref: mergeRefs(frame, ref), className: clsx('absolute inset-0', className), children: [_jsx("div", { className: "absolute inset-0", children: before }), _jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 0 0 ${percent})` }, children: after }), _jsxs("div", { role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split * 100), "aria-valuetext": formatPercent(Math.round(split * 100)), className: clsx('group absolute inset-y-0 z-10 -ml-3.5 w-7 cursor-ew-resize touch-none', handle === 'line' && 'outline-none'), style: { left: percent }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: [_jsx("span", { className: clsx('absolute inset-y-0 left-3.25 w-0.5 bg-media-handle shadow-media-handle-edge', handle === 'line' && 'group-focus-visible:bg-accent') }), handle === 'knob' && (_jsx("span", { className: "absolute top-1/2 left-3.5 grid h-7 w-7 -translate-1/2 place-items-center rounded-full bg-media-handle text-media-handle-text shadow-media-handle", children: _jsx(Icon, { icon: ChevronsLeftRight, size: 14 }) }))] })] }));
|
|
46
|
+
return (_jsxs("div", { ref: mergeRefs(frame, ref), className: clsx('absolute inset-0', className), children: [_jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 ${(1 - split) * 100}% 0 0)` }, children: before }), _jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 0 0 ${percent})` }, children: after }), _jsxs("div", { role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split * 100), "aria-valuetext": formatPercent(Math.round(split * 100)), className: clsx('group absolute inset-y-0 z-10 -ml-3.5 w-7 cursor-ew-resize touch-none', handle === 'line' && 'outline-none'), style: { left: percent }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: [_jsx("span", { className: clsx('absolute inset-y-0 left-3.25 w-0.5 bg-media-handle shadow-media-handle-edge', handle === 'line' && 'group-focus-visible:bg-accent') }), handle === 'knob' && (_jsx("span", { className: "absolute top-1/2 left-3.5 grid h-7 w-7 -translate-1/2 place-items-center rounded-full bg-media-handle text-media-handle-text shadow-media-handle", children: _jsx(Icon, { icon: ChevronsLeftRight, size: 14 }) }))] })] }));
|
|
47
47
|
}
|
package/package.json
CHANGED
package/src/Wipe.tsx
CHANGED
|
@@ -62,7 +62,10 @@ export function Wipe({ value: split, onValueChange: onSplit, before, after, labe
|
|
|
62
62
|
|
|
63
63
|
return (
|
|
64
64
|
<div ref={mergeRefs(frame, ref)} className={clsx('absolute inset-0', className)}>
|
|
65
|
-
|
|
65
|
+
{/* Both sides are cut, since a picture with transparency would show the other one through it. */}
|
|
66
|
+
<div className="absolute inset-0" style={{ clipPath: `inset(0 ${(1 - split) * 100}% 0 0)` }}>
|
|
67
|
+
{before}
|
|
68
|
+
</div>
|
|
66
69
|
<div className="absolute inset-0" style={{ clipPath: `inset(0 0 0 ${percent})` }}>
|
|
67
70
|
{after}
|
|
68
71
|
</div>
|