v3.6.0 (July 13, 2022)
Add layout mutation, listeners, and custom events (#558)
- Add playgrounds to the type checking.
- Add custom events instead of the previous approach which depended on emitting events by functions provided by each interactive element. DFlex events has
$
prefix.
type DFlexEvents =
| "$onDragOutContainer"
| "$onDragOutThreshold"
| "$onDragOver"
| "$onDragLeave"
| "$onLiftUpSiblings"
| "$onMoveDownSiblings";
Implementation like any other event:
import type { DFlexEvents } from "@dflex/dnd";
const onDFlexEvent = (e: DFlexEvents) => {
// Do something, or just don't.
};
// Later you can remove the listener with `removeEventListener`
document.addEventListener("$onDragLeave", onDFlexEvent);
- Provide listeners a subscription approach to provide a universal state to the interactive applications. You can subscribe anywhere in the app instead of depending on the emitted events from draggable elements. Currently, DFlex supports subscriptions to
LayoutState
.
interface DFlexLayoutStateEvent {
type: "layoutState",
layoutState: "pending" | "ready" | "dragging" | "dragEnd" | "dragCancel";
}
Implementation from anywhere inside the app:
React.useEffect(() => {
const unsubscribe = store.listeners.subscribe((e) => {
console.info("new layout state", e);
}, "layoutState");
return () => {
unsubscribe();
};
}, []);
Remove parentID
from registry input by checking branches internally (#564)
interface RegisterInput{
id: string;
depth?: number;
readonly?: boolean;
};
const { id, depth, readonly } = registerInput;
React.useEffect(() => {
if (ref.current) {
store.register({ id, depth, readonly });
}
return () => {
store.unregister(id);
};
}, [ref.current]);