[typescript] Update typings for beta.4 and beta.5 (#7793)

- Update `<Tabs>` API to match BC introduced in #7741
- Update `withStyle` API to match BC introduced in #7740
- Remove discriminated unions (microsoft/TypeScript#17882)

Author: sebald

package.json

@@ -77,7 +77,7 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@types/enzyme": "^2.8.5",
+    "@types/enzyme": "^2.8.6",
     "@types/react": "^16.0.2",
     "app-module-path": "^2.2.0",
     "argos-cli": "^0.0.9",

test/typescript/components.spec.tsx

@@ -48,7 +48,7 @@ import Table, {
   TableHead,
   TableRow,
 } from 'material-ui/Table';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles, StyleRulesCallback } from 'material-ui/styles';
 
 const log = console.log;
 const FakeIcon = () => <div>ICON</div>;
@@ -308,6 +308,19 @@ const DrawerTest = () => {
   );
 };
 
+const DockedDrawerTest = () =>
+  class DockedDrawer extends React.Component<{}, { docked: boolean }> {
+    state = { docked: true };
+    render() {
+      const docked: true | false = this.state.docked;
+      return (
+        <Drawer anchor="bottom" open={true} docked={docked}>
+          List
+        </Drawer>
+      );
+    }
+  };
+
 const GridListTest = () =>
   <GridList cellHeight={160} cols={3}>
     <GridListTest cols={1}>
@@ -595,13 +608,13 @@ const StepperTest = () =>
   };
 
 const TableTest = () => {
-  const styleSheet = createStyleSheet(theme => ({
+  const styles: StyleRulesCallback = theme => ({
     paper: {
       width: '100%',
       marginTop: theme.spacing.unit * 3,
       overflowX: 'auto',
     },
-  }));
+  });
 
   let id = 0;
   function createData(name, calories, fat, carbs, protein) {
@@ -660,7 +673,7 @@ const TableTest = () => {
     );
   }
 
-  return withStyles(styleSheet)(BasicTable);
+  return withStyles(styles)(BasicTable);
 };
 
 const TabsTest = () => {
@@ -669,21 +682,21 @@ const TabsTest = () => {
       {props.children}
     </div>;
 
-  const styleSheet = createStyleSheet(theme => ({
+  const styles = theme => ({
     root: {
       flexGrow: 1,
       marginTop: theme.spacing.unit * 3,
       backgroundColor: theme.palette.background.paper,
     },
-  }));
+  });
 
   class BasicTabs extends React.Component<{ classes: { root: string } }> {
     state = {
-      index: 0,
+      value: 0,
     };
 
-    handleChange = (event, index) => {
-      this.setState({ index });
+    handleChange = (event, value) => {
+      this.setState({ value });
     };
 
     render() {
@@ -692,21 +705,21 @@ const TabsTest = () => {
       return (
         <div className={classes.root}>
           <AppBar position="static">
-            <Tabs index={this.state.index} onChange={this.handleChange}>
+            <Tabs value={this.state.value} onChange={this.handleChange}>
               <Tab label="Item One" />
               <Tab label="Item Two" />
               <Tab label="Item Three" />
             </Tabs>
           </AppBar>
-          {this.state.index === 0 &&
+          {this.state.value === 0 &&
             <TabContainer>
               {'Item One'}
             </TabContainer>}
-          {this.state.index === 1 &&
+          {this.state.value === 1 &&
             <TabContainer>
               {'Item Two'}
             </TabContainer>}
-          {this.state.index === 2 &&
+          {this.state.value === 2 &&
             <TabContainer>
               {'Item Three'}
             </TabContainer>}
@@ -715,7 +728,7 @@ const TabsTest = () => {
     }
   }
 
-  return withStyles(styleSheet)(BasicTabs);
+  return withStyles(styles)(BasicTabs);
 };
 
 const TextFieldTest = () =>

test/typescript/styles.spec.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { createStyleSheet, withStyles } from 'material-ui/styles';
+import { withStyles, StyleRules } from 'material-ui/styles';
 import { Theme } from 'material-ui/styles/theme';
 
-
-
-const stylesheet = createStyleSheet(({ palette, spacing }: Theme) => ({
+const styles = ({ palette, spacing }) => ({
   root: {
     padding: spacing.unit,
     background: palette.background,
-    color: palette.primary
-  }
-}));
-
+    color: palette.primary,
+  },
+});
 
 interface StyledComponentClassNames {
   root: string;
@@ -21,10 +18,28 @@ interface StyledComponentProps {
   text: string;
 }
 
-const Component: React.SFC<StyledComponentProps & { classes: StyledComponentClassNames }> =
-  ({ classes, text }) =>
-    <div className={classes.root}>{text}</div>
+const Component: React.SFC<
+  StyledComponentProps & { classes: StyledComponentClassNames }
+> = ({ classes, text }) =>
+  <div className={classes.root}>
+    {text}
+  </div>;
+
+const StyledComponent = withStyles<
+  StyledComponentProps,
+  StyledComponentClassNames
+>(styles)(Component);
 
-const StyledComponent = withStyles<StyledComponentProps, StyledComponentClassNames>(stylesheet)(Component);
+<StyledComponent text="I am styled!" />;
+
+// Also works with a plain object
+
+const stylesAsPojo: StyleRules = {
+  root: {
+    background: 'hotpink',
+  },
+};
 
-<StyledComponent text="I am styled!"/>
+const AnotherStyledComponent = withStyles<{}, StyledComponentClassNames>({
+  root: { background: 'hotpink' },
+})(({ classes }) => <div className={classes.root}>Stylish!</div>);

typings/index.d.ts

@@ -476,27 +476,16 @@ declare module 'material-ui/Drawer/Drawer' {
   import { SlideProps } from 'material-ui/transitions/Slide';
   import { Theme } from 'material-ui/styles/theme';
 
-  type DrawerCommonProps = {
+  export interface DrawerProps extends ModalProps {
     anchor?: 'left' | 'top' | 'right' | 'bottom';
+    docked?: boolean;
     elevation?: number;
     enterTransitionDuration?: number;
     leaveTransitionDuration?: number;
     open?: boolean;
     SlideProps?: SlideProps;
     theme?: Theme;
-  };
-
-  type DrawerDockedProps = {
-    docked?: true;
-  } & DrawerCommonProps &
-    React.HtmlHTMLAttributes<HTMLDivElement>;
-
-  type DrawerModalProps = {
-    docked?: false;
-    onRequestClose?: React.EventHandler<any>;
-  } & ModalProps;
-
-  export type DrawerProps = DrawerDockedProps | DrawerModalProps;
+  }
 
   export default class Drawer extends MaterialUI.Component<DrawerProps> {}
 }
@@ -872,24 +861,15 @@ declare module 'material-ui/List/List' {
 declare module 'material-ui/List/ListItem' {
   import { ButtonBaseProps } from 'material-ui/internal/ButtonBase';
 
-  interface ListItemCommonProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  export type ListItemProps = {
+    button?: boolean;
     component?: React.ReactNode;
     dense?: boolean;
     disabled?: boolean;
     disableGutters?: boolean;
     divider?: boolean;
-  }
-
-  export type ListItemDefaultProps = {
-    button?: false;
-  } & ListItemCommonProps;
-
-  export type ListItemButtonProps = {
-    button?: true;
-  } & ListItemCommonProps &
-    ButtonBaseProps;
-
-  export type ListItemProps = ListItemDefaultProps | ListItemButtonProps;
+  } & ButtonBaseProps &
+    React.LiHTMLAttributes<HTMLLIElement>;
 
   export default class ListItem extends MaterialUI.Component<ListItemProps> {}
 }
@@ -971,9 +951,9 @@ declare module 'material-ui/Menu/Menu' {
 }
 
 declare module 'material-ui/Menu/MenuItem' {
-  import { ListItemButtonProps } from 'material-ui/List/ListItem';
+  import { ListItemProps } from 'material-ui/List/ListItem';
 
-  export interface MenuItemProps extends ListItemButtonProps {
+  export interface MenuItemProps extends ListItemProps {
     component?: React.ReactNode;
     role?: string;
     selected?: boolean;
@@ -1301,11 +1281,11 @@ declare module 'material-ui/Tabs/Tab' {
     disabled?: boolean;
     fullWidth?: boolean;
     icon?: React.ReactNode;
-    index?: number;
+    value?: any;
     label?: React.ReactNode;
     onChange?: (
       event: React.ChangeEvent<{ checked: boolean }>,
-      index: number
+      value: any
     ) => void;
     onClick?: React.EventHandler<any>;
     selected?: boolean;
@@ -1349,10 +1329,10 @@ declare module 'material-ui/Tabs/Tabs' {
     centered?: boolean;
     children?: React.ReactNode;
     fullWidth?: boolean;
-    index: false | number;
+    value: any;
     indicatorClassName?: string;
     indicatorColor?: 'accent' | 'primary' | string;
-    onChange: (event: React.ChangeEvent<{}>, index: number) => void;
+    onChange: (event: React.ChangeEvent<{}>, value: any) => void;
     scrollable?: boolean;
     scrollButtons?: 'auto' | 'on' | 'off';
     textColor?: 'accent' | 'primary' | 'inherit' | string;
@@ -1621,8 +1601,6 @@ declare module 'material-ui/internal/Portal' {
 }
 
 declare module 'material-ui/internal/SwitchBase' {
-  import { StyleSheet } from 'material-ui/styles/createStyleSheet';
-
   export interface SwitchBaseProps {
     checked?: boolean | string;
     checkedClassName?: string;
@@ -1648,7 +1626,6 @@ declare module 'material-ui/internal/SwitchBase' {
     defaultIcon?: React.ReactNode;
     defaultCheckedIcon?: React.ReactNode;
     inputType?: string;
-    styleSheet?: StyleSheet;
   }
 
   export default function createSwitch(
@@ -1699,12 +1676,14 @@ declare module 'material-ui/styles' {
   export { default as createBreakpoints } from 'material-ui/styles/breakpoints';
   export { default as createMuiTheme } from 'material-ui/styles/theme';
   export { default as createPalette } from 'material-ui/styles/palette';
-  export {
-    default as createStyleSheet,
-  } from 'material-ui/styles/createStyleSheet';
   export { default as createTypography } from 'material-ui/styles/typography';
   export { default as withStyles } from 'material-ui/styles/withStyles';
   export { default as withTheme } from 'material-ui/styles/withTheme';
+
+  export {
+    StyleRules,
+    StyleRulesCallback,
+  } from 'material-ui/styles/withStyles';
 }
 
 declare module 'material-ui/styles/MuiThemeProvider' {
@@ -1781,34 +1760,6 @@ declare module 'material-ui/styles/createGenerateClassName' {
   ) => string;
 }
 
-declare module 'material-ui/styles/createStyleSheet' {
-  import { Theme } from 'material-ui/styles/theme';
-
-  export interface StyleRules {
-    [displayName: string]: Partial<React.CSSProperties>;
-  }
-
-  export interface StyleRulesCallback<Theme> {
-    (theme: Theme): StyleRules;
-  }
-
-  export interface StyleSheet {
-    name: string | false;
-    createStyles<T extends Theme = Theme>(theme: T): StyleRules;
-    options: Object;
-    themingEnabled: boolean;
-  }
-
-  export default function createStyleSheet<T extends Theme = Theme>(
-    callback: StyleRulesCallback<Theme> | StyleRules
-  ): StyleSheet;
-  export default function createStyleSheet<T extends Theme = Theme>(
-    name: string,
-    callback: StyleRulesCallback<Theme> | StyleRules,
-    options?: Object
-  ): StyleSheet;
-}
-
 declare module 'material-ui/styles/mixins' {
   import { Spacing } from 'material-ui/styles/spacing';
   import { Breakpoints } from 'material-ui/styles/breakpoints';
@@ -2050,11 +2001,28 @@ declare module 'material-ui/styles/typography' {
 
 declare module 'material-ui/styles/withStyles' {
   import { Theme } from 'material-ui/styles/theme';
-  import { StyleSheet } from 'material-ui/styles/createStyleSheet';
+
+  /**
+   * This is basically the API of JSS. It defines a Map<string, CSS>,
+   * where
+   *
+   * - the `keys` are the class (names) that will be created
+   * - the `values` are objects that represent CSS rules (`React.CSSProperties`).
+   */
+  export interface StyleRules {
+    [displayName: string]: Partial<React.CSSProperties>;
+  }
+
+  export type StyleRulesCallback = (theme: Theme) => StyleRules;
+
+  export interface WithStylesOptions {
+    withTheme?: boolean;
+    name?: string;
+  }
 
   const withStyles: <P = {}, ClassNames = {}>(
-    stylesheets: StyleSheet | StyleSheet[],
-    options?: Partial<{ withTheme: boolean }>
+    style: StyleRules | StyleRulesCallback,
+    options?: WithStylesOptions
   ) => (
     component: React.ComponentType<P & { classes: ClassNames }>
   ) => React.ComponentClass<P>;
@@ -2194,10 +2162,8 @@ declare module 'material-ui/test-utils/createShallow' {
 }
 
 declare module 'material-ui/test-utils/getClasses' {
-  import { StyleSheet } from 'material-ui/styles/createStyleSheet';
-
   export default function getClasses<T = { [name: string]: string }>(
-    stylesheets: StyleSheet | StyleSheet[],
+    element: React.ReactElement<any>,
     options?: Partial<{ withTheme: boolean }>
   ): T;
 }