function WrappedStaticResultProperty()

in libs/designer-ui/src/lib/staticResult/staticResultProperty.tsx [70:256]

• 176 lines of code
• 17 McCabe index (conditional complexity)

function WrappedStaticResultProperty({
  isRoot = false,
  required = false,
  schema,
  properties,
  title,
  updateParentProperties,
}: StaticResultPropertyProps): JSX.Element {
  const intl = useIntl();
  const [inputValue, setInputValue] = useState<string>('');
  const [errorMessage, setErrorMessage] = useState<string>('');
  const [currProperties, setCurrProperties] = useState<OpenAPIV2.SchemaObject>(properties ?? {});

  // only done on initialization - when a dropdown is selected and a component is rendered, to update
  // the parent with required/default value
  useMountEffect(() => {
    if (schema.type !== constants.SWAGGER.TYPE.ARRAY && schema.type !== constants.SWAGGER.TYPE.OBJECT) {
      const inputVal = initializePropertyValueInput(currProperties, schema);
      setInputValue(inputVal);
      updateParentProperties(inputVal);
    }
  });
  // only done when the properties are updated (ignore mount)
  useUpdateEffect(() => {
    updateParentProperties(currProperties);
  }, [currProperties]);

  const getEnumValues = (): IDropdownOption[] => {
    if (!schema.enum) {
      return [];
    }
    return schema.enum.map((value) => {
      return {
        key: value,
        text: value,
      };
    });
  };

  const selectDropdownKey = (_event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
    if (option) {
      setInputValue(option.key as string);
      updateParentProperties(option.key);
    }
  };

  const dropdownPlaceHolder = intl.formatMessage({
    defaultMessage: 'Select a value',
    id: 'DJW8RE',
    description: 'Placeholder for dropdown',
  });

  const textFieldPlaceHolder = intl.formatMessage({
    defaultMessage: 'Enter a value',
    id: 'r/n6/9',
    description: 'Placeholder for text field',
  });
  const integerTextFieldPlaceHolder = intl.formatMessage({
    defaultMessage: 'Enter an integer',
    id: 'ehIBkh',
    description: 'Placeholder for integer text field',
  });

  const validateInteger = (_event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: any) => {
    if (Number.isNaN(newValue)) {
      setInputValue(inputValue ?? '');
      setErrorMessage(
        intl.formatMessage({
          defaultMessage: 'Invalid integer value',
          id: 'oR2x4N',
          description: 'Error message for invalid integer value',
        })
      );
    } else {
      setInputValue(newValue);
      setErrorMessage('');
    }
  };

  const updateParentProps = () => {
    if (!errorMessage) {
      try {
        updateParentProperties(JSON.parse(inputValue));
      } catch {
        updateParentProperties(inputValue);
      }
    }
  };

  const renderItems = (): JSX.Element => {
    switch (schema.type) {
      case constants.SWAGGER.TYPE.STRING: {
        if (schema.enum) {
          return (
            <Dropdown
              className="msla-static-result-property-dropdown"
              styles={isRoot ? dropdownRootStyles : dropdownStyles}
              options={getEnumValues()}
              selectedKey={inputValue}
              onChange={selectDropdownKey}
              label={schema.title}
              required={required}
              placeholder={dropdownPlaceHolder}
            />
          );
        }
        return (
          <TextField
            className="msla-static-result-property-textField"
            styles={textFieldStyles}
            onRenderLabel={() => onRenderLabel(schema.title ?? title, required, isRoot)}
            value={inputValue}
            placeholder={textFieldPlaceHolder}
            onChange={(_e, newVal) => {
              setInputValue(newVal ?? '');
            }}
            onBlur={updateParentProps}
            multiline
            autoAdjustHeight
            rows={1}
          />
        );
      }
      case constants.SWAGGER.TYPE.INTEGER:
        return (
          <TextField
            className="msla-static-result-property-textField"
            styles={textFieldStyles}
            onRenderLabel={() => onRenderLabel(schema.title ?? title, required, isRoot)}
            value={inputValue}
            placeholder={integerTextFieldPlaceHolder}
            onChange={validateInteger}
            errorMessage={errorMessage}
            onBlur={updateParentProps}
          />
        );
      case constants.SWAGGER.TYPE.ARRAY:
      case constants.SWAGGER.TYPE.OBJECT: {
        const propertyEditorTitle = schema.title ?? title;
        if (schema.items || schema.additionalProperties) {
          return (
            <>
              <Label text={propertyEditorTitle} isRequiredField={required} />
              <PropertyEditor
                title={propertyEditorTitle}
                // do not use dynamic schema in Static Results
                schema={schema?.items?.[ExtensionProperties.DynamicSchema] ? undefined : schema?.items}
                properties={currProperties}
                updateProperties={setCurrProperties}
              />
            </>
          );
        }
        return (
          <div className="msla-static-result-property-inner">
            <StaticResult
              propertiesSchema={schema.properties}
              title={schema?.title ?? title}
              required={schema.required}
              propertyValues={currProperties}
              setPropertyValues={setCurrProperties}
            />
          </div>
        );
      }
      default:
        return (
          <TextField
            className="msla-static-result-property-textField"
            styles={textFieldStyles}
            onRenderLabel={() => onRenderLabel(schema.title ?? title, required, isRoot)}
            value={inputValue}
            placeholder={textFieldPlaceHolder}
            onChange={(_e, newVal) => {
              setInputValue(newVal ?? '');
            }}
            onBlur={updateParentProps}
            multiline
            autoAdjustHeight
            rows={1}
          />
        );
    }
  };

  return <div className="msla-static-result-property-container">{renderItems()}</div>;
}