From 5649ab032e29713e26ab653c22b0098131c95f84 Mon Sep 17 00:00:00 2001 From: merceyz Date: Mon, 10 Jun 2019 13:21:07 +0200 Subject: [PATCH 1/5] [core] Fix withStyles and WithStyles not including properties --- packages/material-ui/src/styles/withStyles.d.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts index 451f0c96663275..db0f3d68d184f3 100644 --- a/packages/material-ui/src/styles/withStyles.d.ts +++ b/packages/material-ui/src/styles/withStyles.d.ts @@ -1,4 +1,4 @@ -import { PropInjector } from '@material-ui/types'; +import { PropInjector, CoerceEmptyInterface } from '@material-ui/types'; import { Theme } from './createMuiTheme'; import { CreateCSSProperties, @@ -10,6 +10,7 @@ import { StyleRulesCallback, Styles, ClassKeyOfStyles, + PropsOfStyles, } from '@material-ui/styles/withStyles'; export { @@ -36,7 +37,7 @@ export type WithStyles< IncludeTheme extends boolean | undefined = false > = (IncludeTheme extends true ? { theme: Theme } : {}) & { classes: ClassNameMap>; -}; +} & PropsOfStyles; export default function withStyles< ClassKey extends string, @@ -45,4 +46,7 @@ export default function withStyles< >( style: Styles, options?: Options, -): PropInjector, StyledComponentProps>; +): PropInjector< + WithStyles, + StyledComponentProps & CoerceEmptyInterface +>; From a006a2c3cb538daf7abc7f017033e980057c7021 Mon Sep 17 00:00:00 2001 From: merceyz Date: Mon, 10 Jun 2019 13:21:53 +0200 Subject: [PATCH 2/5] [styles] Fix withStyles not including properties --- packages/material-ui-styles/src/withStyles/withStyles.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts index 5111f4c9ef292a..39bf700f83bfe5 100644 --- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts +++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts @@ -97,5 +97,5 @@ export default function withStyles< options?: Options, ): PropInjector< WithStyles, - StyledComponentProps> + StyledComponentProps> & PropsOfStyles >; From c008bc685408a61af00ccddd2301965b49355e92 Mon Sep 17 00:00:00 2001 From: merceyz Date: Mon, 10 Jun 2019 13:22:40 +0200 Subject: [PATCH 3/5] [styles] Fix PropsOfStyles not using CoerceEmptyInterface --- packages/material-ui-styles/src/withStyles/withStyles.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts index 39bf700f83bfe5..561345f7dc36dc 100644 --- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts +++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PropInjector } from '@material-ui/types'; +import { PropInjector, CoerceEmptyInterface } from '@material-ui/types'; import * as CSS from 'csstype'; import * as JSS from 'jss'; @@ -70,7 +70,9 @@ export type ClassKeyOfStyles = StylesOrClassKey extends string /** * infers the type of the theme used in the styles */ -export type PropsOfStyles = StylesType extends Styles ? Props : {}; +export type PropsOfStyles = StylesType extends Styles + ? CoerceEmptyInterface + : {}; /** * infers the type of the props used in the styles */ From 97533f3a70030e489bc6c098a851dd89a7994e54 Mon Sep 17 00:00:00 2001 From: merceyz Date: Mon, 10 Jun 2019 13:30:31 +0200 Subject: [PATCH 4/5] [docs] Add typescript version of AdaptingHOC --- docs/src/pages/styles/basics/AdaptingHOC.js | 6 +-- docs/src/pages/styles/basics/AdaptingHOC.tsx | 49 ++++++++++++++++++++ 2 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 docs/src/pages/styles/basics/AdaptingHOC.tsx diff --git a/docs/src/pages/styles/basics/AdaptingHOC.js b/docs/src/pages/styles/basics/AdaptingHOC.js index 4dde71d26ae73d..315ccbf68fce51 100644 --- a/docs/src/pages/styles/basics/AdaptingHOC.js +++ b/docs/src/pages/styles/basics/AdaptingHOC.js @@ -29,12 +29,12 @@ function MyButtonRaw(props) { MyButtonRaw.propTypes = { classes: PropTypes.object.isRequired, - color: PropTypes.string.isRequired, + color: PropTypes.oneOf(['red', 'blue']).isRequired, }; const MyButton = withStyles(styles)(MyButtonRaw); -function AdaptingHOC() { +export default function AdaptingHOC() { return ( Red @@ -42,5 +42,3 @@ function AdaptingHOC() { ); } - -export default AdaptingHOC; diff --git a/docs/src/pages/styles/basics/AdaptingHOC.tsx b/docs/src/pages/styles/basics/AdaptingHOC.tsx new file mode 100644 index 00000000000000..3749ce7ea0cf56 --- /dev/null +++ b/docs/src/pages/styles/basics/AdaptingHOC.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, createStyles, WithStyles } from '@material-ui/styles'; +import Button, { ButtonProps } from '@material-ui/core/Button'; +import { Omit } from '@material-ui/types'; + +const styles = createStyles({ + root: { + background: (props: MyButtonRawProps) => + props.color === 'red' + ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)' + : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)', + border: 0, + borderRadius: 3, + boxShadow: (props: MyButtonRawProps) => + props.color === 'red' + ? '0 3px 5px 2px rgba(255, 105, 135, .3)' + : '0 3px 5px 2px rgba(33, 203, 243, .3)', + color: 'white', + height: 48, + padding: '0 30px', + margin: 8, + }, +}); + +interface MyButtonRawProps { + color: 'red' | 'blue'; +} + +function MyButtonRaw(props: WithStyles & Omit) { + const { classes, color, ...other } = props; + return