smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prefer arrow functions and callbacks (#1210)

Browse source
This commit is contained in:
Lipis 2020-05-20 16:21:37 +03:00 • committed by GitHub
parent 33fe223b5d
commit c427aa3cce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 784 additions and 847 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/components/Actions.tsx
View file

@ -11,7 +11,7 @@ import Stack from "./Stack";
import useIsMobile from "../is-mobile";
import { getNonDeletedElements } from "../element";
export function SelectedShapeActions({
export const SelectedShapeActions = ({
appState,
elements,
renderAction,
@ -21,7 +21,7 @@ export function SelectedShapeActions({
elements: readonly ExcalidrawElement[];
renderAction: ActionManager["renderAction"];
elementType: ExcalidrawElement["type"];
}) {
}) => {
const targetElements = getTargetElement(
getNonDeletedElements(elements),
appState,
@ -83,65 +83,61 @@ export function SelectedShapeActions({
)}
</div>
);
}
};
export function ShapesSwitcher({
export const ShapesSwitcher = ({
elementType,
setAppState,
}: {
elementType: ExcalidrawElement["type"];
setAppState: any;
}) {
return (
<>
{SHAPES.map(({ value, icon, key }, index) => {
const label = t(`toolBar.${value}`);
const shortcut = `${capitalizeString(key)} ${t("shortcutsDialog.or")} ${
index + 1
}`;
return (
<ToolButton
key={value}
type="radio"
icon={icon}
checked={elementType === value}
name="editor-current-shape"
title={`${capitalizeString(label)} — ${shortcut}`}
keyBindingLabel={`${index + 1}`}
aria-label={capitalizeString(label)}
aria-keyshortcuts={`${key} ${index + 1}`}
data-testid={value}
onChange={() => {
setAppState({
elementType: value,
multiElement: null,
selectedElementIds: {},
});
setCursorForShape(value);
setAppState({});
}}
></ToolButton>
);
})}
</>
);
}
}) => (
<>
{SHAPES.map(({ value, icon, key }, index) => {
const label = t(`toolBar.${value}`);
const shortcut = `${capitalizeString(key)} ${t("shortcutsDialog.or")} ${
index + 1
}`;
return (
<ToolButton
key={value}
type="radio"
icon={icon}
checked={elementType === value}
name="editor-current-shape"
title={`${capitalizeString(label)} — ${shortcut}`}
keyBindingLabel={`${index + 1}`}
aria-label={capitalizeString(label)}
aria-keyshortcuts={`${key} ${index + 1}`}
data-testid={value}
onChange={() => {
setAppState({
elementType: value,
multiElement: null,
selectedElementIds: {},
});
setCursorForShape(value);
setAppState({});
}}
></ToolButton>
);
})}
</>
);
export function ZoomActions({
export const ZoomActions = ({
renderAction,
zoom,
}: {
renderAction: ActionManager["renderAction"];
zoom: number;
}) {
return (
<Stack.Col gap={1}>
<Stack.Row gap={1} align="center">
{renderAction("zoomIn")}
{renderAction("zoomOut")}
{renderAction("resetZoom")}
<div style={{ marginInlineStart: 4 }}>{(zoom * 100).toFixed(0)}%</div>
</Stack.Row>
</Stack.Col>
);
}
}) => (
<Stack.Col gap={1}>
<Stack.Row gap={1} align="center">
{renderAction("zoomIn")}
{renderAction("zoomOut")}
{renderAction("resetZoom")}
<div style={{ marginInlineStart: 4 }}>{(zoom * 100).toFixed(0)}%</div>
</Stack.Row>
</Stack.Col>
);

13
src/components/App.tsx
View file

@ -136,13 +136,14 @@ import throttle from "lodash.throttle";
/**
* @param func handler taking at most single parameter (event).
*/
function withBatchedUpdates<
const withBatchedUpdates = <
TFunction extends ((event: any) => void) | (() => void)
>(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) {
return ((event) => {
>(
func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
) =>
((event) => {
unstable_batchedUpdates(func as TFunction, event);
}) as TFunction;
}
const { history } = createHistory();
@ -2748,9 +2749,7 @@ if (
},
},
history: {
get() {
return history;
},
get: () => history,
},
});
}

40
src/components/ButtonSelect.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
export function ButtonSelect<T>({
export const ButtonSelect = <T extends Object>({
options,
value,
onChange,
@ -10,23 +10,21 @@ export function ButtonSelect<T>({
value: T | null;
onChange: (value: T) => void;
group: string;
}) {
return (
<div className="buttonList">
{options.map((option) => (
<label
key={option.text}
className={value === option.value ? "active" : ""}
>
<input
type="radio"
name={group}
onChange={() => onChange(option.value)}
checked={value === option.value ? true : false}
/>
{option.text}
</label>
))}
</div>
);
}
}) => (
<div className="buttonList">
{options.map((option) => (
<label
key={option.text}
className={value === option.value ? "active" : ""}
>
<input
type="radio"
name={group}
onChange={() => onChange(option.value)}
checked={value === option.value ? true : false}
/>
{option.text}
</label>
))}
</div>
);

14
src/components/ColorPicker.tsx
View file

@ -7,11 +7,11 @@ import { t, getLanguage } from "../i18n";
import { isWritableElement } from "../utils";
import colors from "../colors";
function isValidColor(color: string) {
const isValidColor = (color: string) => {
const style = new Option().style;
style.color = color;
return !!style.color;
}
};
const getColor = (color: string): string | null => {
if (color === "transparent") {
@ -36,7 +36,7 @@ const keyBindings = [
["a", "s", "d", "f", "g"],
].flat();
const Picker = function ({
const Picker = ({
colors,
color,
onChange,
@ -50,7 +50,7 @@ const Picker = function ({
onClose: () => void;
label: string;
showInput: boolean;
}) {
}) => {
const firstItem = React.useRef<HTMLButtonElement>();
const activeItem = React.useRef<HTMLButtonElement>();
const gallery = React.useRef<HTMLDivElement>();
@ -235,7 +235,7 @@ const ColorInput = React.forwardRef(
},
);
export function ColorPicker({
export const ColorPicker = ({
type,
color,
onChange,
@ -245,7 +245,7 @@ export function ColorPicker({
color: string | null;
onChange: (color: string) => void;
label: string;
}) {
}) => {
const [isActive, setActive] = React.useState(false);
const pickerButton = React.useRef<HTMLButtonElement>(null);
@ -296,4 +296,4 @@ export function ColorPicker({
</React.Suspense>
</div>
);
}
};

58
src/components/ContextMenu.tsx
View file

@ -16,45 +16,41 @@ type Props = {
left: number;
};
function ContextMenu({ options, onCloseRequest, top, left }: Props) {
return (
<Popover
onCloseRequest={onCloseRequest}
top={top}
left={left}
fitInViewport={true}
const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
<Popover
onCloseRequest={onCloseRequest}
top={top}
left={left}
fitInViewport={true}
>
<ul
className="context-menu"
onContextMenu={(event) => event.preventDefault()}
>
<ul
className="context-menu"
onContextMenu={(event) => event.preventDefault()}
>
{options.map((option, idx) => (
<li key={idx} onClick={onCloseRequest}>
<ContextMenuOption {...option} />
</li>
))}
</ul>
</Popover>
);
}
{options.map((option, idx) => (
<li key={idx} onClick={onCloseRequest}>
<ContextMenuOption {...option} />
</li>
))}
</ul>
</Popover>
);
function ContextMenuOption({ label, action }: ContextMenuOption) {
return (
<button className="context-menu-option" onClick={action}>
{label}
</button>
);
}
const ContextMenuOption = ({ label, action }: ContextMenuOption) => (
<button className="context-menu-option" onClick={action}>
{label}
</button>
);
let contextMenuNode: HTMLDivElement;
function getContextMenuNode(): HTMLDivElement {
const getContextMenuNode = (): HTMLDivElement => {
if (contextMenuNode) {
return contextMenuNode;
}
const div = document.createElement("div");
document.body.appendChild(div);
return (contextMenuNode = div);
}
};
type ContextMenuParams = {
options: (ContextMenuOption | false | null | undefined)[];
@ -62,9 +58,9 @@ type ContextMenuParams = {
left: number;
};
function handleClose() {
const handleClose = () => {
unmountComponentAtNode(getContextMenuNode());
}
};
export default {
push(params: ContextMenuParams) {

14
src/components/Dialog.tsx
View file

@ -8,13 +8,13 @@ import { KEYS } from "../keys";
import "./Dialog.scss";
export function Dialog(props: {
export const Dialog = (props: {
children: React.ReactNode;
className?: string;
maxWidth?: number;
onCloseRequest(): void;
title: React.ReactNode;
}) {
}) => {
const islandRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -31,7 +31,7 @@ export function Dialog(props: {
return;
}
function handleKeyDown(event: KeyboardEvent) {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === KEYS.TAB) {
const focusableElements = queryFocusableElements();
const { activeElement } = document;
@ -50,7 +50,7 @@ export function Dialog(props: {
event.preventDefault();
}
}
}
};
const node = islandRef.current;
node.addEventListener("keydown", handleKeyDown);
@ -58,13 +58,13 @@ export function Dialog(props: {
return () => node.removeEventListener("keydown", handleKeyDown);
}, []);
function queryFocusableElements() {
const queryFocusableElements = () => {
const focusableElements = islandRef.current?.querySelectorAll<HTMLElement>(
"button, a, input, select, textarea, div[tabindex]",
);
return focusableElements ? Array.from(focusableElements) : [];
}
};
return (
<Modal
@ -88,4 +88,4 @@ export function Dialog(props: {
</Island>
</Modal>
);
}
};

6
src/components/ErrorDialog.tsx
View file

@ -3,13 +3,13 @@ import { t } from "../i18n";
import { Dialog } from "./Dialog";
export function ErrorDialog({
export const ErrorDialog = ({
message,
onClose,
}: {
message: string;
onClose?: () => void;
}) {
}) => {
const [modalIsShown, setModalIsShown] = useState(!!message);
const handleClose = React.useCallback(() => {
@ -33,4 +33,4 @@ export function ErrorDialog({
)}
</>
);
}
};

12
src/components/ExportDialog.tsx
View file

@ -24,7 +24,7 @@ export type ExportCB = (
scale?: number,
) => void;
function ExportModal({
const ExportModal = ({
elements,
appState,
exportPadding = 10,
@ -43,7 +43,7 @@ function ExportModal({
onExportToClipboard: ExportCB;
onExportToBackend: ExportCB;
onCloseRequest: () => void;
}) {
}) => {
const someElementIsSelected = isSomeElementSelected(elements, appState);
const [scale, setScale] = useState(defaultScale);
const [exportSelected, setExportSelected] = useState(someElementIsSelected);
@ -160,9 +160,9 @@ function ExportModal({
</Stack.Col>
</div>
);
}
};
export function ExportDialog({
export const ExportDialog = ({
elements,
appState,
exportPadding = 10,
@ -180,7 +180,7 @@ export function ExportDialog({
onExportToSvg: ExportCB;
onExportToClipboard: ExportCB;
onExportToBackend: ExportCB;
}) {
}) => {
const [modalIsShown, setModalIsShown] = useState(false);
const triggerButton = useRef<HTMLButtonElement>(null);
@ -221,4 +221,4 @@ export function ExportDialog({
)}
</>
);
}
};

18
src/components/FixedSideContainer.tsx
View file

@ -8,16 +8,14 @@ type FixedSideContainerProps = {
className?: string;
};
export function FixedSideContainer({
export const FixedSideContainer = ({
children,
side,
className,
}: FixedSideContainerProps) {
return (
<div
className={`FixedSideContainer FixedSideContainer_side_${side} ${className}`}
>
{children}
</div>
);
}
}: FixedSideContainerProps) => (
<div
className={`FixedSideContainer FixedSideContainer_side_${side} ${className}`}
>
{children}
</div>
);

12
src/components/HelpIcon.tsx
View file

@ -18,10 +18,8 @@ const ICON = (
</svg>
);
export function HelpIcon(props: HelpIconProps) {
return (
<label title={`${props.title} — ?`} className="help-icon">
<div onClick={props.onClick}>{ICON}</div>
</label>
);
}
export const HelpIcon = (props: HelpIconProps) => (
<label title={`${props.title} — ?`} className="help-icon">
<div onClick={props.onClick}>{ICON}</div>
</label>
);

40
src/components/LanguageList.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import * as i18n from "../i18n";
export function LanguageList({
export const LanguageList = ({
onChange,
languages = i18n.languages,
currentLanguage = i18n.getLanguage().lng,
@ -11,23 +11,21 @@ export function LanguageList({
onChange: (value: string) => void;
currentLanguage?: string;
floating?: boolean;
}) {
return (
<React.Fragment>
<select
className={`dropdown-select dropdown-select__language${
floating ? " dropdown-select--floating" : ""
}`}
onChange={({ target }) => onChange(target.value)}
value={currentLanguage}
aria-label={i18n.t("buttons.selectLanguage")}
>
{languages.map((language) => (
<option key={language.lng} value={language.lng}>
{language.label}
</option>
))}
</select>
</React.Fragment>
);
}
}) => (
<React.Fragment>
<select
className={`dropdown-select dropdown-select__language${
floating ? " dropdown-select--floating" : ""
}`}
onChange={({ target }) => onChange(target.value)}
value={currentLanguage}
aria-label={i18n.t("buttons.selectLanguage")}
>
{languages.map((language) => (
<option key={language.lng} value={language.lng}>
{language.label}
</option>
))}
</select>
</React.Fragment>
);

4
src/components/LockIcon.tsx
View file

@ -40,7 +40,7 @@ const ICONS = {
),
};
export function LockIcon(props: LockIconProps) {
export const LockIcon = (props: LockIconProps) => {
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
return (
@ -64,4 +64,4 @@ export function LockIcon(props: LockIconProps) {
</div>
</label>
);
}
};

202
src/components/MobileMenu.tsx
View file

@ -29,7 +29,7 @@ type MobileMenuProps = {
onLockToggle: () => void;
};
export function MobileMenu({
export const MobileMenu = ({
appState,
elements,
actionManager,
@ -39,108 +39,106 @@ export function MobileMenu({
onUsernameChange,
onRoomDestroy,
onLockToggle,
}: MobileMenuProps) {
return (
<>
{appState.isLoading && <LoadingMessage />}
<FixedSideContainer side="top">
<Section heading="shapes">
{(heading) => (
<Stack.Col gap={4} align="center">
<Stack.Row gap={1}>
<Island padding={1}>
{heading}
<Stack.Row gap={1}>
<ShapesSwitcher
elementType={appState.elementType}
setAppState={setAppState}
/>
</Stack.Row>
</Island>
<LockIcon
checked={appState.elementLocked}
onChange={onLockToggle}
title={t("toolBar.lock")}
/>
</Stack.Row>
</Stack.Col>
)}
</Section>
<HintViewer appState={appState} elements={elements} />
</FixedSideContainer>
<div
className="App-bottom-bar"
style={{
marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
}}
>
<Island padding={3}>
{appState.openMenu === "canvas" ? (
<Section className="App-mobile-menu" heading="canvasActions">
<div className="panelColumn">
<Stack.Col gap={4}>
{actionManager.renderAction("loadScene")}
{actionManager.renderAction("saveScene")}
{exportButton}
{actionManager.renderAction("clearCanvas")}
<RoomDialog
isCollaborating={appState.isCollaborating}
collaboratorCount={appState.collaborators.size}
username={appState.username}
onUsernameChange={onUsernameChange}
onRoomCreate={onRoomCreate}
onRoomDestroy={onRoomDestroy}
}: MobileMenuProps) => (
<>
{appState.isLoading && <LoadingMessage />}
<FixedSideContainer side="top">
<Section heading="shapes">
{(heading) => (
<Stack.Col gap={4} align="center">
<Stack.Row gap={1}>
<Island padding={1}>
{heading}
<Stack.Row gap={1}>
<ShapesSwitcher
elementType={appState.elementType}
setAppState={setAppState}
/>
{actionManager.renderAction("changeViewBackgroundColor")}
<fieldset>
<legend>{t("labels.language")}</legend>
<LanguageList
onChange={(lng) => {
setLanguage(lng);
setAppState({});
}}
/>
</fieldset>
</Stack.Col>
</div>
</Section>
) : appState.openMenu === "shape" &&
showSelectedShapeActions(appState, elements) ? (
<Section className="App-mobile-menu" heading="selectedShapeActions">
<SelectedShapeActions
appState={appState}
elements={elements}
renderAction={actionManager.renderAction}
elementType={appState.elementType}
</Stack.Row>
</Island>
<LockIcon
checked={appState.elementLocked}
onChange={onLockToggle}
title={t("toolBar.lock")}
/>
</Section>
) : null}
<footer className="App-toolbar">
<div className="App-toolbar-content">
{actionManager.renderAction("toggleCanvasMenu")}
{actionManager.renderAction("toggleEditMenu")}
{actionManager.renderAction("undo")}
{actionManager.renderAction("redo")}
{actionManager.renderAction(
appState.multiElement ? "finalize" : "duplicateSelection",
)}
{actionManager.renderAction("deleteSelectedElements")}
</Stack.Row>
</Stack.Col>
)}
</Section>
<HintViewer appState={appState} elements={elements} />
</FixedSideContainer>
<div
className="App-bottom-bar"
style={{
marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
}}
>
<Island padding={3}>
{appState.openMenu === "canvas" ? (
<Section className="App-mobile-menu" heading="canvasActions">
<div className="panelColumn">
<Stack.Col gap={4}>
{actionManager.renderAction("loadScene")}
{actionManager.renderAction("saveScene")}
{exportButton}
{actionManager.renderAction("clearCanvas")}
<RoomDialog
isCollaborating={appState.isCollaborating}
collaboratorCount={appState.collaborators.size}
username={appState.username}
onUsernameChange={onUsernameChange}
onRoomCreate={onRoomCreate}
onRoomDestroy={onRoomDestroy}
/>
{actionManager.renderAction("changeViewBackgroundColor")}
<fieldset>
<legend>{t("labels.language")}</legend>
<LanguageList
onChange={(lng) => {
setLanguage(lng);
setAppState({});
}}
/>
</fieldset>
</Stack.Col>
</div>
{appState.scrolledOutside && (
<button
className="scroll-back-to-content"
onClick={() => {
setAppState({ ...calculateScrollCenter(elements) });
}}
>
{t("buttons.scrollBackToContent")}
</button>
</Section>
) : appState.openMenu === "shape" &&
showSelectedShapeActions(appState, elements) ? (
<Section className="App-mobile-menu" heading="selectedShapeActions">
<SelectedShapeActions
appState={appState}
elements={elements}
renderAction={actionManager.renderAction}
elementType={appState.elementType}
/>
</Section>
) : null}
<footer className="App-toolbar">
<div className="App-toolbar-content">
{actionManager.renderAction("toggleCanvasMenu")}
{actionManager.renderAction("toggleEditMenu")}
{actionManager.renderAction("undo")}
{actionManager.renderAction("redo")}
{actionManager.renderAction(
appState.multiElement ? "finalize" : "duplicateSelection",
)}
</footer>
</Island>
</div>
</>
);
}
{actionManager.renderAction("deleteSelectedElements")}
</div>
{appState.scrolledOutside && (
<button
className="scroll-back-to-content"
onClick={() => {
setAppState({ ...calculateScrollCenter(elements) });
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</footer>
</Island>
</div>
</>
);

14
src/components/Modal.tsx
View file

@ -4,13 +4,13 @@ import React, { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { KEYS } from "../keys";
export function Modal(props: {
export const Modal = (props: {
className?: string;
children: React.ReactNode;
maxWidth?: number;
onCloseRequest(): void;
labelledBy: string;
}) {
}) => {
const modalRoot = useBodyRoot();
const handleKeydown = (event: React.KeyboardEvent) => {
@ -44,14 +44,14 @@ export function Modal(props: {
</div>,
modalRoot,
);
}
};
function useBodyRoot() {
function createDiv() {
const useBodyRoot = () => {
const createDiv = () => {
const div = document.createElement("div");
document.body.appendChild(div);
return div;
}
};
const [div] = useState(createDiv);
useEffect(() => {
return () => {
@ -59,4 +59,4 @@ function useBodyRoot() {
};
}, [div]);
return div;
}
};

6
src/components/Popover.tsx
View file

@ -10,13 +10,13 @@ type Props = {
fitInViewport?: boolean;
};
export function Popover({
export const Popover = ({
children,
left,
top,
onCloseRequest,
fitInViewport = false,
}: Props) {
}: Props) => {
const popoverRef = useRef<HTMLDivElement>(null);
// ensure the popover doesn't overflow the viewport
@ -53,4 +53,4 @@ export function Popover({
{children}
</div>
);
}
};

20
src/components/RoomDialog.tsx
View file

@ -9,7 +9,7 @@ import { copyTextToSystemClipboard } from "../clipboard";
import { Dialog } from "./Dialog";
import { AppState } from "../types";
function RoomModal({
const RoomModal = ({
activeRoomLink,
username,
onUsernameChange,
@ -23,21 +23,21 @@ function RoomModal({
onRoomCreate: () => void;
onRoomDestroy: () => void;
onPressingEnter: () => void;
}) {
}) => {
const roomLinkInput = useRef<HTMLInputElement>(null);
function copyRoomLink() {
const copyRoomLink = () => {
copyTextToSystemClipboard(activeRoomLink);
if (roomLinkInput.current) {
roomLinkInput.current.select();
}
}
function selectInput(event: React.MouseEvent<HTMLInputElement>) {
};
const selectInput = (event: React.MouseEvent<HTMLInputElement>) => {
if (event.target !== document.activeElement) {
event.preventDefault();
(event.target as HTMLInputElement).select();
}
}
};
return (
<div className="RoomDialog-modal">
@ -113,9 +113,9 @@ function RoomModal({
)}
</div>
);
}
};
export function RoomDialog({
export const RoomDialog = ({
isCollaborating,
collaboratorCount,
username,
@ -129,7 +129,7 @@ export function RoomDialog({
onUsernameChange: (username: string) => void;
onRoomCreate: () => void;
onRoomDestroy: () => void;
}) {
}) => {
const [modalIsShown, setModalIsShown] = useState(false);
const [activeRoomLink, setActiveRoomLink] = useState("");
@ -182,4 +182,4 @@ export function RoomDialog({
)}
</>
);
}
};

4
src/components/Section.tsx
View file

@ -6,7 +6,7 @@ interface SectionProps extends React.HTMLProps<HTMLElement> {
children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
}
export function Section({ heading, children, ...props }: SectionProps) {
export const Section = ({ heading, children, ...props }: SectionProps) => {
const header = (
<h2 className="visually-hidden" id={`${heading}-title`}>
{t(`headings.${heading}`)}
@ -24,4 +24,4 @@ export function Section({ heading, children, ...props }: SectionProps) {
)}
</section>
);
}
};

12
src/components/Stack.tsx
View file

@ -10,13 +10,13 @@ type StackProps = {
className?: string | boolean;
};
function RowStack({
const RowStack = ({
children,
gap,
align,
justifyContent,
className,
}: StackProps) {
}: StackProps) => {
return (
<div
className={`Stack Stack_horizontal ${className || ""}`}
@ -31,15 +31,15 @@ function RowStack({
{children}
</div>
);
}
};
function ColStack({
const ColStack = ({
children,
gap,
align,
justifyContent,
className,
}: StackProps) {
}: StackProps) => {
return (
<div
className={`Stack Stack_vertical ${className || ""}`}
@ -54,7 +54,7 @@ function ColStack({
{children}
</div>
);
}
};
export default {
Row: RowStack,

5
src/components/ToolButton.tsx
View file

@ -36,10 +36,7 @@ type ToolButtonProps =
const DEFAULT_SIZE: ToolIconSize = "m";
export const ToolButton = React.forwardRef(function (
props: ToolButtonProps,
ref,
) {
export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
const innerRef = React.useRef(null);
React.useImperativeHandle(ref, () => innerRef.current);
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;