diff --git a/package.json b/package.json index c2e0fb60b5e..4ee93d54baf 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "postcss-inline-svg": "^3.0.0", "postcss-loader": "^2.0.8", "pre-commit": "^1.2.2", - "prettier": "^1.17.0", + "prettier": "^1.19.1", "prompt": "^1.0.0", "prop-types": "^15.6.0", "puppeteer": "^2.0.0", diff --git a/src-docs/src/components/guide_section/index.js b/src-docs/src/components/guide_section/index.js index 70616ba4987..9e6038f7df5 100644 --- a/src-docs/src/components/guide_section/index.js +++ b/src-docs/src/components/guide_section/index.js @@ -1,5 +1,3 @@ -export { - GuideSectionContainer as GuideSection, -} from './guide_section_container'; +export { GuideSectionContainer as GuideSection } from './guide_section_container'; export { GuideSectionTypes } from './guide_section_types'; diff --git a/src-docs/src/views/accessibility/props.tsx b/src-docs/src/views/accessibility/props.tsx index 29e44b11cc8..64613ba0ccf 100644 --- a/src-docs/src/views/accessibility/props.tsx +++ b/src-docs/src/views/accessibility/props.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; import { EuiScreenReaderOnlyProps } from '../../../../src/components/accessibility/screen_reader'; -export const ScreenReaderOnlyDocsComponent: FunctionComponent< - EuiScreenReaderOnlyProps -> = () =>
; +export const ScreenReaderOnlyDocsComponent: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/app_container.js b/src-docs/src/views/app_container.js index c656e4c55b8..891532f1359 100644 --- a/src-docs/src/views/app_container.js +++ b/src-docs/src/views/app_container.js @@ -16,10 +16,7 @@ function mapStateToProps(state, ownProps) { } export const AppContainer = withRouter( - connect( - mapStateToProps, - { - toggleLocale, - } - )(AppView) + connect(mapStateToProps, { + toggleLocale, + })(AppView) ); diff --git a/src-docs/src/views/breadcrumbs/props.tsx b/src-docs/src/views/breadcrumbs/props.tsx index 372f7f95a98..d43872c9535 100644 --- a/src-docs/src/views/breadcrumbs/props.tsx +++ b/src-docs/src/views/breadcrumbs/props.tsx @@ -5,8 +5,8 @@ import { EuiBreadcrumbResponsiveMaxCount, } from '../../../../src/components/breadcrumbs'; -export const BreadcrumbResponsiveMaxCount: FunctionComponent< - EuiBreadcrumbResponsiveMaxCount -> = () =>
; +export const BreadcrumbResponsiveMaxCount: FunctionComponent = () => ( +
+); export const BreadcrumbProps: FunctionComponent = () =>
; diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx index cfedbaabc53..50ae7731d2f 100644 --- a/src-docs/src/views/color_picker/props.tsx +++ b/src-docs/src/views/color_picker/props.tsx @@ -6,14 +6,14 @@ import { EuiColorPalettePickerPaletteGradientProps, } from '../../../../src/components/color_picker/color_palette_picker'; -export const EuiColorPalettePickerPaletteText: FunctionComponent< - EuiColorPalettePickerPaletteTextProps -> = () =>
; +export const EuiColorPalettePickerPaletteText: FunctionComponent = () => ( +
+); -export const EuiColorPalettePickerPaletteFixed: FunctionComponent< - EuiColorPalettePickerPaletteFixedProps -> = () =>
; +export const EuiColorPalettePickerPaletteFixed: FunctionComponent = () => ( +
+); -export const EuiColorPalettePickerPaletteGradient: FunctionComponent< - EuiColorPalettePickerPaletteGradientProps -> = () =>
; +export const EuiColorPalettePickerPaletteGradient: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/control_bar/props.tsx b/src-docs/src/views/control_bar/props.tsx index aa4a1b879d1..cd39c754250 100644 --- a/src-docs/src/views/control_bar/props.tsx +++ b/src-docs/src/views/control_bar/props.tsx @@ -11,9 +11,9 @@ import { TextControl, } from '../../../../src/components/control_bar/control_bar'; -export const BreadcrumbControlProps: FunctionComponent< - BreadcrumbControl -> = () =>
; +export const BreadcrumbControlProps: FunctionComponent = () => ( +
+); export const ButtonControlProps: FunctionComponent = () => (
@@ -26,9 +26,9 @@ export const DividerControlProps: FunctionComponent = () => ( export const IconControlTypeProps: FunctionComponent = () => (
); -export const IconButtonControlTypeProps: FunctionComponent< - IconButtonControlType -> = () =>
; +export const IconButtonControlTypeProps: FunctionComponent = () => ( +
+); export const SpacerControlProps: FunctionComponent = () => (
diff --git a/src-docs/src/views/datagrid/props.tsx b/src-docs/src/views/datagrid/props.tsx index 1c81700f261..45e4932cf1c 100644 --- a/src-docs/src/views/datagrid/props.tsx +++ b/src-docs/src/views/datagrid/props.tsx @@ -18,9 +18,9 @@ export const DataGridColumn: FunctionComponent = () => (
); -export const DataGridPagination: FunctionComponent< - EuiDataGridPaginationProps -> = () =>
; +export const DataGridPagination: FunctionComponent = () => ( +
+); export const DataGridSorting: FunctionComponent = () => (
@@ -32,30 +32,30 @@ export const DataGridInMemory: FunctionComponent = () => ( export const DataGridStyle: FunctionComponent = () =>
; -export const DataGridToolbarVisibilityOptions: FunctionComponent< - EuiDataGridToolBarVisibilityOptions -> = () =>
; +export const DataGridToolbarVisibilityOptions: FunctionComponent = () => ( +
+); -export const DataGridCellValueElement: FunctionComponent< - EuiDataGridCellValueElementProps -> = () =>
; +export const DataGridCellValueElement: FunctionComponent = () => ( +
+); -export const DataGridSchemaDetector: FunctionComponent< - EuiDataGridSchemaDetector -> = () =>
; +export const DataGridSchemaDetector: FunctionComponent = () => ( +
+); -export const DataGridColumnVisibility: FunctionComponent< - EuiDataGridColumnVisibility -> = () =>
; +export const DataGridColumnVisibility: FunctionComponent = () => ( +
+); -export const DataGridPopoverContent: FunctionComponent< - EuiDataGridPopoverContentProps -> = () =>
; +export const DataGridPopoverContent: FunctionComponent = () => ( +
+); -export const DataGridControlColumn: FunctionComponent< - EuiDataGridControlColumn -> = () =>
; +export const DataGridControlColumn: FunctionComponent = () => ( +
+); -export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent< - EuiDataGridToolBarVisibilityColumnSelectorOptions -> = () =>
; +export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index 566557c05b6..a015c8c081e 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -93,9 +93,7 @@ export const ChartTypeCard = props => { return ( + description={`${props.type} charts can be displayed as any x/y series type.`}> = () =>
; +export const EuiHeaderSectionsProp: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/list_group/props.tsx b/src-docs/src/views/list_group/props.tsx index c131a02172c..fe8669ddc6b 100644 --- a/src-docs/src/views/list_group/props.tsx +++ b/src-docs/src/views/list_group/props.tsx @@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react'; import { EuiPinnableListGroupItemProps } from '../../../../src/components/list_group'; -export const EuiPinnableListGroupItem: FunctionComponent< - EuiPinnableListGroupItemProps -> = () =>
; +export const EuiPinnableListGroupItem: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/package/i18n_tokens.js b/src-docs/src/views/package/i18n_tokens.js index dfb07406576..0a519abd9aa 100644 --- a/src-docs/src/views/package/i18n_tokens.js +++ b/src-docs/src/views/package/i18n_tokens.js @@ -25,9 +25,7 @@ const columns = [ + href={`https://github.com/elastic/eui/blob/master/${filepath}#L${loc.start.line}`}> {filepath}:{loc.start.line}:{loc.start.column}
diff --git a/src-docs/src/views/range/levels.js b/src-docs/src/views/range/levels.js index 5144e6068cc..1d57253dec9 100644 --- a/src-docs/src/views/range/levels.js +++ b/src-docs/src/views/range/levels.js @@ -56,7 +56,10 @@ export default () => { value={dualValue} onChange={value => onDualChange(value)} showTicks - ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]} + ticks={[ + { label: '20kb', value: 20 }, + { label: '100kb', value: 100 }, + ]} showInput levels={levels} aria-label="An example of EuiDualRange with levels prop" diff --git a/src-docs/src/views/range/states.js b/src-docs/src/views/range/states.js index dbaf95dff58..0d0b11ba4b7 100644 --- a/src-docs/src/views/range/states.js +++ b/src-docs/src/views/range/states.js @@ -57,7 +57,10 @@ export default () => { showLabels showInput showTicks - ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]} + ticks={[ + { label: '20kb', value: 20 }, + { label: '100kb', value: 100 }, + ]} levels={levels} aria-label="An example of EuiRange" /> diff --git a/src-docs/src/views/range/ticks.js b/src-docs/src/views/range/ticks.js index 74a9aa56753..5a57ccb0976 100644 --- a/src-docs/src/views/range/ticks.js +++ b/src-docs/src/views/range/ticks.js @@ -64,7 +64,10 @@ export default () => { value={dualValue} onChange={onDualChange} showTicks - ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]} + ticks={[ + { label: '20kb', value: 20 }, + { label: '100kb', value: 100 }, + ]} showInput aria-label="An example of EuiDualRange with ticks" /> diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js index da94ad3b4d0..4f245cbc6a1 100644 --- a/src-docs/src/views/resize_observer/resize_observer_hook.js +++ b/src-docs/src/views/resize_observer/resize_observer_hook.js @@ -42,9 +42,7 @@ export const ResizeObserverHookExample = () => {

)}

- {`height: ${dimensions.height}; width: ${ - dimensions.width - }`} + {`height: ${dimensions.height}; width: ${dimensions.width}`}

diff --git a/src-docs/src/views/search_bar/controlled_search_bar.js b/src-docs/src/views/search_bar/controlled_search_bar.js index 04f59d4fc85..c614fcd220b 100644 --- a/src-docs/src/views/search_bar/controlled_search_bar.js +++ b/src-docs/src/views/search_bar/controlled_search_bar.js @@ -32,7 +32,10 @@ const items = times(10, id => { id, status: random.oneOf(['open', 'closed']), type: random.oneOf(types), - tag: random.setOf(tags.map(tag => tag.name), { min: 0, max: 3 }), + tag: random.setOf( + tags.map(tag => tag.name), + { min: 0, max: 3 } + ), active: random.boolean(), owner: random.oneOf(users), followers: random.integer({ min: 0, max: 20 }), diff --git a/src-docs/src/views/search_bar/search_bar.js b/src-docs/src/views/search_bar/search_bar.js index 0786149a5c4..ba2690767f3 100644 --- a/src-docs/src/views/search_bar/search_bar.js +++ b/src-docs/src/views/search_bar/search_bar.js @@ -33,7 +33,10 @@ const items = times(10, id => { id, status: random.oneOf(['open', 'closed']), type: random.oneOf(types), - tag: random.setOf(tags.map(tag => tag.name), { min: 0, max: 3 }), + tag: random.setOf( + tags.map(tag => tag.name), + { min: 0, max: 3 } + ), active: random.boolean(), owner: random.oneOf(users), followers: random.integer({ min: 0, max: 20 }), diff --git a/src-docs/src/views/search_bar/search_bar_filters.js b/src-docs/src/views/search_bar/search_bar_filters.js index fb078a715d4..4c4ef026605 100644 --- a/src-docs/src/views/search_bar/search_bar_filters.js +++ b/src-docs/src/views/search_bar/search_bar_filters.js @@ -48,7 +48,10 @@ const items = times(10, id => { id, status: random.oneOf(['open', 'closed']), type: random.oneOf(types), - tag: random.setOf(tags.map(tag => tag.name), { min: 0, max: 3 }), + tag: random.setOf( + tags.map(tag => tag.name), + { min: 0, max: 3 } + ), active: random.boolean(), owner: random.oneOf(users), followers: random.integer({ min: 0, max: 20 }), diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx index 294a3cc1fe5..2ebb8ef1358 100644 --- a/src-docs/src/views/selectable/props.tsx +++ b/src-docs/src/views/selectable/props.tsx @@ -4,10 +4,10 @@ import { EuiSelectableOptionsListProps, } from '../../../../src/components/selectable'; -export const EuiSelectableOptionProps: FunctionComponent< - EuiSelectableOption -> = () =>
; +export const EuiSelectableOptionProps: FunctionComponent = () => ( +
+); -export const EuiSelectableOptionsList: FunctionComponent< - EuiSelectableOptionsListProps -> = () =>
; +export const EuiSelectableOptionsList: FunctionComponent = () => ( +
+); diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js index 43a507020ff..dd58f9921b1 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js @@ -46,9 +46,7 @@ export const Table = () => { requestTimeoutId = setTimeout(() => { const items = store.users.filter(user => { - const normalizedName = `${user.firstName} ${ - user.lastName - }`.toLowerCase(); + const normalizedName = `${user.firstName} ${user.lastName}`.toLowerCase(); const normalizedQuery = query.text.toLowerCase(); return normalizedName.indexOf(normalizedQuery) !== -1; }); diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js index 14622fb14cc..a997b4eeeac 100644 --- a/src-docs/src/views/tabs/tabs.js +++ b/src-docs/src/views/tabs/tabs.js @@ -51,7 +51,7 @@ export default () => { const renderTabs = () => { return tabs.map((tab, index) => ( onSelectedTabChanged(tab.id)} isSelected={tab.id === selectedTabId} disabled={tab.disabled} diff --git a/src/components/accessibility/screen_reader.tsx b/src/components/accessibility/screen_reader.tsx index eb5db9331ef..ad7a0d8e4e4 100644 --- a/src/components/accessibility/screen_reader.tsx +++ b/src/components/accessibility/screen_reader.tsx @@ -29,9 +29,10 @@ export interface EuiScreenReaderOnlyProps { showOnFocus?: boolean; } -export const EuiScreenReaderOnly: FunctionComponent< - EuiScreenReaderOnlyProps -> = ({ children, showOnFocus }) => { +export const EuiScreenReaderOnly: FunctionComponent = ({ + children, + showOnFocus, +}) => { const classes = classNames( { euiScreenReaderOnly: !showOnFocus, diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 0bbc160d9db..9c212cf4112 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -281,8 +281,8 @@ export const EuiBadge: FunctionComponent = ({ aria-label={onClickAriaLabel} ref={ref} title={innerText} - {...relObj as HTMLAttributes} - {...rest as HTMLAttributes}> + {...(relObj as HTMLAttributes)} + {...(rest as HTMLAttributes)}> {children} )} @@ -318,8 +318,8 @@ export const EuiBadge: FunctionComponent = ({ style={optionalCustomStyles} ref={ref as Ref} title={innerText} - {...relObj as HTMLAttributes} - {...rest as HTMLAttributes}> + {...(relObj as HTMLAttributes)} + {...(rest as HTMLAttributes)}> {children} {optionalIcon} diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index cd093768a06..bba4e4a90ae 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -34,7 +34,8 @@ type LabelAsNode = ( | { tooltipContent: ReactNode; title?: string; - }) & { + } +) & { label: ReactNode; }; diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx index 8e2e773ed12..f895872e64d 100644 --- a/src/components/badge/notification_badge/badge_notification.tsx +++ b/src/components/badge/notification_badge/badge_notification.tsx @@ -45,9 +45,13 @@ export interface EuiNotificationBadgeProps color?: BadgeNotificationColor; } -export const EuiNotificationBadge: FunctionComponent< - EuiNotificationBadgeProps -> = ({ children, className, size = 's', color = 'accent', ...rest }) => { +export const EuiNotificationBadge: FunctionComponent = ({ + children, + className, + size = 's', + color = 'accent', + ...rest +}) => { const classes = classNames( 'euiNotificationBadge', sizeToClassNameMap[size], diff --git a/src/components/basic_table/basic_table.behavior.test.tsx b/src/components/basic_table/basic_table.behavior.test.tsx index 0d5096e298e..133ffdfa1fd 100644 --- a/src/components/basic_table/basic_table.behavior.test.tsx +++ b/src/components/basic_table/basic_table.behavior.test.tsx @@ -31,7 +31,10 @@ describe('EuiBasicTable', () => { beforeEach(() => { props = { - items: [{ id: '1', name: 'name1' }, { id: '2', name: 'name2' }], + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + ], itemId: 'id', columns: [ { diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx index fd17eebe2f4..37bfa9e0bce 100644 --- a/src/components/basic_table/basic_table.test.tsx +++ b/src/components/basic_table/basic_table.test.tsx @@ -300,7 +300,10 @@ describe('EuiBasicTable', () => { test('with pagination - 2nd page', () => { const props: EuiBasicTableProps = { - items: [{ id: '1', name: 'name1' }, { id: '2', name: 'name2' }], + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + ], columns: [ { field: 'name', diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx index ddf64608003..b24a78030ae 100644 --- a/src/components/basic_table/default_item_action.tsx +++ b/src/components/basic_table/default_item_action.tsx @@ -47,9 +47,7 @@ export const DefaultItemAction = ({ className, }: DefaultItemActionProps): ReactElement => { if (!action.onClick && !action.href) { - throw new Error(`Cannot render item action [${ - action.name - }]. Missing required 'onClick' callback + throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback`); } @@ -72,9 +70,7 @@ export const DefaultItemAction = ({ typeof action.name === 'function' ? action.name(item) : action.name; if (action.type === 'icon') { if (!icon) { - throw new Error(`Cannot render item action [${ - action.name - }]. It is configured to render as an icon but no + throw new Error(`Cannot render item action [${action.name}]. It is configured to render as an icon but no icon is provided. Make sure to set the 'icon' property of the action`); } const ariaLabelId = htmlIdGenerator()(); diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index f81981d2813..12d33b352bb 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -28,7 +28,7 @@ type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l'; // Exported for testing export const paddingSizeToClassNameMap: { - [value in BottomBarPaddingSize]: string | null + [value in BottomBarPaddingSize]: string | null; } = { none: null, s: 'euiBottomBar--paddingSmall', diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 6da5869109c..2ce3b634311 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -41,7 +41,7 @@ export type EuiBreadcrumbResponsiveMaxCount = { * Any of the following keys are allowed: `'xs' | 's' | 'm' | 'l' | 'xl'` * Omitting a key will display all breadcrumbs at that breakpoint */ - [key in EuiBreakpointSize]?: number + [key in EuiBreakpointSize]?: number; }; export type EuiBreadcrumb = CommonProps & { diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx index 4f210b7fd48..c27ff045f3b 100644 --- a/src/components/button/button_content.tsx +++ b/src/components/button/button_content.tsx @@ -26,7 +26,7 @@ import { EuiIcon, IconType } from '../icon'; export type ButtonContentIconSide = 'left' | 'right'; const iconSideToClassNameMap: { - [side in ButtonContentIconSide]: string | null + [side in ButtonContentIconSide]: string | null; } = { left: null, right: 'euiButtonContent--iconRight', @@ -50,9 +50,8 @@ export interface EuiButtonContentProps extends CommonProps { textProps?: HTMLAttributes & CommonProps; } -export const EuiButtonContent: FunctionComponent< - EuiButtonContentType & EuiButtonContentProps -> = ({ +export const EuiButtonContent: FunctionComponent = ({ children, textProps, isLoading = false, diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx index cc72e2caa59..d87cc53ff6f 100644 --- a/src/components/button/button_empty/button_empty.tsx +++ b/src/components/button/button_empty/button_empty.tsx @@ -179,7 +179,7 @@ export const EuiButtonEmpty: FunctionComponent = ({ target={target} rel={secureRel} ref={buttonRef} - {...rest as EuiButtonEmptyPropsForAnchor}> + {...(rest as EuiButtonEmptyPropsForAnchor)}> {innerNode} ); @@ -191,7 +191,7 @@ export const EuiButtonEmpty: FunctionComponent = ({ className={classes} type={type} ref={buttonRef} - {...rest as EuiButtonEmptyPropsForButton}> + {...(rest as EuiButtonEmptyPropsForButton)}> {innerNode} ); diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index 25ca5861d9a..e3a6174da94 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -145,7 +145,7 @@ export const EuiButtonIcon: FunctionComponent = ({ target={target} rel={secureRel} ref={buttonRef as Ref} - {...rest as AnchorHTMLAttributes}> + {...(rest as AnchorHTMLAttributes)}> {buttonIcon} ); @@ -159,7 +159,7 @@ export const EuiButtonIcon: FunctionComponent = ({ className={classes} type={type as typeof buttonType} ref={buttonRef as Ref} - {...rest as ButtonHTMLAttributes}> + {...(rest as ButtonHTMLAttributes)}> {buttonIcon} ); diff --git a/src/components/button/button_toggle/button_toggle.tsx b/src/components/button/button_toggle/button_toggle.tsx index 90a5dc3c52c..ac995590a8c 100644 --- a/src/components/button/button_toggle/button_toggle.tsx +++ b/src/components/button/button_toggle/button_toggle.tsx @@ -144,10 +144,10 @@ export const EuiButtonToggle: FunctionComponent = ({ color={color} disabled={isDisabled} size={isIconOnly ? 's' : undefined} // only force small if it's the icon only version - {...rest as Extract< + {...(rest as Extract< EuiButtonTogglePropsForAnchor, EuiButtonTogglePropsForButtonToggle - >}> + >)}> {buttonContent} diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 7a680d30741..5f36af10f0c 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -163,7 +163,7 @@ export type EuiCardProps = Omit & { }; const paddingSizeToClassNameMap: { - [paddingSize in CardPaddingSize]: string + [paddingSize in CardPaddingSize]: string; } = { none: 'euiCard--paddingNone', s: 'euiCard--paddingSmall', diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx index 199f0dffd19..a66a6730e30 100644 --- a/src/components/card/checkable_card/checkable_card.tsx +++ b/src/components/card/checkable_card/checkable_card.tsx @@ -75,7 +75,7 @@ export const EuiCheckableCard: FunctionComponent = ({ ); } else { diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx index f21d27cc525..cd884e5e6ca 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx +++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx @@ -110,9 +110,7 @@ export type EuiCollapsibleNavGroupProps = ExclusiveUnion< GroupAsDiv >; -export const EuiCollapsibleNavGroup: FunctionComponent< - EuiCollapsibleNavGroupProps -> = ({ +export const EuiCollapsibleNavGroup: FunctionComponent = ({ className, children, id, diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 2e9044a2790..0a036c14f1f 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -108,9 +108,9 @@ export type EuiColorPalettePickerProps = CommonProps & palettes: EuiColorPalettePickerPaletteProps[]; }; -export const EuiColorPalettePicker: FunctionComponent< - EuiColorPalettePickerProps -> = ({ +export const EuiColorPalettePicker: FunctionComponent> = ({ className, compressed = false, disabled, diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx index 79cc179f018..1580743044c 100644 --- a/src/components/color_picker/color_stops/color_stops.tsx +++ b/src/components/color_picker/color_stops/color_stops.tsx @@ -423,9 +423,7 @@ export const EuiColorStops: FunctionComponent = ({ const color = getChromaColor(colorStop.color, showAlpha); const rgba = color ? color.css() : 'currentColor'; if (index === 0) { - return `currentColor, currentColor ${positions[index]}%, ${rgba} ${ - positions[index] - }%`; + return `currentColor, currentColor ${positions[index]}%, ${rgba} ${positions[index]}%`; } return `${rgba} ${positions[index]}%`; }; diff --git a/src/components/color_picker/color_stops/utils.test.ts b/src/components/color_picker/color_stops/utils.test.ts index 3c0a5437f0c..677f40c630e 100644 --- a/src/components/color_picker/color_stops/utils.test.ts +++ b/src/components/color_picker/color_stops/utils.test.ts @@ -74,7 +74,10 @@ describe('addStop', () => { test('Should add stop below the max if max is taken', () => { expect( addStop( - [{ stop: 0, color: '#FF0000' }, { stop: 100, color: '#FF0000' }], + [ + { stop: 0, color: '#FF0000' }, + { stop: 100, color: '#FF0000' }, + ], '#FF0000', 100 ) diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index 11e1c6d4403..065e6397c20 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -172,9 +172,7 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { if (paletteHasStops) { const paletteColorStop = palette as ColorStop[]; - linearGradient = `linear-gradient(to right, ${ - paletteColorStop[0].color - } 0%,`; + linearGradient = `linear-gradient(to right, ${paletteColorStop[0].color} 0%,`; const decimal = 100 / paletteColorStop[paletteColorStop.length - 1].stop; diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 9ab682c9061..3d164112be5 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -567,9 +567,9 @@ export class EuiComboBox extends Component< this.closeList(); if (this.props.onBlur) { - this.props.onBlur((event as unknown) as React.FocusEvent< - HTMLDivElement - >); + this.props.onBlur( + (event as unknown) as React.FocusEvent + ); } this.setState({ hasFocus: false }); diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 1f6aaf0953d..297d23a35d0 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -55,7 +55,7 @@ import { CommonProps } from '../../common'; import { EuiBadge } from '../../badge/'; const positionToClassNameMap: { - [position in EuiComboBoxOptionsListPosition]: string + [position in EuiComboBoxOptionsListPosition]: string; } = { top: 'euiComboBoxOptionsList--top', bottom: 'euiComboBoxOptionsList--bottom', diff --git a/src/components/common.ts b/src/components/common.ts index dbeb93bcb73..dc48900d686 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -160,13 +160,13 @@ React.FunctionComponent> * returns { 'four': never, 'five': never } */ export type DisambiguateSet = { - [P in Exclude]?: never + [P in Exclude]?: never; }; /** * Allow either T or U, preventing any additional keys of the other type from being present */ -export type ExclusiveUnion = (T | U) extends object // if there are any shared keys between T and U +export type ExclusiveUnion = T | U extends object // if there are any shared keys between T and U ? (DisambiguateSet & U) | (DisambiguateSet & T) // otherwise the TS union is already unique : T | U; @@ -201,5 +201,5 @@ export type RecursivePartial = { ? Array> : T[P] extends object ? RecursivePartial - : T[P] + : T[P]; }; diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx index 38de06f2d70..294b9381a5c 100644 --- a/src/components/context_menu/context_menu_item.tsx +++ b/src/components/context_menu/context_menu_item.tsx @@ -70,7 +70,7 @@ type Props = CommonProps & EuiContextMenuItemProps; const layoutAlignToClassNames: { - [align in EuiContextMenuItemLayoutAlignment]: string | null + [align in EuiContextMenuItemLayoutAlignment]: string | null; } = { center: null, top: 'euiContextMenu__itemLayout--top', @@ -154,7 +154,7 @@ export class EuiContextMenuItem extends Component { target={target} rel={secureRel} ref={buttonRef as Ref} - {...rest as AnchorHTMLAttributes}> + {...(rest as AnchorHTMLAttributes)}> {buttonInner} ); diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx index 08834fcb319..4e7e7ddb819 100644 --- a/src/components/control_bar/control_bar.tsx +++ b/src/components/control_bar/control_bar.tsx @@ -349,7 +349,7 @@ export class EuiControlBar extends Component< onClick={onClick} href={href} color={color as EuiButtonIconProps['color']} - {...rest as IconButtonControlType} + {...(rest as IconButtonControlType)} size="s" /> ) : ( diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx index cfafdf7dba8..92631a62396 100644 --- a/src/components/datagrid/column_sorting_draggable.tsx +++ b/src/components/datagrid/column_sorting_draggable.tsx @@ -46,9 +46,7 @@ export interface EuiDataGridColumnSortingDraggableProps { display: string; } -export const EuiDataGridColumnSortingDraggable: FunctionComponent< - EuiDataGridColumnSortingDraggableProps -> = ({ +export const EuiDataGridColumnSortingDraggable: FunctionComponent = ({ id, display, direction, diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index fd14628490b..0c20f7ddbd8 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1182,9 +1182,9 @@ Array [ findTestSubject(component, 'tablePaginationPopoverButton').simulate( 'click' ); - const rowButtons: NodeListOf< - HTMLButtonElement - > = document.body.querySelectorAll('.euiContextMenuItem'); + const rowButtons: NodeListOf = document.body.querySelectorAll( + '.euiContextMenuItem' + ); expect( Array.prototype.map.call( rowButtons, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index aae3cca8702..f10e4a5f8e5 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -168,7 +168,7 @@ const headerToClassMap: { [header in EuiDataGridStyleHeader]: string } = { }; const rowHoverToClassMap: { - [rowHighlight in EuiDataGridStyleRowHover]: string + [rowHighlight in EuiDataGridStyleRowHover]: string; } = { highlight: 'euiDataGrid--rowHoverHighlight', none: '', @@ -181,7 +181,7 @@ const bordersToClassMap: { [border in EuiDataGridStyleBorders]: string } = { }; const cellPaddingsToClassMap: { - [cellPaddings in EuiDataGridStyleCellPaddings]: string + [cellPaddings in EuiDataGridStyleCellPaddings]: string; } = { s: 'euiDataGrid--paddingSmall', m: '', @@ -993,9 +993,7 @@ export const EuiDataGrid: FunctionComponent = props => { rowCount={ inMemory.level === 'enhancements' ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory - (pagination && - pagination.pageSize) || - rowCount + pagination?.pageSize || rowCount : // otherwise, all of the data is present and usable rowCount } diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 33912fa02ba..c3e80e1b4dc 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -60,9 +60,11 @@ export interface EuiDataGridBodyProps { sorting?: EuiDataGridSorting; } -const defaultComparator: NonNullable< - EuiDataGridSchemaDetector['comparator'] -> = (a, b, direction) => { +const defaultComparator: NonNullable = ( + a, + b, + direction +) => { if (a < b) return direction === 'asc' ? -1 : 1; if (a > b) return direction === 'asc' ? 1 : -1; return 0; @@ -89,9 +91,7 @@ const providedPopoverContents: EuiDataGridPopoverContents = { }, }; -export const EuiDataGridBody: FunctionComponent< - EuiDataGridBodyProps -> = props => { +export const EuiDataGridBody: FunctionComponent = props => { const { columnWidths, defaultColumnWidth, @@ -130,8 +130,7 @@ export const EuiDataGridBody: FunctionComponent< const rowMap: { [key: number]: number } = {}; if ( - inMemory && - inMemory.level === 'sorting' && + inMemory?.level === 'sorting' && sorting != null && sorting.columns.length > 0 ) { diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 404d99b9d3c..a764e6975c3 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -102,12 +102,10 @@ export type EuiDataGridCellValueProps = Omit< 'width' | 'isFocused' | 'interactiveCellId' | 'onCellFocus' | 'popoverContent' >; -const EuiDataGridCellContent: FunctionComponent< - EuiDataGridCellValueProps & { - setCellProps: EuiDataGridCellValueElementProps['setCellProps']; - isExpanded: boolean; - } -> = memo(props => { +const EuiDataGridCellContent: FunctionComponent = memo(props => { const { renderCellValue, ...rest } = props; // React is more permissible than the TS types indicate diff --git a/src/components/datagrid/data_grid_control_header_cell.tsx b/src/components/datagrid/data_grid_control_header_cell.tsx index 8653c273905..3c4288b3704 100644 --- a/src/components/datagrid/data_grid_control_header_cell.tsx +++ b/src/components/datagrid/data_grid_control_header_cell.tsx @@ -36,9 +36,7 @@ export interface EuiDataGridControlHeaderRowProps { className?: string; } -export const EuiDataGridControlHeaderCell: FunctionComponent< - EuiDataGridControlHeaderRowProps -> = props => { +export const EuiDataGridControlHeaderCell: FunctionComponent = props => { const { controlColumn, index, @@ -72,9 +70,7 @@ export const EuiDataGridControlHeaderCell: FunctionComponent< const tababbles = tabbable(headerRef.current!); if (tababbles.length > 1) { console.warn( - `EuiDataGridHeaderCell expects at most 1 tabbable element, ${ - tababbles.length - } found instead` + `EuiDataGridHeaderCell expects at most 1 tabbable element, ${tababbles.length} found instead` ); } for (let i = 0; i < tababbles.length; i++) { diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx index 22c446d0150..f9893946719 100644 --- a/src/components/datagrid/data_grid_header_cell.tsx +++ b/src/components/datagrid/data_grid_header_cell.tsx @@ -45,9 +45,7 @@ export interface EuiDataGridHeaderCellProps className?: string; } -export const EuiDataGridHeaderCell: FunctionComponent< - EuiDataGridHeaderCellProps -> = props => { +export const EuiDataGridHeaderCell: FunctionComponent = props => { const { column, index, @@ -127,9 +125,7 @@ export const EuiDataGridHeaderCell: FunctionComponent< const tababbles = tabbable(headerRef.current); if (tababbles.length > 1) { console.warn( - `EuiDataGridHeaderCell expects at most 1 tabbable element, ${ - tababbles.length - } found instead` + `EuiDataGridHeaderCell expects at most 1 tabbable element, ${tababbles.length} found instead` ); } for (let i = 0; i < tababbles.length; i++) { diff --git a/src/components/datagrid/data_grid_inmemory_renderer.tsx b/src/components/datagrid/data_grid_inmemory_renderer.tsx index a1b54ca059b..84ca9333d02 100644 --- a/src/components/datagrid/data_grid_inmemory_renderer.tsx +++ b/src/components/datagrid/data_grid_inmemory_renderer.tsx @@ -52,9 +52,13 @@ function getElementText(element: HTMLElement) { element.textContent || undefined; } -export const EuiDataGridInMemoryRenderer: FunctionComponent< - EuiDataGridInMemoryRendererProps -> = ({ inMemory, columns, rowCount, renderCellValue, onCellRender }) => { +export const EuiDataGridInMemoryRenderer: FunctionComponent = ({ + inMemory, + columns, + rowCount, + renderCellValue, + onCellRender, +}) => { const [documentFragment] = useState(() => document.createDocumentFragment()); const cells = useMemo(() => { diff --git a/src/components/datagrid/index.ts b/src/components/datagrid/index.ts index 4b52c28e3c4..6ff40c756e8 100644 --- a/src/components/datagrid/index.ts +++ b/src/components/datagrid/index.ts @@ -17,9 +17,7 @@ * under the License. */ -export { - EuiDataGridColumnSortingDraggableProps, -} from './column_sorting_draggable'; +export { EuiDataGridColumnSortingDraggableProps } from './column_sorting_draggable'; export { EuiDataGrid, EuiDataGridProps } from './data_grid'; export { EuiDataGridBodyProps } from './data_grid_body'; export { @@ -31,12 +29,8 @@ export { EuiDataGridColumnResizerProps } from './data_grid_column_resizer'; export { EuiDataGridDataRowProps } from './data_grid_data_row'; export { EuiDataGridHeaderRowProps } from './data_grid_header_row'; export { EuiDataGridHeaderCellProps } from './data_grid_header_cell'; -export { - EuiDataGridControlHeaderRowProps, -} from './data_grid_control_header_cell'; -export { - EuiDataGridInMemoryRendererProps, -} from './data_grid_inmemory_renderer'; +export { EuiDataGridControlHeaderRowProps } from './data_grid_control_header_cell'; +export { EuiDataGridInMemoryRendererProps } from './data_grid_inmemory_renderer'; export { EuiDataGridSchema, EuiDataGridSchemaDetector, diff --git a/src/components/date_picker/react-datepicker.d.ts b/src/components/date_picker/react-datepicker.d.ts index 63b006d6b1f..4d201de6975 100644 --- a/src/components/date_picker/react-datepicker.d.ts +++ b/src/components/date_picker/react-datepicker.d.ts @@ -211,7 +211,5 @@ export interface ReactDatePickerProps { withPortal?: boolean; yearDropdownItemNumber?: number; } -declare const ReactDatePicker: React.ClassicComponentClass< - ReactDatePickerProps ->; +declare const ReactDatePicker: React.ClassicComponentClass; export default ReactDatePicker; diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx index 12061f79046..d42a1ce391e 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx @@ -52,9 +52,7 @@ export interface EuiDatePopoverButtonProps { utcOffset?: number; } -export const EuiDatePopoverButton: FunctionComponent< - EuiDatePopoverButtonProps -> = props => { +export const EuiDatePopoverButton: FunctionComponent = props => { const { position, isDisabled, diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx index 4845e65b34d..d6743e9308a 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx @@ -45,9 +45,7 @@ export interface EuiDatePopoverContentProps { utcOffset?: number; } -export const EuiDatePopoverContent: FunctionComponent< - EuiDatePopoverContentProps -> = ({ +export const EuiDatePopoverContent: FunctionComponent = ({ value, roundUp = false, onChange, diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx index 2c5cefe577d..7f857e24b96 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx @@ -33,9 +33,10 @@ export interface EuiCommonlyUsedTimeRangesProps { commonlyUsedRanges: DurationRange[]; } -export const EuiCommonlyUsedTimeRanges: FunctionComponent< - EuiCommonlyUsedTimeRangesProps -> = ({ applyTime, commonlyUsedRanges }) => { +export const EuiCommonlyUsedTimeRanges: FunctionComponent = ({ + applyTime, + commonlyUsedRanges, +}) => { const legendId = generateId(); const links = commonlyUsedRanges.map(({ start, end, label }) => { const applyCommonlyUsed = () => { diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx index 0a3048b72f3..4564b8346bf 100644 --- a/src/components/date_picker/super_date_picker/super_update_button.tsx +++ b/src/components/date_picker/super_date_picker/super_update_button.tsx @@ -72,7 +72,7 @@ export class EuiSuperUpdateButton extends Component { this.showTooltip(); this.tooltipTimeout = (setTimeout(() => { this.hideTooltip(); - }, 2000) as unknown) as (number | undefined); + }, 2000) as unknown) as number | undefined; } } diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 3b2da3d6b1e..4223bce809c 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -84,9 +84,9 @@ const textStylesToClassNameMap = { export const TEXT_STYLES = keysOf(textStylesToClassNameMap); -export const EuiDescriptionList: FunctionComponent< - CommonProps & HTMLAttributes & EuiDescriptionListProps -> = ({ +export const EuiDescriptionList: FunctionComponent & + EuiDescriptionListProps> = ({ align = 'left', children, className, diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx index 1638d6662ce..a85a1b8a0b5 100644 --- a/src/components/description_list/description_list_description.tsx +++ b/src/components/description_list/description_list_description.tsx @@ -21,9 +21,8 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -export const EuiDescriptionListDescription: FunctionComponent< - CommonProps & HTMLAttributes -> = ({ children, className, ...rest }) => { +export const EuiDescriptionListDescription: FunctionComponent> = ({ children, className, ...rest }) => { const classes = classNames('euiDescriptionList__description', className); return ( diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx index 21aa935610b..12b2af3238a 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -21,9 +21,8 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -export const EuiDescriptionListTitle: FunctionComponent< - CommonProps & HTMLAttributes -> = ({ children, className, ...rest }) => { +export const EuiDescriptionListTitle: FunctionComponent> = ({ children, className, ...rest }) => { const classes = classNames('euiDescriptionList__title', className); return ( diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 4150ac3144e..774845b956a 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -118,12 +118,11 @@ export const EuiDraggable: FunctionComponent = ({ ), })}
- {cloneItems && - (snapshot.isDragging && ( -
- {DraggableElement} -
- ))} + {cloneItems && snapshot.isDragging && ( +
+ {DraggableElement} +
+ )} ); }} diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx index b0d15d056bc..69869177ed1 100644 --- a/src/components/expression/expression.tsx +++ b/src/components/expression/expression.tsx @@ -105,9 +105,10 @@ type Buttonlike = EuiExpressionProps & type Spanlike = EuiExpressionProps & HTMLAttributes; -export const EuiExpression: React.FunctionComponent< - ExclusiveUnion -> = ({ +export const EuiExpression: React.FunctionComponent> = ({ className, description, descriptionProps, diff --git a/src/components/facet/facet_button.tsx b/src/components/facet/facet_button.tsx index 047b6e5e4b9..104a9399029 100644 --- a/src/components/facet/facet_button.tsx +++ b/src/components/facet/facet_button.tsx @@ -57,9 +57,9 @@ export interface EuiFacetButtonProps { quantity?: number; } -export const EuiFacetButton: FunctionComponent< - CommonProps & HTMLAttributes & EuiFacetButtonProps -> = ({ +export const EuiFacetButton: FunctionComponent & + EuiFacetButtonProps> = ({ children, className, icon, diff --git a/src/components/facet/facet_group.tsx b/src/components/facet/facet_group.tsx index 3a5f453e0de..cc9764d647e 100644 --- a/src/components/facet/facet_group.tsx +++ b/src/components/facet/facet_group.tsx @@ -35,7 +35,7 @@ export const LAYOUTS = keysOf(layoutToClassNameMap); type FacetGroupGutterSize = 'none' | 's' | 'm' | 'l'; const gutterSizeToClassNameMap: { - [gutterSize in FacetGroupGutterSize]: string + [gutterSize in FacetGroupGutterSize]: string; } = { none: 'euiFacetGroup--gutterNone', s: 'euiFacetGroup--gutterSmall', diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx index 2ace3242967..b8e6202ff46 100644 --- a/src/components/flex/flex_grid.tsx +++ b/src/components/flex/flex_grid.tsx @@ -79,13 +79,13 @@ const columnsToClassNameMap = { 4: 'euiFlexGrid--fourths', }; -export const COLUMNS = Object.keys(columnsToClassNameMap).map( - (columns: string) => parseInt(columns, 10) -) as FlexGridColumns[]; +export const COLUMNS = Object.keys( + columnsToClassNameMap +).map((columns: string) => parseInt(columns, 10)) as FlexGridColumns[]; -export const EuiFlexGrid: FunctionComponent< - CommonProps & HTMLAttributes & EuiFlexGridProps -> = ({ +export const EuiFlexGrid: FunctionComponent & + EuiFlexGridProps> = ({ children, className, gutterSize = 'l', diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx index 39d845de873..f009ae2b65a 100644 --- a/src/components/flex/flex_group.tsx +++ b/src/components/flex/flex_group.tsx @@ -129,14 +129,14 @@ const EuiFlexGroup = React.forwardRef< } - {...rest as HTMLAttributes}> + {...(rest as HTMLAttributes)}> {children} ) : (
} - {...rest as HTMLAttributes}> + {...(rest as HTMLAttributes)}> {children}
); diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx index 77a03d13584..3f6294a87ee 100644 --- a/src/components/flex/flex_item.tsx +++ b/src/components/flex/flex_item.tsx @@ -43,11 +43,9 @@ export interface EuiFlexItemProps { export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; -export const EuiFlexItem: FunctionComponent< - CommonProps & - HTMLAttributes & - EuiFlexItemProps -> = ({ +export const EuiFlexItem: FunctionComponent & + EuiFlexItemProps> = ({ children, className, grow = true, diff --git a/src/components/form/checkbox/checkbox_group.test.tsx b/src/components/form/checkbox/checkbox_group.test.tsx index 75b7226ec77..fbd1c1fc2b0 100644 --- a/src/components/form/checkbox/checkbox_group.test.tsx +++ b/src/components/form/checkbox/checkbox_group.test.tsx @@ -48,7 +48,10 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => { const component = render( ); @@ -59,7 +62,10 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => { const component = render( { const component = render( = ({ + {...(rest as EuiFormFieldsetProps)}> {checkboxes} ); } return ( -
}> +
)}> {checkboxes}
); diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx index 6d597d7881b..7b71a095bed 100644 --- a/src/components/form/described_form_group/described_form_group.tsx +++ b/src/components/form/described_form_group/described_form_group.tsx @@ -70,9 +70,7 @@ export type EuiDescribedFormGroupProps = CommonProps & fieldFlexItemProps?: PropsOf; }; -export const EuiDescribedFormGroup: React.FunctionComponent< - EuiDescribedFormGroupProps -> = ({ +export const EuiDescribedFormGroup: React.FunctionComponent = ({ children, className, gutterSize = 'l', diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index afa79dadb39..58c194cbd7d 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -93,7 +93,7 @@ export const EuiForm: FunctionComponent = ({ const Element = component; return ( - }> + )}> {optionalErrorAlert} {children} diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx index af176b5c53e..3f74c5946b9 100644 --- a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx +++ b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx @@ -27,9 +27,11 @@ import { EuiI18n } from '../../i18n'; export type EuiFormControlLayoutClearButtonProps = CommonProps & ButtonHTMLAttributes; -export const EuiFormControlLayoutClearButton: FunctionComponent< - EuiFormControlLayoutClearButtonProps -> = ({ className, onClick, ...rest }) => { +export const EuiFormControlLayoutClearButton: FunctionComponent = ({ + className, + onClick, + ...rest +}) => { const classes = classNames('euiFormControlLayoutClearButton', className); return ( diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx index 0e6c4af1166..e3b6f5cd990 100644 --- a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx +++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx @@ -38,9 +38,13 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps & | ((el: HTMLButtonElement | HTMLSpanElement | null) => void); }; -export const EuiFormControlLayoutCustomIcon: FunctionComponent< - EuiFormControlLayoutCustomIconProps -> = ({ className, onClick, type, iconRef, ...rest }) => { +export const EuiFormControlLayoutCustomIcon: FunctionComponent = ({ + className, + onClick, + type, + iconRef, + ...rest +}) => { const classes = classNames('euiFormControlLayoutCustomIcon', className, { 'euiFormControlLayoutCustomIcon--clickable': onClick, }); diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx index cf96bc87613..21e8baa4564 100644 --- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx +++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx @@ -50,9 +50,13 @@ export type EuiFormControlLayoutDelimitedProps = Partial< className?: string; }; -export const EuiFormControlLayoutDelimited: FunctionComponent< - EuiFormControlLayoutDelimitedProps -> = ({ startControl, endControl, delimiter = '→', className, ...rest }) => { +export const EuiFormControlLayoutDelimited: FunctionComponent = ({ + startControl, + endControl, + delimiter = '→', + className, + ...rest +}) => { const classes = classNames('euiFormControlLayoutDelimited', className); return ( diff --git a/src/components/form/form_label/form_label.tsx b/src/components/form/form_label/form_label.tsx index 8c9087ce7c0..4ca7f9a8049 100644 --- a/src/components/form/form_label/form_label.tsx +++ b/src/components/form/form_label/form_label.tsx @@ -65,7 +65,7 @@ export const EuiFormLabel: FunctionComponent = ({ return ( }> + {...(rest as HTMLAttributes)}> {children} ); @@ -73,7 +73,7 @@ export const EuiFormLabel: FunctionComponent = ({ return ( ); diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx index 25c9ca03ba3..19ddfda8f6b 100644 --- a/src/components/form/form_row/form_row.tsx +++ b/src/components/form/form_row/form_row.tsx @@ -327,11 +327,11 @@ export class EuiFormRow extends Component { return labelType === 'legend' ? (
}> + {...(rest as HTMLAttributes)}> {contents}
) : ( -
}> +
)}> {contents}
); diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index e63654a4b8c..507c70a865b 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -103,14 +103,14 @@ export const EuiRadioGroup: FunctionComponent = ({ + {...(rest as EuiFormFieldsetProps)}> {radios} ); } return ( -
}> +
)}> {radios}
); diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx index 45aef2b69eb..346e170be09 100644 --- a/src/components/form/range/dual_range.test.tsx +++ b/src/components/form/range/dual_range.test.tsx @@ -98,7 +98,10 @@ describe('EuiDualRange', () => { {...props} value={[20, 100]} showTicks - ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]} + ticks={[ + { label: '20kb', value: 20 }, + { label: '100kb', value: 100 }, + ]} /> ); diff --git a/src/components/form/range/range.test.tsx b/src/components/form/range/range.test.tsx index 41d617d3e45..e526f9bb546 100644 --- a/src/components/form/range/range.test.tsx +++ b/src/components/form/range/range.test.tsx @@ -84,7 +84,10 @@ describe('EuiRange', () => { ); diff --git a/src/components/form/range/range_thumb.tsx b/src/components/form/range/range_thumb.tsx index 3ea95d375de..76afdfa7371 100644 --- a/src/components/form/range/range_thumb.tsx +++ b/src/components/form/range/range_thumb.tsx @@ -74,9 +74,9 @@ export const EuiRangeThumb: FunctionComponent = ({ onMouseDown={onMouseDown} disabled={disabled} {...commonAttrs} - {...rest as HTMLAttributes} + {...(rest as HTMLAttributes)} /> ) : ( -
} /> +
)} /> ); }; diff --git a/src/components/form/range/range_ticks.tsx b/src/components/form/range/range_ticks.tsx index 0e744fed466..eb963f3e5cc 100644 --- a/src/components/form/range/range_ticks.tsx +++ b/src/components/form/range/range_ticks.tsx @@ -47,9 +47,10 @@ export type EuiRangeTicksProps = Omit< onChange?: MouseEventHandler; }; -const EuiTickValue: FunctionComponent< - EuiRangeTicksProps & { tickValue: any; percentageWidth: number } -> = ({ +const EuiTickValue: FunctionComponent = ({ disabled, ticks, min, diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx index d9c7934bda0..59bc8141e3e 100644 --- a/src/components/form/range/range_track.tsx +++ b/src/components/form/range/range_track.tsx @@ -47,16 +47,12 @@ export class EuiRangeTrack extends Component { validateValueIsInStep = (value: number) => { if (value < this.props.min) { throw new Error( - `The value of ${value} is lower than the min value of ${ - this.props.min - }.` + `The value of ${value} is lower than the min value of ${this.props.min}.` ); } if (value > this.props.max) { throw new Error( - `The value of ${value} is higher than the max value of ${ - this.props.max - }.` + `The value of ${value} is higher than the max value of ${this.props.max}.` ); } // Error out if the value doesn't line up with the sequence of steps @@ -67,9 +63,7 @@ export class EuiRangeTrack extends Component { ) ) { throw new Error( - `The value of ${value} is not included in the possible sequence provided by the step of ${ - this.props.step - }.` + `The value of ${value} is not included in the possible sequence provided by the step of ${this.props.step}.` ); } // Return the value if nothing fails @@ -116,9 +110,7 @@ export class EuiRangeTrack extends Component { // Error out if there are too many ticks to render if (ticks.length > 20) { throw new Error( - `The number of ticks to render is too high (${ - ticks.length - }), reduce the interval.` + `The number of ticks to render is too high (${ticks.length}), reduce the interval.` ); } diff --git a/src/components/header/header_links/header_link.tsx b/src/components/header/header_links/header_link.tsx index 882d27d0ec3..72a0effb5d3 100644 --- a/src/components/header/header_links/header_link.tsx +++ b/src/components/header/header_links/header_link.tsx @@ -47,5 +47,5 @@ export const EuiHeaderLink: FunctionComponent = ({ color: isActive ? 'primary' : 'text', }; - return ; + return ; }; diff --git a/src/components/header/header_section/header_section_item.tsx b/src/components/header/header_section/header_section_item.tsx index ee4cb3ed62b..63195b57e35 100644 --- a/src/components/header/header_section/header_section_item.tsx +++ b/src/components/header/header_section/header_section_item.tsx @@ -39,9 +39,12 @@ export type EuiHeaderSectionItemProps = CommonProps & { children?: ReactNode; }; -export const EuiHeaderSectionItem: FunctionComponent< - EuiHeaderSectionItemProps -> = ({ border = 'left', children, className, ...rest }) => { +export const EuiHeaderSectionItem: FunctionComponent = ({ + border = 'left', + children, + className, + ...rest +}) => { const classes = classNames( 'euiHeaderSectionItem', borderToClassNameMap[border], diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx index 2ca681e17b3..c9bf997db9b 100644 --- a/src/components/horizontal_rule/horizontal_rule.tsx +++ b/src/components/horizontal_rule/horizontal_rule.tsx @@ -53,9 +53,14 @@ const marginToClassNameMap = { export const MARGINS = Object.keys(marginToClassNameMap); -export const EuiHorizontalRule: FunctionComponent< - CommonProps & HTMLAttributes & EuiHorizontalRuleProps -> = ({ className, size = 'full', margin = 'l', ...rest }) => { +export const EuiHorizontalRule: FunctionComponent & + EuiHorizontalRuleProps> = ({ + className, + size = 'full', + margin = 'l', + ...rest +}) => { const classes = classNames( 'euiHorizontalRule', sizeToClassNameMap[size], diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx index 6f705cc86d7..1527a4c53cc 100644 --- a/src/components/i18n/i18n.tsx +++ b/src/components/i18n/i18n.tsx @@ -150,7 +150,9 @@ const EuiI18n = < // A single default could be a string, react child, or render function type DefaultRenderType> = K extends ReactChild ? K - : (K extends () => infer RetValue ? RetValue : never); + : K extends () => infer RetValue + ? RetValue + : never; // An array with multiple defaults can only be an array of strings or elements type DefaultsRenderType< diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 1e1391a263d..f43cef72e71 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -706,7 +706,7 @@ export class EuiIcon extends PureComponent { src={icon} className={classes} tabIndex={tabIndex} - {...rest as HTMLAttributes} + {...(rest as HTMLAttributes)} /> ); } else { diff --git a/src/components/inner_text/inner_text.tsx b/src/components/inner_text/inner_text.tsx index 33bd4a02b07..982c180805a 100644 --- a/src/components/inner_text/inner_text.tsx +++ b/src/components/inner_text/inner_text.tsx @@ -29,7 +29,7 @@ type RefT = HTMLElement | Element | undefined | null; export function useInnerText( innerTextFallback?: string -): [((node: RefT) => void), string | undefined] { +): [(node: RefT) => void, string | undefined] { const [ref, setRef] = useState(null); const [innerText, setInnerText] = useState(innerTextFallback); diff --git a/src/components/key_pad_menu/key_pad_menu_item.tsx b/src/components/key_pad_menu/key_pad_menu_item.tsx index fb57e697042..403a055e88e 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.tsx +++ b/src/components/key_pad_menu/key_pad_menu_item.tsx @@ -133,8 +133,8 @@ export const EuiKeyPadMenuItem: FunctionComponent = ({ return ( } - {...rest as HTMLAttributes}> + {...(relObj as HTMLAttributes)} + {...(rest as HTMLAttributes)}> {renderContent( children, label, diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index e3a4276d09e..4298f0fe8fe 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -131,7 +131,7 @@ const EuiLink = React.forwardRef< return ( ); @@ -150,7 +150,7 @@ const EuiLink = React.forwardRef< return ( } - {...anchorProps as EuiLinkAnchorProps}> + {...(anchorProps as EuiLinkAnchorProps)}> {children} {externalLinkIcon} diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 6a838ac8839..3176a7ad064 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -241,7 +241,7 @@ export const EuiListGroupItem: FunctionComponent = ({ target={target} rel={secureRel} onClick={onClick as AnchorHTMLAttributes['onClick']} - {...rest as AnchorHTMLAttributes}> + {...(rest as AnchorHTMLAttributes)}> {iconNode} {labelContent} @@ -254,7 +254,7 @@ export const EuiListGroupItem: FunctionComponent = ({ disabled={isDisabled} onClick={onClick} ref={buttonRef} - {...rest as ButtonHTMLAttributes}> + {...(rest as ButtonHTMLAttributes)}> {iconNode} {labelContent} diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx index 5ea51da53bd..18e3a78bae8 100644 --- a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx +++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx @@ -80,9 +80,14 @@ export interface EuiPinnableListGroupProps unpinTitle?: (item: EuiPinnableListGroupItemProps) => string; } -export const EuiPinnableListGroup: FunctionComponent< - EuiPinnableListGroupProps -> = ({ className, listItems, pinTitle, unpinTitle, onPinClick, ...rest }) => { +export const EuiPinnableListGroup: FunctionComponent = ({ + className, + listItems, + pinTitle, + unpinTitle, + onPinClick, + ...rest +}) => { const classes = classNames('euiPinnableListGroup', className); // Alter listItems object with extra props diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx index 26794657c18..ab564ea56c0 100644 --- a/src/components/loading/loading_chart.tsx +++ b/src/components/loading/loading_chart.tsx @@ -31,16 +31,14 @@ export const SIZES = keysOf(sizeToClassNameMap); export type EuiLoadingChartSize = keyof typeof sizeToClassNameMap; -export const EuiLoadingChart: FunctionComponent< - CommonProps & - HTMLAttributes & { - /** - * Makes the loader animation black and white - */ - mono?: boolean; - size?: EuiLoadingChartSize; - } -> = ({ size = 'm', mono = false, className, ...rest }) => { +export const EuiLoadingChart: FunctionComponent & { + /** + * Makes the loader animation black and white + */ + mono?: boolean; + size?: EuiLoadingChartSize; + }> = ({ size = 'm', mono = false, className, ...rest }) => { const classes = classNames( 'euiLoadingChart', { 'euiLoadingChart--mono': mono }, diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx index dfce122fe90..45657573a20 100644 --- a/src/components/loading/loading_content.tsx +++ b/src/components/loading/loading_content.tsx @@ -23,12 +23,10 @@ import { CommonProps } from '../common'; export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; -export const EuiLoadingContent: FunctionComponent< - CommonProps & - HTMLAttributes & { - lines?: LineRange; - } -> = ({ lines = 3, className, ...rest }) => { +export const EuiLoadingContent: FunctionComponent & { + lines?: LineRange; + }> = ({ lines = 3, className, ...rest }) => { const classes = classNames('euiLoadingContent', className); const lineElements = []; diff --git a/src/components/loading/loading_elastic.tsx b/src/components/loading/loading_elastic.tsx index 78b8632e8b0..9a817112faa 100644 --- a/src/components/loading/loading_elastic.tsx +++ b/src/components/loading/loading_elastic.tsx @@ -35,9 +35,9 @@ export interface EuiLoadingElasticProps { size?: keyof typeof sizeToClassNameMap; } -export const EuiLoadingElastic: FunctionComponent< - CommonProps & HTMLAttributes & EuiLoadingElasticProps -> = ({ size = 'm', className, ...rest }) => { +export const EuiLoadingElastic: FunctionComponent & + EuiLoadingElasticProps> = ({ size = 'm', className, ...rest }) => { const classes = classNames( 'euiLoadingElastic', sizeToClassNameMap[size], diff --git a/src/components/loading/loading_kibana.tsx b/src/components/loading/loading_kibana.tsx index d3f9d37cb26..ca0b36dc370 100644 --- a/src/components/loading/loading_kibana.tsx +++ b/src/components/loading/loading_kibana.tsx @@ -34,9 +34,9 @@ export interface EuiLoadingKibanaProps { size?: keyof typeof sizeToClassNameMap; } -export const EuiLoadingKibana: FunctionComponent< - CommonProps & HTMLAttributes & EuiLoadingKibanaProps -> = ({ size = 'm', className, ...rest }) => { +export const EuiLoadingKibana: FunctionComponent & + EuiLoadingKibanaProps> = ({ size = 'm', className, ...rest }) => { const classes = classNames( 'euiLoadingKibana', sizeToClassNameMap[size], diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx index 2701fd4ba4f..a4c82fad6ff 100644 --- a/src/components/loading/loading_spinner.tsx +++ b/src/components/loading/loading_spinner.tsx @@ -32,12 +32,10 @@ export const SIZES = keysOf(sizeToClassNameMap); export type EuiLoadingSpinnerSize = keyof typeof sizeToClassNameMap; -export const EuiLoadingSpinner: FunctionComponent< - CommonProps & - HTMLAttributes & { - size?: EuiLoadingSpinnerSize; - } -> = ({ size = 'm', className, ...rest }) => { +export const EuiLoadingSpinner: FunctionComponent & { + size?: EuiLoadingSpinnerSize; + }> = ({ size = 'm', className, ...rest }) => { const classes = classNames( 'euiLoadingSpinner', sizeToClassNameMap[size], diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx index 18c1aa59824..c707a6639c4 100644 --- a/src/components/page/page_content/page_content.tsx +++ b/src/components/page/page_content/page_content.tsx @@ -27,13 +27,13 @@ export type EuiPageContentVerticalPositions = 'center'; export type EuiPageContentHorizontalPositions = 'center'; const verticalPositionToClassNameMap: { - [position in EuiPageContentVerticalPositions]: string | null + [position in EuiPageContentVerticalPositions]: string | null; } = { center: 'euiPageContent--verticalCenter', }; const horizontalPositionToClassNameMap: { - [position in EuiPageContentHorizontalPositions]: string | null + [position in EuiPageContentHorizontalPositions]: string | null; } = { center: 'euiPageContent--horizontalCenter', }; diff --git a/src/components/page/page_content/page_content_header.tsx b/src/components/page/page_content/page_content_header.tsx index 6c3521f79d2..8a7aba7744c 100644 --- a/src/components/page/page_content/page_content_header.tsx +++ b/src/components/page/page_content/page_content_header.tsx @@ -31,9 +31,12 @@ export interface EuiPageContentHeaderProps responsive?: boolean; } -export const EuiPageContentHeader: FunctionComponent< - EuiPageContentHeaderProps -> = ({ children, className, responsive = true, ...rest }) => { +export const EuiPageContentHeader: FunctionComponent = ({ + children, + className, + responsive = true, + ...rest +}) => { const classes = classNames( 'euiPageContentHeader', { diff --git a/src/components/page/page_content/page_content_header_section.tsx b/src/components/page/page_content/page_content_header_section.tsx index b8bb9420c37..93d45058d53 100644 --- a/src/components/page/page_content/page_content_header_section.tsx +++ b/src/components/page/page_content/page_content_header_section.tsx @@ -25,9 +25,11 @@ export interface EuiPageContentHeaderSectionProps extends CommonProps, HTMLAttributes {} -export const EuiPageContentHeaderSection: FunctionComponent< - EuiPageContentHeaderSectionProps -> = ({ children, className, ...rest }) => { +export const EuiPageContentHeaderSection: FunctionComponent = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiPageContentHeaderSection', className); return ( diff --git a/src/components/page/page_header/page_header_section.tsx b/src/components/page/page_header/page_header_section.tsx index 58f75f72ec5..51f313968a3 100644 --- a/src/components/page/page_header/page_header_section.tsx +++ b/src/components/page/page_header/page_header_section.tsx @@ -25,9 +25,11 @@ export interface EuiPageHeaderSectionProps extends CommonProps, HTMLAttributes {} -export const EuiPageHeaderSection: FunctionComponent< - EuiPageHeaderSectionProps -> = ({ children, className, ...rest }) => { +export const EuiPageHeaderSection: FunctionComponent = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiPageHeaderSection', className); return ( diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 01e9d970969..8d7074f0c86 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -93,7 +93,7 @@ export const EuiPagination: FunctionComponent = ({ totalPages={pageCount} onClick={(e: MouseEvent) => safeClick(e, pageIndex)} pageIndex={pageIndex} - {...hasControl && { 'aria-controls': ariaControls }} + {...(hasControl && { 'aria-controls': ariaControls })} hideOnMobile /> ); diff --git a/src/components/pagination/pagination_button.tsx b/src/components/pagination/pagination_button.tsx index 5dcab5b5466..a25ae8c7a26 100644 --- a/src/components/pagination/pagination_button.tsx +++ b/src/components/pagination/pagination_button.tsx @@ -89,7 +89,7 @@ export const EuiPaginationButton: FunctionComponent = ({ {(shortPageString: string) => ( + {...(props as EuiButtonEmptyProps)}> {pageNumber} )} diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index e20ba2a8a6d..00830300d78 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -125,7 +125,7 @@ export const EuiPanel: FunctionComponent = ({ ref={panelRef as Ref} className={classes} onClick={onClick} - {...rest as ButtonHTMLAttributes}> + {...(rest as ButtonHTMLAttributes)}> {optionalBetaBadge} {children} @@ -136,7 +136,7 @@ export const EuiPanel: FunctionComponent = ({
} className={classes} - {...rest as HTMLAttributes}> + {...(rest as HTMLAttributes)}> {optionalBetaBadge} {children}
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index e96f718ddbf..5b88a7e03cf 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -162,7 +162,7 @@ export interface EuiPopoverProps { type AnchorPosition = 'up' | 'right' | 'down' | 'left'; const anchorPositionToPopoverPositionMap: { - [position in AnchorPosition]: EuiPopoverPosition + [position in AnchorPosition]: EuiPopoverPosition; } = { up: 'top', right: 'right', diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx index 60709aef019..5ad5921eb85 100644 --- a/src/components/progress/progress.tsx +++ b/src/components/progress/progress.tsx @@ -92,9 +92,10 @@ type Determinate = EuiProgressProps & labelProps?: HTMLAttributes; }; -export const EuiProgress: FunctionComponent< - ExclusiveUnion -> = ({ +export const EuiProgress: FunctionComponent> = ({ className, color = 'secondary', size = 'm', @@ -172,13 +173,13 @@ export const EuiProgress: FunctionComponent< max={max} value={value} aria-hidden={label && valueText ? true : false} - {...rest as ProgressHTMLAttributes} + {...(rest as ProgressHTMLAttributes)} /> ); } else { return ( -
} /> +
)} /> ); } }; diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts index 27caa43407d..dc7220b792d 100644 --- a/src/components/resizable_container/helpers.ts +++ b/src/components/resizable_container/helpers.ts @@ -33,7 +33,7 @@ interface Params { setState: React.Dispatch>; containerRef: React.RefObject; registryRef: React.MutableRefObject; - onPanelWidthChange?: ({ }: { [key: string]: number }) => any; + onPanelWidthChange?: ({}: { [key: string]: number }) => any; } type onMouseMove = (event: MouseEvent | TouchEvent) => void; diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx index 2721ac2b17a..8bded8a6220 100644 --- a/src/components/resizable_container/resizable_container.tsx +++ b/src/components/resizable_container/resizable_container.tsx @@ -68,7 +68,7 @@ export interface EuiResizableContainerProps * Pure function which accepts an object where keys are IDs of panels, which sizes were changed, * and values are actual sizes in percents */ - onPanelWidthChange?: ({ }: { [key: string]: number }) => any; + onPanelWidthChange?: ({}: { [key: string]: number }) => any; style?: CSSProperties; } @@ -88,9 +88,7 @@ const initialState: EuiResizableContainerState = { resizersSize: 0, }; -export const EuiResizableContainer: FunctionComponent< - EuiResizableContainerProps -> = ({ +export const EuiResizableContainer: FunctionComponent = ({ direction = 'horizontal', children, className, diff --git a/src/components/search_bar/query/ast.ts b/src/components/search_bar/query/ast.ts index 668db0c238c..12fd16b39f1 100644 --- a/src/components/search_bar/query/ast.ts +++ b/src/components/search_bar/query/ast.ts @@ -413,26 +413,23 @@ export class _AST { if (!existingClause) { return new _AST([...this._clauses]); } - const clauses = this._clauses.reduce( - (clauses, clause) => { - if (clause !== existingClause) { - clauses.push(clause); - return clauses; - } - const filteredValue = (clause.value as Value[]).filter( - val => !valuesEqual(val, value) - ); - if (filteredValue.length === 0) { - return clauses; - } - clauses.push({ - ...clause, - value: filteredValue, - }); + const clauses = this._clauses.reduce((clauses, clause) => { + if (clause !== existingClause) { + clauses.push(clause); return clauses; - }, - [] as Clause[] - ); + } + const filteredValue = (clause.value as Value[]).filter( + val => !valuesEqual(val, value) + ); + if (filteredValue.length === 0) { + return clauses; + } + clauses.push({ + ...clause, + value: filteredValue, + }); + return clauses; + }, [] as Clause[]); return new _AST(clauses); } @@ -537,47 +534,44 @@ export class _AST { */ addClause(newClause: Clause) { let added = false; - const newClauses = this._clauses.reduce( - (clauses, clause) => { - if (newClause.type !== clause.type) { - clauses.push(clause); - return clauses; - } - - switch (newClause.type) { - case Term.TYPE: - if (newClause.value !== (clause as TermClause).value) { - clauses.push(clause); - return clauses; - } - break; - - case Field.TYPE: - if ( - newClause.field !== (clause as FieldClause).field || - newClause.value !== (clause as FieldClause).value - ) { - clauses.push(clause); - return clauses; - } - break; - - case Is.TYPE: - if (newClause.flag !== (clause as IsClause).flag) { - clauses.push(clause); - return clauses; - } - break; - - default: - throw new Error(`unknown clause type [${newClause.type}]`); - } - added = true; - clauses.push(newClause); + const newClauses = this._clauses.reduce((clauses, clause) => { + if (newClause.type !== clause.type) { + clauses.push(clause); return clauses; - }, - [] as Clause[] - ); + } + + switch (newClause.type) { + case Term.TYPE: + if (newClause.value !== (clause as TermClause).value) { + clauses.push(clause); + return clauses; + } + break; + + case Field.TYPE: + if ( + newClause.field !== (clause as FieldClause).field || + newClause.value !== (clause as FieldClause).value + ) { + clauses.push(clause); + return clauses; + } + break; + + case Is.TYPE: + if (newClause.flag !== (clause as IsClause).flag) { + clauses.push(clause); + return clauses; + } + break; + + default: + throw new Error(`unknown clause type [${newClause.type}]`); + } + added = true; + clauses.push(newClause); + return clauses; + }, [] as Clause[]); if (!added) { newClauses.push(newClause); diff --git a/src/components/search_bar/query/ast_to_es_query_dsl.ts b/src/components/search_bar/query/ast_to_es_query_dsl.ts index 6c718a1f7b3..0257a591f47 100644 --- a/src/components/search_bar/query/ast_to_es_query_dsl.ts +++ b/src/components/search_bar/query/ast_to_es_query_dsl.ts @@ -364,37 +364,34 @@ export const astToEsQueryDsl = (ast: _AST, options = {}): QueryContainer => { // there is at least one GroupClause, wrap the above clauses in another layer and append the ORs const must = groupClauses.reduce( (must, groupClause) => { - const clauses = groupClause.value.reduce( - (clauses, clause) => { - if (AST.Term.isInstance(clause)) { - clauses.push( - clausesToEsQueryDsl({ - terms: collectTerms([clause]), - fields: EMPTY_FIELDS, - is: [], - }) - ); - } else if (AST.Field.isInstance(clause)) { - clauses.push( - clausesToEsQueryDsl({ - terms: EMPTY_TERMS, - fields: collectFields([clause]), - is: [], - }) - ); - } else if (AST.Is.isInstance(clause)) { - clauses.push( - clausesToEsQueryDsl({ - terms: EMPTY_TERMS, - fields: EMPTY_FIELDS, - is: [clause], - }) - ); - } - return clauses; - }, - [] as BoolQuery[] - ); + const clauses = groupClause.value.reduce((clauses, clause) => { + if (AST.Term.isInstance(clause)) { + clauses.push( + clausesToEsQueryDsl({ + terms: collectTerms([clause]), + fields: EMPTY_FIELDS, + is: [], + }) + ); + } else if (AST.Field.isInstance(clause)) { + clauses.push( + clausesToEsQueryDsl({ + terms: EMPTY_TERMS, + fields: collectFields([clause]), + is: [], + }) + ); + } else if (AST.Is.isInstance(clause)) { + clauses.push( + clausesToEsQueryDsl({ + terms: EMPTY_TERMS, + fields: EMPTY_FIELDS, + is: [clause], + }) + ); + } + return clauses; + }, [] as BoolQuery[]); must.push({ bool: { diff --git a/src/components/search_bar/query/default_syntax.ts b/src/components/search_bar/query/default_syntax.ts index 68792bd7028..c7bfd79ce1d 100644 --- a/src/components/search_bar/query/default_syntax.ts +++ b/src/components/search_bar/query/default_syntax.ts @@ -343,9 +343,7 @@ const validateFieldValue = ( schemaField.validate(value); } catch (e) { error( - `Invalid value \`${expression}\` set for field \`${field}\` - ${ - e.message - }`, + `Invalid value \`${expression}\` set for field \`${field}\` - ${e.message}`, location ); } diff --git a/src/components/search_bar/query/execute_ast.test.ts b/src/components/search_bar/query/execute_ast.test.ts index b233ed4a68c..ecf91cf20d0 100644 --- a/src/components/search_bar/query/execute_ast.test.ts +++ b/src/components/search_bar/query/execute_ast.test.ts @@ -181,27 +181,39 @@ describe('execute ast', () => { }); test('is clause - applied', () => { - const items = [{ name: 'john', open: true }, { name: 'joe', open: false }]; + const items = [ + { name: 'john', open: true }, + { name: 'joe', open: false }, + ]; const result = executeAst(AST.create([AST.Is.must('open')]), items); expect(result).toHaveLength(1); expect(result[0].name).toBe('john'); }); test('is clause - not applied', () => { - const items = [{ name: 'john', open: true }, { name: 'joe', open: false }]; + const items = [ + { name: 'john', open: true }, + { name: 'joe', open: false }, + ]; const result = executeAst(AST.create([AST.Is.mustNot('open')]), items); expect(result).toHaveLength(1); expect(result[0].name).toBe('joe'); }); test('is clause - applied - missing field', () => { - const items = [{ name: 'john', open: true }, { name: 'joe', open: false }]; + const items = [ + { name: 'john', open: true }, + { name: 'joe', open: false }, + ]; const result = executeAst(AST.create([AST.Is.must('closed')]), items); expect(result).toHaveLength(0); }); test('is clause - not applied - missing field', () => { - const items = [{ name: 'john', open: true }, { name: 'joe', open: false }]; + const items = [ + { name: 'john', open: true }, + { name: 'joe', open: false }, + ]; const result = executeAst(AST.create([AST.Is.mustNot('closed')]), items); expect(result).toHaveLength(2); }); diff --git a/src/components/search_bar/query/execute_ast.ts b/src/components/search_bar/query/execute_ast.ts index fb292a916d5..7488d8d2186 100644 --- a/src/components/search_bar/query/execute_ast.ts +++ b/src/components/search_bar/query/execute_ast.ts @@ -107,15 +107,12 @@ const fieldClauseMatcher = ( // You might think that we could specify `item: T` here and do something // with `keyof`, but that wouldn't work with `nested.field.name` const extractStringFieldsFromItem = (item: any) => { - return Object.keys(item).reduce( - (fields, key) => { - if (isString(item[key])) { - fields.push(key); - } - return fields; - }, - [] as string[] - ); + return Object.keys(item).reduce((fields, key) => { + if (isString(item[key])) { + fields.push(key); + } + return fields; + }, [] as string[]); }; const termClauseMatcher = ( diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx index 863c32b2e4e..df523aab065 100644 --- a/src/components/selectable/selectable.tsx +++ b/src/components/selectable/selectable.tsx @@ -458,9 +458,7 @@ export class EuiSelectable extends Component< if (props && props['aria-describedby']) { return { - 'aria-describedby': `${ - props['aria-describedby'] - }${messageContentIdString}`, + 'aria-describedby': `${props['aria-describedby']}${messageContentIdString}`, }; } diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx index 084db29da12..22ecf00344b 100644 --- a/src/components/selectable/selectable_list/selectable_list.tsx +++ b/src/components/selectable/selectable_list/selectable_list.tsx @@ -208,7 +208,7 @@ export class EuiSelectableList extends Component { role="presentation" className="euiSelectableList__groupLabel" style={style} - {...optionRest as HTMLAttributes}> + {...(optionRest as HTMLAttributes)}> {prepend} {label} {append} @@ -238,7 +238,7 @@ export class EuiSelectableList extends Component { aria-posinset={index + 1 - labelCount} aria-setsize={data.length - labelCount} allowExclusions={this.props.allowExclusions} - {...optionRest as EuiSelectableListItemProps}> + {...(optionRest as EuiSelectableListItemProps)}> {this.props.renderOption ? ( this.props.renderOption(option, this.props.searchValue) ) : ( diff --git a/src/components/selectable/selectable_message/selectable_message.tsx b/src/components/selectable/selectable_message/selectable_message.tsx index 594dce9a1e4..166909f5d50 100644 --- a/src/components/selectable/selectable_message/selectable_message.tsx +++ b/src/components/selectable/selectable_message/selectable_message.tsx @@ -28,9 +28,11 @@ export type EuiSelectableMessageProps = Omit< > & CommonProps & {}; -export const EuiSelectableMessage: React.FunctionComponent< - EuiSelectableMessageProps -> = ({ children, className, ...rest }) => { +export const EuiSelectableMessage: React.FunctionComponent = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiSelectableMessage', className); return ( diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx index 5c08c429cd2..fc84f0ec289 100644 --- a/src/components/side_nav/side_nav_item.tsx +++ b/src/components/side_nav/side_nav_item.tsx @@ -53,7 +53,7 @@ type ExcludeEuiSideNavItemProps = Pick< Exclude >; type OmitEuiSideNavItemProps = { - [K in keyof ExcludeEuiSideNavItemProps]: T[K] + [K in keyof ExcludeEuiSideNavItemProps]: T[K]; }; interface GuaranteedRenderItemProps { diff --git a/src/components/stat/stat.tsx b/src/components/stat/stat.tsx index 7052340d490..09f34a309cc 100644 --- a/src/components/stat/stat.tsx +++ b/src/components/stat/stat.tsx @@ -93,9 +93,9 @@ export interface EuiStatProps { descriptionElement?: string; } -export const EuiStat: FunctionComponent< - CommonProps & Omit, 'title'> & EuiStatProps -> = ({ +export const EuiStat: FunctionComponent, 'title'> & + EuiStatProps> = ({ children, className, description, diff --git a/src/components/suggest/suggest_input.tsx b/src/components/suggest/suggest_input.tsx index 5b46c6aa6a4..b92c3d7989f 100644 --- a/src/components/suggest/suggest_input.tsx +++ b/src/components/suggest/suggest_input.tsx @@ -79,9 +79,7 @@ const statusMap: StatusMap = { loading: {}, }; -export const EuiSuggestInput: FunctionComponent< - EuiSuggestInputProps -> = props => { +export const EuiSuggestInput: FunctionComponent = props => { const [value, setValue] = useState(''); const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index 6f7f9edbf48..36bffa87680 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -149,13 +149,16 @@ export const EuiSuggestItem: FunctionComponent = ({ if (onClick) { return ( - ); } else { return ( -
+
{innerContent}
); diff --git a/src/components/table/mobile/table_header_mobile.tsx b/src/components/table/mobile/table_header_mobile.tsx index fc868ef27cb..d264a7cb7d7 100644 --- a/src/components/table/mobile/table_header_mobile.tsx +++ b/src/components/table/mobile/table_header_mobile.tsx @@ -21,9 +21,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; -export const EuiTableHeaderMobile: FunctionComponent< - CommonProps & HTMLAttributes -> = ({ children, className, ...rest }) => { +export const EuiTableHeaderMobile: FunctionComponent> = ({ children, className, ...rest }) => { const classes = classNames('euiTableHeaderMobile', className); return ( diff --git a/src/components/table/table_header_cell_checkbox.tsx b/src/components/table/table_header_cell_checkbox.tsx index 8270fb461c1..ddb876b8321 100644 --- a/src/components/table/table_header_cell_checkbox.tsx +++ b/src/components/table/table_header_cell_checkbox.tsx @@ -34,11 +34,16 @@ export interface EuiTableHeaderCellCheckboxProps { scope?: EuiTableHeaderCellCheckboxScope; } -export const EuiTableHeaderCellCheckbox: FunctionComponent< - CommonProps & - ThHTMLAttributes & - EuiTableHeaderCellCheckboxProps -> = ({ children, className, scope = 'col', style, width, ...rest }) => { +export const EuiTableHeaderCellCheckbox: FunctionComponent & + EuiTableHeaderCellCheckboxProps> = ({ + children, + className, + scope = 'col', + style, + width, + ...rest +}) => { const classes = classNames('euiTableHeaderCellCheckbox', className); const styleObj = resolveWidthAsStyle(style, width); diff --git a/src/components/table/table_row_cell_checkbox.tsx b/src/components/table/table_row_cell_checkbox.tsx index f98e897a8cd..ad7155532c6 100644 --- a/src/components/table/table_row_cell_checkbox.tsx +++ b/src/components/table/table_row_cell_checkbox.tsx @@ -21,9 +21,12 @@ import React, { FunctionComponent, TdHTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -export const EuiTableRowCellCheckbox: FunctionComponent< - CommonProps & TdHTMLAttributes -> = ({ children, className, ...rest }) => { +export const EuiTableRowCellCheckbox: FunctionComponent> = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiTableRowCellCheckbox', className); return ( diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx index 60a5c8b900a..a742dfbff35 100644 --- a/src/components/tabs/tab.tsx +++ b/src/components/tabs/tab.tsx @@ -73,7 +73,7 @@ export const EuiTab: FunctionComponent = ({ href={href} target={target} rel={secureRel} - {...rest as AnchorHTMLAttributes}> + {...(rest as AnchorHTMLAttributes)}> {children} ); @@ -86,7 +86,7 @@ export const EuiTab: FunctionComponent = ({ type="button" className={classes} disabled={disabled} - {...rest as ButtonHTMLAttributes}> + {...(rest as ButtonHTMLAttributes)}> {children} ); diff --git a/src/components/toast/global_toast_list_item.tsx b/src/components/toast/global_toast_list_item.tsx index a238c09abe0..ec06f552680 100644 --- a/src/components/toast/global_toast_list_item.tsx +++ b/src/components/toast/global_toast_list_item.tsx @@ -26,9 +26,8 @@ export interface EuiGlobalToastListItemProps { children?: ReactElement; } -export const EuiGlobalToastListItem: FunctionComponent< - CommonProps & EuiGlobalToastListItemProps -> = ({ children, isDismissed }) => { +export const EuiGlobalToastListItem: FunctionComponent = ({ children, isDismissed }) => { if (!children) { return null; } diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index dac631dfab7..8e160b831ec 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -78,7 +78,7 @@ export type EuiTokenMapType = */ export const TOKEN_MAP: { - [mapType in EuiTokenMapType]: Omit + [mapType in EuiTokenMapType]: Omit; } = { tokenClass: { shape: 'circle', diff --git a/src/components/tour/tour_step_indicator.tsx b/src/components/tour/tour_step_indicator.tsx index 3cb34cfb6cf..29f51638dc4 100644 --- a/src/components/tour/tour_step_indicator.tsx +++ b/src/components/tour/tour_step_indicator.tsx @@ -42,9 +42,12 @@ export interface EuiTourStepIndicatorProps status: EuiTourStepStatus; } -export const EuiTourStepIndicator: FunctionComponent< - EuiTourStepIndicatorProps -> = ({ className, number, status, ...rest }) => { +export const EuiTourStepIndicator: FunctionComponent = ({ + className, + number, + status, + ...rest +}) => { const classes = classNames( 'euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx index 4506b588657..517076eb899 100644 --- a/src/components/tree_view/tree_view.tsx +++ b/src/components/tree_view/tree_view.tsx @@ -71,7 +71,7 @@ export interface Node { export type EuiTreeViewDisplayOptions = 'default' | 'compressed'; const displayToClassNameMap: { - [option in EuiTreeViewDisplayOptions]: string | null + [option in EuiTreeViewDisplayOptions]: string | null; } = { default: null, compressed: 'euiTreeView--compressed', @@ -295,9 +295,7 @@ export class EuiTreeView extends Component { 'aria-label': ariaLabel, } : { - 'aria-labelledby': `${buttonId} ${ - rest['aria-labelledby'] - }`, + 'aria-labelledby': `${buttonId} ${rest['aria-labelledby']}`, }; const nodeClasses = classNames( @@ -322,14 +320,10 @@ export class EuiTreeView extends Component {