use native onClick in place of clickHandler prop in custom buttons (#612

)
simularium · Nov 28, 2024 · 2709efe · 2709efe
1 parent 27c7c06
commit 2709efe
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 30 deletions.
diff --git a/src/components/CameraControls/CameraHomeButton.tsx b/src/components/CameraControls/CameraHomeButton.tsx
@@ -15,7 +15,7 @@ export const CameraHomeButton: React.FC<CameraHomeButtonProps> = ({
             tooltipText={"Home view (H)"}
             tooltipPlacement="left"
             icon={getIconGlyphClasses(IconGlyphs.Reset)}
-            clickHandler={resetCamera}
+            onClick={resetCamera}
         />
     );
 };

diff --git a/src/components/CameraControls/index.tsx b/src/components/CameraControls/index.tsx
@@ -159,13 +159,13 @@ const CameraControls = ({
                     tooltipText="Zoom in ( &uarr; )"
                     tooltipPlacement="left"
                     icon={ZoomIn}
-                    clickHandler={zoomIn}
+                    onClick={zoomIn}
                 />
                 <ViewportButton
                     tooltipText="Zoom out ( &darr; )"
                     tooltipPlacement="left"
                     icon={ZoomOut}
-                    clickHandler={zoomOut}
+                    onClick={zoomOut}
                 />
             </div>
             <div className={styles.radioGroup}>
@@ -176,23 +176,23 @@ const CameraControls = ({
                     tooltipPlacement="left"
                     icon={getIconGlyphClasses(IconGlyphs.Rotate)}
                     radioGroupPosition={"top"}
-                    clickHandler={() => setMode(ROTATE)}
+                    onClick={() => setMode(ROTATE)}
                     active={mode === ROTATE}
                 />
                 <ViewportButton
                     tooltipText={mode === PAN ? "Pan" : "Pan (hold SHIFT)"}
                     tooltipPlacement="left"
                     icon={getIconGlyphClasses(IconGlyphs.Pan)}
                     radioGroupPosition={"bottom"}
-                    clickHandler={() => setMode(PAN)}
+                    onClick={() => setMode(PAN)}
                     active={mode === PAN}
                 />
             </div>
             <ViewportButton
                 tooltipText={"Focus (F)"}
                 tooltipPlacement="left"
                 icon={getIconGlyphClasses(IconGlyphs.Focus)}
-                clickHandler={() => {
+                onClick={() => {
                     saveFocusMode(!isFocused);
                 }}
                 active={isFocused}
@@ -203,7 +203,7 @@ const CameraControls = ({
                     tooltipPlacement="left"
                     icon={getIconGlyphClasses(IconGlyphs.Orthographic)}
                     radioGroupPosition={"top"}
-                    clickHandler={() => {
+                    onClick={() => {
                         setCameraProjectionType(ORTHOGRAPHIC);
                     }}
                     active={cameraProjectionType === ORTHOGRAPHIC}
@@ -213,7 +213,7 @@ const CameraControls = ({
                     tooltipPlacement="left"
                     icon={getIconGlyphClasses(IconGlyphs.Perspective)}
                     radioGroupPosition={"bottom"}
-                    clickHandler={() => {
+                    onClick={() => {
                         setCameraProjectionType(PERSPECTIVE);
                     }}
                     active={cameraProjectionType === PERSPECTIVE}

diff --git a/src/components/CustomDropdown/index.tsx b/src/components/CustomDropdown/index.tsx
@@ -131,7 +131,7 @@ const CustomDropdown: React.FC<CustomDropdownProps> = ({
                 titleText={titleText}
                 icon={icon}
                 buttonType={buttonType}
-                clickHandler={buttonClickHandler}
+                onClick={buttonClickHandler}
                 onKeyDown={handleKeyDown}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeaveWithDelay}

diff --git a/src/components/DownloadTrajectoryMenu/index.tsx b/src/components/DownloadTrajectoryMenu/index.tsx
@@ -46,7 +46,7 @@ const DownloadTrajectoryMenu = ({
         <NavButtonWithTooltip
             titleText="Download"
             icon={Download}
-            clickHandler={downloadFile}
+            onClick={downloadFile}
             isDisabled={isDisabled}
             tooltipText={{
                 default: "Download trajectory",

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
@@ -89,7 +89,7 @@ const HelpMenu = (): JSX.Element => {
             label: (
                 <NavButton
                     titleText={"Version info"}
-                    clickHandler={() => {
+                    onClick={() => {
                         setModalVisible(!modalVisible);
                     }}
                     buttonType={ButtonClass.DropdownItem}

diff --git a/src/components/LoadFileMenu/index.tsx b/src/components/LoadFileMenu/index.tsx
@@ -94,7 +94,7 @@ const LoadFileMenu = ({
             label: (
                 <NavButton
                     titleText={"Simularium file"}
-                    clickHandler={showModal}
+                    onClick={showModal}
                     buttonType={ButtonClass.DropdownItem}
                 />
             ),

diff --git a/src/components/NavButton/index.tsx b/src/components/NavButton/index.tsx
@@ -8,7 +8,6 @@ export interface NavButtonProps extends ButtonProps {
     titleText?: string;
     buttonType?: string;
     icon?: ReactNode;
-    clickHandler?: () => void;
     isDisabled?: boolean;
 }
 
@@ -19,7 +18,7 @@ const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>(
             titleText,
             buttonType = ButtonClass.Action,
             icon,
-            clickHandler,
+            onClick,
             isDisabled,
             ...props
         },
@@ -37,7 +36,7 @@ const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>(
                 {...props}
                 ref={ref}
                 className={buttonClassNames}
-                onClick={!isDisabled ? clickHandler : undefined}
+                onClick={!isDisabled ? onClick : undefined}
             >
                 {titleText} {icon}
             </Button>

diff --git a/src/components/NavButtonWithTooltip/index.tsx b/src/components/NavButtonWithTooltip/index.tsx
@@ -24,7 +24,7 @@ const NavButtonWithTooltip: React.FC<NavButtonWithTooltipProps> = ({
     tooltipPlacement,
     buttonType,
     icon,
-    clickHandler,
+    onClick,
     isDisabled = false,
     ...props
 }) => {
@@ -53,7 +53,7 @@ const NavButtonWithTooltip: React.FC<NavButtonWithTooltipProps> = ({
         icon,
         buttonType,
         isDisabled,
-        clickHandler,
+        onClick,
         onMouseEnter,
         onMouseLeave,
     };
@@ -69,7 +69,7 @@ const NavButtonWithTooltip: React.FC<NavButtonWithTooltipProps> = ({
             trigger={["hover", "focus"]}
             open={tooltipVisible}
         >
-            <NavButton {...navButtonProps} onClick={clickHandler} />
+            <NavButton {...navButtonProps} onClick={onClick} />
         </Tooltip>
     );
 };

diff --git a/src/components/PlaybackControls/index.tsx b/src/components/PlaybackControls/index.tsx
@@ -129,7 +129,7 @@ const PlayBackControls = ({
             tooltipText={isPlaying ? "Pause" : "Play"}
             tooltipPlacement="top"
             icon={isPlaying ? Pause : Play}
-            clickHandler={isPlaying ? pauseHandler : playHandler}
+            onClick={isPlaying ? () => pauseHandler() : () => playHandler()}
             disabled={loading || isEmpty}
             loading={loading}
         />
@@ -169,7 +169,7 @@ const PlayBackControls = ({
                     tooltipText="Skip 1 frame back"
                     tooltipPlacement="top"
                     icon={getIconGlyphClasses(IconGlyphs.StepBack)}
-                    clickHandler={prevHandler}
+                    onClick={prevHandler}
                     disabled={isStepBackDisabled || loading || isEmpty}
                     loading={loading}
                 />
@@ -178,7 +178,7 @@ const PlayBackControls = ({
                     tooltipText="Skip 1 frame ahead"
                     tooltipPlacement="top"
                     icon={getIconGlyphClasses(IconGlyphs.StepForward)}
-                    clickHandler={nextHandler}
+                    onClick={nextHandler}
                     disabled={isStepForwardDisabled || loading || isEmpty}
                     loading={loading}
                 />
@@ -204,7 +204,7 @@ const PlayBackControls = ({
                 tooltipText={isLooping ? "Turn off looping" : "Turn on looping"}
                 tooltipPlacement="top"
                 icon={getIconGlyphClasses(IconGlyphs.Loop)}
-                clickHandler={loopHandler}
+                onClick={loopHandler}
                 disabled={isEmpty}
                 active={isLooping}
                 loading={loading}

diff --git a/src/components/RecordMoviesComponent/index.tsx b/src/components/RecordMoviesComponent/index.tsx
@@ -114,7 +114,7 @@ const RecordMovieComponent = (props: RecordMovieComponentProps) => {
                 tooltipWhenDisabled={true}
                 tooltipText={getTooltipText()}
                 icon={getIcon()}
-                clickHandler={isRecording ? stop : start}
+                onClick={isRecording ? stop : start}
                 disabled={!supportedBrowser}
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}

diff --git a/src/components/ShareTrajectoryButton/index.tsx b/src/components/ShareTrajectoryButton/index.tsx
@@ -34,7 +34,7 @@ const ShareTrajectoryButton = ({
                 tooltipPlacement="bottomLeft"
                 titleText="Share"
                 icon={Share}
-                clickHandler={handleShare}
+                onClick={handleShare}
                 isDisabled={isDisabled}
                 tooltipText={{
                     default: "Share trajectory",

diff --git a/src/components/ViewportButton/index.tsx b/src/components/ViewportButton/index.tsx
@@ -16,7 +16,6 @@ interface ViewportButtonProps extends ButtonProps {
      */
     icon?: ReactNode | string;
     radioGroupPosition?: "top" | "bottom";
-    clickHandler?: () => void;
     disabled?: boolean;
     active?: boolean;
     loading?: boolean;
@@ -28,7 +27,7 @@ const ViewportButton: React.FC<ViewportButtonProps> = ({
     tooltipPlacement,
     tooltipWhenDisabled,
     icon,
-    clickHandler,
+    onClick,
     disabled,
     loading,
     active,
@@ -61,7 +60,7 @@ const ViewportButton: React.FC<ViewportButtonProps> = ({
     const getTooltip = () =>
         !disabled || tooltipWhenDisabled ? tooltipText : "";
 
-    const getClickHandler = () => (!disabled ? clickHandler : undefined);
+    const onClickProp = !disabled ? onClick : undefined;
 
     const buttonClassNames = classNames([
         className,
@@ -79,7 +78,7 @@ const ViewportButton: React.FC<ViewportButtonProps> = ({
             <Button
                 {...props}
                 className={buttonClassNames}
-                onClick={getClickHandler()}
+                onClick={onClickProp}
                 loading={loading}
                 icon={getIcon()}
             />

diff --git a/src/containers/AppHeader/index.tsx b/src/containers/AppHeader/index.tsx
@@ -82,7 +82,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                 <NavButton
                     className={styles.simulariumHome}
                     titleText="SIMULARIUM HOME"
-                    clickHandler={() => {
+                    onClick={() => {
                         history.push("/");
                     }}
                 />

diff --git a/src/containers/ViewerPanel/index.tsx b/src/containers/ViewerPanel/index.tsx
@@ -599,7 +599,7 @@ class ViewerPanel extends React.Component<ViewerPanelProps, ViewerPanelState> {
                                         ? ExitFullScreen
                                         : FullScreen
                                 }
-                                clickHandler={this.toggleIsFullScreen}
+                                onClick={this.toggleIsFullScreen}
                             />
                         )}
                     </div>