Add twoSettingField

microsoft · Dec 4, 2019 · c8f95dd · c8f95dd
1 parent ed0b7ae
commit c8f95dd
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 57 deletions.
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/PromptSettings.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/PromptSettings.tsx
@@ -9,8 +9,9 @@ import { MicrosoftInputDialog } from '@bfc/shared';
 
 import { TextWidget, CheckboxWidget } from '../../widgets';
 
-import { field, settingsFields, settingsFieldHalf, settingsFieldFull, settingsFieldInline } from './styles';
-import { PromptFieldChangeHandler, GetSchema } from './types';
+import { TwoSettingFields } from './twoSettingFields';
+import { field, settingsFields, settingsFieldFull, settingsFieldInline } from './styles';
+import { PromptFieldChangeHandler, GetSchema, InputDialogKeys } from './types';
 
 interface PromptSettingsrops extends FieldProps<MicrosoftInputDialog> {
   onChange: PromptFieldChangeHandler;
@@ -19,52 +20,43 @@ interface PromptSettingsrops extends FieldProps<MicrosoftInputDialog> {
 
 export const PromptSettings: React.FC<PromptSettingsrops> = props => {
   const { formData, idSchema, getSchema, onChange, errorSchema } = props;
+  const fields: { [key: string]: InputDialogKeys | string }[] = [
+    {
+      name: 'maxTurnCount',
+      title: 'Max turn count',
+    },
+    {
+      name: 'defaultValue',
+      title: 'Default value',
+    },
+  ];
 
   return (
-    <div css={settingsFields}>
-      <div css={[field, settingsFieldHalf]}>
-        <TextWidget
-          onChange={onChange('maxTurnCount')}
-          schema={getSchema('maxTurnCount')}
-          id={idSchema.maxTurnCount.__id}
-          value={formData.maxTurnCount}
-          label={formatMessage('Max turn count')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.maxTurnCount && errorSchema.maxTurnCount.__errors}
-        />
-      </div>
-      <div css={[field, settingsFieldHalf]}>
-        <TextWidget
-          onChange={onChange('defaultValue')}
-          schema={getSchema('defaultValue')}
-          id={idSchema.defaultValue.__id}
-          value={formData.defaultValue}
-          label={formatMessage('Default value')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.defaultValue && errorSchema.defaultValue.__errors}
-        />
-      </div>
-      <div css={[field, settingsFieldFull]}>
-        <TextWidget
-          onChange={onChange('allowInterruptions')}
-          schema={getSchema('allowInterruptions')}
-          id={idSchema.allowInterruptions.__id}
-          value={formData.allowInterruptions}
-          label={formatMessage('Allow interruptions')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.allowInterruptions && errorSchema.allowInterruptions.__errors}
-        />
-      </div>
-      <div css={[field, settingsFieldFull, settingsFieldInline]}>
-        <CheckboxWidget
-          onChange={onChange('alwaysPrompt')}
-          schema={getSchema('alwaysPrompt')}
-          id={idSchema.alwaysPrompt.__id}
-          value={formData.alwaysPrompt}
-          label={formatMessage('Always prompt')}
-          formContext={props.formContext}
-          rawErrors={errorSchema.alwaysPrompt && errorSchema.alwaysPrompt.__errors}
-        />
+    <div>
+      <TwoSettingFields fields={fields} {...props} />
+      <div css={settingsFields}>
+        <div css={[field, settingsFieldFull]}>
+          <TextWidget
+            onChange={onChange('allowInterruptions')}
+            schema={getSchema('allowInterruptions')}
+            id={idSchema.allowInterruptions.__id}
+            value={formData.allowInterruptions}
+            label={formatMessage('Allow interruptions')}
+            formContext={props.formContext}
+            rawErrors={errorSchema.allowInterruptions && errorSchema.allowInterruptions.__errors}
+          />
+        </div>
+        <div css={[field, settingsFieldFull, settingsFieldInline]}>
+          <CheckboxWidget
+            onChange={onChange('alwaysPrompt')}
+            schema={getSchema('alwaysPrompt')}
+            id={idSchema.alwaysPrompt.__id}
+            value={formData.alwaysPrompt}
+            label={formatMessage('Always prompt')}
+            formContext={props.formContext}
+            rawErrors={errorSchema.alwaysPrompt && errorSchema.alwaysPrompt.__errors}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/twoSettingFields.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/twoSettingFields.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable format-message/literal-pattern */
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import formatMessage from 'format-message';
+import { FieldProps } from '@bfcomposer/react-jsonschema-form';
+import { MicrosoftInputDialog } from '@bfc/shared';
+
+import { TextWidget } from '../../widgets';
+
+import { field, settingsFieldHalf, settingsFields, settingsFieldFull, settingsFieldValidation } from './styles';
+import { PromptFieldChangeHandler, GetSchema, InputDialogKeys } from './types';
+
+interface TwoSettingFieldsProps extends FieldProps<MicrosoftInputDialog> {
+  onChange: PromptFieldChangeHandler;
+  getSchema: GetSchema;
+  fields: { [key: string]: InputDialogKeys | string }[];
+}
+export const TwoSettingFields: React.FC<TwoSettingFieldsProps> = props => {
+  const { fields, formData, idSchema, getSchema, onChange, errorSchema } = props;
+  const [errorMessage, setErrorMessage] = useState(false);
+
+  const onValidate = errMessage => {
+    setErrorMessage(errMessage);
+  };
+  return (
+    <div css={settingsFields}>
+      {fields.map((settingField, index) => (
+        <div key={index} css={[field, settingsFieldHalf]}>
+          <TextWidget
+            onChange={onChange(settingField.name as InputDialogKeys)}
+            schema={getSchema(settingField.name as InputDialogKeys)}
+            id={idSchema[settingField.name].__id}
+            value={formData[settingField.name]}
+            label={formatMessage(settingField.title as string)}
+            formContext={props.formContext}
+            rawErrors={errorSchema[settingField.name] && errorSchema[settingField.name].__errors}
+            hiddenErrMessage={true}
+            onValidate={onValidate}
+          />
+        </div>
+      ))}
+      <div css={[field, settingsFieldFull, settingsFieldValidation]}>{errorMessage}</div>
+    </div>
+  );
+};
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/ExpressionWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/ExpressionWidget.tsx
@@ -2,18 +2,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { useState } from 'react';
 import { TextField, ITextFieldProps, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
 import { JSONSchema6 } from 'json-schema';
 import formatMessage from 'format-message';
+import { SharedColors } from '@uifabric/fluent-theme';
 
 import { FormContext } from '../types';
 import { EditableField } from '../fields/EditableField';
 
 import { WidgetLabel } from './WidgetLabel';
 
 interface ExpresionWidgetProps extends ITextFieldProps {
+  hiddenErrMessage?: boolean;
+  onValidate?: (errMessage: JSX.Element | '') => void;
   formContext: FormContext;
   rawErrors?: string[];
   schema: JSONSchema6;
@@ -52,20 +55,36 @@ const getErrorMessage = () =>
   );
 
 export const ExpressionWidget: React.FC<ExpresionWidgetProps> = props => {
-  const { rawErrors, formContext, schema, id, label, editable, ...rest } = props;
+  const { rawErrors, formContext, schema, id, label, editable, hiddenErrMessage, onValidate, ...rest } = props;
   const { shellApi } = formContext;
   const { description } = schema;
+  const [styleOverrides, setStyleOverrides] = useState<Partial<ITextFieldStyles>>({
+    errorMessage: {
+      display: 'block',
+      paddingTop: '0px',
+    },
+  });
   const onGetErrorMessage = (value: string): Promise<string | JSX.Element> | string => {
     if (!value) {
+      if (hiddenErrMessage) {
+        setStyleOverrides({
+          errorMessage: {
+            display: 'block',
+            paddingTop: '0px',
+          },
+        });
+        onValidate && onValidate('');
+      }
       return '';
     }
     return shellApi.validateExpression(value).then(isValid => {
+      let errMessage: JSX.Element | '' = '';
       if (!isValid) {
-        return <>{getErrorMessage()}</>;
+        errMessage = <>{getErrorMessage()}</>;
       }
 
       if (rawErrors && rawErrors.length > 0) {
-        return (
+        errMessage = (
           <>
             {formatMessage.rich(`<MessageBar>${rawErrors[0]}<MessageBar>`, {
               // eslint-disable-next-line react/display-name
@@ -84,16 +103,39 @@ export const ExpressionWidget: React.FC<ExpresionWidgetProps> = props => {
           </>
         );
       }
-      return '';
+      if (hiddenErrMessage) {
+        onValidate && onValidate(errMessage);
+        if (errMessage) {
+          setStyleOverrides({
+            errorMessage: {
+              display: 'block',
+              paddingTop: '0px',
+            },
+            fieldGroup: {
+              borderColor: `${SharedColors.red20}`,
+              selectors: {
+                '&:after': {
+                  borderColor: `${SharedColors.red20}`,
+                },
+              },
+            },
+          });
+        } else {
+          setStyleOverrides({
+            errorMessage: {
+              display: 'block',
+              paddingTop: '0px',
+            },
+          });
+        }
+        return '';
+      } else {
+        return errMessage;
+      }
     });
   };
   const Field = editable ? EditableField : TextField;
 
-  const styleOverrides: Partial<ITextFieldStyles> = {
-    errorMessage: {
-      display: 'block',
-    },
-  };
   return (
     <>
       <WidgetLabel label={label} description={description} id={id} />

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx
@@ -18,7 +18,12 @@ const getFloat = (value: string, step: number) => {
   return (parseFloat(value) + step).toFixed(step > 0 ? `${step}`.split('.')[1].length : step);
 };
 
-export function TextWidget(props: BFDWidgetProps) {
+interface ITextWidgetProps extends BFDWidgetProps {
+  hiddenErrMessage?: boolean;
+  onValidate?: (errMessage: JSX.Element | '') => void;
+}
+
+export function TextWidget(props: ITextWidgetProps) {
   const {
     label,
     onBlur,
@@ -32,6 +37,8 @@ export function TextWidget(props: BFDWidgetProps) {
     disabled,
     formContext,
     rawErrors,
+    hiddenErrMessage,
+    onValidate,
   } = props;
   const { description, examples = [], type, $role } = schema;
 
@@ -93,6 +100,8 @@ export function TextWidget(props: BFDWidgetProps) {
         schema={schema}
         formContext={formContext}
         rawErrors={rawErrors}
+        hiddenErrMessage={hiddenErrMessage}
+        onValidate={onValidate}
       />
     );
   }