Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[typescript] Restore withStyles class decorator #8354

Merged
merged 3 commits into from
Sep 24, 2017
Merged

[typescript] Restore withStyles class decorator #8354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e42063
Don't require a P type param to WithStyles
pelotom Sep 24, 2017
3142e37
Allow withStyles to be used as a decorator
pelotom Sep 24, 2017
b2824e4
Use non-null assertion operator
pelotom Sep 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/styles/withStyles.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,19 @@ export interface WithStylesOptions {
name?: string;
}

export type WithStyles<P, Names extends string = string> = P & {
export type WithStyles<Names extends string = string> = {
classes: ClassNameMap<Names>
theme?: Theme
};

export default function withStyles<Names extends string>(
style: StyleRules<Names> | StyleRulesCallback<Names>,
options?: WithStylesOptions
): <P>(
component: React.ComponentType<WithStyles<P, Names>>
) => React.ComponentType<P & StyledComponentProps<Names>>;
): {
<P>(
component: React.StatelessComponent<P & WithStyles<Names>>
): React.ComponentType<P & StyledComponentProps<Names>>;
<P, C extends React.ComponentClass<P & StyledComponentProps<Names>>>(
component: C
): C;
};
33 changes: 15 additions & 18 deletions test/typescript/styles.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { StyledComponent } from '../../src';
import {
withStyles,
WithStyles,
Expand All @@ -21,19 +22,19 @@ interface StyledComponentClassNames {
root: string;
}

interface StyledComponentProps {
interface NonStyleProps {
text: string;
}

const StyledComponent = withStyles(styles)<StyledComponentProps>(
const StyledSFC = withStyles(styles)<NonStyleProps>(
({ classes, text }) => (
<div className={classes.root}>
{text}
</div>
)
);

<StyledComponent text="I am styled!" />;
<StyledSFC text="I am styled!" />;

// Also works with a plain object

Expand All @@ -43,7 +44,7 @@ const stylesAsPojo = {
},
};

const AnotherStyledComponent = withStyles({
const AnotherStyledSFC = withStyles({
root: { background: 'hotpink' },
})(({ classes }) => <div className={classes.root}>Stylish!</div>);

Expand Down Expand Up @@ -106,21 +107,17 @@ const AllTheComposition = withTheme(
withStyles(styles)(AllTheStyles)
);

// Can't use withStyles effectively as a decorator in TypeScript
// due to https://github.com/Microsoft/TypeScript/issues/4881
// @withStyles(styles)
const DecoratedComponent = withStyles(styles)(
class extends React.Component<WithStyles<StyledComponentProps, 'root'>> {
render() {
const { classes, text } = this.props;
return (
<div className={classes.root}>
{text}
</div>
);
}
@withStyles(styles)
class DecoratedComponent extends StyledComponent<NonStyleProps, 'root'> {
render() {
const { classes, text } = this.props;
return (
<div className={classes!.root}>
{text}
</div>
);
}
);
}

// no 'classes' property required at element creation time (#8267)
<DecoratedComponent text="foo" />