From 739d7ec5feeeaee7dff7319190109fc11604edb2 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Mon, 3 Feb 2020 13:01:38 +0800
Subject: [PATCH] use correct widget in ChoiceInput

---
 .../components/nodes/steps/ChoiceInput.tsx    | 109 +++++++++---------
 .../src/layouters/measureJsonBoundary.ts      |   2 +-
 .../visual-designer/src/schema/uischema.tsx   |   4 +
 .../src/widgets/ActionCard.tsx                |  13 ++-
 4 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx
index 7781a8c635..4584ffd4d5 100644
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx
@@ -15,62 +15,67 @@ import { FormCard } from '../templates/FormCard';
 import { NodeProps } from '../nodeProps';
 import { getUserAnswersTitle } from '../utils';
 
+export const ChoiceInputChoices = ({ choices }) => {
+  if (!Array.isArray(choices)) {
+    return null;
+  }
+
+  return (
+    <div data-testid="ChoiceInput" css={{ padding: '0 0 8px 45px' }}>
+      {choices.map(({ value }, index) => {
+        if (index < 3) {
+          return (
+            <div
+              key={index}
+              role="choice"
+              css={{
+                height: ChoiceInputSize.height,
+                width: ChoiceInputSize.width,
+                marginTop: ChoiceInputMarginTop,
+                paddingLeft: '7px',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                lineHeight: '19px',
+                border: '1px solid #B3B0AD',
+                boxSizing: 'border-box',
+                borderRadius: '2px',
+              }}
+              title={typeof value === 'string' ? value : ''}
+            >
+              {value}
+            </div>
+          );
+        }
+      })}
+      {Array.isArray(choices) && choices.length > 3 ? (
+        <div
+          data-testid="hasMore"
+          css={{
+            height: ChoiceInputSize.height,
+            width: ChoiceInputSize.width,
+            marginTop: ChoiceInputMarginTop,
+            textAlign: 'center',
+            fontFamily: 'Segoe UI',
+            fontSize: '12px',
+            lineHeight: '19px',
+            boxSizing: 'border-box',
+          }}
+        >
+          {`${choices.length - 3} more`}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
 export const ChoiceInput: FC<NodeProps> = ({ id, data, onEvent }): JSX.Element => {
   const boundary = measureJsonBoundary(data);
   const { choices } = data;
-  let children: any = null;
+  const children = <ChoiceInputChoices choices={choices} />;
 
-  if (Array.isArray(choices)) {
-    children = (
-      <div data-testid="ChoiceInput" css={{ padding: '0 0 8px 45px' }}>
-        {choices.map(({ value }, index) => {
-          if (index < 3) {
-            return (
-              <div
-                key={index}
-                role="choice"
-                css={{
-                  height: ChoiceInputSize.height,
-                  width: ChoiceInputSize.width,
-                  marginTop: ChoiceInputMarginTop,
-                  paddingLeft: '7px',
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  fontFamily: 'Segoe UI',
-                  fontSize: '12px',
-                  lineHeight: '19px',
-                  border: '1px solid #B3B0AD',
-                  boxSizing: 'border-box',
-                  borderRadius: '2px',
-                }}
-                title={typeof value === 'string' ? value : ''}
-              >
-                {value}
-              </div>
-            );
-          }
-        })}
-        {Array.isArray(choices) && choices.length > 3 ? (
-          <div
-            data-testid="hasMore"
-            css={{
-              height: ChoiceInputSize.height,
-              width: ChoiceInputSize.width,
-              marginTop: ChoiceInputMarginTop,
-              textAlign: 'center',
-              fontFamily: 'Segoe UI',
-              fontSize: '12px',
-              lineHeight: '19px',
-              boxSizing: 'border-box',
-            }}
-          >
-            {`${choices.length - 3} more`}
-          </div>
-        ) : null}
-      </div>
-    );
-  }
   return (
     <FormCard
       nodeColors={NodeColors[DialogGroup.INPUT]}
diff --git a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
index 7d3fcf6948..9002f017ef 100644
--- a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
+++ b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
@@ -59,7 +59,7 @@ function measureSwitchConditionBoundary(json): Boundary {
   );
 }
 
-function measureChoiceInputDetailBoundary(data): Boundary {
+export function measureChoiceInputDetailBoundary(data): Boundary {
   const width = InitNodeSize.width;
   const height =
     InitNodeSize.height +
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
index 03cd05bfd3..b53e5bfdb1 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
@@ -15,6 +15,8 @@ import { SwitchConditionWidget } from '../widgets/SwitchConditionWidget';
 import { ForeachWidget } from '../widgets/ForeachWidget';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { ObiColors } from '../constants/ElementColors';
+import { ChoiceInputChoices } from '../components/nodes';
+import { measureChoiceInputDetailBoundary } from '../layouters/measureJsonBoundary';
 
 import { UISchema, UIWidget } from './uischema.types';
 
@@ -38,6 +40,8 @@ const BaseInputSchema: UIWidget = {
     icon: ElementIcon.User,
     menu: 'none',
     content: data => data.property || '<property>',
+    children: data => (data.$type === SDKTypes.ChoiceInput ? <ChoiceInputChoices choices={data.choices} /> : null),
+    size: data => measureChoiceInputDetailBoundary(data),
     colors: {
       theme: ObiColors.LightBlue,
       icon: ObiColors.AzureBlue,
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index 21d71b47c5..db45d55919 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -15,6 +15,12 @@ export interface ActionCardProps extends WidgetContainerProps {
   icon: string;
   content: string | number | JSX.Element;
   menu?: JSX.Element | string;
+  children?: JSX.Element;
+  size?: {
+    width: number;
+
+    height: number;
+  };
   colors?: {
     theme: string;
     icon: string;
@@ -35,6 +41,8 @@ export const ActionCard: WidgetComponent<ActionCardProps> = ({
   icon,
   menu,
   content,
+  children,
+  size,
   colors = DefaultCardColor,
 }) => {
   const header = disableSDKTitle ? title : generateSDKTitle(data, title);
@@ -46,6 +54,9 @@ export const ActionCard: WidgetComponent<ActionCardProps> = ({
       icon={icon}
       label={content}
       nodeColors={nodeColors}
-    />
+      styles={{ ...size }}
+    >
+      {children}
+    </FormCard>
   );
 };