diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/index.ts index 1d1df54d62f7..479770a9d0a8 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/index.ts @@ -5,8 +5,9 @@ */ import { functions as commonFunctions } from '../common'; +import { functions as externalFunctions } from '../external'; import { location } from './location'; import { markdown } from './markdown'; import { urlparam } from './urlparam'; -export const functions = [location, markdown, urlparam, ...commonFunctions]; +export const functions = [location, markdown, urlparam, ...commonFunctions, ...externalFunctions]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts index 36fa6497ab6f..79538941bbbf 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts @@ -48,10 +48,6 @@ import { rounddate } from './rounddate'; import { rowCount } from './rowCount'; import { repeatImage } from './repeatImage'; import { revealImage } from './revealImage'; -import { savedLens } from './saved_lens'; -import { savedMap } from './saved_map'; -import { savedSearch } from './saved_search'; -import { savedVisualization } from './saved_visualization'; import { seriesStyle } from './seriesStyle'; import { shape } from './shape'; import { sort } from './sort'; @@ -110,10 +106,6 @@ export const functions = [ revealImage, rounddate, rowCount, - savedLens, - savedMap, - savedSearch, - savedVisualization, seriesStyle, shape, sort, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/external/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/index.ts new file mode 100644 index 000000000000..17682c5a7207 --- /dev/null +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/index.ts @@ -0,0 +1,12 @@ +/* + * 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 { savedLens } from './saved_lens'; +import { savedMap } from './saved_map'; +import { savedSearch } from './saved_search'; +import { savedVisualization } from './saved_visualization'; + +export const functions = [savedLens, savedMap, savedSearch, savedVisualization]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_lens.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_lens.test.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_lens.test.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_lens.test.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_lens.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_lens.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_lens.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_lens.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_map.test.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.test.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_map.test.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_map.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_map.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_search.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_search.test.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_search.test.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_search.test.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_search.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_search.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_search.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_search.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_visualization.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_visualization.test.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_visualization.test.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_visualization.test.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_visualization.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_visualization.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_visualization.ts rename to x-pack/plugins/canvas/canvas_plugin_src/functions/external/saved_visualization.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.js new file mode 100644 index 000000000000..ba4a56484878 --- /dev/null +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.js @@ -0,0 +1,37 @@ +/* + * 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 { debug } from './debug'; +import { error } from './error'; +import { image } from './image'; +import { markdown } from './markdown'; +import { metric } from './metric'; +import { pie } from './pie'; +import { plot } from './plot'; +import { progress } from './progress'; +import { repeatImage } from './repeat_image'; +import { revealImage } from './reveal_image'; +import { shape } from './shape'; +import { table } from './table'; +import { text } from './text'; + +export const renderFunctions = [ + debug, + error, + image, + markdown, + metric, + pie, + plot, + progress, + repeatImage, + revealImage, + shape, + table, + text, +]; + +export const renderFunctionFactories = []; diff --git a/x-pack/plugins/canvas/public/components/dom_preview/index.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/index.ts similarity index 60% rename from x-pack/plugins/canvas/public/components/dom_preview/index.js rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/index.ts index 283f92c7ecd9..fb47d61484c4 100644 --- a/x-pack/plugins/canvas/public/components/dom_preview/index.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/index.ts @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import { embeddableRendererFactory } from './embeddable'; -import { DomPreview as Component } from './dom_preview'; - -export const DomPreview = Component; +export const renderFunctions = []; +export const renderFunctionFactories = [embeddableRendererFactory]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.test.ts index c4a9a22be320..7bcfd6bef462 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.test.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.test.ts @@ -5,7 +5,7 @@ */ import { toExpression } from './lens'; -import { SavedLensInput } from '../../../functions/common/saved_lens'; +import { SavedLensInput } from '../../../functions/external/saved_lens'; import { fromExpression, Ast } from '@kbn/interpreter/common'; const baseEmbeddableInput = { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.ts index 445cb7480ff8..5bb45c5ca129 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/lens.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { SavedLensInput } from '../../../functions/common/saved_lens'; +import { SavedLensInput } from '../../../functions/external/saved_lens'; export function toExpression(input: SavedLensInput): string { const expressionParts = [] as string[]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__examples__/__snapshots__/advanced_filter.stories.storyshot diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__examples__/advanced_filter.stories.tsx similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.stories.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__examples__/advanced_filter.stories.tsx diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.scss similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.scss rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.scss diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.tsx similarity index 96% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.tsx index e4d4510d40f5..8cb8b53ab697 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.tsx @@ -7,7 +7,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import PropTypes from 'prop-types'; import React, { FunctionComponent } from 'react'; -import { ComponentStrings } from '../../../../i18n'; +import { ComponentStrings } from '../../../../../i18n'; const { AdvancedFilter: strings } = ComponentStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/index.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/index.ts rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/index.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx similarity index 89% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/index.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx index 29692b0c02a4..b481a4b49892 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx @@ -6,9 +6,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { RendererFactory } from '../../../types'; +import { RendererFactory } from '../../../../types'; import { AdvancedFilter } from './component'; -import { RendererStrings } from '../../../i18n'; +import { RendererStrings } from '../../../../i18n'; const { advancedFilter: strings } = RendererStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__examples__/__snapshots__/dropdown_filter.stories.storyshot diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__examples__/dropdown_filter.stories.tsx diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx similarity index 97% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx index 9cade90bd587..ac08d3dd25d8 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx @@ -7,7 +7,7 @@ import { EuiIcon } from '@elastic/eui'; import PropTypes from 'prop-types'; import React, { ChangeEvent, FocusEvent, FunctionComponent } from 'react'; -import { ComponentStrings } from '../../../../i18n'; +import { ComponentStrings } from '../../../../../i18n'; const { DropdownFilter: strings } = ComponentStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/index.ts similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/index.ts rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/index.ts diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx similarity index 93% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/index.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx index ee07f7d4402f..bfc36932a8a0 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx @@ -8,10 +8,10 @@ import { fromExpression, toExpression, Ast } from '@kbn/interpreter/common'; import { get } from 'lodash'; import React from 'react'; import ReactDOM from 'react-dom'; -import { syncFilterExpression } from '../../../public/lib/sync_filter_expression'; -import { RendererFactory } from '../../../types'; +import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression'; +import { RendererFactory } from '../../../../types'; import { DropdownFilter } from './component'; -import { RendererStrings } from '../../../i18n'; +import { RendererStrings } from '../../../../i18n'; const { dropdownFilter: strings } = RendererStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.js new file mode 100644 index 000000000000..0654bf0f704e --- /dev/null +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.js @@ -0,0 +1,12 @@ +/* + * 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 { advancedFilter } from './advanced_filter'; +import { dropdownFilter } from './dropdown_filter'; +import { timeFilterFactory } from './time_filter'; + +export const renderFunctions = [advancedFilter, dropdownFilter]; +export const renderFunctionFactories = [timeFilterFactory]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/time_filter.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/time_filter.stories.tsx similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/__examples__/time_filter.stories.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/time_filter.stories.tsx diff --git a/x-pack/plugins/canvas/public/components/page_preview/index.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/index.tsx similarity index 84% rename from x-pack/plugins/canvas/public/components/page_preview/index.js rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/index.tsx index d72d6403dd5b..cdea7d659159 100644 --- a/x-pack/plugins/canvas/public/components/page_preview/index.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/index.tsx @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PagePreview } from './page_preview'; +export { TimeFilter } from './time_filter'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx similarity index 98% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx index 487f17fb89d1..3cb192cedde8 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx @@ -8,7 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { fromExpression } from '@kbn/interpreter/common'; -import { UnitStrings } from '../../../../i18n/units'; +import { UnitStrings } from '../../../../../i18n/units'; const { quickRanges: strings } = UnitStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx similarity index 82% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.tsx rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx index 25278adcf452..03bf18830a76 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx @@ -7,14 +7,14 @@ import ReactDOM from 'react-dom'; import React from 'react'; import { toExpression } from '@kbn/interpreter/common'; -import { UI_SETTINGS } from '../../../../../../src/plugins/data/public'; -import { syncFilterExpression } from '../../../public/lib/sync_filter_expression'; -import { RendererStrings } from '../../../i18n'; +import { UI_SETTINGS } from '../../../../../../../src/plugins/data/public'; +import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression'; +import { RendererStrings } from '../../../../i18n'; import { TimeFilter } from './components'; -import { StartInitializer } from '../../plugin'; -import { RendererHandlers } from '../../../types'; -import { Arguments } from '../../functions/common/timefilterControl'; -import { RendererFactory } from '../../../types'; +import { StartInitializer } from '../../../plugin'; +import { RendererHandlers } from '../../../../types'; +import { Arguments } from '../../../functions/common/timefilterControl'; +import { RendererFactory } from '../../../../types'; const { timeFilter: strings } = RendererStrings; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/time_filter.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/time_filter.scss similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/time_filter.scss rename to x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/time_filter.scss diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.js index 263f2d8ec30b..38f10afd50cf 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.js @@ -4,40 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import { advancedFilter } from './advanced_filter'; -import { debug } from './debug'; -import { dropdownFilter } from './dropdown_filter'; -import { embeddableRendererFactory } from './embeddable/embeddable'; -import { error } from './error'; -import { image } from './image'; -import { markdown } from './markdown'; -import { metric } from './metric'; -import { pie } from './pie'; -import { plot } from './plot'; -import { progress } from './progress'; -import { repeatImage } from './repeat_image'; -import { revealImage } from './reveal_image'; -import { shape } from './shape'; -import { table } from './table'; -import { text } from './text'; -import { timeFilterFactory } from './time_filter'; +import { + renderFunctions as embeddableFunctions, + renderFunctionFactories as embeddableFactories, +} from './embeddable'; -export const renderFunctions = [ - advancedFilter, - debug, - dropdownFilter, - error, - image, - markdown, - metric, - pie, - plot, - progress, - repeatImage, - revealImage, - shape, - table, - text, -]; +import { + renderFunctions as filterFunctions, + renderFunctionFactories as filterFactories, +} from './filters'; + +import { renderFunctions as coreFunctions, renderFunctionFactories as coreFactories } from './core'; -export const renderFunctionFactories = [embeddableRendererFactory, timeFilterFactory]; +export const renderFunctions = [...coreFunctions, ...filterFunctions, ...embeddableFunctions]; +export const renderFunctionFactories = [ + ...coreFactories, + ...embeddableFactories, + ...filterFactories, +]; diff --git a/x-pack/plugins/canvas/i18n/components.ts b/x-pack/plugins/canvas/i18n/components.ts index 78083f26a38b..acc55d50ae19 100644 --- a/x-pack/plugins/canvas/i18n/components.ts +++ b/x-pack/plugins/canvas/i18n/components.ts @@ -567,6 +567,22 @@ export const ComponentStrings = { pageNumber, }, }), + getAddPageTooltip: () => + i18n.translate('xpack.canvas.pageManager.addPageTooltip', { + defaultMessage: 'Add a new page to this workpad', + }), + getConfirmRemoveTitle: () => + i18n.translate('xpack.canvas.pageManager.confirmRemoveTitle', { + defaultMessage: 'Remove Page', + }), + getConfirmRemoveDescription: () => + i18n.translate('xpack.canvas.pageManager.confirmRemoveDescription', { + defaultMessage: 'Are you sure you want to remove this page?', + }), + getConfirmRemoveButtonLabel: () => + i18n.translate('xpack.canvas.pageManager.removeButtonLabel', { + defaultMessage: 'Remove', + }), }, PagePreviewPageControls: { getClonePageAriaLabel: () => diff --git a/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts b/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts index 1efcbc9d3a18..e146a6ca6844 100644 --- a/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts +++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts @@ -5,7 +5,7 @@ */ import { i18n } from '@kbn/i18n'; -import { savedLens } from '../../../canvas_plugin_src/functions/common/saved_lens'; +import { savedLens } from '../../../canvas_plugin_src/functions/external/saved_lens'; import { FunctionHelp } from '../function_help'; import { FunctionFactory } from '../../../types'; diff --git a/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts b/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts index 53bcd481f185..861556589743 100644 --- a/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts +++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts @@ -5,7 +5,7 @@ */ import { i18n } from '@kbn/i18n'; -import { savedMap } from '../../../canvas_plugin_src/functions/common/saved_map'; +import { savedMap } from '../../../canvas_plugin_src/functions/external/saved_map'; import { FunctionHelp } from '../function_help'; import { FunctionFactory } from '../../../types'; diff --git a/x-pack/plugins/canvas/i18n/functions/dict/saved_search.ts b/x-pack/plugins/canvas/i18n/functions/dict/saved_search.ts index 718deea5df78..865a7753d981 100644 --- a/x-pack/plugins/canvas/i18n/functions/dict/saved_search.ts +++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_search.ts @@ -5,7 +5,7 @@ */ import { i18n } from '@kbn/i18n'; -import { savedSearch } from '../../../canvas_plugin_src/functions/common/saved_search'; +import { savedSearch } from '../../../canvas_plugin_src/functions/external/saved_search'; import { FunctionHelp } from '../function_help'; import { FunctionFactory } from '../../../types'; diff --git a/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts b/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts index 21a2e1c1b880..30f88b51e757 100644 --- a/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts +++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts @@ -5,7 +5,7 @@ */ import { i18n } from '@kbn/i18n'; -import { savedVisualization } from '../../../canvas_plugin_src/functions/common/saved_visualization'; +import { savedVisualization } from '../../../canvas_plugin_src/functions/external/saved_visualization'; import { FunctionHelp } from '../function_help'; import { FunctionFactory } from '../../../types'; diff --git a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx similarity index 71% rename from x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js rename to x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx index f74862af8d10..6ec0276c2f49 100644 --- a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js +++ b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx @@ -4,30 +4,38 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; -export class DomPreview extends React.Component { +interface Props { + elementId: string; + height: number; +} + +export class DomPreview extends PureComponent { static propTypes = { elementId: PropTypes.string.isRequired, height: PropTypes.number.isRequired, }; + _container: HTMLDivElement | null = null; + _content: HTMLDivElement | null = null; + _observer: MutationObserver | null = null; + _original: Element | null = null; + _updateTimeout: number = 0; + componentDidMount() { this.update(); } componentWillUnmount() { clearTimeout(this._updateTimeout); - this._observer && this._observer.disconnect(); // observer not guaranteed to exist - } - _container = null; - _content = null; - _observer = null; - _original = null; - _updateTimeout = null; + if (this._observer) { + this._observer.disconnect(); // observer not guaranteed to exist + } + } update = () => { if (!this._content || !this._container) { @@ -38,7 +46,10 @@ export class DomPreview extends React.Component { const originalChanged = currentOriginal !== this._original; if (originalChanged) { - this._observer && this._observer.disconnect(); + if (this._observer) { + this._observer.disconnect(); + } + this._original = currentOriginal; if (this._original) { @@ -50,12 +61,16 @@ export class DomPreview extends React.Component { this._observer.observe(this._original, config); } else { clearTimeout(this._updateTimeout); // to avoid the assumption that we fully control when `update` is called - this._updateTimeout = setTimeout(this.update, 30); + this._updateTimeout = window.setTimeout(this.update, 30); return; } } - const thumb = this._original.cloneNode(true); + if (!this._original) { + return; + } + + const thumb = this._original.cloneNode(true) as HTMLDivElement; thumb.id += '-thumb'; const originalStyle = window.getComputedStyle(this._original, null); @@ -66,9 +81,10 @@ export class DomPreview extends React.Component { const scale = thumbHeight / originalHeight; const thumbWidth = originalWidth * scale; - if (this._content.hasChildNodes()) { + if (this._content.firstChild) { this._content.removeChild(this._content.firstChild); } + this._content.appendChild(thumb); this._content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`; @@ -76,13 +92,16 @@ export class DomPreview extends React.Component { // Copy canvas data const originalCanvas = this._original.querySelectorAll('canvas'); - const thumbCanvas = thumb.querySelectorAll('canvas'); + const thumbCanvas = (thumb as Element).querySelectorAll('canvas'); // Cloned canvas elements are blank and need to be explicitly redrawn if (originalCanvas.length > 0) { - Array.from(originalCanvas).map((img, i) => - thumbCanvas[i].getContext('2d').drawImage(img, 0, 0) - ); + Array.from(originalCanvas).map((img, i) => { + const context = thumbCanvas[i].getContext('2d'); + if (context) { + context.drawImage(img, 0, 0); + } + }); } }; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/index.tsx b/x-pack/plugins/canvas/public/components/dom_preview/index.ts similarity index 78% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/index.tsx rename to x-pack/plugins/canvas/public/components/dom_preview/index.ts index 85ea754de670..19980b7c2cfe 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/index.tsx +++ b/x-pack/plugins/canvas/public/components/dom_preview/index.ts @@ -4,6 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { TimeFilter } from './time_filter'; - -export { TimeFilter }; +export { DomPreview } from './dom_preview'; diff --git a/x-pack/plugins/canvas/public/components/link/index.js b/x-pack/plugins/canvas/public/components/link/index.ts similarity index 100% rename from x-pack/plugins/canvas/public/components/link/index.js rename to x-pack/plugins/canvas/public/components/link/index.ts diff --git a/x-pack/plugins/canvas/public/components/link/link.js b/x-pack/plugins/canvas/public/components/link/link.js deleted file mode 100644 index d97316419059..000000000000 --- a/x-pack/plugins/canvas/public/components/link/link.js +++ /dev/null @@ -1,63 +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 { EuiLink } from '@elastic/eui'; - -import { ComponentStrings } from '../../../i18n'; - -const { Link: strings } = ComponentStrings; - -const isModifiedEvent = (ev) => !!(ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey); - -export class Link extends React.PureComponent { - static propTypes = { - target: PropTypes.string, - onClick: PropTypes.func, - name: PropTypes.string.isRequired, - params: PropTypes.object, - children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired, - }; - - static contextTypes = { - router: PropTypes.object, - }; - - navigateTo = (name, params) => (ev) => { - if (this.props.onClick) { - this.props.onClick(ev); - } - - if ( - !ev.defaultPrevented && // onClick prevented default - ev.button === 0 && // ignore everything but left clicks - !this.props.target && // let browser handle "target=_blank" etc. - !isModifiedEvent(ev) // ignore clicks with modifier keys - ) { - ev.preventDefault(); - this.context.router.navigateTo(name, params); - } - }; - - render() { - try { - const { name, params, children, ...linkArgs } = this.props; - const { router } = this.context; - const href = router.getFullPath(router.create(name, params)); - const props = { - ...linkArgs, - href, - onClick: this.navigateTo(name, params), - }; - - return {children}; - } catch (e) { - console.error(e); - return
{strings.getErrorMessage(e.message)}
; - } - } -} diff --git a/x-pack/plugins/canvas/public/components/link/link.tsx b/x-pack/plugins/canvas/public/components/link/link.tsx new file mode 100644 index 000000000000..b0289fba842d --- /dev/null +++ b/x-pack/plugins/canvas/public/components/link/link.tsx @@ -0,0 +1,72 @@ +/* + * 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, MouseEvent, useContext } from 'react'; +import PropTypes from 'prop-types'; +import { EuiLink, EuiLinkProps } from '@elastic/eui'; +import { RouterContext } from '../router'; + +import { ComponentStrings } from '../../../i18n'; + +const { Link: strings } = ComponentStrings; + +const isModifiedEvent = (ev: MouseEvent) => + !!(ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey); + +interface Props { + name: string; + params: Record; +} + +export const Link: FC = ({ + onClick, + target, + name, + params, + children, + ...linkArgs +}) => { + const router = useContext(RouterContext); + + if (router) { + const navigateTo = (ev: MouseEvent) => { + if (onClick) { + onClick(ev); + } + + if ( + !ev.defaultPrevented && // onClick prevented default + ev.button === 0 && // ignore everything but left clicks + !target && // let browser handle "target=_blank" etc. + !isModifiedEvent(ev) // ignore clicks with modifier keys + ) { + ev.preventDefault(); + router.navigateTo(name, params); + } + }; + + try { + return ( + + {children} + + ); + } catch (e) { + return
{strings.getErrorMessage(e.message)}
; + } + } + + return
{strings.getErrorMessage('Router Undefined')}
; +}; + +Link.contextTypes = { + router: PropTypes.object, +}; + +Link.propTypes = { + name: PropTypes.string.isRequired, + params: PropTypes.object, +}; diff --git a/x-pack/plugins/canvas/public/components/page_manager/index.js b/x-pack/plugins/canvas/public/components/page_manager/index.js deleted file mode 100644 index a198b7b8c3d8..000000000000 --- a/x-pack/plugins/canvas/public/components/page_manager/index.js +++ /dev/null @@ -1,37 +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 { connect } from 'react-redux'; -import { compose, withState } from 'recompose'; -import * as pageActions from '../../state/actions/pages'; -import { canUserWrite } from '../../state/selectors/app'; -import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad'; -import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants'; -import { PageManager as Component } from './page_manager'; - -const mapStateToProps = (state) => { - const { id, css } = getWorkpad(state); - - return { - isWriteable: isWriteable(state) && canUserWrite(state), - pages: getPages(state), - selectedPage: getSelectedPage(state), - workpadId: id, - workpadCSS: css || DEFAULT_WORKPAD_CSS, - }; -}; - -const mapDispatchToProps = (dispatch) => ({ - addPage: () => dispatch(pageActions.addPage()), - movePage: (id, position) => dispatch(pageActions.movePage(id, position)), - duplicatePage: (id) => dispatch(pageActions.duplicatePage(id)), - removePage: (id) => dispatch(pageActions.removePage(id)), -}); - -export const PageManager = compose( - connect(mapStateToProps, mapDispatchToProps), - withState('deleteId', 'setDeleteId', null) -)(Component); diff --git a/x-pack/plugins/canvas/public/components/page_manager/index.ts b/x-pack/plugins/canvas/public/components/page_manager/index.ts new file mode 100644 index 000000000000..d19540cd6a68 --- /dev/null +++ b/x-pack/plugins/canvas/public/components/page_manager/index.ts @@ -0,0 +1,31 @@ +/* + * 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 { Dispatch } from 'redux'; +import { connect } from 'react-redux'; +// @ts-expect-error untyped local +import * as pageActions from '../../state/actions/pages'; +import { canUserWrite } from '../../state/selectors/app'; +import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad'; +import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants'; +import { PageManager as Component } from './page_manager'; +import { State } from '../../../types'; + +const mapStateToProps = (state: State) => ({ + isWriteable: isWriteable(state) && canUserWrite(state), + pages: getPages(state), + selectedPage: getSelectedPage(state), + workpadId: getWorkpad(state).id, + workpadCSS: getWorkpad(state).css || DEFAULT_WORKPAD_CSS, +}); + +const mapDispatchToProps = (dispatch: Dispatch) => ({ + onAddPage: () => dispatch(pageActions.addPage()), + onMovePage: (id: string, position: number) => dispatch(pageActions.movePage(id, position)), + onRemovePage: (id: string) => dispatch(pageActions.removePage(id)), +}); + +export const PageManager = connect(mapStateToProps, mapDispatchToProps)(Component); diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.js b/x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx similarity index 63% rename from x-pack/plugins/canvas/public/components/page_manager/page_manager.js rename to x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx index 3e2ff9dfe2b2..edc0d6201495 100644 --- a/x-pack/plugins/canvas/public/components/page_manager/page_manager.js +++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx @@ -4,38 +4,63 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment } from 'react'; +import React, { Fragment, Component } from 'react'; import PropTypes from 'prop-types'; import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; -import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; +import { DragDropContext, Droppable, Draggable, DragDropContextProps } from 'react-beautiful-dnd'; +// @ts-expect-error untyped dependency import Style from 'style-it'; + import { ConfirmModal } from '../confirm_modal'; import { Link } from '../link'; import { PagePreview } from '../page_preview'; import { ComponentStrings } from '../../../i18n'; +import { CanvasPage } from '../../../types'; const { PageManager: strings } = ComponentStrings; -export class PageManager extends React.PureComponent { +export interface Props { + isWriteable: boolean; + onAddPage: () => void; + onMovePage: (pageId: string, position: number) => void; + onPreviousPage: () => void; + onRemovePage: (pageId: string) => void; + pages: CanvasPage[]; + selectedPage?: string; + workpadCSS?: string; + workpadId: string; +} + +interface State { + showTrayPop: boolean; + removeId: string | null; +} + +export class PageManager extends Component { static propTypes = { isWriteable: PropTypes.bool.isRequired, + onAddPage: PropTypes.func.isRequired, + onMovePage: PropTypes.func.isRequired, + onPreviousPage: PropTypes.func.isRequired, + onRemovePage: PropTypes.func.isRequired, pages: PropTypes.array.isRequired, - workpadId: PropTypes.string.isRequired, - addPage: PropTypes.func.isRequired, - movePage: PropTypes.func.isRequired, - previousPage: PropTypes.func.isRequired, - duplicatePage: PropTypes.func.isRequired, - removePage: PropTypes.func.isRequired, selectedPage: PropTypes.string, - deleteId: PropTypes.string, - setDeleteId: PropTypes.func.isRequired, workpadCSS: PropTypes.string, + workpadId: PropTypes.string.isRequired, }; - state = { - showTrayPop: true, - }; + constructor(props: Props) { + super(props); + this.state = { + showTrayPop: true, + removeId: null, + }; + } + + _isMounted: boolean = false; + _activePageRef: HTMLDivElement | null = null; + _pageListRef: HTMLDivElement | null = null; componentDidMount() { // keep track of whether or not the component is mounted, to prevent rogue setState calls @@ -44,11 +69,13 @@ export class PageManager extends React.PureComponent { // gives the tray pop animation time to finish setTimeout(() => { this.scrollToActivePage(); - this._isMounted && this.setState({ showTrayPop: false }); + if (this._isMounted) { + this.setState({ showTrayPop: false }); + } }, 1000); } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps: Props) { // scrolls to the active page on the next tick, otherwise new pages don't scroll completely into view if (prevProps.selectedPage !== this.props.selectedPage) { setTimeout(this.scrollToActivePage, 0); @@ -60,33 +87,33 @@ export class PageManager extends React.PureComponent { } scrollToActivePage = () => { - if (this.activePageRef && this.pageListRef) { + if (this._activePageRef && this._pageListRef) { // not all target browsers support element.scrollTo // TODO: replace this with something more cross-browser, maybe scrollIntoView - if (!this.pageListRef.scrollTo) { + if (!this._pageListRef.scrollTo) { return; } - const pageOffset = this.activePageRef.offsetLeft; + const pageOffset = this._activePageRef.offsetLeft; const { left: pageLeft, right: pageRight, width: pageWidth, - } = this.activePageRef.getBoundingClientRect(); + } = this._activePageRef.getBoundingClientRect(); const { left: listLeft, right: listRight, width: listWidth, - } = this.pageListRef.getBoundingClientRect(); + } = this._pageListRef.getBoundingClientRect(); if (pageLeft < listLeft) { - this.pageListRef.scrollTo({ + this._pageListRef.scrollTo({ left: pageOffset, behavior: 'smooth', }); } if (pageRight > listRight) { - this.pageListRef.scrollTo({ + this._pageListRef.scrollTo({ left: pageOffset - listWidth + pageWidth, behavior: 'smooth', }); @@ -94,22 +121,29 @@ export class PageManager extends React.PureComponent { } }; - confirmDelete = (pageId) => { - this._isMounted && this.props.setDeleteId(pageId); + onConfirmRemove = (removeId: string) => { + if (this._isMounted) { + this.setState({ removeId }); + } }; - resetDelete = () => this._isMounted && this.props.setDeleteId(null); + resetRemove = () => this._isMounted && this.setState({ removeId: null }); + + doRemove = () => { + const { onPreviousPage, onRemovePage, selectedPage } = this.props; + const { removeId } = this.state; + this.resetRemove(); + + if (removeId === selectedPage) { + onPreviousPage(); + } - doDelete = () => { - const { previousPage, removePage, deleteId, selectedPage } = this.props; - this.resetDelete(); - if (deleteId === selectedPage) { - previousPage(); + if (removeId !== null) { + onRemovePage(removeId); } - removePage(deleteId); }; - onDragEnd = ({ draggableId: pageId, source, destination }) => { + onDragEnd: DragDropContextProps['onDragEnd'] = ({ draggableId: pageId, source, destination }) => { // dropped outside the list if (!destination) { return; @@ -117,18 +151,11 @@ export class PageManager extends React.PureComponent { const position = destination.index - source.index; - this.props.movePage(pageId, position); + this.props.onMovePage(pageId, position); }; - renderPage = (page, i) => { - const { - isWriteable, - selectedPage, - workpadId, - movePage, - duplicatePage, - workpadCSS, - } = this.props; + renderPage = (page: CanvasPage, i: number) => { + const { isWriteable, selectedPage, workpadId, workpadCSS } = this.props; const pageNumber = i + 1; return ( @@ -141,7 +168,7 @@ export class PageManager extends React.PureComponent { }`} ref={(el) => { if (page.id === selectedPage) { - this.activePageRef = el; + this._activePageRef = el; } provided.innerRef(el); }} @@ -163,16 +190,7 @@ export class PageManager extends React.PureComponent { {Style.it( workpadCSS,
- +
)} @@ -185,8 +203,8 @@ export class PageManager extends React.PureComponent { }; render() { - const { pages, addPage, deleteId, isWriteable } = this.props; - const { showTrayPop } = this.state; + const { pages, onAddPage, isWriteable } = this.props; + const { showTrayPop, removeId } = this.state; return ( @@ -200,7 +218,7 @@ export class PageManager extends React.PureComponent { showTrayPop ? 'canvasPageManager--trayPop' : '' }`} ref={(el) => { - this.pageListRef = el; + this._pageListRef = el; provided.innerRef(el); }} {...provided.droppableProps} @@ -216,11 +234,11 @@ export class PageManager extends React.PureComponent {