From 8665d5725ed51a1eb7e867a237fd322e8802582b Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Thu, 25 Jun 2020 08:35:19 -0400 Subject: [PATCH] [7.x] Convert Positionable, RenderToDom and RenderWithFn to functional/hooks/no recompose. (#68202) (#69866) Co-authored-by: Elastic Machine --- .../element_content/element_content.js | 12 +- .../element_wrapper/element_wrapper.js | 8 +- .../components/element_wrapper/index.js | 4 +- .../element_wrapper/lib/handlers.js | 60 ------- .../positionable/{index.js => index.ts} | 5 +- .../components/positionable/positionable.js | 42 ----- .../components/positionable/positionable.tsx | 48 ++++++ .../public/components/render_to_dom/index.js | 12 -- .../handlers.js => render_to_dom/index.ts} | 14 +- .../components/render_to_dom/render_to_dom.js | 40 ----- .../render_to_dom/render_to_dom.tsx | 27 +++ .../public/components/render_with_fn/index.js | 30 ---- .../public/components/render_with_fn/index.ts | 7 + .../render_with_fn/render_with_fn.js | 157 ------------------ .../render_with_fn/render_with_fn.tsx | 117 +++++++++++++ .../canvas/public/lib/create_handlers.ts | 96 +++++++++++ .../components/rendered_element.tsx | 14 +- x-pack/plugins/canvas/types/renderers.ts | 28 ++-- 18 files changed, 331 insertions(+), 390 deletions(-) delete mode 100644 x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js rename x-pack/plugins/canvas/public/components/positionable/{index.js => index.ts} (63%) delete mode 100644 x-pack/plugins/canvas/public/components/positionable/positionable.js create mode 100644 x-pack/plugins/canvas/public/components/positionable/positionable.tsx delete mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/index.js rename x-pack/plugins/canvas/public/components/{render_with_fn/lib/handlers.js => render_to_dom/index.ts} (61%) delete mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js create mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx delete mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/index.js create mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/index.ts delete mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js create mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx create mode 100644 x-pack/plugins/canvas/public/lib/create_handlers.ts diff --git a/x-pack/plugins/canvas/public/components/element_content/element_content.js b/x-pack/plugins/canvas/public/components/element_content/element_content.js index 114a457d167e7..e2c1a61c348d1 100644 --- a/x-pack/plugins/canvas/public/components/element_content/element_content.js +++ b/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(
diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js b/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js index 845fc5927d839..de7748413b718 100644 --- a/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js +++ b/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js @@ -14,7 +14,13 @@ export const ElementWrapper = (props) => { return ( - + ); }; diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/index.js b/x-pack/plugins/canvas/public/components/element_wrapper/index.js index 390c349ab2ee6..6fc582bfee444 100644 --- a/x-pack/plugins/canvas/public/components/element_wrapper/index.js +++ b/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; diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js b/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js deleted file mode 100644 index 33e8eacd902dd..0000000000000 --- a/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js +++ /dev/null @@ -1,60 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import { isEqual } from 'lodash'; -import { setFilter } from '../../../state/actions/elements'; -import { - updateEmbeddableExpression, - fetchEmbeddableRenderable, -} from '../../../state/actions/embeddable'; - -export const createHandlers = (dispatch) => { - let isComplete = false; - let oldElement; - let completeFn = () => {}; - - return (element) => { - // reset isComplete when element changes - if (!isEqual(oldElement, element)) { - isComplete = false; - oldElement = element; - } - - return { - setFilter(text) { - dispatch(setFilter(text, element.id, true)); - }, - - getFilter() { - return element.filter; - }, - - onComplete(fn) { - completeFn = fn; - }, - - getElementId: () => element.id, - - onEmbeddableInputChange(embeddableExpression) { - dispatch(updateEmbeddableExpression({ elementId: element.id, embeddableExpression })); - }, - - onEmbeddableDestroyed() { - dispatch(fetchEmbeddableRenderable(element.id)); - }, - - done() { - // don't emit if the element is already done - if (isComplete) { - return; - } - - isComplete = true; - completeFn(); - }, - }; - }; -}; diff --git a/x-pack/plugins/canvas/public/components/positionable/index.js b/x-pack/plugins/canvas/public/components/positionable/index.ts similarity index 63% rename from x-pack/plugins/canvas/public/components/positionable/index.js rename to x-pack/plugins/canvas/public/components/positionable/index.ts index e5c3c32acb024..964e2ee41df75 100644 --- a/x-pack/plugins/canvas/public/components/positionable/index.js +++ b/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'; diff --git a/x-pack/plugins/canvas/public/components/positionable/positionable.js b/x-pack/plugins/canvas/public/components/positionable/positionable.js deleted file mode 100644 index 9898f50cbb0f0..0000000000000 --- a/x-pack/plugins/canvas/public/components/positionable/positionable.js +++ /dev/null @@ -1,42 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { matrixToCSS } from '../../lib/dom'; - -export const Positionable = ({ children, transformMatrix, width, height }) => { - // Throw if there is more than one child - React.Children.only(children); - // This could probably be made nicer by having just one child - const wrappedChildren = React.Children.map(children, (child) => { - const newStyle = { - width, - height, - marginLeft: -width / 2, - marginTop: -height / 2, - position: 'absolute', - transform: matrixToCSS(transformMatrix.map((n, i) => (i < 12 ? n : Math.round(n)))), - }; - - const stepChild = React.cloneElement(child, { size: { width, height } }); - return ( -
- {stepChild} -
- ); - }); - - return wrappedChildren; -}; - -Positionable.propTypes = { - onChange: PropTypes.func, - children: PropTypes.element.isRequired, - transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, -}; diff --git a/x-pack/plugins/canvas/public/components/positionable/positionable.tsx b/x-pack/plugins/canvas/public/components/positionable/positionable.tsx new file mode 100644 index 0000000000000..3344398b00198 --- /dev/null +++ b/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 = ({ 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 ( +
+ {childNode} +
+ ); +}; + +Positionable.propTypes = { + children: PropTypes.element.isRequired, + transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, +}; diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/index.js b/x-pack/plugins/canvas/public/components/render_to_dom/index.js deleted file mode 100644 index e8a3f8cd8c93b..0000000000000 --- a/x-pack/plugins/canvas/public/components/render_to_dom/index.js +++ /dev/null @@ -1,12 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import { compose, withState } from 'recompose'; -import { RenderToDom as Component } from './render_to_dom'; - -export const RenderToDom = compose( - withState('domNode', 'setDomNode') // Still don't like this, seems to be the only way todo it. -)(Component); diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js b/x-pack/plugins/canvas/public/components/render_to_dom/index.ts similarity index 61% rename from x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js rename to x-pack/plugins/canvas/public/components/render_to_dom/index.ts index 9e5032efa97e2..43a5dad059c95 100644 --- a/x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js +++ b/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'; diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js b/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js deleted file mode 100644 index db393a8dde4f9..0000000000000 --- a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js +++ /dev/null @@ -1,40 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -export class RenderToDom extends React.Component { - static propTypes = { - domNode: PropTypes.object, - setDomNode: PropTypes.func.isRequired, - render: PropTypes.func.isRequired, - style: PropTypes.object, - }; - - shouldComponentUpdate(nextProps) { - return this.props.domNode !== nextProps.domNode; - } - - componentDidUpdate() { - // Calls render function once we have the reference to the DOM element to render into - if (this.props.domNode) { - this.props.render(this.props.domNode); - } - } - - render() { - const { domNode, setDomNode, style } = this.props; - const linkRef = (refNode) => { - if (!domNode && refNode) { - // Initialize the domNode property. This should only happen once, even if config changes. - setDomNode(refNode); - } - }; - - return
; - } -} diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx b/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx new file mode 100644 index 0000000000000..a37c0fc096e57 --- /dev/null +++ b/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 = ({ 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
; +}; diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/index.js b/x-pack/plugins/canvas/public/components/render_with_fn/index.js deleted file mode 100644 index 37c49624a3940..0000000000000 --- a/x-pack/plugins/canvas/public/components/render_with_fn/index.js +++ /dev/null @@ -1,30 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import { compose, withProps, withPropsOnChange } from 'recompose'; -import PropTypes from 'prop-types'; -import isEqual from 'react-fast-compare'; -import { withKibana } from '../../../../../../src/plugins/kibana_react/public'; -import { RenderWithFn as Component } from './render_with_fn'; -import { ElementHandlers } from './lib/handlers'; - -export const RenderWithFn = compose( - withPropsOnChange( - // rebuild elementHandlers when handlers object changes - (props, nextProps) => !isEqual(props.handlers, nextProps.handlers), - ({ handlers }) => ({ - handlers: Object.assign(new ElementHandlers(), handlers), - }) - ), - withKibana, - withProps((props) => ({ - onError: props.kibana.services.canvas.notify.error, - })) -)(Component); - -RenderWithFn.propTypes = { - handlers: PropTypes.object, -}; diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/index.ts b/x-pack/plugins/canvas/public/components/render_with_fn/index.ts new file mode 100644 index 0000000000000..4bfef734d34f4 --- /dev/null +++ b/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'; diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js deleted file mode 100644 index 305e7c81f98e5..0000000000000 --- a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js +++ /dev/null @@ -1,157 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { isEqual, cloneDeep } from 'lodash'; -import { RenderToDom } from '../render_to_dom'; -import { ErrorStrings } from '../../../i18n'; - -const { RenderWithFn: strings } = ErrorStrings; - -export class RenderWithFn extends React.Component { - static propTypes = { - name: PropTypes.string.isRequired, - renderFn: PropTypes.func.isRequired, - reuseNode: PropTypes.bool, - handlers: PropTypes.shape({ - // element handlers, see components/element_wrapper/lib/handlers.js - setFilter: PropTypes.func.isRequired, - getFilter: PropTypes.func.isRequired, - done: PropTypes.func.isRequired, - // render handlers, see lib/handlers.js - resize: PropTypes.func.isRequired, - onResize: PropTypes.func.isRequired, - destroy: PropTypes.func.isRequired, - onDestroy: PropTypes.func.isRequired, - }), - config: PropTypes.object.isRequired, - size: PropTypes.object.isRequired, - onError: PropTypes.func.isRequired, - }; - - static defaultProps = { - reuseNode: false, - }; - - componentDidMount() { - this.firstRender = true; - this.renderTarget = null; - } - - UNSAFE_componentWillReceiveProps({ renderFn }) { - const newRenderFunction = renderFn !== this.props.renderFn; - - if (newRenderFunction) { - this._resetRenderTarget(this._domNode); - } - } - - shouldComponentUpdate(prevProps) { - return !isEqual(this.props.size, prevProps.size) || this._shouldFullRerender(prevProps); - } - - componentDidUpdate(prevProps) { - const { handlers, size } = this.props; - // Config changes - if (this._shouldFullRerender(prevProps)) { - // This should be the only place you call renderFn besides the first time - this._callRenderFn(); - } - - // Size changes - if (!isEqual(size, prevProps.size)) { - return handlers.resize(size); - } - } - - componentWillUnmount() { - this.props.handlers.destroy(); - } - - _domNode = null; - - _callRenderFn = () => { - const { handlers, config, renderFn, reuseNode, name: functionName } = this.props; - // TODO: We should wait until handlers.done() is called before replacing the element content? - if (!reuseNode || !this.renderTarget) { - this._resetRenderTarget(this._domNode); - } - // else if (!firstRender) handlers.destroy(); - - const renderConfig = cloneDeep(config); - - // TODO: this is hacky, but it works. it stops Kibana from blowing up when a render throws - try { - renderFn(this.renderTarget, renderConfig, handlers); - this.firstRender = false; - } catch (err) { - console.error('renderFn threw', err); - this.props.onError(err, { title: strings.getRenderErrorMessage(functionName) }); - } - }; - - _resetRenderTarget = (domNode) => { - const { handlers } = this.props; - - if (!domNode) { - throw new Error('RenderWithFn can not reset undefined target node'); - } - - // call destroy on existing element - if (!this.firstRender) { - handlers.destroy(); - } - - while (domNode.firstChild) { - domNode.removeChild(domNode.firstChild); - } - - this.firstRender = true; - this.renderTarget = this._createRenderTarget(); - domNode.appendChild(this.renderTarget); - }; - - _createRenderTarget = () => { - const div = document.createElement('div'); - div.style.width = '100%'; - div.style.height = '100%'; - return div; - }; - - _shouldFullRerender = (prevProps) => { - // required to stop re-renders on element move, anything that should - // cause a re-render needs to be checked here - // TODO: fix props passed in to remove this check - return ( - this.props.handlers !== prevProps.handlers || - !isEqual(this.props.config, prevProps.config) || - !isEqual(this.props.renderFn.toString(), prevProps.renderFn.toString()) - ); - }; - - destroy = () => { - this.props.handlers.destroy(); - }; - - render() { - // NOTE: the data-shared-* attributes here are used for reporting - return ( -
- { - this._domNode = domNode; - this._callRenderFn(); - }} - /> -
- ); - } -} diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx new file mode 100644 index 0000000000000..bc51128cf0c87 --- /dev/null +++ b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx @@ -0,0 +1,117 @@ +/* + * 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, { useState, useEffect, useRef, FC, useCallback } from 'react'; +import { useDebounce } from 'react-use'; + +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { RenderToDom } from '../render_to_dom'; +import { ErrorStrings } from '../../../i18n'; +import { RendererHandlers } from '../../../types'; + +const { RenderWithFn: strings } = ErrorStrings; + +interface Props { + name: string; + renderFn: ( + domNode: HTMLElement, + config: Record, + handlers: RendererHandlers + ) => void | Promise; + reuseNode: boolean; + handlers: RendererHandlers; + config: Record; + height: number; + width: number; +} + +const style = { height: '100%', width: '100%' }; + +export const RenderWithFn: FC = ({ + name: functionName, + renderFn, + reuseNode = false, + handlers: incomingHandlers, + config, + width, + height, +}) => { + const { services } = useKibana(); + const onError = services.canvas.notify.error; + + const [domNode, setDomNode] = useState(null); + + // Tells us if the component is attempting to re-render into a previously-populated render target. + const firstRender = useRef(true); + // A reference to the node appended to the provided DOM node which is created and optionally replaced. + const renderTarget = useRef(null); + // A reference to the handlers, as the renderFn may mutate them, (via onXYZ functions) + const handlers = useRef(incomingHandlers); + + // Reset the render target, the node appended to the DOM node provided by RenderToDOM. + const resetRenderTarget = useCallback(() => { + if (!domNode) { + return; + } + + if (!firstRender) { + handlers.current.destroy(); + } + + while (domNode.firstChild) { + domNode.removeChild(domNode.firstChild); + } + + const div = document.createElement('div'); + div.style.width = '100%'; + div.style.height = '100%'; + domNode.appendChild(div); + + renderTarget.current = div; + firstRender.current = true; + }, [domNode]); + + useDebounce(() => handlers.current.resize({ height, width }), 150, [height, width]); + + useEffect( + () => () => { + handlers.current.destroy(); + }, + [] + ); + + const render = useCallback(() => { + renderFn(renderTarget.current!, config, handlers.current); + }, [renderTarget, config, renderFn]); + + useEffect(() => { + if (!domNode) { + return; + } + + if (!reuseNode || !renderTarget.current) { + resetRenderTarget(); + } + + try { + render(); + firstRender.current = false; + } catch (err) { + onError(err, { title: strings.getRenderErrorMessage(functionName) }); + } + }, [domNode, functionName, onError, render, resetRenderTarget, reuseNode]); + + return ( +
+ { + setDomNode(node); + }} + /> +
+ ); +}; diff --git a/x-pack/plugins/canvas/public/lib/create_handlers.ts b/x-pack/plugins/canvas/public/lib/create_handlers.ts new file mode 100644 index 0000000000000..4e0c7b217d5b7 --- /dev/null +++ b/x-pack/plugins/canvas/public/lib/create_handlers.ts @@ -0,0 +1,96 @@ +/* + * 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 { isEqual } from 'lodash'; +// @ts-ignore untyped local +import { setFilter } from '../state/actions/elements'; +import { updateEmbeddableExpression, fetchEmbeddableRenderable } from '../state/actions/embeddable'; +import { RendererHandlers, CanvasElement } from '../../types'; + +// This class creates stub handlers to ensure every element and renderer fulfills the contract. +// TODO: consider warning if these methods are invoked but not implemented by the renderer...? + +export const createHandlers = (): RendererHandlers => ({ + destroy() {}, + done() {}, + event() {}, + getElementId() { + return ''; + }, + getFilter() { + return ''; + }, + onComplete(fn: () => void) { + this.done = fn; + }, + onDestroy(fn: () => void) { + this.destroy = fn; + }, + // TODO: these functions do not match the `onXYZ` and `xyz` pattern elsewhere. + onEmbeddableDestroyed() {}, + onEmbeddableInputChange() {}, + onResize(fn: (size: { height: number; width: number }) => void) { + this.resize = fn; + }, + reload() {}, + resize(_size: { height: number; width: number }) {}, + setFilter() {}, + update() {}, +}); + +export const assignHandlers = (handlers: Partial = {}): RendererHandlers => + Object.assign(createHandlers(), handlers); + +// TODO: this is a legacy approach we should unravel in the near future. +export const createDispatchedHandlerFactory = ( + dispatch: (action: any) => void +): ((element: CanvasElement) => RendererHandlers) => { + let isComplete = false; + let oldElement: CanvasElement | undefined; + let completeFn = () => {}; + + return (element: CanvasElement) => { + // reset isComplete when element changes + if (!isEqual(oldElement, element)) { + isComplete = false; + oldElement = element; + } + + return assignHandlers({ + setFilter(text: string) { + dispatch(setFilter(text, element.id, true)); + }, + + getFilter() { + return element.filter; + }, + + onComplete(fn: () => void) { + completeFn = fn; + }, + + getElementId: () => element.id, + + onEmbeddableInputChange(embeddableExpression: string) { + dispatch(updateEmbeddableExpression({ elementId: element.id, embeddableExpression })); + }, + + onEmbeddableDestroyed() { + dispatch(fetchEmbeddableRenderable(element.id)); + }, + + done() { + // don't emit if the element is already done + if (isComplete) { + return; + } + + isComplete = true; + completeFn(); + }, + }); + }; +}; diff --git a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx index 5741f5f2d698c..6bcc0db92f1cc 100644 --- a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx +++ b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx @@ -7,13 +7,13 @@ import React, { FC, PureComponent } from 'react'; // @ts-expect-error untyped library import Style from 'style-it'; -// @ts-expect-error untyped local import { Positionable } from '../../public/components/positionable/positionable'; // @ts-expect-error untyped local import { elementToShape } from '../../public/components/workpad_page/utils'; import { CanvasRenderedElement } from '../types'; import { CanvasShareableContext, useCanvasShareableState } from '../context'; import { RendererSpec } from '../../types'; +import { createHandlers } from '../../public/lib/create_handlers'; import css from './rendered_element.module.scss'; @@ -62,17 +62,7 @@ export class RenderedElementComponent extends PureComponent { } try { - // TODO: These are stubbed, but may need implementation. - fn.render(this.ref.current, value.value, { - done: () => {}, - onDestroy: () => {}, - onResize: () => {}, - getElementId: () => '', - setFilter: () => {}, - getFilter: () => '', - onEmbeddableInputChange: () => {}, - onEmbeddableDestroyed: () => {}, - }); + fn.render(this.ref.current, value.value, createHandlers()); } catch (e) { // eslint-disable-next-line no-console console.log(as, e.message); diff --git a/x-pack/plugins/canvas/types/renderers.ts b/x-pack/plugins/canvas/types/renderers.ts index 2564b045d1cf7..772a16aa94c60 100644 --- a/x-pack/plugins/canvas/types/renderers.ts +++ b/x-pack/plugins/canvas/types/renderers.ts @@ -4,25 +4,29 @@ * you may not use this file except in compliance with the Elastic License. */ -type GenericCallback = (callback: () => void) => void; +import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; -export interface RendererHandlers { - /** Handler to invoke when an element has finished rendering */ - done: () => void; +type GenericRendererCallback = (callback: () => void) => void; + +export interface RendererHandlers extends IInterpreterRenderHandlers { + /** Handler to invoke when an element should be destroyed. */ + destroy: () => void; /** Get the id of the element being rendered. Can be used as a unique ID in a render function */ getElementId: () => string; - /** Handler to invoke when an element is deleted or changes to a different render type */ - onDestroy: GenericCallback; - /** Handler to invoke when an element's dimensions have changed*/ - onResize: GenericCallback; /** Retrieves the value of the filter property on the element object persisted on the workpad */ getFilter: () => string; - /** Sets the value of the filter property on the element object persisted on the workpad */ - setFilter: (filter: string) => void; - /** Handler to invoke when the input to a function has changed internally */ - onEmbeddableInputChange: (expression: string) => void; + /** Handler to invoke when a renderer is considered complete */ + onComplete: (fn: () => void) => void; /** Handler to invoke when a rendered embeddable is destroyed */ onEmbeddableDestroyed: () => void; + /** Handler to invoke when the input to a function has changed internally */ + onEmbeddableInputChange: (expression: string) => void; + /** Handler to invoke when an element's dimensions have changed*/ + onResize: GenericRendererCallback; + /** Handler to invoke when an element should be resized. */ + resize: (size: { height: number; width: number }) => void; + /** Sets the value of the filter property on the element object persisted on the workpad */ + setFilter: (filter: string) => void; } export interface RendererSpec {