diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js index d5540d050227f..5027dbbf3f566 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js @@ -16,10 +16,7 @@ import { EuiButton, EuiFieldText, } from '@elastic/eui'; - -// TODO: (clintandrewhall) This is a quick fix for #25342 -- we should figure out how to use the overall component. -import { Loading } from '../../../../public/components/loading/loading'; - +import { Loading } from '../../../../public/components/loading'; import { FileUpload } from '../../../../public/components/file_upload'; import { elasticOutline } from '../../../lib/elastic_outline'; import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl'; 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 8eba2aa2ba438..4a62f219b2ba5 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 @@ -23,8 +23,7 @@ const branches = [ // no renderable or renderable config value, render loading branch(({ renderable, state }) => { return !state || !renderable; - }, renderComponent(Loading)), - + }, renderComponent(({ backgroundColor }) => )), // renderable is available, but no matching element is found, render invalid branch(({ renderable, renderFunction }) => { return renderable && getType(renderable) !== 'render' && !renderFunction; @@ -90,4 +89,5 @@ ElementContent.propTypes = { onComplete: PropTypes.func.isRequired, // local, not passed through }).isRequired, state: PropTypes.string, + backgroundColor: PropTypes.string, }; diff --git a/x-pack/plugins/canvas/public/components/element_content/index.js b/x-pack/plugins/canvas/public/components/element_content/index.js index 969e96a994a3b..9a1e943df4e7f 100644 --- a/x-pack/plugins/canvas/public/components/element_content/index.js +++ b/x-pack/plugins/canvas/public/components/element_content/index.js @@ -5,12 +5,19 @@ */ import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; import { compose, withProps } from 'recompose'; import { get } from 'lodash'; import { renderFunctionsRegistry } from '../../lib/render_functions_registry'; +import { getSelectedPage, getPageById } from '../../state/selectors/workpad'; import { ElementContent as Component } from './element_content'; +const mapStateToProps = state => ({ + backgroundColor: getPageById(state, getSelectedPage(state)).style.background, +}); + export const ElementContent = compose( + connect(mapStateToProps), withProps(({ renderable }) => ({ renderFunction: renderFunctionsRegistry.get(get(renderable, 'as')), })) diff --git a/x-pack/plugins/canvas/public/components/loading/index.js b/x-pack/plugins/canvas/public/components/loading/index.js index 9216cb55d83c2..81fedf3287184 100644 --- a/x-pack/plugins/canvas/public/components/loading/index.js +++ b/x-pack/plugins/canvas/public/components/loading/index.js @@ -4,12 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { connect } from 'react-redux'; -import { getSelectedPage, getPageById } from '../../state/selectors/workpad'; +import { pure } from 'recompose'; import { Loading as Component } from './loading'; -const mapStateToProps = state => ({ - backgroundColor: getPageById(state, getSelectedPage(state)).style.background, -}); - -export const Loading = connect(mapStateToProps)(Component); +export const Loading = pure(Component); diff --git a/x-pack/plugins/canvas/public/components/loading/loading.js b/x-pack/plugins/canvas/public/components/loading/loading.js index 6b108a7606e8a..7a4b2083d7e4c 100644 --- a/x-pack/plugins/canvas/public/components/loading/loading.js +++ b/x-pack/plugins/canvas/public/components/loading/loading.js @@ -41,11 +41,12 @@ export const Loading = ({ animated, text, backgroundColor }) => { Loading.propTypes = { animated: PropTypes.bool, - text: PropTypes.string, backgroundColor: PropTypes.string, + text: PropTypes.string, }; Loading.defaultProps = { animated: false, + backgroundColor: '#000000', text: '', };