diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 0787479..6f96ec4 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -2422,74 +2422,74 @@ SPEC CHECKSUMS: fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd glog: 5683914934d5b6e4240e497e0f4a3b42d1854183 hermes-engine: 7068e976238b29e97b3bafd09a994542af7d5c0b - RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f + RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669 RCTDeprecation: ff787f6c860a1b97dd1bc27264b61d23ad1994da RCTRequired: 664eb8399ed8a83e26ab65af7c2ad390f7e61696 RCTTypeSafety: a5cf7a7e80baf972e331dc028e5d5c19bb2535a4 React: 606d4dccbcf29aec4dc84a7921405a28e1701a22 React-callinvoker: 0e13bd3c039df9ceef04f7381a81f017655c8361 - React-Core: 701ad54ae468c2ca1e4869d659b30ebfee30ac77 - React-CoreModules: 99d3515898255378fa2d6fc906b6dca093d280c4 - React-cxxreact: 3410a1edbe15936bcf8eae61a546af1bec06ed98 + React-Core: d118e66b5b561f5ab999dd7f9cf14f54dab376a7 + React-CoreModules: 6ec48c52c9ff2ca3fa110153de09e4c2379f1860 + React-cxxreact: cb406100002503e44de4b725e581ce24f47003b9 React-debug: a9e91845f3670c3a19249f52919f0488b7842cf7 - React-defaultsnativemodule: 8fad7c7173d6133d15b1532251df550d0d1c1f87 - React-domnativemodule: 1da1f2bc921a9e4652918f37285c3830f561c86b - React-Fabric: e6f729f372f959bda89268c2c921fac55a9579dc - React-FabricComponents: f2ab7d78be2ea1dd06a7d8d606f5740cd1f54041 - React-FabricImage: 220e8ce3ccdb483fd4283d8b21839676e8b88e27 - React-featureflags: b64383c3268d03c3fab25c03a5c7e5fab0931a55 - React-featureflagsnativemodule: 4c7b5cbe887d120a1797f65e6676fe9e1f9396ea - React-graphics: 4031c43a78b816dc1043dca24dfabf1d2622df9a - React-hermes: dc21a35794633bf2aef73645d273f5ee3bdf777a - React-idlecallbacksnativemodule: 9d6ea7839e347ffd3791315ba418370421d6c7c7 - React-ImageManager: b743a715eca9abbf69fbd50732315565c9eb3863 - React-jserrorhandler: 850fe8285385ffa783cc73e5e2eda8ddcb84e147 - React-jsi: ea8a33b23165395610436c8f0d715e2c3bbcec7e - React-jsiexecutor: 0fb247eca0908176917380e1e1b75339f52a0c72 - React-jsinspector: dcfc9ee7f2610ff05aa8f66fc8203cf7be875d0e - React-jsinspectorcdp: 6803046f78af0b3caace9002e28b0ca1fd97c1c4 - React-jsinspectornetwork: b25ef98ec036aa1b454ebc904b983059e1ebc6e7 - React-jsinspectortracing: 777ae30cf41f6305ffc509e53bef86bb1027395f - React-jsitooling: 568f4974066f14597084df606a6ad79fa52715b6 - React-jsitracing: 47cb4a6c4b3c5e2d1d32ff4880d74d5faf58423c - React-logger: b69e65dc60f768e5509ac0cc27a360124bf70478 - React-Mapbuffer: b48f9f3311fd0ec0f7a5dc39d707eff521fb5f38 - React-microtasksnativemodule: d8568d0485a350c720c061ae835e09fc88c28715 - React-NativeModulesApple: f10596688a03af66804cfbe61792be24a7888da8 + React-defaultsnativemodule: ee76dbbfc31db775bc318f707f01869cd8a32f42 + React-domnativemodule: a3f44d7ea5c7f8ef5c6f88574471d6f0b73d2f17 + React-Fabric: bb3b550229a1cf7a93f9d8569a3a672cae115d94 + React-FabricComponents: a3b5184c705b5b45c8e6736f8bc579bae5cbecbe + React-FabricImage: 8d3a479a8c6097d20b7bd170df7d28b9da72381e + React-featureflags: 2d450523e473b3923790f9502feb8d13691b9e0e + React-featureflagsnativemodule: 90429c06d7aa290896a76639eaaa78c1d0bf4bca + React-graphics: 9e11a80b48b66d08d47c16cb5d922f1171840e70 + React-hermes: ae85ffa5ce034f07f63c95a7cbd15a391da8a6d3 + React-idlecallbacksnativemodule: bbacde3a9c82e14b9f3bfc9494bb960ce6801bf3 + React-ImageManager: d9f55275912e0ee5e34a66d30ad7c6327ce7daa4 + React-jserrorhandler: eeac7d0ce29ef27a5828d376ae84e516c2f3bab0 + React-jsi: 8eba045092d3ebe6b30f11e397185080e22e1c3d + React-jsiexecutor: 84978b702963ecee46f8e4d510931d4fdb7e8429 + React-jsinspector: 5efae7cf4601cb0c7441e4caaa5a6cc16781bf54 + React-jsinspectorcdp: df0f2b157b62a9f5d91c87600331c55414c35881 + React-jsinspectornetwork: af69093cf9d60dbcd00cda064ac271e2123f623e + React-jsinspectortracing: 2519b0016db1f338e56620a3fec253f455318359 + React-jsitooling: ffb70ee2d0c8836b1e8feddd0945847ae89271ad + React-jsitracing: 4a6b9ca5ed4195c51c9205712f06aba38fbb758e + React-logger: dce52a571ba0e0149c3f0fcc6866cbc0c8552c5e + React-Mapbuffer: f5754c33877eaf36e4c76c613b35615a181c85c5 + React-microtasksnativemodule: 23df6374a3ac422d8c2927839bcaeed61fee3dad + React-NativeModulesApple: e16d5c133019987285f001fbf1461a861e40426f React-oscompat: 7c0a341cc31e350da71ddf2e46de0a845d1d1626 - React-perflogger: 4cc44451f694d6205f47bd8d5d87c9c862c3335c - React-performancetimeline: a81afec7aba50bdb80e5a692b03eff2dc499fe37 + React-perflogger: c91e01612298b74f70d846ae3666d2b078c547e0 + React-performancetimeline: 6b9a6951922d764073bc69617be43a9552de96ba React-RCTActionSheet: 99864bd8422649219f24eca9a51445e698b70b8e - React-RCTAnimation: 7cb99a851a514673a1e48ca5fcbdee7c7c760da1 - React-RCTAppDelegate: cd3bc49cec7cef167e920d5e54194d161cd8ab6d - React-RCTBlob: c96068eb67bf4a587f279db91c6948fc761826b9 - React-RCTFabric: ca43b2e7bf026a8898a4eea81e9306786a892065 - React-RCTFBReactNativeSpec: 96df6e569ad40c52f286762a59d7a96644567f5b - React-RCTImage: c40e65f565882df880c4f8994940c8b070923239 - React-RCTLinking: 88992a3fb7c8caa868a2fc3489b26741e75ac5b5 - React-RCTNetwork: 89c9222b388d90229511cc974abee608ac9c1221 - React-RCTRuntime: 8a0222f21dacd0946aaff43976a06bd082e49e42 - React-RCTSettings: 9e7a5f4262523dee5a1f9b0fd1e674b2a11bd7db - React-RCTText: 67f2955faca189ff85c3c5686505be9526df5461 - React-RCTVibration: e4fe5861cee22c972672d29da4cdf24b6313e01d + React-RCTAnimation: ae0790201f87e9782f4a8b4346ac414f4c3273f3 + React-RCTAppDelegate: e94955f941036818be7583fe820d13bf47c5e9af + React-RCTBlob: 472203c0f6fa4f25996ed94a2cdf5eaa92200fe3 + React-RCTFabric: 6f6b6979e6395f4fc33e6e25612f6272a71b7af5 + React-RCTFBReactNativeSpec: 9a0d5b08fcc6e0c73f2afc8fce60e8537db82b58 + React-RCTImage: 14ce85b3f9e898ad8ab2fd49be97f09e43251fb9 + React-RCTLinking: b189fd2fd5fce9c3189d64204f1a92c36ffc27bd + React-RCTNetwork: 66f7536d038d5ecec63acdc5e7c9b7f843fed4ac + React-RCTRuntime: 62482bc3df825749a51ff2c7aa2dd0b8d74ee930 + React-RCTSettings: 98360df5a9e6f6d10bd9738c6d4637005e4f842e + React-RCTText: 667ac6f696da8cd6671b5b562adf43419a787705 + React-RCTVibration: 13de9226d181fb939b187f3f682767c6e8cc80f8 React-rendererconsistency: a4db9bb060c65bce8ae83d936ed0719696055bd2 - React-renderercss: 77c768faf43570d50e3657b97ce1a4c4614012d6 - React-rendererdebug: 460dacb65d9ec58ba44e5c936b89e58530dd2a06 + React-renderercss: f7788003b3c65702cbc123f8ba7678dd3cb67753 + React-rendererdebug: 67c92da913f21ebe041ce959f024ab89cf2a7bde React-rncore: 322add36430c38049067a5d365f166256975391f - React-RuntimeApple: 9a7b848f3ea1b2aa6eefb0e42a5e113ed9b47f3d - React-RuntimeCore: d9feb0e71b045780372d72b9fd0e4326c2ee97d8 + React-RuntimeApple: f3eedaeab424b467cfc61a308422235399ded08c + React-RuntimeCore: fd5ff77cca527e2ecd42e0d6a3eeafafde74d9c9 React-runtimeexecutor: 49ea276161508d50b3486c385e1ca7972d1699f5 - React-RuntimeHermes: 31f857c04fda874cefef4dfbd1c8b0d234c4d606 - React-runtimescheduler: 3cb2ab6622f9580b237a110350804933f8aec680 + React-RuntimeHermes: 85e8e095e106dbc6bcf5dcae051f56ba18b1d629 + React-runtimescheduler: c8581138c14a1e2036e8403628b963c0d1c88b26 React-timing: a275a1c2e6112dba17f8f7dd496d439213bbea0d - React-utils: 257f8c08cb0559e458a9a9254967058434198ced - ReactAppDependencyProvider: cd55f820247d424280ae0b94e1ffb38963410c01 - ReactCodegen: 304f881dea867b659e4ba479608ec06f8117e0c5 - ReactCommon: 658874decaf8c4fd76cfa3a878b94a869db85b1c - RNSVG: c73af7848d94ca3e8136a5191d055e3c1d6fedab + React-utils: 449a6e1fd53886510e284e80bdbb1b1c6db29452 + ReactAppDependencyProvider: 3267432b637c9b38e86961b287f784ee1b08dde0 + ReactCodegen: 5d41e1df061200130dd326e55cdfdf94b0289c6e + ReactCommon: b028d09a66e60ebd83ca59d8cc9a1216360db147 + RNSVG: 341f555dbcd83a34d1f058e88df387de7bbc3347 SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 - Yoga: 395b5d614cd7cbbfd76b05d01bd67230a6ad004e + Yoga: 0c4b7d2aacc910a1f702694fa86be830386f4ceb PODFILE CHECKSUM: 9742088751b8c39a438474c638da6274a8066e53 -COCOAPODS: 1.14.3 +COCOAPODS: 1.16.2 diff --git a/package/src/helpers/shape.ts b/package/src/helpers/shape.ts index 568b04b..201e0d3 100644 --- a/package/src/helpers/shape.ts +++ b/package/src/helpers/shape.ts @@ -7,6 +7,7 @@ interface RefNode { } export interface ShapeProps { + borderRadius: number; motion: Motion; padding: number; setReference: (node?: RefNode) => void; diff --git a/package/src/lib/SpotlightTour.context.ts b/package/src/lib/SpotlightTour.context.ts index 4c247b6..af32467 100644 --- a/package/src/lib/SpotlightTour.context.ts +++ b/package/src/lib/SpotlightTour.context.ts @@ -26,15 +26,18 @@ export type Motion = "bounce" | "fade" | "slide"; */ export type Shape = "circle" | "rectangle"; -export interface ShapeOptions { +export interface BaseShapeOptions { /** * The padding of the spot shape based on the wrapped component. A zero * padding means the spot shape will fit exactly around the wrapped * component. The padding value is a number in points. * - * @default 16; + * @default 16 */ padding?: number; +} + +export interface CircleShapeOptions extends BaseShapeOptions { /** * The shape of the spotlight. Possible values are: * - `circle` @@ -42,9 +45,29 @@ export interface ShapeOptions { * * @default circle */ - type?: Shape; + type: "circle"; +} + +/** + * Options when the shape is a rectangle. + */ +export interface RectangleShapeOptions extends BaseShapeOptions { + /** + * The border radius of the rectangle’s corners, in points. + * This property only applies when the shape type is `"rectangle"`. + * + * If omitted, the border radius defaults to `4`. + */ + borderRadius?: number; + + /** + * The shape of the spotlight. + */ + type: "rectangle"; } +export type ShapeOptions = CircleShapeOptions | RectangleShapeOptions; + export interface RenderProps { /** * The index of the current step the tour is on. diff --git a/package/src/lib/components/tour-overlay/TourOverlay.component.tsx b/package/src/lib/components/tour-overlay/TourOverlay.component.tsx index 127c1d6..81ab9be 100644 --- a/package/src/lib/components/tour-overlay/TourOverlay.component.tsx +++ b/package/src/lib/components/tour-overlay/TourOverlay.component.tsx @@ -106,10 +106,15 @@ export const TourOverlay = forwardRef((props, const shapeOptions = useMemo((): Required => { const options = tourStep.shape ?? shape; const padding = 16; + const borderRadius = 4; - return typeof options !== "string" - ? { padding, type: "circle", ...options } - : { padding, type: options }; + if (typeof options === "string") { + return { borderRadius, padding, type: options }; + } + + const merged = { borderRadius, padding, ...options } as Required; + merged.type = (options as ShapeOptions).type ?? "circle"; + return merged; }, [tourStep, shape]); const useNativeDriver = useMemo(() => { @@ -202,6 +207,11 @@ export const TourOverlay = forwardRef((props, (props => { - const { motion, padding, setReference, spot, useNativeDriver } = props; + const { borderRadius, motion, padding, setReference, spot, useNativeDriver } = props; const width = useMemo((): number => { return spot.width + padding; @@ -60,8 +60,8 @@ export const RectShape = memo(props => { height={size.y} opacity={opacity} fill="black" - rx={4} - ry={4} + rx={borderRadius} + ry={borderRadius} /> ); }, isEqual);