From e59d7d8886359cda2ae8ae093676c1687e0fdb73 Mon Sep 17 00:00:00 2001 From: zeye Date: Wed, 8 Jan 2020 13:23:26 +0800 Subject: [PATCH 1/3] render fallback node --- .../visual-designer/src/schema/uischemaRenderer.tsx | 10 +++++++--- .../visual-designer/src/widgets/ActionCard.tsx | 4 ++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx index 24499b4954..ebcf330e40 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx @@ -2,9 +2,11 @@ // Licensed under the MIT License. import React from 'react'; -import { BaseSchema } from '@bfc/shared'; +import { BaseSchema, generateSDKTitle } from '@bfc/shared'; import get from 'lodash/get'; +import { ActionCard } from '../widgets/ActionCard'; + import { uiSchema } from './uischema'; import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types'; @@ -40,12 +42,14 @@ const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Eleme return ; }; -const renderFallbackElement = (data: BaseSchema) => <>; +const renderFallbackElement = (data: BaseSchema, context) => { + return ; +}; export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => { const $type = get(data, '$type'); const schema: UIWidget = get(uiSchema, $type); - if (!schema) return renderFallbackElement(data); + if (!schema) return renderFallbackElement(data, context); return renderWidget(data, schema, context); }; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx index a8200df902..5cc39b81de 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx @@ -10,8 +10,8 @@ import { ObiColors } from '../constants/ElementColors'; export interface ActionCardProps extends WidgetContainerProps { title: string; - icon: string; - content: string | number | JSX.Element; + icon?: string; + content?: string | number | JSX.Element; menu: JSX.Element; colors?: { theme: string; From 3f5eeda070dacb0e75574cdb420c6f6f89aeb52c Mon Sep 17 00:00:00 2001 From: zeye Date: Wed, 8 Jan 2020 13:49:43 +0800 Subject: [PATCH 2/3] fix the problem in a more schema-driven way --- .../extensions/visual-designer/src/schema/uischema.ts | 3 +++ .../visual-designer/src/schema/uischema.types.ts | 6 +++++- .../visual-designer/src/schema/uischemaRenderer.tsx | 11 ++--------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts index 49761bc551..620105afaf 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts @@ -8,6 +8,9 @@ import { ActionCard } from '../widgets/ActionCard'; import { UISchema } from './uischema.types'; export const uiSchema: UISchema = { + default: { + 'ui:widget': ActionCard, + }, [SDKTypes.EditArray]: { 'ui:widget': ActionCard, content: data => `${data.changeType} {${data.itemsProperty || '?'}}`, diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts index 9c4262e02b..465d09b1a2 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts @@ -4,9 +4,13 @@ import { FC, ComponentClass } from 'react'; import { BaseSchema, SDKTypes } from '@bfc/shared'; +export enum UISchemaBuiltinKeys { + default = 'default', +} + /** schema */ export type UISchema = { - [key in SDKTypes]?: UIWidget; + [key in SDKTypes | UISchemaBuiltinKeys]?: UIWidget; }; /** widget */ diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx index ebcf330e40..d7d5fa73f4 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx @@ -2,11 +2,9 @@ // Licensed under the MIT License. import React from 'react'; -import { BaseSchema, generateSDKTitle } from '@bfc/shared'; +import { BaseSchema } from '@bfc/shared'; import get from 'lodash/get'; -import { ActionCard } from '../widgets/ActionCard'; - import { uiSchema } from './uischema'; import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types'; @@ -42,14 +40,9 @@ const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Eleme return ; }; -const renderFallbackElement = (data: BaseSchema, context) => { - return ; -}; - export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => { const $type = get(data, '$type'); - const schema: UIWidget = get(uiSchema, $type); - if (!schema) return renderFallbackElement(data, context); + const schema = get(uiSchema, $type, uiSchema.default); return renderWidget(data, schema, context); }; From b40b7ee5b55e17c435bfb87a916a28ddb613f981 Mon Sep 17 00:00:00 2001 From: zeye Date: Wed, 8 Jan 2020 13:51:50 +0800 Subject: [PATCH 3/3] revert unnecessary changes --- .../extensions/visual-designer/src/widgets/ActionCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx index 5cc39b81de..a8200df902 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx @@ -10,8 +10,8 @@ import { ObiColors } from '../constants/ElementColors'; export interface ActionCardProps extends WidgetContainerProps { title: string; - icon?: string; - content?: string | number | JSX.Element; + icon: string; + content: string | number | JSX.Element; menu: JSX.Element; colors?: { theme: string;