kokopu-react 3.3.0 → 3.3.1

package/src/icons/ArrowMarkerIcon.tsx

@@ -41,12 +41,12 @@ export interface ArrowMarkerIconProps {
     /**
      * Width and height (in pixels) of the icon.
      */
-    size: number;
+    size: number,
 
     /**
      * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
      */
-    color: string;
+    color: string,
 }
 
 
@@ -75,8 +75,12 @@ export class ArrowMarkerIcon extends React.Component<ArrowMarkerIconProps> {
                 <defs>
                     <ArrowTip id={this.arrowTipId} color={this.props.color} />
                 </defs>
-                <line className="kokopu-arrow" x1={halfThickness} y1={size / 2} x2={size - halfThickness * 3} y2={size / 2} stroke={color}
-                    strokeWidth={halfThickness * 2} markerEnd={`url(#${this.arrowTipId})`} />
+                <line
+                    className="kokopu-arrow"
+                    x1={halfThickness} y1={size / 2} x2={size - halfThickness * 3} y2={size / 2}
+                    stroke={color} strokeWidth={halfThickness * 2}
+                    markerEnd={`url(#${this.arrowTipId})`}
+                />
             </svg>
         );
     }

package/src/icons/ArrowTip.tsx

@@ -30,12 +30,12 @@ interface ArrowTipProps {
     /**
      * ID of the element.
      */
-    id: string;
+    id: string,
 
     /**
      * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
      */
-    color: string;
+    color: string,
 }
 
 

package/src/icons/ChessPieceIcon.tsx

@@ -35,29 +35,24 @@ export interface ChessPieceIconProps {
     /**
      * Width and height (in pixels) of each chess piece icon.
      */
-    size: number;
+    size: number,
 
     /**
      * Chess piece(s) to display.
      */
-    type: ChessPieceIconType | ChessPieceIconType[];
+    type: ChessPieceIconType | ChessPieceIconType[],
 
     /**
      * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
      */
-    pieceset: string;
+    pieceset?: string,
 }
 
 
-const defaultProps: Partial<ChessPieceIconProps> = {
-    pieceset: DEFAULT_PIECESET,
-};
-
-
 /**
  * SVG icon representing a colored chess piece, or a list of colored chess pieces.
  */
-export function ChessPieceIcon({ size, type, pieceset }: ChessPieceIconProps) {
+export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }: ChessPieceIconProps) {
 
     // Sanitize the inputs.
     size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
@@ -77,8 +72,6 @@ export function ChessPieceIcon({ size, type, pieceset }: ChessPieceIconProps) {
     );
 }
 
-ChessPieceIcon.defaultProps = defaultProps;
-
 
 /**
  * Sanitization method for the small-screen limits parameter.

package/src/icons/SquareMarkerIcon.tsx

@@ -36,24 +36,19 @@ export interface SquareMarkerIconProps {
     /**
      * Width and height (in pixels) of the icon.
      */
-    size: number;
+    size: number,
 
     /**
      * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
      */
-    color: string;
+    color?: string,
 }
 
 
-const defaultProps: Partial<SquareMarkerIconProps> = {
-    color: 'currentcolor',
-};
-
-
 /**
  * SVG icon representing a square marker.
  */
-export function SquareMarkerIcon({ size, color }: SquareMarkerIconProps) {
+export function SquareMarkerIcon({ size, color = 'currentcolor' }: SquareMarkerIconProps) {
 
     // Sanitize the inputs.
     size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('SquareMarkerIcon', 'size'));
@@ -68,5 +63,3 @@ export function SquareMarkerIcon({ size, color }: SquareMarkerIconProps) {
         </svg>
     );
 }
-
-SquareMarkerIcon.defaultProps = defaultProps;

package/src/icons/TextMarkerIcon.tsx

@@ -36,29 +36,24 @@ export interface TextMarkerIconProps {
     /**
      * Width and height (in pixels) of the icon.
      */
-    size: number;
+    size: number,
 
     /**
      * Symbol to represent on the icon.
      */
-    symbol: AnnotationSymbol;
+    symbol: AnnotationSymbol,
 
     /**
      * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
      */
-    color: string;
+    color?: string,
 }
 
 
-const defaultProps: Partial<TextMarkerIconProps> = {
-    color: 'currentcolor',
-};
-
-
 /**
  * SVG icon representing a text marker.
  */
-export function TextMarkerIcon({ size, symbol, color }: TextMarkerIconProps) {
+export function TextMarkerIcon({ size, symbol, color = 'currentcolor' }: TextMarkerIconProps) {
 
     // Sanitize the inputs.
     size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('TextMarkerIcon', 'size'));
@@ -75,5 +70,3 @@ export function TextMarkerIcon({ size, symbol, color }: TextMarkerIconProps) {
         </svg>
     );
 }
-
-TextMarkerIcon.defaultProps = defaultProps;

package/src/movetext/Movetext.tsx

@@ -52,49 +52,49 @@ export interface MovetextProps {
      * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
      */
-    game: Game | Database | string;
+    game: Game | Database | string,
 
     /**
      * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
      * If omitted, the first game of the database/PGN is displayed.
      */
-    gameIndex: number;
+    gameIndex: number,
 
     /**
      * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
      */
     diagramOptions: Partial<StaticBoardGraphicProps> & {
         flipped?: boolean,
-    };
+    },
 
     /**
      * Symbols to use for the chess pieces. See {@link moveFormatter}.
      */
-    pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping;
+    pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping,
 
     /**
      * Whether the diagrams within the comments (if any) are displayed or not.
      */
-    diagramVisible: boolean;
+    diagramVisible: boolean,
 
     /**
      * Whether the game headers (if any) are displayed or not.
      */
-    headerVisible: boolean;
+    headerVisible: boolean,
 
     /**
      * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      */
-    selection?: string;
+    selection?: string,
 
     /**
      * Type of action allowed with the mouse/keys on the component. If undefined, then the user cannot interact with the component.
      *
      * - `'selectMove'` allows the user to select a move.
      */
-    interactionMode?: 'selectMove';
+    interactionMode?: 'selectMove',
 
     /**
      * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
@@ -109,7 +109,7 @@ export interface MovetextProps {
      *                    - `'key-exit'`: the event has been triggered by the "unselect-move" key (aka. the escape key),
      *                    - `'click'`: the event has been triggered by a mouse click on a move.
      */
-    onMoveSelected?: (nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) => void;
+    onMoveSelected?: (nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) => void,
 }
 
 
@@ -151,7 +151,8 @@ export class Movetext extends React.Component<MovetextProps> {
         const { onMoveSelected } = this.props;
 
         return (
-            <MovetextImpl ref={this.implRef}
+            <MovetextImpl
+                ref={this.implRef}
                 game={info.game}
                 diagramOptions={this.props.diagramOptions} moveFormatter={formatter} diagramVisible={diagramVisible} headerVisible={headerVisible}
                 selection={selection} interactionMode={interactionMode} onMoveSelected={onMoveSelected}

package/src/movetext/MovetextImpl.tsx

@@ -39,19 +39,19 @@ import './Movetext.css';
 
 interface MovetextImplProps {
 
-    game: Game;
+    game: Game,
 
     diagramOptions: Partial<StaticBoardGraphicProps> & {
         flipped?: boolean,
-    };
-    moveFormatter: (notation: string) => React.ReactNode;
-    diagramVisible: boolean;
-    headerVisible: boolean;
+    },
+    moveFormatter: (notation: string) => React.ReactNode,
+    diagramVisible: boolean,
+    headerVisible: boolean,
 
-    selection?: string;
-    interactionMode?: 'selectMove';
+    selection?: string,
+    interactionMode?: 'selectMove',
 
-    onMoveSelected?: (nodeId: string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit' | 'click') => void;
+    onMoveSelected?: (nodeId: string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit' | 'click') => void,
 }
 
 
@@ -106,7 +106,8 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
         const titleElement = title === undefined ? undefined : <span className="kokopu-header-playerTitle">{filter(title)}</span>;
         const ratingElement = rating === undefined ? undefined : <span className="kokopu-header-playerRating">{rating}</span>;
         const separator = title === undefined || rating === undefined ? undefined : '\u00a0'; // \u00a0 == &nbsp;
-        const titleRatingGroup = title === undefined && rating === undefined ? undefined :
+        const titleRatingGroup = title === undefined && rating === undefined ?
+            undefined :
             <span className="kokopu-headerGroup-titleRating">{titleElement}{separator}{ratingElement}</span>;
         return <div className={classNames.join(' ')} key={'player-' + color}>{colorTag}{playerNameElement}{titleRatingGroup}</div>;
     }
@@ -155,13 +156,16 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
         if (this.props.interactionMode !== 'selectMove') {
             return undefined;
         }
-        return <NavigationField ref={this.navigationFieldRef}
-            onFirstPressed={() => this.handleNavigationPressed(firstNodeId, 'key-first')}
-            onPreviousPressed={() => this.handleNavigationPressed(previousNodeId, 'key-previous')}
-            onNextPressed={() => this.handleNavigationPressed(nextNodeId, 'key-next')}
-            onLastPressed={() => this.handleNavigationPressed(lastNodeId, 'key-last')}
-            onExitPressed={() => this.handleExitPressed()}
-        />;
+        return (
+            <NavigationField
+                ref={this.navigationFieldRef}
+                onFirstPressed={() => this.handleNavigationPressed(firstNodeId, 'key-first')}
+                onPreviousPressed={() => this.handleNavigationPressed(previousNodeId, 'key-previous')}
+                onNextPressed={() => this.handleNavigationPressed(nextNodeId, 'key-next')}
+                onLastPressed={() => this.handleNavigationPressed(lastNodeId, 'key-last')}
+                onExitPressed={() => this.handleExitPressed()}
+            />
+        );
     }
 
     private renderBody() {
@@ -268,7 +272,7 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
         // Move number
         let moveNumber: React.ReactNode = undefined;
         if (forcePrintMoveNumber || node.moveColor() === 'w') {
-            const moveNumberText  = node.fullMoveNumber() + (node.moveColor() === 'w' ? '.' : '\u2026');
+            const moveNumberText = node.fullMoveNumber() + (node.moveColor() === 'w' ? '.' : '\u2026');
             moveNumber = <span className="kokopu-moveNumber">{moveNumberText}</span>;
         }
 
@@ -313,17 +317,19 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
             for (let textSegment of comment.split('[#]')) {
                 if (!isFirstTextSegment) {
                     const position = node instanceof Variation ? node.initialPosition() : node.position();
-                    const diagram = <Chessboard
-                        position={position}
-                        squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
-                        flipped={this.props.diagramOptions.flipped}
-                        squareSize={this.props.diagramOptions.squareSize}
-                        coordinateVisible={this.props.diagramOptions.coordinateVisible}
-                        turnVisible={this.props.diagramOptions.turnVisible}
-                        colorset={this.props.diagramOptions.colorset}
-                        pieceset={this.props.diagramOptions.pieceset}
-                        smallScreenLimits={this.props.diagramOptions.smallScreenLimits}
-                    />;
+                    const diagram = (
+                        <Chessboard
+                            position={position}
+                            squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
+                            flipped={this.props.diagramOptions.flipped}
+                            squareSize={this.props.diagramOptions.squareSize}
+                            coordinateVisible={this.props.diagramOptions.coordinateVisible}
+                            turnVisible={this.props.diagramOptions.turnVisible}
+                            colorset={this.props.diagramOptions.colorset}
+                            pieceset={this.props.diagramOptions.pieceset}
+                            smallScreenLimits={this.props.diagramOptions.smallScreenLimits}
+                        />
+                    );
                     segmentElements.push(<div className="kokopu-diagram" key={'diagram-' + (diagramIndex++)}>{diagram}</div>);
                 }
                 isFirstTextSegment = false;

package/src/movetext/htmlFilter.tsx

@@ -72,7 +72,7 @@ export function htmlFilter(type: 'header' | 'comment'): (text: string) => React.
             'ul', 'ol', 'li', // lists
         ]);
         Object.assign(allowedAttributes, {
-            'img': [ 'alt', 'src', 'height', 'width' ],
+            img: [ 'alt', 'src', 'height', 'width' ],
         });
     }
 
@@ -85,8 +85,8 @@ export function htmlFilter(type: 'header' | 'comment'): (text: string) => React.
 
 
 interface HtmlSanitizerProps {
-    allowedTags?: string[];
-    allowedAttributes?: Record<string, string[]>;
+    allowedTags?: string[],
+    allowedAttributes?: Record<string, string[]>,
 }
 
 
@@ -101,7 +101,7 @@ class HtmlSanitizer {
 
     constructor({ allowedTags, allowedAttributes }: HtmlSanitizerProps) {
         this.#allowedTags = allowedTags ? new Set(allowedTags) : new Set();
-        this.#allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(([k, v]) => [k, new Set(v)])) : new Map();
+        this.#allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(([ k, v ]) => [ k, new Set(v) ])) : new Map();
     }
 
     /**

package/src/navigationboard/NavigationBoard.tsx

@@ -49,28 +49,28 @@ export interface NavigationBoardProps extends DynamicBoardGraphicProps {
      * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
      */
-    game: Game | Database | string;
+    game: Game | Database | string,
 
     /**
      * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
      * If omitted, the first game of the database/PGN is displayed.
      */
-    gameIndex: number;
+    gameIndex: number,
 
     /**
      * ID of the move initially selected (or `'start'`/`'end'` for the beginning/end of the main variation) when the component is uncontrolled.
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      * Ignored if the `nodeId` attribute is provided.
      */
-    initialNodeId: string;
+    initialNodeId: string,
 
     /**
      * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      * If provided (i.e. if the component is controlled), the attribute `onNodeIdChanged` must be provided as well.
      */
-    nodeId?: string;
+    nodeId?: string,
 
     /**
      * Callback invoked in controlled-component mode, when the user changes the selected move.
@@ -78,60 +78,60 @@ export interface NavigationBoardProps extends DynamicBoardGraphicProps {
      * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
      *                 or `'start'` for the beginning of the main variation.
      */
-    onNodeIdChanged?: (nodeId: string) => void;
+    onNodeIdChanged?: (nodeId: string) => void,
 
     /**
      * Whether auto-play is initially enabled or not.
      * Ignored if the `isPlaying` attribute is provided.
      */
-    initialIsPlaying: boolean;
+    initialIsPlaying: boolean,
 
     /**
      * Whether auto-play is enabled or not.
      * If provided (i.e. if the is-playing state is controlled), the attribute `onIsPlayingChanged` must be provided as well.
      */
-    isPlaying?: boolean;
+    isPlaying?: boolean,
 
     /**
      * Callback invoked in controlled-is-playing-state mode, when the user clicks on the play/stop button.
      *
      * @param isPlaying - New is-playing state.
      */
-    onIsPlayingChanged?: (isPlaying: boolean) => void;
+    onIsPlayingChanged?: (isPlaying: boolean) => void,
 
     /**
      * Whether the board is initially flipped (i.e. seen from Black's point of view) or not, when the flip state is uncontrolled.
      * Ignored if the `flipped` attribute is provided.
      */
-    initialFlipped: boolean;
+    initialFlipped: boolean,
 
     /**
      * Whether the board is flipped (i.e. seen from Black's point of view) or not.
      * If provided (i.e. if the flip state is controlled), the attribute `onFlippedChanged` must be provided as well.
      */
-    flipped?: boolean;
+    flipped?: boolean,
 
     /**
      * Callback invoked in controlled-flip-state mode, when the user flips the board.
      *
      * @param flipped - New flip state.
      */
-    onFlippedChanged?: (flipped: boolean) => void;
+    onFlippedChanged?: (flipped: boolean) => void,
 
     /**
      * Whether the play/stop button is visible or not in the toolbar.
      */
-    playButtonVisible: boolean;
+    playButtonVisible: boolean,
 
     /**
      * Whether the flip button is visible or not in the toolbar.
      */
-    flipButtonVisible: boolean;
+    flipButtonVisible: boolean,
 
     /**
      * Additional buttons to be added to the toolbar.
      */
-    additionalButtons: NavigationBar;
+    additionalButtons: NavigationBar,
 }
 
 
@@ -139,13 +139,13 @@ export interface NavigationBoardProps extends DynamicBoardGraphicProps {
  * Attributes for method `NavigationBoard.size()`.
  */
 interface NavigationBoardSizeAttr {
-    squareSize?: NavigationBoardProps['squareSize'];
-    coordinateVisible?: NavigationBoardProps['coordinateVisible'];
-    turnVisible?: NavigationBoardProps['turnVisible'];
-    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'];
-    playButtonVisible?: NavigationBoardProps['playButtonVisible'];
-    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'];
-    additionalButtons?: NavigationBarScheme;
+    squareSize?: NavigationBoardProps['squareSize'],
+    coordinateVisible?: NavigationBoardProps['coordinateVisible'],
+    turnVisible?: NavigationBoardProps['turnVisible'],
+    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'],
+    playButtonVisible?: NavigationBoardProps['playButtonVisible'],
+    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'],
+    additionalButtons?: NavigationBarScheme,
 }
 
 
@@ -153,19 +153,19 @@ interface NavigationBoardSizeAttr {
  * Attributes for method `NavigationBoard.adaptSquareSize()`.
  */
 interface NavigationBoardAdaptSquareSizeAttr {
-    coordinateVisible?: NavigationBoardProps['coordinateVisible'];
-    turnVisible?: NavigationBoardProps['turnVisible'];
-    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'];
-    playButtonVisible?: NavigationBoardProps['playButtonVisible'];
-    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'];
-    additionalButtons?: NavigationBarScheme;
+    coordinateVisible?: NavigationBoardProps['coordinateVisible'],
+    turnVisible?: NavigationBoardProps['turnVisible'],
+    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'],
+    playButtonVisible?: NavigationBoardProps['playButtonVisible'],
+    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'],
+    additionalButtons?: NavigationBarScheme,
 }
 
 
 interface NavigationBoardState {
-    nodeIdAsUncontrolled: string;
-    isPlayingAsUncontrolled: boolean;
-    flippedAsUncontrolled: boolean;
+    nodeIdAsUncontrolled: string,
+    isPlayingAsUncontrolled: boolean,
+    flippedAsUncontrolled: boolean,
 }
 
 
@@ -230,29 +230,34 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
     private renderBoard(game: Game, node: GameNode | Variation, isPlaying: boolean, flipped: boolean) {
         const position = node instanceof GameNode ? node.positionBefore() : node.initialPosition();
         const move = node instanceof GameNode ? node.notation() : undefined;
-        return <Chessboard
-            position={position} move={move} flipped={flipped}
-            squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
-            squareSize={this.props.squareSize}
-            coordinateVisible={this.props.coordinateVisible}
-            turnVisible={this.props.turnVisible}
-            colorset={this.props.colorset}
-            pieceset={this.props.pieceset}
-            smallScreenLimits={this.props.smallScreenLimits}
-            moveArrowVisible={this.props.moveArrowVisible}
-            moveArrowColor={this.props.moveArrowColor}
-            animated={this.props.animated}
-            bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize, isPlaying)}
-        />;
+        return (
+            <Chessboard
+                position={position} move={move} flipped={flipped}
+                squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
+                squareSize={this.props.squareSize}
+                coordinateVisible={this.props.coordinateVisible}
+                turnVisible={this.props.turnVisible}
+                colorset={this.props.colorset}
+                pieceset={this.props.pieceset}
+                smallScreenLimits={this.props.smallScreenLimits}
+                moveArrowVisible={this.props.moveArrowVisible}
+                moveArrowColor={this.props.moveArrowColor}
+                animated={this.props.animated}
+                bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize, isPlaying)}
+            />
+        );
     }
 
     private renderNavigationField(game: Game, currentNodeId: string) {
-        return <NavigationField ref={this.navigationFieldRef}
-            onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
-            onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
-            onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
-            onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
-        />;
+        return (
+            <NavigationField
+                ref={this.navigationFieldRef}
+                onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
+                onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
+                onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
+                onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
+            />
+        );
     }
 
     private renderToolbar(game: Game, node: GameNode | Variation, squareSize: number, isPlaying: boolean) {

package/src/navigationboard/NavigationButton.ts

@@ -33,22 +33,22 @@ export type NavigationButton = {
      *
      * The path is rendered within 32 x 32 viewbox (defined as `viewbox="0 0 32 32"`). It must be be a closed path, and must fit within the viewbox incircle.
      */
-    iconPath: string;
+    iconPath: string,
 
     /**
      * Human-readable tooltip.
      */
-    tooltip?: string;
+    tooltip?: string,
 
     /**
      * Whether or not the button is enabled (true by default).
      */
-    enabled?: boolean;
+    enabled?: boolean,
 
     /**
      * Callback invoked when the user clicks on the button.
      */
-    onClick?: () => void;
+    onClick?: () => void,
 };
 
 

package/src/navigationboard/NavigationField.tsx

@@ -30,11 +30,11 @@ import './NavigationField.css';
 
 
 interface NavigationFieldProps {
-    onFirstPressed?: () => void;
-    onPreviousPressed?: () => void;
-    onNextPressed?: () => void;
-    onLastPressed?: () => void;
-    onExitPressed?: () => void;
+    onFirstPressed?: () => void,
+    onPreviousPressed?: () => void,
+    onNextPressed?: () => void,
+    onLastPressed?: () => void,
+    onExitPressed?: () => void,
 }
 
 
@@ -54,7 +54,7 @@ export class NavigationField extends React.Component<NavigationFieldProps> {
     }
 
     private handleKeyDown(evt: React.KeyboardEvent<HTMLAnchorElement>) {
-        /* eslint-disable no-unused-expressions */
+        /* eslint-disable @typescript-eslint/no-unused-expressions */
         doHandleKeyDown(evt, 'Home', this.props.onFirstPressed) ||
         doHandleKeyDown(evt, 'ArrowLeft', this.props.onPreviousPressed) ||
         doHandleKeyDown(evt, 'ArrowRight', this.props.onNextPressed) ||