chore: reduce code by gndelia/codemod-replace-react-fc-typescript

2026-07-20 19:46:32 +08:00 · 2022-08-12 01:26:27 +08:00
parent b4f56cda59
commit 40b617c429
73 changed files with 108 additions and 115 deletions
@@ -34,10 +34,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
    return max[0];
 };

-export const BorderColorConfig: FC<BorderColorConfigProps> = ({
-    app,
-    shapes,
-}) => {
+export const BorderColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
    const setBorderColor = (color: string) => {
        app.style({ stroke: color }, getShapeIds(shapes));
    };
@@ -13,7 +13,7 @@ import { DeleteShapes } from './DeleteOperation';
 import { Lock, Unlock } from './LockOperation';
 import { FrameFillColorConfig } from './FrameFillColorConfig';

-export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+export const CommandPanel = ({ app }: { app: TldrawApp }) => {
    const state = app.useStore();
    const bounds = TLDR.get_selected_bounds(state);
    const camera = app.useStore(
@@ -10,7 +10,7 @@ interface DeleteShapesProps {
    shapes: TDShape[];
 }

-export const DeleteShapes: FC<DeleteShapesProps> = ({ app, shapes }) => {
+export const DeleteShapes = ({ app, shapes }: DeleteShapesProps) => {
    const deleteShapes = () => {
        app.delete(getShapeIds(shapes));
    };
@@ -41,10 +41,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
    return max[0];
 };

-export const FillColorConfig: FC<BorderColorConfigProps> = ({
-    app,
-    shapes,
-}) => {
+export const FillColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
    const theme = useTheme();
    const setFillColor = (color: ColorType) => {
        app.style(
@@ -51,7 +51,7 @@ const _getFontSize = (shapes: TDShape[]): FontSizeStyle => {
    return max[0] as unknown as FontSizeStyle;
 };

-export const FontSizeConfig: FC<FontSizeConfigProps> = ({ app, shapes }) => {
+export const FontSizeConfig = ({ app, shapes }: FontSizeConfigProps) => {
    const setFontSize = (size: FontSizeStyle) => {
        app.style({ fontSize: size }, getShapeIds(shapes));
    };
@@ -40,10 +40,10 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
    return max[0];
 };

-export const FrameFillColorConfig: FC<BorderColorConfigProps> = ({
+export const FrameFillColorConfig = ({
    app,
    shapes,
-}) => {
+}: BorderColorConfigProps) => {
    const theme = useTheme();
    const setFillColor = (color: ColorType) => {
        app.style(
@@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
    shapes: TDShape[];
 }

-export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Group = ({ app, shapes }: GroupAndUnGroupProps) => {
    const group = () => {
        app.group(getShapeIds(shapes));
    };
@@ -23,7 +23,7 @@ export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
    );
 };

-export const UnGroup: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const UnGroup = ({ app, shapes }: GroupAndUnGroupProps) => {
    const ungroup = () => {
        app.ungroup(getShapeIds(shapes));
    };
@@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
    shapes: TDShape[];
 }

-export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Lock = ({ app, shapes }: GroupAndUnGroupProps) => {
    const lock = () => {
        app.lock(getShapeIds(shapes));
    };
@@ -23,7 +23,7 @@ export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
    );
 };

-export const Unlock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Unlock = ({ app, shapes }: GroupAndUnGroupProps) => {
    const unlock = () => {
        app.unlock(getShapeIds(shapes));
    };
@@ -44,12 +44,12 @@ interface LineStyleProps {
    onStrokeWidthChange: (width: StrokeWidth) => void;
 }

-export const LineStyle: FC<LineStyleProps> = ({
+export const LineStyle = ({
    strokeStyle,
    onStrokeStyleChange,
    strokeWidth,
    onStrokeWidthChange,
-}) => {
+}: LineStyleProps) => {
    return (
        <Container>
            <Title>Stroke Style</Title>
@@ -24,10 +24,10 @@ interface BorderColorConfigProps {
    shapes: TDShape[];
 }

-export const StrokeLineStyleConfig: FC<BorderColorConfigProps> = ({
+export const StrokeLineStyleConfig = ({
    app,
    shapes,
-}) => {
+}: BorderColorConfigProps) => {
    const strokeStyle = _getStrokeStyle(shapes);
    const strokeWidth = _getStrokeWidth(shapes);
    const setStrokeLineStyle = (style: DashStyle) => {
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';

-export const ContextMenu: FC<{ children: ReactNode }> = ({ children }) => {
+export const ContextMenu = ({ children }: { children: ReactNode }) => {
    return <div>{children}</div>;
 };
@@ -26,11 +26,11 @@ const formatColors = (colors: ColorValue[]): ColorObject[] => {
    });
 };

-export const Palette: FC<PaletteProps> = ({
+export const Palette = ({
    colors: propColors,
    selected,
    onSelect,
-}) => {
+}: PaletteProps) => {
    const colorObjects = useMemo(() => formatColors(propColors), [propColors]);
    return (
        <Container>
@@ -33,7 +33,7 @@ const shapes = [

 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;

-export const LineTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const LineTools = ({ app }: { app: TldrawApp }) => {
    const activeTool = app.useStore(activeToolSelector);

    const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
@@ -69,7 +69,7 @@ const shapes = [

 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;

-export const ShapeTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const ShapeTools = ({ app }: { app: TldrawApp }) => {
    const activeTool = app.useStore(activeToolSelector);

    const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
@@ -68,7 +68,7 @@ const tools: Array<{
    },
 ];

-export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
    const activeTool = app.useStore(activeToolSelector);

    const isToolLocked = app.useStore(toolLockedSelector);
@@ -9,13 +9,13 @@ interface PenProps {
    onClick: () => void;
 }

-export const Pen: FC<PenProps> = ({
+export const Pen = ({
    name,
    icon,
    primaryColor,
    secondaryColor,
    onClick,
-}) => {
+}: PenProps) => {
    return (
        <Tooltip content={name}>
            <StyledIconButton
@@ -105,7 +105,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
    return acc;
 }, {} as Record<TDToolType, PencilConfig>);

-export const PenTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const PenTools = ({ app }: { app: TldrawApp }) => {
    const appCurrentTool = app.useStore(state => state.appState.activeTool);
    const chosenPen =
        PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
@@ -16,7 +16,7 @@ import { MiniMap } from './mini-map';
 const zoomSelector = (s: TDSnapshot) =>
    s.document.pageStates[s.appState.currentPageId].camera.zoom;

-export const ZoomBar: FC = () => {
+export const ZoomBar = () => {
    const app = useTldrawApp();
    const zoom = app.useStore(zoomSelector);

@@ -18,7 +18,7 @@ const getScaleToMap = (width: number, height: number) => {
    return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
 };

-export const MiniMap: FC = () => {
+export const MiniMap = () => {
    const app = useTldrawApp();
    const page = app.useStore(s => s.document.pages[s.appState.currentPageId]);
    const pageState = app.useStore(
@@ -6,13 +6,13 @@ interface SimplifiedShapeProps extends TLBounds {
    onClick?: () => void;
 }

-export const SimplifiedShape: FC<SimplifiedShapeProps> = ({
+export const SimplifiedShape = ({
    onClick,
    width,
    height,
    minX,
    minY,
-}) => {
+}: SimplifiedShapeProps) => {
    const style: CSSProperties = {
        width: `${width}px`,
        height: `${height}px`,
@@ -8,13 +8,13 @@ interface ViewportProps extends TLBounds {
    onPan?: (delta: [number, number]) => void;
 }

-export const Viewport: FC<ViewportProps> = ({
+export const Viewport = ({
    onPan,
    width,
    height,
    minX,
    minY,
-}) => {
+}: ViewportProps) => {
    const style: CSSProperties = {
        width: `${width}px`,
        height: `${height}px`,