feat(superset-ui-style): export ThemeProvider and useTheme (#553)

This commit is contained in:
Jesse Yang 2020-06-01 11:51:28 -07:00 committed by Yongjie Zhao
parent be31aa4997
commit a39a058919
6 changed files with 13 additions and 13 deletions

View File

@ -1,7 +1,6 @@
// themeDecorator.js // themeDecorator.js
import React from "react" import React from "react"
import { ThemeProvider } from 'emotion-theming'; import { supersetTheme, ThemeProvider } from '@superset-ui/style';
import { supersetTheme } from '@superset-ui/style';
const ThemeDecorator = storyFn => ( const ThemeDecorator = storyFn => (
<ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider> <ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>

View File

@ -8,8 +8,7 @@ Provides a style object containing a variety of style parameters for theming Sup
## Usage ## Usage
```ts ```ts
import { ThemeProvider } from 'emotion-theming'; import { styled, supersetTheme, ThemeProvider } from '@superset-ui/style';
import styled, { supersetTheme } from '@superset-ui/style';
// use emotion api as normal, but the theme uses the correct types // use emotion api as normal, but the theme uses the correct types
const MyHeader = styled.h1` const MyHeader = styled.h1`

View File

@ -30,6 +30,7 @@
}, },
"dependencies": { "dependencies": {
"@emotion/core": "^10.0.28", "@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27" "@emotion/styled": "^10.0.27",
"emotion-theming": "^10.0.27"
} }
} }

View File

@ -16,7 +16,9 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import styled, { CreateStyled } from '@emotion/styled'; import emotionStyled, { CreateStyled } from '@emotion/styled';
export { useTheme, ThemeProvider, withTheme } from 'emotion-theming';
const defaultTheme = { const defaultTheme = {
borderRadius: 4, borderRadius: 4,
@ -60,10 +62,11 @@ const defaultTheme = {
gridUnit: 4, gridUnit: 4,
}; };
export default styled as CreateStyled<typeof defaultTheme>;
export const supersetTheme = defaultTheme;
export interface SupersetThemeProps { export interface SupersetThemeProps {
theme: typeof defaultTheme; theme: typeof defaultTheme;
} }
export const styled: CreateStyled<typeof defaultTheme> = emotionStyled;
export const supersetTheme = defaultTheme;
export default styled;

View File

@ -33,7 +33,6 @@
"@types/react": "^16.3.0", "@types/react": "^16.3.0",
"d3-cloud": "^1.2.5", "d3-cloud": "^1.2.5",
"d3-scale": "^3.0.1", "d3-scale": "^3.0.1",
"emotion-theming": "^10.0.27",
"encodable": "^0.3.3" "encodable": "^0.3.3"
}, },
"peerDependencies": { "peerDependencies": {

View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import cloudLayout, { Word } from 'd3-cloud'; import cloudLayout, { Word } from 'd3-cloud';
import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable'; import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable';
import { SupersetThemeProps } from '@superset-ui/style'; import { SupersetThemeProps, withTheme } from '@superset-ui/style';
import { withTheme } from 'emotion-theming';
export const ROTATION = { export const ROTATION = {
flat: () => 0, flat: () => 0,