From 7a3e800aaab50969f7d53ac77f781a2544463f06 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Tue, 28 Jul 2020 18:58:58 -0400 Subject: [PATCH] [Canvas][tech-debt] Kill Recompose:Pure - Part 1 (#73303) Co-authored-by: Elastic Machine --- .../arg_add/{arg_add.js => arg_add.tsx} | 14 +- .../components/arg_add/{index.js => index.ts} | 6 +- .../arg_add_popover/arg_add_popover.tsx | 7 +- .../components/arg_add_popover/index.ts | 5 +- .../asset_manager.stories.storyshot | 539 ---------- .../public/components/color_dot/color_dot.tsx | 12 +- .../public/components/color_dot/index.ts | 7 +- .../color_manager/color_manager.tsx | 22 +- .../public/components/color_manager/index.ts | 7 +- .../color_palette/color_palette.tsx | 8 +- .../public/components/color_palette/index.ts | 6 +- .../components/color_picker/color_picker.tsx | 5 +- .../public/components/color_picker/index.ts | 7 +- .../color_picker_popover.tsx | 9 +- .../components/color_picker_popover/index.ts | 7 +- .../datatable/{datatable.js => datatable.tsx} | 33 +- .../datatable/{index.js => index.ts} | 5 +- .../font_picker.stories.storyshot | 0 .../{ => __stories__}/font_picker.stories.tsx | 4 +- .../components/font_picker/font_picker.tsx | 14 +- .../font_picker/{index.js => index.ts} | 6 +- .../canvas/public/components/loading/index.ts | 5 +- .../public/components/loading/loading.tsx | 6 +- .../public/components/shape_picker/index.ts | 6 +- .../components/shape_picker/shape_picker.tsx | 6 +- .../components/shape_picker_popover/index.tsx | 6 +- .../shape_picker_popover.tsx | 7 +- .../public/components/shape_preview/index.ts | 6 +- .../shape_preview/shape_preview.tsx | 4 +- .../text_style_picker.stories.storyshot | 975 ++++++++++++++++++ .../__stories__/text_style_picker.stories.tsx | 21 + .../{font_sizes.js => font_sizes.ts} | 0 .../text_style_picker/{index.js => index.ts} | 5 +- ..._style_picker.js => text_style_picker.tsx} | 160 +-- .../public/components/tooltip_icon/index.ts | 6 +- .../components/tooltip_icon/tooltip_icon.tsx | 4 +- 36 files changed, 1188 insertions(+), 752 deletions(-) rename x-pack/plugins/canvas/public/components/arg_add/{arg_add.js => arg_add.tsx} (71%) rename x-pack/plugins/canvas/public/components/arg_add/{index.js => index.ts} (66%) rename x-pack/plugins/canvas/public/components/datatable/{datatable.js => datatable.tsx} (78%) rename x-pack/plugins/canvas/public/components/datatable/{index.js => index.ts} (64%) rename x-pack/plugins/canvas/public/components/font_picker/{ => __stories__}/__snapshots__/font_picker.stories.storyshot (100%) rename x-pack/plugins/canvas/public/components/font_picker/{ => __stories__}/font_picker.stories.tsx (84%) rename x-pack/plugins/canvas/public/components/font_picker/{index.js => index.ts} (64%) create mode 100644 x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot create mode 100644 x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx rename x-pack/plugins/canvas/public/components/text_style_picker/{font_sizes.js => font_sizes.ts} (100%) rename x-pack/plugins/canvas/public/components/text_style_picker/{index.js => index.ts} (61%) rename x-pack/plugins/canvas/public/components/text_style_picker/{text_style_picker.js => text_style_picker.tsx} (54%) diff --git a/x-pack/plugins/canvas/public/components/arg_add/arg_add.js b/x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx similarity index 71% rename from x-pack/plugins/canvas/public/components/arg_add/arg_add.js rename to x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx index 2d6d7d1046fddd..e85a2915a82b1c 100644 --- a/x-pack/plugins/canvas/public/components/arg_add/arg_add.js +++ b/x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC, ReactEventHandler } from 'react'; import PropTypes from 'prop-types'; import { EuiDescriptionList, @@ -12,7 +12,13 @@ import { EuiDescriptionListDescription, } from '@elastic/eui'; -export const ArgAdd = ({ onValueAdd, displayName, help }) => { +interface Props { + displayName: string; + help: string; + onValueAdd?: ReactEventHandler; +} + +export const ArgAdd: FC = ({ onValueAdd = () => {}, displayName, help }) => { return ( -
-
-
- Manage workpad assets -
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-

- Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets. -

-
-
-
-
-
-
-
-
- Asset thumbnail -
-
-
-
-

- - airplane - -
- - - ( - 1 - kb) - - -

-
-
-
-
- - - -
-
- -
- -
- -
-
- -
- -
- -
-
- - - -
-
-
-
-
-
-
-
- Asset thumbnail -
-
-
-
-

- - marker - -
- - - ( - 1 - kb) - - -

-
-
-
-
- - - -
-
- -
- -
- -
-
- -
- -
- -
-
- - - -
-
-
-
-
-
-
-
-
-
- -
-
-
- 0% space used -
-
-
- -
-
-
-
, -
, -] -`; - exports[`Storyshots components/Assets/AssetManager two assets 1`] = ` Array [
= ({ value, children }) => { +export const ColorDot: FC = ({ value, children }) => { const tc = tinycolor(value); let style = {}; @@ -34,6 +34,6 @@ export const ColorDot: FunctionComponent = ({ value, children }) => { }; ColorDot.propTypes = { - value: PropTypes.string, children: PropTypes.node, + value: PropTypes.string, }; diff --git a/x-pack/plugins/canvas/public/components/color_dot/index.ts b/x-pack/plugins/canvas/public/components/color_dot/index.ts index aacfdf4e0cc74a..72936f6133886f 100644 --- a/x-pack/plugins/canvas/public/components/color_dot/index.ts +++ b/x-pack/plugins/canvas/public/components/color_dot/index.ts @@ -4,9 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ColorDot as Component } from './color_dot'; - -export { Props } from './color_dot'; -export const ColorDot = pure(Component); +export { ColorDot } from './color_dot'; diff --git a/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx b/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx index 8855bffc5e771e..88bf93a3ca84a2 100644 --- a/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx +++ b/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; +import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import tinycolor from 'tinycolor2'; import { ColorDot } from '../color_dot/color_dot'; @@ -15,17 +15,17 @@ import { ComponentStrings } from '../../../i18n/components'; const { ColorManager: strings } = ComponentStrings; export interface Props { + /** + * Determines if the add/remove buttons are displayed. + * @default false + */ + hasButtons?: boolean; /** The function to call when the Add Color button is clicked. The button will be disabled if there is no handler. */ onAddColor?: (value: string) => void; /** The function to call when the value is changed */ onChange: (value: string) => void; /** The function to call when the Remove Color button is clicked. The button will be disabled if there is no handler. */ onRemoveColor?: (value: string) => void; - /** - * Determines if the add/remove buttons are displayed. - * @default false - */ - hasButtons?: boolean; /** * The value of the color manager. Only honors valid CSS values. * @default '' @@ -33,12 +33,12 @@ export interface Props { value?: string; } -export const ColorManager: FunctionComponent = ({ - value = '', +export const ColorManager: FC = ({ + hasButtons = false, onAddColor, - onRemoveColor, onChange, - hasButtons = false, + onRemoveColor, + value = '', }) => { const tc = tinycolor(value); const validColor = tc.isValid(); diff --git a/x-pack/plugins/canvas/public/components/color_manager/index.ts b/x-pack/plugins/canvas/public/components/color_manager/index.ts index d7f59b38a74c59..9958c17cf19419 100644 --- a/x-pack/plugins/canvas/public/components/color_manager/index.ts +++ b/x-pack/plugins/canvas/public/components/color_manager/index.ts @@ -4,9 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ColorManager as Component } from './color_manager'; - -export { Props } from './color_manager'; -export const ColorManager = pure(Component); +export { ColorManager, Props } from './color_manager'; diff --git a/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx b/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx index 09bc08f9ae541d..d3b1936d4c3651 100644 --- a/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx +++ b/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx @@ -4,15 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiIcon, EuiLink } from '@elastic/eui'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; +import { EuiIcon, EuiLink } from '@elastic/eui'; import tinycolor from 'tinycolor2'; import { readableColor } from '../../lib/readable_color'; import { ColorDot } from '../color_dot'; import { ItemGrid } from '../item_grid'; -export interface Props { +interface Props { /** * An array of hexadecimal color values. Non-hex will be ignored. * @default [] @@ -32,7 +32,7 @@ export interface Props { value?: string; } -export const ColorPalette: FunctionComponent = ({ +export const ColorPalette: FC = ({ colors = [], colorsPerRow = 6, onChange, diff --git a/x-pack/plugins/canvas/public/components/color_palette/index.ts b/x-pack/plugins/canvas/public/components/color_palette/index.ts index fa71bc8b3b9b0e..2605868b94279c 100644 --- a/x-pack/plugins/canvas/public/components/color_palette/index.ts +++ b/x-pack/plugins/canvas/public/components/color_palette/index.ts @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; -import { ColorPalette as Component } from './color_palette'; - -export { Props } from './color_palette'; -export const ColorPalette = pure(Component); +export { ColorPalette } from './color_palette'; diff --git a/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx b/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx index 2bf17301b7b387..8de3ddb3d03a41 100644 --- a/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx +++ b/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; import tinycolor from 'tinycolor2'; + import { ColorManager, Props as ColorManagerProps } from '../color_manager'; import { ColorPalette } from '../color_palette'; @@ -18,7 +19,7 @@ export interface Props extends ColorManagerProps { colors?: string[]; } -export const ColorPicker: FunctionComponent = ({ +export const ColorPicker: FC = ({ colors = [], hasButtons = false, onAddColor, diff --git a/x-pack/plugins/canvas/public/components/color_picker/index.ts b/x-pack/plugins/canvas/public/components/color_picker/index.ts index 88968d11a665c6..35dd067ab6d394 100644 --- a/x-pack/plugins/canvas/public/components/color_picker/index.ts +++ b/x-pack/plugins/canvas/public/components/color_picker/index.ts @@ -4,9 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ColorPicker as Component } from './color_picker'; - -export { Props } from './color_picker'; -export const ColorPicker = pure(Component); +export { ColorPicker, Props } from './color_picker'; diff --git a/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx b/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx index 9e8a6e88b649b7..143e1a7cee6acd 100644 --- a/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx +++ b/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx @@ -4,20 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiLink, PopoverAnchorPosition } from '@elastic/eui'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; +import { EuiLink, PopoverAnchorPosition } from '@elastic/eui'; import tinycolor from 'tinycolor2'; + import { ColorDot } from '../color_dot'; import { ColorPicker, Props as ColorPickerProps } from '../color_picker'; import { Popover } from '../popover'; export interface Props extends ColorPickerProps { - anchorPosition: PopoverAnchorPosition; + anchorPosition?: PopoverAnchorPosition; ariaLabel?: string; } -export const ColorPickerPopover: FunctionComponent = (props: Props) => { +export const ColorPickerPopover: FC = (props: Props) => { const { value, anchorPosition, ariaLabel, ...rest } = props; const button = (handleClick: React.MouseEventHandler) => ( { +const getIcon = (type: IconType) => { if (type === null) { return; } @@ -36,19 +39,31 @@ const getIcon = (type) => { return ; }; -const getColumnName = (col) => (typeof col === 'string' ? col : col.name); +const getColumnName = (col: DatatableColumn) => (typeof col === 'string' ? col : col.name); -const getColumnType = (col) => col.type || null; +const getColumnType = (col: DatatableColumn) => col.type || null; -const getFormattedValue = (val, type) => { +const getFormattedValue = (val: any, type: any) => { if (type === 'date') { return moment(val).format(); } return String(val); }; -export const Datatable = ({ datatable, perPage, paginate, showHeader }) => ( - +interface Props { + datatable: DatatableType; + paginate?: boolean; + perPage?: number; + showHeader?: boolean; +} + +export const Datatable: FC = ({ + datatable, + paginate = false, + perPage = 10, + showHeader = false, +}) => ( + {({ rows, setPage, pageNumber, totalPages }) => (
@@ -91,7 +106,7 @@ export const Datatable = ({ datatable, perPage, paginate, showHeader }) => ( Datatable.propTypes = { datatable: PropTypes.object.isRequired, - perPage: PropTypes.number, paginate: PropTypes.bool, + perPage: PropTypes.number, showHeader: PropTypes.bool, }; diff --git a/x-pack/plugins/canvas/public/components/datatable/index.js b/x-pack/plugins/canvas/public/components/datatable/index.ts similarity index 64% rename from x-pack/plugins/canvas/public/components/datatable/index.js rename to x-pack/plugins/canvas/public/components/datatable/index.ts index c7837005368e59..e39b909c534606 100644 --- a/x-pack/plugins/canvas/public/components/datatable/index.js +++ b/x-pack/plugins/canvas/public/components/datatable/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; -import { Datatable as Component } from './datatable'; - -export const Datatable = pure(Component); +export { Datatable } from './datatable'; diff --git a/x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot rename to x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot diff --git a/x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx b/x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx similarity index 84% rename from x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx rename to x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx index 0ad1e01252002f..34cb3d644cccbd 100644 --- a/x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx +++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx @@ -7,8 +7,8 @@ import { action } from '@storybook/addon-actions'; import { storiesOf } from '@storybook/react'; import React from 'react'; -import { americanTypewriter } from '../../../common/lib/fonts'; -import { FontPicker } from './font_picker'; +import { americanTypewriter } from '../../../../common/lib/fonts'; +import { FontPicker } from '../font_picker'; storiesOf('components/FontPicker', module) .add('default', () => ) diff --git a/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx b/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx index 556a3c54521607..2b75841e1b7a59 100644 --- a/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx +++ b/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx @@ -4,14 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiSuperSelect } from '@elastic/eui'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; +import { EuiSuperSelect } from '@elastic/eui'; import { fonts, FontValue } from '../../../common/lib/fonts'; interface DisplayedFont { - value: string; label: string; + value: string; } interface Props { @@ -19,9 +19,7 @@ interface Props { value?: FontValue; } -export const FontPicker: FunctionComponent = (props) => { - const { value, onSelect } = props; - +export const FontPicker: FC = ({ value, onSelect }) => { // While fonts are strongly-typed, we also support custom fonts someone might type in. // So let's cast the fonts and allow for additions. const displayedFonts: DisplayedFont[] = fonts; @@ -46,10 +44,10 @@ export const FontPicker: FunctionComponent = (props) => { }; FontPicker.propTypes = { - /** Initial value of the Font Picker. */ - value: PropTypes.string, /** Function to execute when a Font is selected. */ onSelect: PropTypes.func, + /** Initial value of the Font Picker. */ + value: PropTypes.string, }; FontPicker.displayName = 'FontPicker'; diff --git a/x-pack/plugins/canvas/public/components/font_picker/index.js b/x-pack/plugins/canvas/public/components/font_picker/index.ts similarity index 64% rename from x-pack/plugins/canvas/public/components/font_picker/index.js rename to x-pack/plugins/canvas/public/components/font_picker/index.ts index 5ccb7846b7a77a..339021a7e5712d 100644 --- a/x-pack/plugins/canvas/public/components/font_picker/index.js +++ b/x-pack/plugins/canvas/public/components/font_picker/index.ts @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { FontPicker as Component } from './font_picker'; - -export const FontPicker = pure(Component); +export { FontPicker } from './font_picker'; diff --git a/x-pack/plugins/canvas/public/components/loading/index.ts b/x-pack/plugins/canvas/public/components/loading/index.ts index 81fedf32871843..745639955dcbaa 100644 --- a/x-pack/plugins/canvas/public/components/loading/index.ts +++ b/x-pack/plugins/canvas/public/components/loading/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; -import { Loading as Component } from './loading'; - -export const Loading = pure(Component); +export { Loading } from './loading'; diff --git a/x-pack/plugins/canvas/public/components/loading/loading.tsx b/x-pack/plugins/canvas/public/components/loading/loading.tsx index 67db16d40d4264..403be84295312e 100644 --- a/x-pack/plugins/canvas/public/components/loading/loading.tsx +++ b/x-pack/plugins/canvas/public/components/loading/loading.tsx @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiIcon, EuiLoadingSpinner, isColorDark } from '@elastic/eui'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; -import React, { FunctionComponent } from 'react'; +import { EuiIcon, EuiLoadingSpinner, isColorDark } from '@elastic/eui'; import { hexToRgb } from '../../../common/lib/hex_to_rgb'; interface Props { @@ -15,7 +15,7 @@ interface Props { text?: string; } -export const Loading: FunctionComponent = ({ +export const Loading: FC = ({ animated = false, text = '', backgroundColor = '#000000', diff --git a/x-pack/plugins/canvas/public/components/shape_picker/index.ts b/x-pack/plugins/canvas/public/components/shape_picker/index.ts index d3ed85831cbe20..3ec86e45af236e 100644 --- a/x-pack/plugins/canvas/public/components/shape_picker/index.ts +++ b/x-pack/plugins/canvas/public/components/shape_picker/index.ts @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ShapePicker as Component } from './shape_picker'; - -export const ShapePicker = pure(Component); +export { ShapePicker } from './shape_picker'; diff --git a/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx b/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx index 56874fd3080f7a..263654522c0599 100644 --- a/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx +++ b/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGrid, EuiFlexItem, EuiLink } from '@elastic/eui'; import { ShapePreview } from '../shape_preview'; @@ -16,7 +16,7 @@ interface Props { onChange?: (key: string) => void; } -export const ShapePicker = ({ shapes, onChange = () => {} }: Props) => { +export const ShapePicker: FC = ({ shapes, onChange = () => {} }) => { return ( {Object.keys(shapes) @@ -33,6 +33,6 @@ export const ShapePicker = ({ shapes, onChange = () => {} }: Props) => { }; ShapePicker.propTypes = { - shapes: PropTypes.object.isRequired, onChange: PropTypes.func, + shapes: PropTypes.object.isRequired, }; diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx b/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx index 1d4ae25a38fa2d..06619c0626daff 100644 --- a/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx +++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ShapePickerPopover as Component } from './shape_picker_popover'; - -export const ShapePickerPopover = pure(Component); +export { ShapePickerPopover } from './shape_picker_popover'; diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx b/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx index d42e08d2bc8524..d61d9e47a3a78b 100644 --- a/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx +++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; import { EuiLink, EuiPanel } from '@elastic/eui'; import { Popover } from '../popover'; @@ -20,7 +20,7 @@ interface Props { ariaLabel?: string; } -export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props) => { +export const ShapePickerPopover: FC = ({ shapes, onChange, value, ariaLabel }) => { const button = (handleClick: React.MouseEventHandler) => ( @@ -37,7 +37,8 @@ export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props }; ShapePickerPopover.propTypes = { + ariaLabel: PropTypes.string, + onChange: PropTypes.func, shapes: PropTypes.object.isRequired, value: PropTypes.string, - onChange: PropTypes.func, }; diff --git a/x-pack/plugins/canvas/public/components/shape_preview/index.ts b/x-pack/plugins/canvas/public/components/shape_preview/index.ts index 4320a10d97a853..6027b1227a99a3 100644 --- a/x-pack/plugins/canvas/public/components/shape_preview/index.ts +++ b/x-pack/plugins/canvas/public/components/shape_preview/index.ts @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; - -import { ShapePreview as Component } from './shape_preview'; - -export const ShapePreview = pure(Component); +export { ShapePreview } from './shape_preview'; diff --git a/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx b/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx index 4f67945e9ce13a..3ff18f3aa4bc42 100644 --- a/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx +++ b/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx @@ -4,14 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; interface Props { shape?: string; } -export const ShapePreview = ({ shape }: Props) => { +export const ShapePreview: FC = ({ shape }) => { if (!shape) { return
; } diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot new file mode 100644 index 00000000000000..ad236e701ceb01 --- /dev/null +++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot @@ -0,0 +1,975 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots components/TextStylePicker default 1`] = ` +
+
+
+
+
+
+ +
+
+ + Select an option: + , is selected + +
+
+
+
+
+
+ +
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+`; + +exports[`Storyshots components/TextStylePicker interactive 1`] = ` +
+
+
+
+
+
+ +
+
+ + Select an option: + , is selected + +
+
+
+
+
+
+ +
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+`; diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx new file mode 100644 index 00000000000000..b33a34fcd5e65f --- /dev/null +++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx @@ -0,0 +1,21 @@ +/* + * 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 } from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import { TextStylePicker } from '../text_style_picker'; + +const Interactive = () => { + const [props, setProps] = useState({}); + return ; +}; + +storiesOf('components/TextStylePicker', module) + .addDecorator((fn) =>
{fn()}
) + .add('default', () => ) + .add('interactive', () => ); diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.js b/x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.ts similarity index 100% rename from x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.js rename to x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.ts diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/index.js b/x-pack/plugins/canvas/public/components/text_style_picker/index.ts similarity index 61% rename from x-pack/plugins/canvas/public/components/text_style_picker/index.js rename to x-pack/plugins/canvas/public/components/text_style_picker/index.ts index 79bde95723682a..16fb39b660a0c8 100644 --- a/x-pack/plugins/canvas/public/components/text_style_picker/index.js +++ b/x-pack/plugins/canvas/public/components/text_style_picker/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; -import { TextStylePicker as Component } from './text_style_picker'; - -export const TextStylePicker = pure(Component); +export { TextStylePicker } from './text_style_picker'; diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js b/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx similarity index 54% rename from x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js rename to x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx index 48d52abb031250..3dfc55919395d4 100644 --- a/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js +++ b/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer, EuiButtonGroup } from '@elastic/eui'; +import { FontValue } from 'src/plugins/expressions'; import { ComponentStrings } from '../../../i18n'; import { FontPicker } from '../font_picker'; import { ColorPickerPopover } from '../color_picker_popover'; @@ -14,54 +15,75 @@ import { fontSizes } from './font_sizes'; const { TextStylePicker: strings } = ComponentStrings; -export const TextStylePicker = ({ - family, - size, - align, - color, - weight, - underline, - italic, - onChange, - colors, -}) => { - const alignmentButtons = [ - { - id: 'left', - label: strings.getAlignLeftOption(), - iconType: 'editorAlignLeft', - }, - { - id: 'center', - label: strings.getAlignCenterOption(), - iconType: 'editorAlignCenter', - }, - { - id: 'right', - label: strings.getAlignRightOption(), - iconType: 'editorAlignRight', - }, - ]; - - const styleButtons = [ - { - id: 'bold', - label: strings.getStyleBoldOption(), - iconType: 'editorBold', - }, - { - id: 'italic', - label: strings.getStyleItalicOption(), - iconType: 'editorItalic', - }, - { - id: 'underline', - label: strings.getStyleUnderlineOption(), - iconType: 'editorUnderline', - }, - ]; - - const stylesSelectedMap = { +interface BaseProps { + family?: FontValue; + size?: number; + align?: 'left' | 'center' | 'right'; + color?: string; + weight?: 'bold' | 'normal'; + underline?: boolean; + italic?: boolean; +} + +interface Props extends BaseProps { + colors?: string[]; + onChange: (props: BaseProps) => void; +} + +type StyleType = 'bold' | 'italic' | 'underline'; + +const alignmentButtons = [ + { + id: 'left', + label: strings.getAlignLeftOption(), + iconType: 'editorAlignLeft', + }, + { + id: 'center', + label: strings.getAlignCenterOption(), + iconType: 'editorAlignCenter', + }, + { + id: 'right', + label: strings.getAlignRightOption(), + iconType: 'editorAlignRight', + }, +]; + +const styleButtons = [ + { + id: 'bold', + label: strings.getStyleBoldOption(), + iconType: 'editorBold', + }, + { + id: 'italic', + label: strings.getStyleItalicOption(), + iconType: 'editorItalic', + }, + { + id: 'underline', + label: strings.getStyleUnderlineOption(), + iconType: 'editorUnderline', + }, +]; + +export const TextStylePicker: FC = (props) => { + const [style, setStyle] = useState(props); + + const { + align = 'left', + color, + colors, + family, + italic = false, + onChange, + size = 14, + underline = false, + weight = 'normal', + } = style; + + const stylesSelectedMap: Record = { ['bold']: weight === 'bold', ['italic']: Boolean(italic), ['underline']: Boolean(underline), @@ -72,31 +94,22 @@ export const TextStylePicker = ({ fontSizes.sort((a, b) => a - b); } - const doChange = (propName, value) => { - onChange({ - family, - size, - align, - color, - weight: weight || 'normal', - underline: underline || false, - italic: italic || false, - [propName]: value, - }); - }; + useEffect(() => onChange(style), [onChange, style]); - const onAlignmentChange = (optionId) => doChange('align', optionId); + const doChange = (propName: keyof Props, value: string | boolean | number) => { + setStyle({ ...style, [propName]: value }); + }; - const onStyleChange = (optionId) => { - let prop; + const onStyleChange = (optionId: string) => { + let prop: 'weight' | 'italic' | 'underline'; let value; if (optionId === 'bold') { prop = 'weight'; value = !stylesSelectedMap[optionId] ? 'bold' : 'normal'; } else { - prop = optionId; - value = !stylesSelectedMap[optionId]; + prop = optionId as 'italic' | 'underline'; + value = !stylesSelectedMap[prop]; } doChange(prop, value); @@ -106,14 +119,18 @@ export const TextStylePicker = ({
- doChange('family', value)} /> + {family ? ( + doChange('family', value)} /> + ) : ( + doChange('family', value)} /> + )} doChange('size', Number(e.target.value))} - options={fontSizes.map((size) => ({ text: String(size), value: size }))} + options={fontSizes.map((fontSize) => ({ text: String(fontSize), value: fontSize }))} prepend="Size" /> @@ -147,7 +164,7 @@ export const TextStylePicker = ({ buttonSize="compressed" isIconOnly idSelected={align} - onChange={onAlignmentChange} + onChange={(optionId: string) => doChange('align', optionId)} className="canvasSidebar__buttonGroup" /> @@ -159,9 +176,9 @@ export const TextStylePicker = ({ TextStylePicker.propTypes = { family: PropTypes.string, size: PropTypes.number, - align: PropTypes.string, + align: PropTypes.oneOf(['left', 'center', 'right']), color: PropTypes.string, - weight: PropTypes.string, + weight: PropTypes.oneOf(['normal', 'bold']), underline: PropTypes.bool, italic: PropTypes.bool, onChange: PropTypes.func.isRequired, @@ -171,4 +188,5 @@ TextStylePicker.propTypes = { TextStylePicker.defaultProps = { align: 'left', size: 14, + weight: 'normal', }; diff --git a/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts b/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts index 6e71baa3647852..55c2f7090629c8 100644 --- a/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts +++ b/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts @@ -4,8 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pure } from 'recompose'; -import { TooltipIcon as Component } from './tooltip_icon'; -export { IconType } from './tooltip_icon'; - -export const TooltipIcon = pure(Component); +export { TooltipIcon, IconType } from './tooltip_icon'; diff --git a/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx b/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx index 78c2b0ec53c9f0..d91bb4bc9add96 100644 --- a/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx +++ b/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx @@ -5,7 +5,7 @@ */ /* eslint react/forbid-elements: 0 */ -import React from 'react'; +import React, { FC } from 'react'; import PropTypes from 'prop-types'; import { EuiIconTip, PropsOf } from '@elastic/eui'; @@ -21,7 +21,7 @@ interface Props extends Omit { icon: IconType; } -export const TooltipIcon = ({ icon = IconType.info, ...rest }: Props) => { +export const TooltipIcon: FC = ({ icon = IconType.info, ...rest }) => { const icons = { [IconType.error]: { type: 'alert', color: 'danger' }, [IconType.warning]: { type: 'alert', color: 'warning' },