[7.x] Convert Positionable, RenderToDom and RenderWithFn to functiona…

…l/hooks/no recompose. (#68202) (#69866)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/public/components/element_content/element_content.js

@@ -12,6 +12,7 @@ import { getType } from '@kbn/interpreter/common';
 import { Loading } from '../loading';
 import { RenderWithFn } from '../render_with_fn';
 import { ElementShareContainer } from '../element_share_container';
+import { assignHandlers } from '../../lib/create_handlers';
 import { InvalidExpression } from './invalid_expression';
 import { InvalidElementType } from './invalid_element_type';
 
@@ -46,7 +47,7 @@ const branches = [
 export const ElementContent = compose(
   pure,
   ...branches
-)(({ renderable, renderFunction, size, handlers }) => {
+)(({ renderable, renderFunction, width, height, handlers }) => {
   const {
     getFilter,
     setFilter,
@@ -62,7 +63,7 @@ export const ElementContent = compose(
     <div
       // TODO: 'canvas__element' was added for BWC, It can be removed after a while
       className={'canvas__element canvasElement'}
-      style={{ ...renderable.containerStyle, ...size }}
+      style={{ ...renderable.containerStyle, width, height }}
       data-test-subj="canvasWorkpadPageElementContent"
     >
       <ElementShareContainer
@@ -76,15 +77,16 @@ export const ElementContent = compose(
           reuseNode={renderFunction.reuseDomNode}
           config={renderable.value}
           css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
-          size={size} // Size is only passed for the purpose of triggering the resize event, it isn't really used otherwise
-          handlers={{
+          width={width}
+          height={height}
+          handlers={assignHandlers({
             getFilter,
             setFilter,
             done,
             onEmbeddableInputChange,
             onEmbeddableDestroyed,
             getElementId,
-          }}
+          })}
         />
       </ElementShareContainer>
     </div>

x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js

@@ -14,7 +14,13 @@ export const ElementWrapper = (props) => {
 
   return (
     <Positionable transformMatrix={transformMatrix} width={width} height={height}>
-      <ElementContent renderable={renderable} state={state} handlers={handlers} />
+      <ElementContent
+        renderable={renderable}
+        state={state}
+        handlers={handlers}
+        width={width}
+        height={height}
+      />
     </Positionable>
   );
 };

x-pack/plugins/canvas/public/components/element_wrapper/index.js

@@ -10,12 +10,12 @@ import { compose, withPropsOnChange, mapProps } from 'recompose';
 import isEqual from 'react-fast-compare';
 import { getResolvedArgs, getSelectedPage } from '../../state/selectors/workpad';
 import { getState, getValue } from '../../lib/resolved_arg';
+import { createDispatchedHandlerFactory } from '../../lib/create_handlers';
 import { ElementWrapper as Component } from './element_wrapper';
-import { createHandlers as createHandlersWithDispatch } from './lib/handlers';
 
 function selectorFactory(dispatch) {
   let result = {};
-  const createHandlers = createHandlersWithDispatch(dispatch);
+  const createHandlers = createDispatchedHandlerFactory(dispatch);
 
   return (nextState, nextOwnProps) => {
     const { element, ...restOwnProps } = nextOwnProps;

x-pack/plugins/canvas/public/components/positionable/index.js → x-pack/plugins/canvas/public/components/positionable/index.ts

@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { Positionable as Component } from './positionable';
-
-export const Positionable = pure(Component);
+export { Positionable } from './positionable';

x-pack/plugins/canvas/public/components/positionable/positionable.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, ReactElement, CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+  children: ReactElement;
+  transformMatrix: TransformMatrix3d;
+  height: number;
+  width: number;
+}
+
+export const Positionable: FC<Props> = ({ children, transformMatrix, width, height }) => {
+  // Throw if there is more than one child
+  const childNode = React.Children.only(children);
+
+  const matrix = (transformMatrix.map((n, i) =>
+    i < 12 ? n : Math.round(n)
+  ) as any) as TransformMatrix3d;
+
+  const newStyle: CSSProperties = {
+    width,
+    height,
+    marginLeft: -width / 2,
+    marginTop: -height / 2,
+    position: 'absolute',
+    transform: matrixToCSS(matrix),
+  };
+
+  return (
+    <div className="canvasPositionable canvasInteractable" style={newStyle}>
+      {childNode}
+    </div>
+  );
+};
+
+Positionable.propTypes = {
+  children: PropTypes.element.isRequired,
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+};

x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js → x-pack/plugins/canvas/public/components/render_to_dom/index.ts

@@ -4,16 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export class ElementHandlers {
-  resize() {}
-
-  destroy() {}
-
-  onResize(fn) {
-    this.resize = fn;
-  }
-
-  onDestroy(fn) {
-    this.destroy = fn;
-  }
-}
+export { RenderToDom } from './render_to_dom';

x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useCallback, FC } from 'react';
+import CSS from 'csstype';
+
+interface Props {
+  render: (element: HTMLElement) => void;
+  style?: CSS.Properties;
+}
+
+export const RenderToDom: FC<Props> = ({ render, style }) => {
+  // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
+  const ref = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        render(node);
+      }
+    },
+    [render]
+  );
+
+  return <div className="render_to_dom" {...{ ref, style }} />;
+};

x-pack/plugins/canvas/public/components/render_with_fn/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { RenderWithFn } from './render_with_fn';