kibana/x-pack/plugins/observability/public/typings/eui_styled_components.tsx
Nathan L Smith d3ddcd2027
[APM] APM & Observability plugin lint improvements (#72702)
* [APM] APM & Observability plugin lint improvements

This is a large change, but most of it is automatic `eslint --fix` changes.

* Apply the same ESLint ovderrides in APM and Observability plugins.
* Remove the `no-unused-vars` rule. We can turn on the TypeScript check if needed.
* Check both JS and TS files.
* Add a rule for react function component definitions
* Upgrade eslint-plugin-react to include that rule
2020-07-27 08:18:36 -05:00

48 lines
1.3 KiB
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
export interface EuiTheme {
eui: typeof euiLightVars | typeof euiDarkVars;
darkMode: boolean;
}
function EuiThemeProvider<
OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme
>({
darkMode = false,
...otherProps
}: Omit<ThemeProviderProps<OuterTheme, OuterTheme & EuiTheme>, 'theme'> & {
darkMode?: boolean;
}) {
return (
<ThemeProvider
{...otherProps}
theme={(outerTheme?: OuterTheme) => ({
...outerTheme,
eui: darkMode ? euiDarkVars : euiLightVars,
darkMode,
})}
/>
);
}
const {
default: euiStyled,
css,
createGlobalStyle,
keyframes,
withTheme,
} = (styledComponents as unknown) as ThemedStyledComponentsModule<EuiTheme>;
export { css, euiStyled, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };