chore: retire 'DefaultRenderer' in visual editor

Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx

@@ -3,7 +3,6 @@
 
 export * from './steps/ActivityRenderer';
 export * from './steps/BeginDialog';
-export * from './steps/DefaultRenderer';
 export * from './steps/ReplaceDialog';
 export * from './steps/ChoiceInput';
 export * from './steps/TextInput';

Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx

@@ -11,7 +11,6 @@ import { AttrNames } from '../../constants/ElementAttributes';
 import { NodeRendererContext } from '../../store/NodeRendererContext';
 import { SelectionContext } from '../../store/SelectionContext';
 import {
-  DefaultRenderer,
   BeginDialog,
   ReplaceDialog,
   ActivityRenderer,
@@ -24,6 +23,7 @@ import { ConditionNode } from '../nodes/steps/ConditionNode';
 import { ForeachDetail } from '../nodes/steps/ForeachDetail';
 import { ForeachPageDetail } from '../nodes/steps/ForeachPageDetail';
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
+import { UISchemaRenderer } from '../../schema/uischemaRenderer';
 
 const rendererByObiType = {
   [ObiTypes.BeginDialog]: BeginDialog,
@@ -37,7 +37,7 @@ const rendererByObiType = {
   [ObiTypes.UserAnswers]: UserInput,
   [ObiTypes.InvalidPromptBrick]: InvalidPromptBrick,
 };
-const DEFAULT_RENDERER = DefaultRenderer;
+const DEFAULT_RENDERER = UISchemaRenderer;
 
 function chooseRendererByType($type): FC<NodeProps> | ComponentClass<NodeProps> {
   const renderer = rendererByObiType[$type] || DEFAULT_RENDERER;

Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts

@@ -4,6 +4,8 @@
 import { FC, ComponentClass } from 'react';
 import { BaseSchema, SDKTypes } from '@bfc/shared';
 
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+
 export enum UISchemaBuiltinKeys {
   default = 'default',
 }
@@ -23,8 +25,12 @@ export interface UIWidget {
 
 export type WidgetComponent<T extends WidgetContainerProps> = FC<T> | ComponentClass<T, any>;
 
+export type WidgetEventHandler = (eventName: NodeEventTypes, eventData?: any) => void;
+
 export interface WidgetContainerProps {
+  id: string;
   data: BaseSchema;
+  onEvent: WidgetEventHandler;
   [propKey: string]: any;
 }
 

Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx

@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { FC } from 'react';
 import { BaseSchema } from '@bfc/shared';
 import get from 'lodash/get';
 
 import { uiSchema } from './uischema';
-import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types';
+import { UIWidget, UI_WIDGET_KEY, UIWidgetProp, WidgetEventHandler } from './uischema.types';
 
 const buildWidgetProp = (data: BaseSchema, rawPropValue: UIWidgetProp) => {
   if (typeof rawPropValue === 'function') {
@@ -35,14 +35,20 @@ const parseWidgetSchema = (data: BaseSchema, widgetSchema: UIWidget) => {
   };
 };
 
-const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Element => {
-  const { Widget, props } = parseWidgetSchema(inputData, schema);
-  return <Widget data={inputData} {...contextProps} {...props} />;
-};
+export interface UISchemaRendererProps {
+  /** The uniq id of current schema data. Usually a json path. */
+  id: string;
+
+  /** Declarative json with a $type field. */
+  data: BaseSchema;
 
-export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => {
+  /** Handle UI events */
+  onEvent: WidgetEventHandler;
+}
+
+export const UISchemaRenderer: FC<UISchemaRendererProps> = ({ id, data, onEvent, ...contextProps }): JSX.Element => {
   const $type = get(data, '$type');
   const schema = get(uiSchema, $type, uiSchema.default);
-
-  return renderWidget(data, schema, context);
+  const { Widget, props } = parseWidgetSchema(data, schema);
+  return <Widget id={id} data={data} onEvent={onEvent} {...contextProps} {...props} />;
 };

Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx

@@ -7,17 +7,17 @@ import { generateSDKTitle } from '@bfc/shared';
 import { FormCard } from '../components/nodes/templates/FormCard';
 import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
 import { ObiColors } from '../constants/ElementColors';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { NodeMenu } from '../components/menus/NodeMenu';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
   icon: string;
   content: string | number | JSX.Element;
-  menu: JSX.Element;
   colors?: {
     theme: string;
     icon: string;
   };
-  onClick: () => any;
 }
 
 const DefaultCardColor = {
@@ -26,17 +26,24 @@ const DefaultCardColor = {
 };
 
 export const ActionCard: WidgetComponent<ActionCardProps> = ({
+  id,
   data,
+  onEvent,
   title,
   icon,
   content,
-  menu,
-  onClick,
   colors = DefaultCardColor,
 }) => {
   const header = generateSDKTitle(data, title);
   const nodeColors = { themeColor: colors.theme, iconColor: colors.icon };
   return (
-    <FormCard header={header} corner={menu} icon={icon} label={content} nodeColors={nodeColors} onClick={onClick} />
+    <FormCard
+      header={header}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      icon={icon}
+      label={content}
+      nodeColors={nodeColors}
+      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
+    />
   );
 };