BUGFIX: Extract resource resolving magic out of ResourceIcon

neos · Jul 8, 2024 · 499181a · 499181a
1 parent 6bc407d
commit 499181a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/neos-ui/src/Containers/Root.js b/packages/neos-ui/src/Containers/Root.js
@@ -12,6 +12,7 @@ import {fab} from '@fortawesome/free-brands-svg-icons';
 import {far} from '@fortawesome/free-regular-svg-icons';
 import {fas} from '@fortawesome/free-solid-svg-icons';
 import '@fortawesome/fontawesome-svg-core/styles.css';
+import {ResourceIconContext} from "@neos-project/react-ui-components/src/Icon/resourceIcon";
 
 config.autoAddCss = false; // Dont insert the supporting CSS into the <head> of the HTML document
 config.familyPrefix = 'neos-fa';
@@ -25,6 +26,7 @@ class Root extends PureComponent {
 
         const containerRegistry = globalRegistry.get('containers');
         const App = containerRegistry.get('App');
+        const createFromResourcePath = (path) => '/_Resources/Static/Packages/' + path.substr(11);
 
         return (
             <ErrorBoundary i18nRegistry={globalRegistry.get('i18n')}>
@@ -36,7 +38,9 @@ class Root extends PureComponent {
                                 configuration={configuration}
                                 routes={routes}
                                 >
-                                <App globalRegistry={globalRegistry} menu={menu}/>
+                                <ResourceIconContext.Provider value={{createFromResourcePath}}>
+                                    <App globalRegistry={globalRegistry} menu={menu}/>
+                                </ResourceIconContext.Provider>
                             </Neos>
                         </DndProvider>
                     </Provider>

diff --git a/packages/react-ui-components/src/Icon/resourceIcon.tsx b/packages/react-ui-components/src/Icon/resourceIcon.tsx
@@ -13,17 +13,28 @@ export interface ResourceIconProps extends Omit<IconProps, 'theme'> {
     readonly theme?: ResourceIconTheme;
 }
 
+export const ResourceIconContext = React.createContext<{createFromResourcePath:(path: string) => string} | null>(null);
+
 class ResourceIcon extends PureComponent<ResourceIconProps> {
+    public static readonly contextType = ResourceIconContext;
+
+    context!: React.ContextType<typeof ResourceIconContext>;
+
     public static readonly defaultProps = defaultProps;
 
     public render(): JSX.Element | null {
         const {padded, theme, label, icon, className, color, size} = this.props;
 
-        if (!icon || icon.substr(0, 11) !== 'resource://') {
+        if (!icon?.startsWith('resource://')) {
+            return null;
+        }
+
+        if (!this.context) {
+            console.error('ResourceIconContext missing! Cannot resolve uri: ', icon);
             return null;
         }
 
-        const iconResourcePath = '/_Resources/Static/Packages/' + icon.substr(11);
+        const iconResourcePath = this.context.createFromResourcePath(icon);
         const classNames = mergeClassNames(
             theme!.icon,
             className,