From da1db20258140a6612f0c63e34197d02ec2e01a4 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Thu, 30 Nov 2017 15:34:39 -0600 Subject: [PATCH 1/2] Review `export type` and replace with `export interface` where appropriate --- src/internal/transition.d.ts | 4 ++-- src/styles/colorManipulator.d.ts | 4 ++-- src/styles/createMuiTheme.d.ts | 5 ++--- src/styles/createPalette.d.ts | 24 ++++++++++++------------ src/styles/overrides.d.ts | 1 - 5 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/internal/transition.d.ts b/src/internal/transition.d.ts index 5bde32e49dadcd..fb0863fd73cc0e 100644 --- a/src/internal/transition.d.ts +++ b/src/internal/transition.d.ts @@ -3,14 +3,14 @@ import * as React from 'react'; export type TransitionDuration = number | { enter: number, exit: number }; export type TransitionCallback = (element: HTMLElement) => void; -export type TransitionHandlers = { +export interface TransitionHandlers { onEnter: TransitionCallback; onEntering: TransitionCallback; onEntered: TransitionCallback; onExit: TransitionCallback; onExiting: TransitionCallback; onExited: TransitionCallback; -}; +} export interface TransitionProps extends Partial { children: React.ReactElement; diff --git a/src/styles/colorManipulator.d.ts b/src/styles/colorManipulator.d.ts index 7850232e8e204f..84298dfc9089ed 100644 --- a/src/styles/colorManipulator.d.ts +++ b/src/styles/colorManipulator.d.ts @@ -1,8 +1,8 @@ export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla'; -export type ColorObject = { +export interface ColorObject { type: ColorFormat; color: [number, number, number] | [number, number, number, number]; -}; +} export function convertColorToString(color: ColorObject): string; export function convertHexToRGB(hex: string): string; diff --git a/src/styles/createMuiTheme.d.ts b/src/styles/createMuiTheme.d.ts index 6f5d3bd0deea49..7361e8443d15bf 100644 --- a/src/styles/createMuiTheme.d.ts +++ b/src/styles/createMuiTheme.d.ts @@ -6,7 +6,6 @@ import { Spacing } from './spacing'; import { Transitions } from './transitions'; import { Typography, TypographyOptions } from './createTypography'; import { ZIndex } from './zIndex'; -import { StyleRules } from './withStyles' import { Overrides } from './overrides' export type Direction = 'ltr' | 'rtl'; @@ -24,7 +23,7 @@ export interface ThemeOptions { overrides?: Overrides; } -export type Theme = { +export interface Theme { direction: Direction; palette: Palette; typography: Typography; @@ -35,7 +34,7 @@ export type Theme = { spacing: Spacing; zIndex: ZIndex; overrides?: Overrides; -}; +} export default function createMuiTheme( options?: ThemeOptions diff --git a/src/styles/createPalette.d.ts b/src/styles/createPalette.d.ts index dae8f2422b80b1..d4c1fd49a6ab78 100644 --- a/src/styles/createPalette.d.ts +++ b/src/styles/createPalette.d.ts @@ -1,7 +1,7 @@ import { Color, Contrast } from '..'; import { CommonColors } from '../colors/common'; -type ShadeText = { +interface ShadeText { primary: string; secondary: string; disabled: string; @@ -9,40 +9,40 @@ type ShadeText = { icon: string; divider: string; lightDivider: string; -}; +} -type ShadeInput = { +interface ShadeInput { bottomLine: string; helperText: string; labelText: string; inputText: string; disabled: string; -}; +} -type ShadeAction = { +interface ShadeAction { active: string; disabled: string; -}; +} -type ShadeBackground = { +interface ShadeBackground { default: string; paper: string; appBar: string; contentFrame: string; status: string; -}; +} -export type Shade = { +export interface Shade { text: ShadeText; input: ShadeInput; action: ShadeAction; background: ShadeBackground; -}; +} export const light: Shade; export const dark: Shade; -export type Palette = { +export interface Palette { common: CommonColors; type: Contrast; primary: Color; @@ -58,7 +58,7 @@ export type Palette = { action: ShadeAction; background: ShadeBackground; getContrastText: (color: string) => string; -}; +} export default function createPalette( palette: Partial diff --git a/src/styles/overrides.d.ts b/src/styles/overrides.d.ts index f1810943dceecb..c445819b0ae46f 100644 --- a/src/styles/overrides.d.ts +++ b/src/styles/overrides.d.ts @@ -74,7 +74,6 @@ import { TableSortLabelClassKey } from '../Table/TableSortLabel'; import { TabsClassKey } from '../Tabs/Tabs'; import { TabScrollButtonClassKey } from '../Tabs/TabScrollButton'; import { TextareaClassKey } from '../Input/Textarea'; -import { TextFieldClassKey } from '../TextField/TextField'; import { ToolbarClassKey } from '../Toolbar/Toolbar'; import { TooltipClassKey } from '../Tooltip/Tooltip'; import { TypographyClassKey } from '../Typography/Typography'; From 1299eb2e080caaa22c43d2965dcf01560485c7bd Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Thu, 30 Nov 2017 15:55:18 -0600 Subject: [PATCH 2/2] Update docs on customizing theme in typescript --- docs/src/pages/guides/typescript.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/src/pages/guides/typescript.md b/docs/src/pages/guides/typescript.md index eb66f499a5f799..7b763bd5280ac5 100644 --- a/docs/src/pages/guides/typescript.md +++ b/docs/src/pages/guides/typescript.md @@ -87,3 +87,24 @@ const DecoratedNoProps = decorate<{}>( // <-- note the type argument! ``` To avoid worrying about this edge case it may be a good habit to always provide an explicit type argument to `decorate`. + +## Customization of `Theme` + +When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting +[Typescript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). + +The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`: + +```jsx +import { Theme } from 'material-ui/styles/createMuiTheme' +import { Breakpoint } from 'material-ui/styles/createBreakpoints' + +declare module 'material-ui/styles/createMuiTheme' { + interface Theme { + appDrawer: { + width: React.CSSProperties['width'] + breakpoint: Breakpoint + } + } +} +```