Merge pull request #23 from ThePaulin/feature/custom-rotation-icon

add rendering of custom icon
Todilo · Jul 5, 2024 · 5be9d51 · 5be9d51
2 parents 5523878 + e5263ca
commit 5be9d51
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -132,7 +132,8 @@ _For more example and a playground please refer to [storybook](https://todilo.gi
 | Parameter                 | Type                         | Default | Description                                                                                                                      | Example                                      |
 | ------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
 | imagesCount               | number                       | none    | Set the number of images in your sequence                                                                                        | 35                                           |
-| imageBaseUrl              | string                       | none    | Set URL from the base of your homepage                                                                                           | ./imageSeries/                               |
+| imageBaseUrl              | string                       | none    | Set URL from the base of your homepage                                                                                           | | imageIndexSeparator              | string                       | none    | Set URL from the base of your homepage                                                                                           |
+./imageSeries/                               |
 | imagesFileTyp             | string                       | none    | Image type (anything that can be rendered in an _img_ tag)                                                                       | png                                          |
 | imageFilenamePrefix       | string                       | none    | Add a prefix before the image number                                                                                             | shoe (if entire image filename is shoe2.png) |
 | imageInitialIndex         | number                       | 0       | Which imagenumber to show on component load                                                                                      | 10                                           |
@@ -145,6 +146,7 @@ _For more example and a playground please refer to [storybook](https://todilo.gi
 | height                    | number                       | 150     | Height of the image                                                                                                              | 150                                          |
 | zeroPad                   | ZeroPadRange (number 0 to 9) | 0       | Num zeros to prepend to your image number (if you set 1, your image numbers will be 01, 02..., 09, 10, 11)                       | 1                                            |
 | showRotationIconOnStartup | boolean                      | false   | If true, a small icon representing a rotation which should inform the user that the component can be rotated.                    | false                                        |
+| customRotationIcon | function returning SVG icon                      |    | Set rotation icon that renders on startup                    | () => SOME JSX or SVG                                      |
 | shouldNotifyEvents        | boolean                      | false   | If true the component will notify on some events. This can be a lot of event so use with caution.                                | false                                        |
 | notifyOnPointerDown       | function                     | not set | Pass your own function that takes x, y as arguments. Will be called when mouse or touch is pressed.                              | -                                            |
 | notifyOnPointerUp         | function                     | not set | Pass your own function that takes x, y as arguments . Will be called when mouse or touch is released.                            | -                                            |

diff --git a/src/components/React360Viewer/React360Viewer.tsx b/src/components/React360Viewer/React360Viewer.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import AnimationImage from "../AnimationImage/AnimationImage";
 import StyledRotateIcon from "../icons/StyledRotateIcon";
-import type { HtmlHTMLAttributes } from "react";
+import type { HtmlHTMLAttributes, ReactNode } from "react";
 
 // The regular % can return negative numbers.
 function moduloWithoutNegative(value: number, n: number): number {
@@ -27,6 +27,7 @@ export interface React360ViewerProps {
   height?: number;
   zeroPad?: ZeroPadRange;
   showRotationIconOnStartup?: boolean;
+  customRotationIcon?: () => ReactNode;
   notifyOnPointerDown?: (x: number, y: number) => void;
   notifyOnPointerUp?: (x: number, y: number) => void;
   notifyOnPointerMoved?: (x: number, y: number) => void;
@@ -73,6 +74,7 @@ export const React360Viewer = ({
   height = 150,
   zeroPad = 0,
   showRotationIconOnStartup = false,
+  customRotationIcon,
   imageInitialIndex = 0,
   shouldNotifyEvents = false,
   notifyOnPointerDown,
@@ -250,7 +252,15 @@ export const React360Viewer = ({
     // onMouseMove={onMouseMove}
     >
       {showRotationIcon ? (
-        <StyledRotateIcon widthInEm={2} isReverse={reverse}></StyledRotateIcon>
+        <>
+          {
+            customRotationIcon ? (
+              <>{customRotationIcon()}</>
+            ) : (
+              <StyledRotateIcon widthInEm={2} isReverse={reverse}></StyledRotateIcon>
+            )
+          }
+        </>
       ) : null}
       {imageSources.map((s, index) => (
         <AnimationImage