diff --git a/package-lock.json b/package-lock.json index 9ae9d72a..5f2c81c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.76", + "version": "3.0.78", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.76", + "version": "3.0.78", "license": "GPL-3.0-only", "dependencies": { "@heroicons/react": "^2.0.17", @@ -18,6 +18,7 @@ "radash": "^12.1.0", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", + "react-inlinesvg": "^4.2.0", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-markdown": "^9.0.1", @@ -10203,6 +10204,14 @@ "react": "^18.3.1" } }, + "node_modules/react-from-dom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz", + "integrity": "sha512-CO92PmMKo/23uYPm6OFvh5CtZbMgHs/Xn+o095Lz/TZj9t8DSDhGdSOMLxBxwWI4sr0MF17KUn9yJWc5Q00R/w==", + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-image-crop": { "version": "10.1.8", "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz", @@ -10212,6 +10221,17 @@ "react": ">=16.13.1" } }, + "node_modules/react-inlinesvg": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.2.0.tgz", + "integrity": "sha512-V59P6sFU7NACIbvoay9ikYKVFWyIIZFGd7w6YT1m+H7Ues0fOI6B6IftE6NPSYXXv7RHVmrncIyJeYurs3OJcA==", + "dependencies": { + "react-from-dom": "^0.7.5" + }, + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 04d945c3..ea2ee04a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.76", + "version": "3.0.78", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage": "https://utopia-os.org/", @@ -99,6 +99,7 @@ "radash": "^12.1.0", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", + "react-inlinesvg": "^4.2.0", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-markdown": "^9.0.1", diff --git a/rollup.config.js b/rollup.config.js index 05dd097b..dac65839 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -76,6 +76,7 @@ export default [ 'leaflet.locatecontrol/dist/L.Control.Locate.css', 'yet-another-react-lightbox', 'react-photo-album', + 'react-inlinesvg', ], }, { diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx index 67620cdf..3eba67ee 100644 --- a/src/Components/AppShell/ContextWrapper.tsx +++ b/src/Components/AppShell/ContextWrapper.tsx @@ -15,9 +15,20 @@ import { TagsProvider } from '#components/Map/hooks/useTags' import { AppStateProvider } from './hooks/useAppState' +import type { CloseButtonProps } from 'react-toastify' + // Helper context to determine if the ContextWrapper is already present. const ContextCheckContext = createContext(false) +const CloseButton = ({ closeToast }: CloseButtonProps) => ( + +) + export const ContextWrapper = ({ children }: { children: React.ReactNode }) => { const isWrapped = useContext(ContextCheckContext) @@ -67,6 +78,7 @@ export const Wrappers = ({ children }) => { draggable pauseOnHover theme='light' + closeButton={CloseButton} /> {children} diff --git a/src/Components/AppShell/index.tsx b/src/Components/AppShell/index.tsx index d0c058df..7f27e9d5 100644 --- a/src/Components/AppShell/index.tsx +++ b/src/Components/AppShell/index.tsx @@ -1,3 +1,4 @@ export * from './AppShell' export { SideBar } from './SideBar' export { Content } from './Content' +export { default as SVG } from 'react-inlinesvg' diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index c2de677b..c1a46a54 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/src/Components/Map/Subcomponents/AddButton.tsx @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ +import SVG from 'react-inlinesvg' + import PlusSVG from '#assets/plus.svg' import { useLayers } from '#components/Map/hooks/useLayers' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' @@ -31,7 +33,7 @@ export default function AddButton({ {canAddItems() ? (
)} diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx index db555bf2..ace5b9e0 100644 --- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -6,6 +6,7 @@ /* eslint-disable @typescript-eslint/no-unsafe-call */ import { control } from 'leaflet' import { useEffect, useRef, useState } from 'react' +import SVG from 'react-inlinesvg' import { useMap, useMapEvents } from 'react-leaflet' import TargetSVG from '#assets/target.svg' @@ -58,9 +59,8 @@ export const LocateControl = () => { {loading ? ( ) : ( - x diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index a267019e..8b785784 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -15,6 +15,7 @@ import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon import axios from 'axios' import { LatLng, LatLngBounds, marker } from 'leaflet' import { useEffect, useRef, useState } from 'react' +import SVG from 'react-inlinesvg' import { useMap, useMapEvents } from 'react-leaflet' import { useLocation, useNavigate } from 'react-router-dom' @@ -169,7 +170,7 @@ export const SearchControl = () => { {itemsResults.slice(0, 5).map((item) => (
{ const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1] .marker @@ -182,18 +183,25 @@ export const SearchControl = () => { } }} > -
- { + code = code.replace(/fill=".*?"/g, 'fill="currentColor"') + code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"') + return code + }} /> -
-
- {item.name} -
-
- {item.text} -
+ ) : ( +
+ )} +
+
+ {item.name} +
+
+ {item.text}
@@ -236,7 +244,7 @@ export const SearchControl = () => { hide() }} > - +
{geo?.properties.name ? geo?.properties.name : value} diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 69f7569e..58690d84 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -13,6 +13,7 @@ import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon import PencilIcon from '@heroicons/react/24/solid/PencilIcon' import TrashIcon from '@heroicons/react/24/solid/TrashIcon' import { useState } from 'react' +import SVG from 'react-inlinesvg' import { useNavigate } from 'react-router-dom' import TargetDotSVG from '#assets/targetDot.svg' @@ -159,7 +160,7 @@ export function HeaderView({ className='!tw-text-base-content tw-cursor-pointer' onClick={setPositionCallback} > - Position + )} diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx index 25198f21..0ae8fc43 100644 --- a/src/Components/Map/UtopiaMapInner.tsx +++ b/src/Components/Map/UtopiaMapInner.tsx @@ -75,10 +75,12 @@ export function UtopiaMapInner({ , diff --git a/src/assets/target.svg b/src/assets/target.svg index 711e071b..12418655 100644 --- a/src/assets/target.svg +++ b/src/assets/target.svg @@ -5,4 +5,4 @@ xmlns='http://www.w3.org/2000/svg' > - \ No newline at end of file +