Add get_props, extras to wrapper, set_props takes path

Author: T4rk1n

components/dash-core-components/src/components/ConfirmDialogProvider.react.js

@@ -1,4 +1,3 @@
-import {clone} from 'ramda';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -20,26 +19,15 @@ export default class ConfirmDialogProvider extends React.Component {
     render() {
         const {displayed, id, setProps, children, loading_state} = this.props;
 
-        // Will lose the previous onClick of the child
-        const wrapClick = child => {
-            const props = clone(child.props);
-            props._dashprivate_layout.props.onClick = () => {
-                setProps({displayed: true});
-            };
-
-            return React.cloneElement(child, props);
-        };
-
         return (
             <div
                 id={id}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
+                onClick={() => setProps({displayed: !displayed})}
             >
-                {Array.isArray(children)
-                    ? children.map(wrapClick)
-                    : wrapClick(children)}
+                {children}
                 <ConfirmDialog {...this.props} displayed={displayed} />
             </div>
         );

components/dash-core-components/src/components/Tabs.react.js

@@ -135,8 +135,6 @@ export default class Tabs extends Component {
         super(props);
 
         this.selectHandler = this.selectHandler.bind(this);
-        this.parseChildrenToArray = this.parseChildrenToArray.bind(this);
-        this.valueOrDefault = this.valueOrDefault.bind(this);
 
         if (!has('value', this.props)) {
             this.props.setProps({
@@ -150,8 +148,12 @@ export default class Tabs extends Component {
             return this.props.value;
         }
         const children = this.parseChildrenToArray();
-        if (children && children[0].props.children) {
-            return children[0].props.children.props.value || 'tab-1';
+        if (children && children.length) {
+            const firstChildren = window.dash_clientside.get_props(
+                children[0].props.componentPath,
+                'value'
+            );
+            return firstChildren || 'tab-1';
         }
         return 'tab-1';
     }
@@ -173,6 +175,8 @@ export default class Tabs extends Component {
         let EnhancedTabs;
         let selectedTab;
 
+        const value = this.valueOrDefault();
+
         if (this.props.children) {
             const children = this.parseChildrenToArray();
 
@@ -183,28 +187,16 @@ export default class Tabs extends Component {
                 // enhance Tab components coming from Dash (as dcc.Tab) with methods needed for handling logic
                 let childProps;
 
-                if (
-                    // disabled is a defaultProp (so it's always set)
-                    // meaning that if it's not set on child.props, the actual
-                    // props we want are lying a bit deeper - which means they
-                    // are coming from Dash
-                    isNil(child.props.disabled) &&
-                    child.props._dashprivate_layout &&
-                    child.props._dashprivate_layout.props
-                ) {
-                    // props are coming from Dash
-                    childProps = child.props._dashprivate_layout.props;
-                } else {
-                    // else props are coming from React (Demo.react.js, or Tabs.test.js)
-                    childProps = child.props;
-                }
+                childProps = window.dash_clientside.get_props(
+                    child.props.componentPath
+                );
 
                 if (!childProps.value) {
                     childProps = {...childProps, value: `tab-${index + 1}`};
                 }
 
                 // check if this child/Tab is currently selected
-                if (childProps.value === this.valueOrDefault()) {
+                if (childProps.value === value) {
                     selectedTab = child;
                 }
 
@@ -213,7 +205,7 @@ export default class Tabs extends Component {
                         key={index}
                         id={childProps.id}
                         label={childProps.label}
-                        selected={this.valueOrDefault() === childProps.value}
+                        selected={value === childProps.value}
                         selectHandler={this.selectHandler}
                         className={childProps.className}
                         style={childProps.style}

dash/dash-renderer/src/APIController.react.js

@@ -71,13 +71,33 @@ const UnconnectedContainer = props => {
         layoutRequest.status &&
         !includes(layoutRequest.status, [STATUS.OK, 'loading'])
     ) {
-        content = <div className='_dash-error'>Error loading layout</div>;
+        if (config.ui) {
+            content = (
+                <div
+                    dangerouslySetInnerHTML={{__html: layoutRequest.content}}
+                ></div>
+            );
+        } else {
+            content = <div className='_dash-error'>Error loading layout</div>;
+        }
     } else if (
         errorLoading ||
         (dependenciesRequest.status &&
             !includes(dependenciesRequest.status, [STATUS.OK, 'loading']))
     ) {
-        content = <div className='_dash-error'>Error loading dependencies</div>;
+        if (config.ui) {
+            content = (
+                <div
+                    dangerouslySetInnerHTML={{
+                        __html: dependenciesRequest.content
+                    }}
+                ></div>
+            );
+        } else {
+            content = (
+                <div className='_dash-error'>Error loading dependencies</div>
+            );
+        }
     } else if (appLifecycle === getAppState('HYDRATED')) {
         renderedTree.current = true;
 
@@ -90,15 +110,15 @@ const UnconnectedContainer = props => {
                         ) : (
                             <DashWrapper
                                 _dashprivate_error={error}
-                                _dashprivate_path={[i]}
+                                componentPath={[i]}
                                 key={i}
                             />
                         )
                     )
                 ) : (
                     <DashWrapper
                         _dashprivate_error={error}
-                        _dashprivate_path={[]}
+                        componentPath={[]}
                     />
                 )}
             </>

dash/dash-renderer/src/actions/api.js

@@ -116,14 +116,16 @@ export default function apiThunk(endpoint, method, store, id, body) {
                     return json;
                 });
             }
+            const content = await res.text();
             logWarningOnce(
                 'Response is missing header: content-type: application/json'
             );
             return dispatch({
                 type: store,
                 payload: {
                     id,
-                    status: res.status
+                    status: res.status,
+                    content
                 }
             });
         } catch (err) {

dash/dash-renderer/src/utils/clientsideFunctions.ts

@@ -1,22 +1,37 @@
+import {concat, path} from 'ramda';
 import {updateProps, notifyObservers} from '../actions/index';
 import {getPath} from '../actions/paths';
 
-const set_props = (id: string | object, props: {[k: string]: any}) => {
+/**
+ * Set the props of a dash component by id or path.
+ *
+ * @param idOrPath Path or id of the dash component to update.
+ * @param props The props to update.
+ */
+function set_props(
+    idOrPath: string | object | string[],
+    props: {[k: string]: any}
+) {
     const ds = ((window as any).dash_stores =
         (window as any).dash_stores || []);
     for (let y = 0; y < ds.length; y++) {
         const {dispatch, getState} = ds[y];
-        const {paths} = getState();
-        const componentPath = getPath(paths, id);
+        let componentPath;
+        if (!Array.isArray(idOrPath)) {
+            const {paths} = getState();
+            componentPath = getPath(paths, idOrPath);
+        } else {
+            componentPath = idOrPath;
+        }
         dispatch(
             updateProps({
                 props,
                 itempath: componentPath
             })
         );
-        dispatch(notifyObservers({id, props}));
+        dispatch(notifyObservers({id: idOrPath, props}));
     }
-};
+}
 
 // Clean url code adapted from https://github.com/braintree/sanitize-url/blob/main/src/constants.ts
 // to allow for data protocol.
@@ -42,7 +57,39 @@ const clean_url = (url: string, fallback = 'about:blank') => {
     return url;
 };
 
+/**
+ * Get the dash props from a component path or id.
+ *
+ * @param componentPathOrId The path or the id of the component to get the props of.
+ * @param propPath Additional key to get the property instead of plain props.
+ * @returns
+ */
+function get_props(
+    componentPathOrId: string[] | string,
+    ...propPath: string[]
+): any {
+    const ds = ((window as any).dash_stores =
+        (window as any).dash_stores || []);
+    for (let y = 0; y < ds.length; y++) {
+        const {paths, layout} = ds[y].getState();
+        let componentPath;
+        if (!Array.isArray(componentPathOrId)) {
+            componentPath = getPath(paths, componentPathOrId);
+        } else {
+            componentPath = componentPathOrId;
+        }
+        const props = path(
+            concat(componentPath, ['props', ...propPath]),
+            layout
+        );
+        if (props !== undefined) {
+            return props;
+        }
+    }
+}
+
 const dc = ((window as any).dash_clientside =
     (window as any).dash_clientside || {});
 dc['set_props'] = set_props;
 dc['clean_url'] = dc['clean_url'] === undefined ? clean_url : dc['clean_url'];
+dc['get_props'] = get_props;

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -34,12 +34,20 @@ import {
 import CheckedComponent from './CheckedComponent';
 
 type DashWrapperProps = {
-    _dashprivate_path: DashLayoutPath;
+    /**
+     * Path of the component in the layout.
+     */
+    componentPath: DashLayoutPath;
+    /**
+     * extras props to be merged with the dash props from the store.
+     */
+    extras?: any;
     _dashprivate_error?: any;
 };
 
 function DashWrapper({
-    _dashprivate_path: componentPath,
+    componentPath,
+    extras,
     _dashprivate_error
 }: DashWrapperProps) {
     const dispatch = useDispatch();
@@ -126,7 +134,7 @@ function DashWrapper({
                         key
                     }
                     _dashprivate_error={_dashprivate_error}
-                    _dashprivate_path={containerPath}
+                    componentPath={containerPath}
                 />
             );
         },
@@ -165,7 +173,7 @@ function DashWrapper({
     const extraProps = {
         loading_state,
         setProps,
-        _dashprivate_layout: component
+        ...extras
     };
 
     const element = useMemo(() => Registry.resolve(component), [component]);
@@ -418,7 +426,7 @@ function DashWrapper({
 export default memo(
     DashWrapper,
     (prevProps, nextProps) =>
-        JSON.stringify(prevProps._dashprivate_path) ===
-            JSON.stringify(nextProps._dashprivate_path) &&
+        JSON.stringify(prevProps.componentPath) ===
+            JSON.stringify(nextProps.componentPath) &&
         prevProps._dashprivate_error === nextProps._dashprivate_error
 );