[Canvas] ArgTemplateForm refactor. (#106637)

* Refactored `ArgTemplateForm`.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js

@@ -1,95 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { compose, withPropsOnChange, withProps } from 'recompose';
-import { RenderToDom } from '../render_to_dom';
-import { ExpressionFormHandlers } from '../../../common/lib/expression_form_handlers';
-
-class ArgTemplateFormComponent extends React.Component {
-  static propTypes = {
-    template: PropTypes.func,
-    argumentProps: PropTypes.shape({
-      valueMissing: PropTypes.bool,
-      label: PropTypes.string,
-      setLabel: PropTypes.func.isRequired,
-      expand: PropTypes.bool,
-      setExpand: PropTypes.func,
-      onValueRemove: PropTypes.func,
-      resetErrorState: PropTypes.func.isRequired,
-      renderError: PropTypes.func.isRequired,
-    }),
-    handlers: PropTypes.object.isRequired,
-    error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).isRequired,
-    errorTemplate: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
-  };
-
-  UNSAFE_componentWillUpdate(prevProps) {
-    //see if error state changed
-    if (this.props.error !== prevProps.error) {
-      this.props.handlers.destroy();
-    }
-  }
-  componentDidUpdate() {
-    if (this.props.error) {
-      return this._renderErrorTemplate();
-    }
-    this._renderTemplate(this._domNode);
-  }
-
-  componentWillUnmount() {
-    this.props.handlers.destroy();
-  }
-
-  _domNode = null;
-
-  _renderTemplate = (domNode) => {
-    const { template, argumentProps, handlers } = this.props;
-    if (template) {
-      return template(domNode, argumentProps, handlers);
-    }
-  };
-
-  _renderErrorTemplate = () => {
-    const { errorTemplate, argumentProps } = this.props;
-    return React.createElement(errorTemplate, argumentProps);
-  };
-
-  render() {
-    const { template, error } = this.props;
-
-    if (error) {
-      return this._renderErrorTemplate();
-    }
-
-    if (!template) {
-      return null;
-    }
-
-    return (
-      <RenderToDom
-        render={(domNode) => {
-          this._domNode = domNode;
-          this._renderTemplate(domNode);
-        }}
-      />
-    );
-  }
-}
-
-export const ArgTemplateForm = compose(
-  withPropsOnChange(
-    () => false,
-    () => ({
-      expressionFormHandlers: new ExpressionFormHandlers(),
-    })
-  ),
-  withProps(({ handlers, expressionFormHandlers }) => ({
-    handlers: Object.assign(expressionFormHandlers, handlers),
-  }))
-)(ArgTemplateFormComponent);

x-pack/plugins/canvas/public/components/arg_form/arg_template_form.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import usePrevious from 'react-use/lib/usePrevious';
+import { RenderToDom } from '../render_to_dom';
+import { ExpressionFormHandlers } from '../../../common/lib/expression_form_handlers';
+
+interface ArgTemplateFormProps {
+  template?: (
+    domNode: HTMLElement,
+    config: ArgTemplateFormProps['argumentProps'],
+    handlers: ArgTemplateFormProps['handlers']
+  ) => void;
+  argumentProps: {
+    valueMissing?: boolean;
+    label?: string;
+    setLabel: (label: string) => void;
+    expand?: boolean;
+    setExpand?: (expand: boolean) => void;
+    onValueRemove?: (argName: string, argIndex: string) => void;
+    resetErrorState: () => void;
+    renderError: () => void;
+  };
+  handlers?: { [key: string]: (...args: any[]) => any };
+  error?: unknown;
+  errorTemplate: React.FunctionComponent<ArgTemplateFormProps['argumentProps']>;
+}
+
+const mergeWithFormHandlers = (handlers: ArgTemplateFormProps['handlers']) =>
+  Object.assign(new ExpressionFormHandlers(), handlers);
+
+export const ArgTemplateForm: React.FunctionComponent<ArgTemplateFormProps> = ({
+  template,
+  argumentProps,
+  handlers,
+  error,
+  errorTemplate,
+}) => {
+  const [updatedHandlers, setHandlers] = useState(mergeWithFormHandlers(handlers));
+  const previousError = usePrevious(error);
+  const domNodeRef = useRef<HTMLElement>();
+  const renderTemplate = useCallback(
+    (domNode) => template && template(domNode, argumentProps, updatedHandlers),
+    [template, argumentProps, updatedHandlers]
+  );
+
+  const renderErrorTemplate = useCallback(() => React.createElement(errorTemplate, argumentProps), [
+    errorTemplate,
+    argumentProps,
+  ]);
+
+  useEffect(() => {
+    setHandlers(mergeWithFormHandlers(handlers));
+  }, [handlers]);
+
+  useEffect(() => {
+    if (previousError !== error) {
+      updatedHandlers.destroy();
+    }
+  }, [previousError, error, updatedHandlers]);
+
+  useEffect(() => {
+    if (!error) {
+      renderTemplate(domNodeRef.current);
+    }
+  }, [error, renderTemplate, domNodeRef]);
+
+  if (error) {
+    return renderErrorTemplate();
+  }
+
+  if (!template) {
+    return null;
+  }
+
+  return (
+    <RenderToDom
+      render={(domNode) => {
+        domNodeRef.current = domNode;
+        renderTemplate(domNode);
+      }}
+    />
+  );
+};