Textarea argument refactored. (#106232)

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js

@@ -5,22 +5,35 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { compose, withProps } from 'recompose';
 import { EuiFormRow, EuiTextArea, EuiSpacer, EuiButton } from '@elastic/eui';
-import { get } from 'lodash';
-import { createStatefulPropHoc } from '../../../public/components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { ArgumentStrings } from '../../../i18n';
 
 const { Textarea: strings } = ArgumentStrings;
 
-const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, argId }) => {
-  if (typeof value !== 'string') {
+const TextAreaArgInput = ({ argValue, typeInstance, onValueChange, renderError, argId }) => {
+  const confirm = typeInstance?.options?.confirm;
+  const [value, setValue] = useState();
+
+  const onChange = useCallback(
+    (ev) => {
+      const onChangeFn = confirm ? setValue : onValueChange;
+      onChangeFn(ev.target.value);
+    },
+    [confirm, onValueChange]
+  );
+
+  useEffect(() => {
+    setValue(argValue);
+  }, [argValue]);
+
+  if (typeof argValue !== 'string') {
     renderError();
     return null;
   }
+
   return (
     <div>
       <EuiFormRow display="rowCompressed">
@@ -31,11 +44,11 @@ const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, ar
           rows={10}
           value={value}
           resize="none"
-          onChange={confirm ? updateValue : (ev) => commit(ev.target.value)}
+          onChange={onChange}
         />
       </EuiFormRow>
       <EuiSpacer size="s" />
-      <EuiButton size="s" onClick={() => commit(value)}>
+      <EuiButton size="s" onClick={() => onValueChange(value)}>
         {confirm}
       </EuiButton>
       <EuiSpacer size="xs" />
@@ -44,33 +57,16 @@ const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, ar
 };
 
 TextAreaArgInput.propTypes = {
-  updateValue: PropTypes.func.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  confirm: PropTypes.string,
-  commit: PropTypes.func.isRequired,
-  renderError: PropTypes.func,
-  argId: PropTypes.string.isRequired,
-};
-
-const EnhancedTextAreaArgInput = compose(
-  withProps(({ onValueChange, typeInstance, argValue }) => ({
-    confirm: get(typeInstance, 'options.confirm'),
-    commit: onValueChange,
-    value: argValue,
-  })),
-  createStatefulPropHoc('value')
-)(TextAreaArgInput);
-
-EnhancedTextAreaArgInput.propTypes = {
   argValue: PropTypes.any.isRequired,
   onValueChange: PropTypes.func.isRequired,
+  renderError: PropTypes.func,
+  argId: PropTypes.string.isRequired,
   typeInstance: PropTypes.object.isRequired,
-  renderError: PropTypes.func.isRequired,
 };
 
 export const textarea = () => ({
   name: 'textarea',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  template: templateFromReactComponent(EnhancedTextAreaArgInput),
+  template: templateFromReactComponent(TextAreaArgInput),
 });