chore(react): cleanup exports

2024-01-08 13:26:14 +01:00
parent 30c975e39f
commit 61f8e00541
61 changed files with 386 additions and 475 deletions
@@ -1,14 +1,11 @@
-import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';

 import type { ControlButtonProps } from './types';

-const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
-  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
-    {children}
-  </button>
-);
-
-ControlButton.displayName = 'ControlButton';
-
-export default ControlButton;
+export function ControlButton({ children, className, ...rest }: ControlButtonProps) {
+  return (
+    <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
+      {children}
+    </button>
+  );
+}
@@ -1,19 +1,18 @@
-import { memo, type FC, type PropsWithChildren } from 'react';
+import { memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';

 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useReactFlow } from '../../hooks/useReactFlow';
-import Panel from '../../components/Panel';
+import { Panel } from '../../components/Panel';
 import { type ReactFlowState } from '../../types';

-import PlusIcon from './Icons/Plus';
-import MinusIcon from './Icons/Minus';
-import FitviewIcon from './Icons/FitView';
-import LockIcon from './Icons/Lock';
-import UnlockIcon from './Icons/Unlock';
-import ControlButton from './ControlButton';
-
+import { PlusIcon } from './Icons/Plus';
+import { MinusIcon } from './Icons/Minus';
+import { FitViewIcon } from './Icons/FitView';
+import { LockIcon } from './Icons/Lock';
+import { UnlockIcon } from './Icons/Unlock';
+import { ControlButton } from './ControlButton';
 import type { ControlProps } from './types';

 const selector = (s: ReactFlowState) => ({
@@ -22,7 +21,7 @@ const selector = (s: ReactFlowState) => ({
  maxZoomReached: s.transform[2] >= s.maxZoom,
 });

-const Controls: FC<PropsWithChildren<ControlProps>> = ({
+function ControlsComponent({
  style,
  showZoom = true,
  showFitView = true,
@@ -35,7 +34,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
  className,
  children,
  position = 'bottom-left',
-}) => {
+}: ControlProps) {
  const store = useStoreApi();
  const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
  const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -101,7 +100,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
          title="fit view"
          aria-label="fit view"
        >
-          <FitviewIcon />
+          <FitViewIcon />
        </ControlButton>
      )}
      {showInteractive && (
@@ -117,8 +116,8 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
      {children}
    </Panel>
  );
-};
+}

-Controls.displayName = 'Controls';
+ControlsComponent.displayName = 'Controls';

-export default memo(Controls);
+export const Controls = memo(ControlsComponent);
@@ -1,9 +1,7 @@
-function FitViewIcon() {
+export function FitViewIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
      <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
    </svg>
  );
 }
-
-export default FitViewIcon;
@@ -1,9 +1,7 @@
-function LockIcon() {
+export function LockIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
      <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
    </svg>
  );
 }
-
-export default LockIcon;
@@ -1,9 +1,7 @@
-function MinusIcon() {
+export function MinusIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
      <path d="M0 0h32v4.2H0z" />
    </svg>
  );
 }
-
-export default MinusIcon;
@@ -1,9 +1,7 @@
-function PlusIcon() {
+export function PlusIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
    </svg>
  );
 }
-
-export default PlusIcon;
@@ -1,9 +1,7 @@
-function UnlockIcon() {
+export function UnlockIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
      <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
    </svg>
  );
 }
-
-export default UnlockIcon;
@@ -1,3 +1,3 @@
-export { default as Controls } from './Controls';
-export { default as ControlButton } from './ControlButton';
-export * from './types';
+export { Controls } from './Controls';
+export { ControlButton } from './ControlButton';
+export type { ControlProps, ControlButtonProps } from './types';
@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';

 import type { FitViewOptions } from '../../types';
@@ -13,6 +13,7 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
  onFitView?: () => void;
  onInteractiveChange?: (interactiveStatus: boolean) => void;
  position?: PanelPosition;
+  children?: ReactNode;
 };

 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;