diff --git a/superset-frontend/temporary_superset_ui/superset-ui/package.json b/superset-frontend/temporary_superset_ui/superset-ui/package.json index adcc4b45806ac..40a6db2684f36 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/package.json @@ -18,7 +18,7 @@ "prettier": "beemo prettier \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx,json,md}\"", "release": "yarn run prepare-release && lerna publish && yarn run postrelease", "test": "yarn run jest", - "test:watch": "beemo create-config jest && jest --watch" + "test:watch": "beemo create-config jest --react && jest --watch" }, "repository": "https://github.com/apache-superset/superset-ui.git", "keywords": [ diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/reactify.jsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/reactify.jsx new file mode 100644 index 0000000000000..a29f7954bff53 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/reactify.jsx @@ -0,0 +1,51 @@ +import React from 'react'; + +export default function reactify(renderFn) { + class ReactifiedComponent extends React.Component { + constructor(props) { + super(props); + this.setContainerRef = this.setContainerRef.bind(this); + } + + componentDidMount() { + this.execute(); + } + + componentDidUpdate() { + this.execute(); + } + + componentWillUnmount() { + this.container = null; + } + + setContainerRef(c) { + this.container = c; + } + + execute() { + if (this.container) { + renderFn(this.container, this.props); + } + } + + render() { + const { id, className } = this.props; + + return
; + } + } + + if (renderFn.displayName) { + ReactifiedComponent.displayName = renderFn.displayName; + } + /* eslint-disable-next-line react/forbid-foreign-prop-types */ + if (renderFn.propTypes) { + ReactifiedComponent.propTypes = renderFn.propTypes; + } + if (renderFn.defaultProps) { + ReactifiedComponent.defaultProps = renderFn.defaultProps; + } + + return ReactifiedComponent; +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/index.js b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/index.js index 70b85846de4c3..2d547b7baee52 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/index.js +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/index.js @@ -3,6 +3,7 @@ export { default as ChartPlugin } from './models/ChartPlugin'; export { default as ChartProps } from './models/ChartProps'; export { default as createLoadableRenderer } from './components/createLoadableRenderer'; +export { default as reactify } from './components/reactify'; export { default as getChartBuildQueryRegistry, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/createLoadableRenderer.test.jsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/createLoadableRenderer.test.jsx index 9234a57db045d..64d2819a994fb 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/createLoadableRenderer.test.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/createLoadableRenderer.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import createLoadableRenderer from '../../src/components/createLoadableRenderer'; +import { createLoadableRenderer } from '../../src'; describe('createLoadableRenderer', () => { function TestComponent() { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/reactify.test.jsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/reactify.test.jsx new file mode 100644 index 0000000000000..347e66a3d07e1 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/reactify.test.jsx @@ -0,0 +1,92 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { mount } from 'enzyme'; +import { reactify } from '../../src'; + +describe('reactify(renderFn)', () => { + const renderFn = jest.fn((element, props) => { + const container = element; + container.innerHTML = ''; + const child = document.createElement('b'); + child.innerHTML = props.content; + container.appendChild(child); + }); + + renderFn.displayName = 'BoldText'; + renderFn.propTypes = { + content: PropTypes.string, + }; + renderFn.defaultProps = { + content: 'ghi', + }; + + const TheChart = reactify(renderFn); + + class TestComponent extends React.PureComponent { + constructor(props) { + super(props); + this.state = { content: 'abc' }; + } + + componentDidMount() { + setTimeout(() => { + this.setState({ content: 'def' }); + }, 10); + } + + render() { + const { content } = this.state; + + return