kokopu-react 3.2.0 → 3.3.1

package/src/errorbox/parsing.tsx

@@ -36,8 +36,8 @@ import { ErrorBox } from './ErrorBox';
  * Try to interpret the given object as a chess position.
  */
 export function parsePosition(position: Position | string, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, position: Position }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, position: Position } {
+
     if (position instanceof Position) {
         return { error: false, position: position };
     }
@@ -84,8 +84,8 @@ function splitGameVariantAndFEN(position: string): { variant: GameVariant, fen:
  * Try to interpret the given object `move` as a move descriptor based on the given position.
  */
 export function parseMove(position: Position, move: MoveDescriptor | string | undefined, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, type: 'none' | 'null-move' } | { error: false, type: 'regular', move: MoveDescriptor }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, type: 'none' | 'null-move' } | { error: false, type: 'regular', move: MoveDescriptor } {
+
     if (move === undefined || move === null) {
         return { error: false, type: 'none' };
     }
@@ -126,8 +126,8 @@ export function parseMove(position: Position, move: MoveDescriptor | string | un
  * Try to interpret the given object as a chess game.
  */
 export function parseGame(game: Game | Database | string, gameIndex: number, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, game: Game }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, game: Game } {
+
     if (game instanceof Game) {
         return { error: false, game: game };
     }

package/src/i18n.ts

@@ -27,7 +27,7 @@
  */
 export namespace i18n {
 
-/* eslint-disable prefer-const */
+/* eslint-disable prefer-const, @stylistic/indent */
 // WARNING: all those constants must be declared with "let" to allow them to be re-defined if necessary by consumer codes.
 
 // Error box
@@ -46,7 +46,7 @@ export let TOOLTIP_PLAY_STOP = 'Play/stop the game';
 export let TOOLTIP_FLIP = 'Flip the board';
 
 // Movetext
-export let PIECE_SYMBOLS = { 'K':'K', 'Q':'Q', 'R':'R', 'B':'B', 'N':'N', 'P':'P' };
+export let PIECE_SYMBOLS = { K: 'K', Q: 'Q', R: 'R', B: 'B', N: 'N', P: 'P' };
 export let ANNOTATED_BY = 'Annotated by {0}';
 export let INVALID_PGN_ERROR_TITLE = 'Invalid PGN string.';
 

package/src/icons/AnnotationSymbolShape.tsx

@@ -38,27 +38,27 @@ interface AnnotationSymbolShapeProps {
     /**
      * X-coordinate of the center of the symbol.
      */
-    x: number;
+    x: number,
 
     /**
      * Y-coordinate of the center of the symbol.
      */
-    y: number;
+    y: number,
 
     /**
      * Size of the symbol (i.e. size of square in which the symbol is rendered).
      */
-    size: number;
+    size: number,
 
     /**
      * Symbol code.
      */
-    symbol: AnnotationSymbol;
+    symbol: AnnotationSymbol,
 
     /**
      * [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/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/index.ts

@@ -42,6 +42,6 @@ export { Chessboard, ChessboardProps } from './chessboard/Chessboard';
 export { formatMove, moveFormatter } from './movetext/moveFormatter';
 export { Movetext, MovetextProps, MoveSelectEventOrigin } from './movetext/Movetext';
 
-export { NavigationButton, NavigationButtonList, isNavigationButton } from './navigationboard/NavigationButton';
+export { NavigationButton, NavigationBar, NavigationBarScheme, isNavigationButton, isNavigationBar, isNavigationBarScheme } from './navigationboard/NavigationButton';
 export { firstNodeId, previousNodeId, nextNodeId, lastNodeId } from './navigationboard/NavigationField';
 export { NavigationBoard, NavigationBoardProps } from './navigationboard/NavigationBoard';

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();
     }
 
     /**