chore(react): cleanup exports

2024-01-08 11:59:01 +01:00
parent 1efd3ee3d5
commit 30c975e39f
26 changed files with 64 additions and 72 deletions
@@ -15,7 +15,7 @@ function getMediaQuery() {
 * @internal
 * @param colorMode - The color mode to use ('dark', 'light' or 'system')
 */
-export default function useColorModeClass(colorMode: ColorMode): ColorModeClass {
+export function useColorModeClass(colorMode: ColorMode): ColorModeClass {
  const [colorModeClass, setColorModeClass] = useState<ColorModeClass | null>(
    colorMode === 'system' ? null : colorMode
  );
@@ -18,7 +18,14 @@ type UseDragParams = {
 *
 * @internal
 */
-function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable }: UseDragParams) {
+export function useDrag({
+  nodeRef,
+  disabled = false,
+  noDragClassName,
+  handleSelector,
+  nodeId,
+  isSelectable,
+}: UseDragParams) {
  const store = useStoreApi();
  const [dragging, setDragging] = useState<boolean>(false);
  const xyDrag = useRef<XYDragInstance>();
@@ -64,5 +71,3 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n

  return dragging;
 }
-
-export default useDrag;
@@ -11,10 +11,8 @@ const edgesSelector = (state: ReactFlowState) => state.edges;
 * @public
 * @returns An array of edges
 */
-function useEdges<EdgeData>(): Edge<EdgeData>[] {
+export function useEdges<EdgeData>(): Edge<EdgeData>[] {
  const edges = useStore(edgesSelector, shallow);

  return edges;
 }
-
-export default useEdges;
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import type { KeyCode } from '@xyflow/system';

 import { useStoreApi } from '../hooks/useStore';
-import useKeyPress, { UseKeyPressOptions } from './useKeyPress';
-import useReactFlow from './useReactFlow';
+import { useKeyPress, UseKeyPressOptions } from './useKeyPress';
+import { useReactFlow } from './useReactFlow';
 import { Edge, Node } from '../types';

 const selected = (item: Node | Edge) => item.selected;
@@ -15,13 +15,13 @@ const deleteKeyOptions: UseKeyPressOptions = { actInsideInputWithModifier: false
 *
 * @internal
 */
-export default ({
+export function useGlobalKeyHandler({
  deleteKeyCode,
  multiSelectionKeyCode,
 }: {
  deleteKeyCode: KeyCode | null;
  multiSelectionKeyCode: KeyCode | null;
-}): void => {
+}): void {
  const store = useStoreApi();
  const { deleteElements } = useReactFlow();

@@ -39,4 +39,4 @@ export default ({
  useEffect(() => {
    store.setState({ multiSelectionActive: multiSelectionKeyPressed });
  }, [multiSelectionKeyPressed]);
-};
+}
@@ -20,14 +20,14 @@ const defaultDoc = typeof document !== 'undefined' ? document : null;
 * @param param.options - Options
 * @returns boolean
 */
-export default (
+export function useKeyPress(
  // the keycode can be a string 'a' or an array of strings ['a', 'a+d']
  // a string means a single key 'a' or a combination when '+' is used 'a+d'
  // an array means different possibilites. Explainer: ['a', 'd+s'] here the
  // user can use the single key 'a' or the combination 'd' + 's'
  keyCode: KeyCode | null = null,
  options: UseKeyPressOptions = { target: defaultDoc, actInsideInputWithModifier: true }
-): boolean => {
+): boolean {
  const [keyPressed, setKeyPressed] = useState(false);

  // we need to remember if a modifier key is pressed in order to track it
@@ -113,7 +113,7 @@ export default (
  }, [keyCode, setKeyPressed]);

  return keyPressed;
-};
+}

 // utils

@@ -11,10 +11,8 @@ const nodesSelector = (state: ReactFlowState) => state.nodes;
 * @public
 * @returns An array of nodes
 */
-function useNodes<NodeType extends Node = Node>(): NodeType[] {
+export function useNodes<NodeType extends Node = Node>(): NodeType[] {
  const nodes = useStore(nodesSelector, shallow) as NodeType[];

  return nodes;
 }
-
-export default useNodes;
@@ -28,10 +28,8 @@ const defaultOptions = {
 * @param options.includeHiddenNodes - defaults to false
 * @returns boolean indicating whether all nodes are initialized
 */
-function useNodesInitialized(options: UseNodesInitializedOptions = defaultOptions): boolean {
+export function useNodesInitialized(options: UseNodesInitializedOptions = defaultOptions): boolean {
  const initialized = useStore(selector(options));

  return initialized;
 }
-
-export default useNodesInitialized;
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';

-import useReactFlow from './useReactFlow';
+import { useReactFlow } from './useReactFlow';
 import type { OnInit } from '../types';

 /**
@@ -8,7 +8,7 @@ import type { OnInit } from '../types';
 *
 * @internal
 */
-function useOnInitHandler(onInit: OnInit | undefined) {
+export function useOnInitHandler(onInit: OnInit | undefined) {
  const rfInstance = useReactFlow();
  const isInitialized = useRef<boolean>(false);

@@ -19,5 +19,3 @@ function useOnInitHandler(onInit: OnInit | undefined) {
    }
  }, [onInit, rfInstance.viewportInitialized]);
 }
-
-export default useOnInitHandler;
@@ -13,7 +13,7 @@ export type UseOnSelectionChangeOptions = {
 * @public
 * @params params.onChange - The handler to register
 */
-function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions) {
+export function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions) {
  const store = useStoreApi();

  useEffect(() => {
@@ -26,5 +26,3 @@ function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions) {
    };
  }, [onChange]);
 }
-
-export default useOnSelectionChange;
@@ -17,7 +17,7 @@ export type UseOnViewportChangeOptions = {
 * @param params.onChange - gets called when the viewport changes
 * @param params.onEnd - gets called when the viewport stops changing
 */
-function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOptions) {
+export function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOptions) {
  const store = useStoreApi();

  useEffect(() => {
@@ -32,5 +32,3 @@ function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOp
    store.setState({ onViewportChangeEnd: onEnd });
  }, [onEnd]);
 }
-
-export default useOnViewportChange;
@@ -23,7 +23,7 @@ import { isNode } from '../utils';
 * @public
 * @returns ReactFlowInstance
 */
-export default function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): ReactFlowInstance<
+export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): ReactFlowInstance<
  NodeType,
  EdgeType
 > {
@@ -8,7 +8,7 @@ import { useStoreApi } from '../hooks/useStore';
 *
 * @internal
 */
-function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): void {
+export function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): void {
  const store = useStoreApi();

  useEffect(() => {
@@ -42,5 +42,3 @@ function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): voi
    }
  }, []);
 }
-
-export default useResizeHandler;
@@ -9,7 +9,7 @@ import { useStoreApi } from '../hooks/useStore';
 * @public
 * @returns function for updating node internals
 */
-function useUpdateNodeInternals(): UpdateNodeInternals {
+export function useUpdateNodeInternals(): UpdateNodeInternals {
  const store = useStoreApi();

  return useCallback<UpdateNodeInternals>((id: string | string[]) => {
@@ -28,5 +28,3 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
    requestAnimationFrame(() => updateNodeDimensions(updates));
  }, []);
 }
-
-export default useUpdateNodeInternals;
@@ -13,7 +13,7 @@ const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
 * @internal
 * @returns function for updating node positions
 */
-function useUpdateNodePositions() {
+export function useUpdateNodePositions() {
  const store = useStoreApi();

  const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
@@ -63,5 +63,3 @@ function useUpdateNodePositions() {

  return updatePositions;
 }
-
-export default useUpdateNodePositions;
@@ -16,10 +16,8 @@ const viewportSelector = (state: ReactFlowState) => ({
 * @public
 * @returns The current viewport
 */
-function useViewport(): Viewport {
+export function useViewport(): Viewport {
  const viewport = useStore(viewportSelector, shallow);

  return viewport;
 }
-
-export default useViewport;
@@ -12,7 +12,7 @@ const selector = (state: ReactFlowState) => state.panZoom?.syncViewport;
 * @internal
 * @param viewport
 */
-export default function useViewportSync(viewport?: Viewport) {
+export function useViewportSync(viewport?: Viewport) {
  const syncViewport = useStore(selector);
  const store = useStoreApi();