Updates the use of renderDashComponents to use ExternalWrapper when Dash 3 and falls back on dash-extensions for Dash 2

CHANGELOG.md

@@ -10,6 +10,9 @@
 
 -   Added `RichTextEditor` and `TypographyStylesProvider` components #530 by @emilhe
 
+### Changed
+
+- Complex components such as highlightcode, stepper are now rendered by the dash ecosystem when using dash 3+. Dash 2 falls back on `dash-extensions-js` to render via `React.createElement` (by @emilhe). This enables the use of these components in callbacks as triggers. #531 @BSd3v 
 
 # 1.0.0
 

requires-dev.txt

@@ -4,4 +4,5 @@ pytest<8.1.0
 wheel
 selenium<4.3.0
 black
-build
+build
+dash-iconify

src/ts/components/core/SegmentedControl.tsx

@@ -5,12 +5,12 @@ import {
     MantineSize,
     SegmentedControlItem,
 } from "@mantine/core";
-import { renderDashComponent } from "dash-extensions-js";
+
 import { BoxProps } from "props/box";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
-import { setPersistence, getLoadingState } from "../../utils/dash3";
+import { setPersistence, getLoadingState, newRenderDashComponent, getContextPath } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -59,14 +59,15 @@ const SegmentedControl = (props: Props) => {
         ...others
     } = props;
 
+    const componentPath = getContextPath()
     const renderedData = [];
     data.forEach((item, index) => {
         if (typeof item === "string") {
             renderedData.push(item);
         } else {
             const rItem = {
                 value: item["value"],
-                label: renderDashComponent(item["label"]),
+                label: newRenderDashComponent(item["label"], index, componentPath ? [...componentPath, index, 'label'] : []),
                 disabled: item["disabled"],
             };
             renderedData.push(rItem);

src/ts/components/core/stepper/Stepper.tsx

@@ -6,13 +6,12 @@ import {
     Stepper as MantineStepper,
 } from "@mantine/core";
 import { useDidUpdate } from "@mantine/hooks";
-import { renderDashComponents } from "dash-extensions-js";
 import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import { omit } from "ramda";
 import React, { useState } from "react";
-import { getChildLayout, getLoadingState } from "../../../utils/dash3";
+import { getChildLayout, getLoadingState, newRenderDashComponents, getContextPath } from "../../../utils/dash3";
 
 interface Props extends BoxProps, DashBaseProps, StylesApiProps {
     /** Index of the active step */
@@ -73,15 +72,15 @@ const Stepper = ({ setProps, loading_state, active, children, ...others }: Props
                         </MantineStepper.Completed>
                     );
                 } else {
-                    const renderedProps = renderDashComponents(
+                    const renderedProps = newRenderDashComponents(
                         omit(["children"], childProps),
                         [
                             "label",
                             "description",
                             "icon",
                             "progressIcon",
                             "completedIcon",
-                        ]
+                        ], getContextPath()
                     );
 
                     return (

src/ts/components/core/timeline/Timeline.tsx

@@ -3,13 +3,13 @@ import {
     MantineRadius,
     Timeline as MantineTimeline,
 } from "@mantine/core";
-import { renderDashComponents } from "dash-extensions-js";
+
 import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import { omit } from "ramda";
 import React from "react";
-import { getLoadingState, getChildProps } from "../../../utils/dash3";
+import { getLoadingState, getChildProps, newRenderDashComponents } from "../../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** `Timeline.Item` components */
@@ -43,9 +43,10 @@ const Timeline = (props: Props) => {
         >
             {React.Children.map(children, (child: any, index) => {
                 const childProps = getChildProps(child)
-                const renderedProps = renderDashComponents(
+                const renderedProps = newRenderDashComponents(
                     omit(["children"], childProps),
-                    ["title", "bullet"]
+                    ["title", "bullet"],
+                    childProps.componentPath
                 );
                 return (
                     <MantineTimeline.Item {...renderedProps} key={index}>

src/ts/components/extensions/codehighlight/fragments/CodeHighlightTabs.tsx

@@ -2,22 +2,23 @@ import {
     CodeHighlightTabs as MantineCodeHighlightTabs,
 } from "@mantine/code-highlight";
 import "@mantine/code-highlight/styles.css";
-import { renderDashComponents } from "dash-extensions-js";
+
 import React from "react";
-import { getLoadingState } from "../../../../utils/dash3";
+import { getLoadingState, newRenderDashComponents, getContextPath } from "../../../../utils/dash3";
 import { Props }  from "../CodeHighlightTabs"
 
 
 /** CodeHighlightTabs */
 const CodeHighlightTabs = (props: Props) => {
     const { setProps, loading_state, code, ...others } = props;
+    const componentPath = getContextPath()
     const renderedCode = [];
     if (Array.isArray(code)) {
         code.forEach((item, index) => {
-            renderedCode.push(renderDashComponents(item, ["icon"]));
+            renderedCode.push(newRenderDashComponents(item, ["icon"], componentPath ? [...componentPath, index] : []));
         });
     } else {
-        renderedCode.push(renderDashComponents(code, ["icon"]));
+        renderedCode.push(newRenderDashComponents(code, ["icon"], componentPath ? [...componentPath, 0] : []));
     }
 
     return (

src/ts/utils/dash3.ts

@@ -4,14 +4,68 @@
  * For more details, refer to the Dash documentation:
  * Dash 3 for Component Developers - https://dash.plotly.com/dash-3-for-component-developers
  */
-import React from "react";
+import React, { useState, createElement } from "react";
 import { DashBaseProps } from "props/dash";
+import {dissoc, has, includes, isEmpty, isNil, mergeRight, type} from "ramda";
+
+const SIMPLE_COMPONENT_TYPES = ['String', 'Number', 'Null', 'Boolean'];
+const isSimpleComponent = component => includes(type(component), SIMPLE_COMPONENT_TYPES);
 
 /** check for dash version */
 export const isDash3 = (): boolean => {
     return !!(window as any).dash_component_api;
 };
 
+export const newRenderDashComponent = (component: any, index?: number | null, basePath?: any[]) => {
+    if (!isDash3() || isEmpty(basePath)) {
+        const dash_extensions = require('dash-extensions-js');
+        const {renderDashComponent} = dash_extensions;
+        return renderDashComponent(component, index)
+    }
+
+    // Nothing to render.
+    if (isNil(component) || isEmpty(component)) {
+        return null;
+    }
+
+    // Simple stuff such as strings.
+    if (isSimpleComponent(component)) {
+        return component;
+    }
+
+    // Array of stuff.
+    if (Array.isArray(component)) {
+        return component.map((item, i) => newRenderDashComponent(item, i, [...(basePath || []), i]));
+    }
+
+    // Merge props.
+    const allProps = {
+        component,
+        componentPath: [...(basePath || [])],
+        key: index !== null ? index : Math.random().toString(36).substr(2, 9)
+    };
+
+    // Render the component.
+    return createElement((window as any).dash_component_api.ExternalWrapper, allProps);
+};
+
+export const newRenderDashComponents = (props: any, propsToRender: string[], basePath: any[]=[]) => {
+    const _ = require('lodash')
+    const newProps = _.cloneDeep(props)
+    if (!isDash3() || isEmpty(basePath)) {
+        const dash_extensions = require('dash-extensions-js');
+        const {renderDashComponents} = dash_extensions;
+        return renderDashComponents(newProps, propsToRender)
+    }
+    for (let i = 0; i < propsToRender.length; i++) {
+        const key = propsToRender[i];
+        if (newProps.hasOwnProperty(key)) {
+            newProps[key] = newRenderDashComponent(newProps[key], null, [...basePath, key]);
+        }
+    }
+    return newProps;
+};
+
 /** Apply persistence settings based on React version */
 export const setPersistence = (Component: any, props: string[] = ["value"]): void => {
     const persistence = { persisted_props: props, persistence_type: "local" };
@@ -76,3 +130,12 @@ export const applyDashProps = (component: any, props: Record<string, any>) => {
 
     return component;
 };
+
+export const getContextPath = () => {
+    let componentPath = [];
+    if (isDash3()) {
+        const ctx = (window as any).dash_component_api.useDashContext()
+        componentPath = ctx.componentPath
+    }
+    return componentPath
+}