Skip to content

Commit 3fd285c

Browse files
eps1loneps1lon
committed
Merge branch 'feat/overload-over-conditional' into test/typescript-3.8
2 parents cb3fd4e + 7e72feb commit 3fd285c

File tree

7 files changed

+70
-164
lines changed

7 files changed

+70
-164
lines changed

‎packages/material-ui-styles/src/makeStyles/makeStyles.d.ts‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,27 @@
11
import {
2-
ClassKeyOfStyles,
32
ClassNameMap,
43
PropsOfStyles,
54
Styles,
65
WithStylesOptions,
76
} from '@material-ui/styles/withStyles';
8-
import { Omit, IsAny, Or, IsEmptyInterface } from '@material-ui/types';
7+
import { Omit } from '@material-ui/types';
98
import { DefaultTheme } from '../defaultTheme';
109

1110
/**
12-
* @internal
13-
*
14-
* If a style callback is given with `theme => stylesOfTheme` then typescript
15-
* infers `Props` to `any`.
16-
* If a static object is given with { ...members } then typescript infers `Props`
17-
* to `{}`.
18-
*
19-
* So we require no props in `useStyles` if `Props` in `makeStyles(styles)` is
20-
* inferred to either `any` or `{}`
11+
* `makeStyles` where the passed `styles` do not depend on props
2112
*/
22-
export type StylesRequireProps<S> = Or<
23-
IsAny<PropsOfStyles<S>>,
24-
IsEmptyInterface<PropsOfStyles<S>>
25-
> extends true
26-
? false
27-
: true;
28-
13+
export default function makeStyles<Theme = DefaultTheme, ClassKey extends string = string>(
14+
style: Styles<Theme, {}, ClassKey>,
15+
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
16+
): (props?: any) => ClassNameMap<ClassKey>;
2917
/**
30-
* @internal
31-
*
32-
* `Props` are `any` either by explicit annotation or if there are no callbacks
33-
* from which the typechecker could infer a type so it falls back to `any`.
34-
* See the test cases for examples and implications of explicit `any` annotation
18+
* `makeStyles` where the passed `styles` do depend on props
3519
*/
36-
export type StylesHook<S extends Styles<any, any>> = StylesRequireProps<S> extends false
37-
? (props?: any) => ClassNameMap<ClassKeyOfStyles<S>>
38-
: (props: PropsOfStyles<S>) => ClassNameMap<ClassKeyOfStyles<S>>;
39-
4020
export default function makeStyles<
4121
Theme = DefaultTheme,
4222
Props extends {} = {},
4323
ClassKey extends string = string
4424
>(
4525
styles: Styles<Theme, Props, ClassKey>,
4626
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
47-
): StylesHook<Styles<Theme, Props, ClassKey>>;
27+
): (props: Props) => ClassNameMap<ClassKey>;

‎packages/material-ui-styles/test/index.spec.tsx‎ renamed to ‎packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22
import { Theme } from '@material-ui/core';
33
import { AppBarProps } from '@material-ui/core/AppBar';
44
import { createStyles, makeStyles } from '@material-ui/styles';
5-
import styled, { StyledProps } from '@material-ui/styles/styled';
65

76
// makeStyles
87
{
@@ -136,50 +135,3 @@ import styled, { StyledProps } from '@material-ui/styles/styled';
136135
classes.other;
137136
}
138137
}
139-
140-
// styled
141-
{
142-
const StyledButton = styled('button')({
143-
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
144-
borderRadius: 3,
145-
border: 0,
146-
color: 'white',
147-
height: 48,
148-
padding: '0 30px',
149-
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
150-
});
151-
const renderedStyledButton = <StyledButton classes={{ root: 'additional-root-class' }} />;
152-
// $ExpectError
153-
const nonExistingClassKey = <StyledButton classes={{ notRoot: 'additional-root-class' }} />;
154-
155-
interface MyTheme {
156-
fontFamily: string;
157-
}
158-
const MyThemeInstance: MyTheme = {
159-
fontFamily: 'monospace',
160-
};
161-
// tslint:disable-next-line: no-empty-interface
162-
interface MyComponentProps extends StyledProps {
163-
defaulted: string;
164-
}
165-
class MyComponent extends React.Component<MyComponentProps> {
166-
static defaultProps = {
167-
defaulted: 'Hello, World!',
168-
};
169-
render() {
170-
const { className, defaulted } = this.props;
171-
return <div className={className}>Greeted?: {defaulted.startsWith('Hello')}</div>;
172-
}
173-
}
174-
const StyledMyComponent = styled<typeof MyComponent>(MyComponent)(
175-
({ theme }: { theme: MyTheme }) => ({
176-
fontFamily: theme.fontFamily,
177-
}),
178-
);
179-
const renderedMyComponent = (
180-
<React.Fragment>
181-
<MyComponent className="test" />
182-
<StyledMyComponent theme={MyThemeInstance} />
183-
</React.Fragment>
184-
);
185-
}

‎packages/material-ui-styles/src/styled/styled.d.spec.tsx‎ renamed to ‎packages/material-ui-styles/src/styled/styled.spec.tsx‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { styled } from '@material-ui/styles';
2+
import { styled, StyledProps } from '@material-ui/styles';
33

4-
function styledTest() {
4+
function themeTest() {
55
const style = (props: { value: number }) => ({});
66
const styleWithTheme = (props: {
77
value: number;
@@ -46,3 +46,49 @@ function styledTest() {
4646
// error: property 'zIndex' is missing in type ...
4747
<ComponentWithOptionalThemeStyledWithTheme value={1} theme={{ palette: { primary: '#333' } }} />; // $ExpectError
4848
}
49+
50+
function acceptanceTest() {
51+
const StyledButton = styled('button')({
52+
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
53+
borderRadius: 3,
54+
border: 0,
55+
color: 'white',
56+
height: 48,
57+
padding: '0 30px',
58+
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
59+
});
60+
const renderedStyledButton = <StyledButton classes={{ root: 'additional-root-class' }} />;
61+
// $ExpectError
62+
const nonExistingClassKey = <StyledButton classes={{ notRoot: 'additional-root-class' }} />;
63+
64+
interface MyTheme {
65+
fontFamily: string;
66+
}
67+
const MyThemeInstance: MyTheme = {
68+
fontFamily: 'monospace',
69+
};
70+
// tslint:disable-next-line: no-empty-interface
71+
interface MyComponentProps extends StyledProps {
72+
defaulted: string;
73+
}
74+
class MyComponent extends React.Component<MyComponentProps> {
75+
static defaultProps = {
76+
defaulted: 'Hello, World!',
77+
};
78+
render() {
79+
const { className, defaulted } = this.props;
80+
return <div className={className}>Greeted?: {defaulted.startsWith('Hello')}</div>;
81+
}
82+
}
83+
const StyledMyComponent = styled<typeof MyComponent>(MyComponent)(
84+
({ theme }: { theme: MyTheme }) => ({
85+
fontFamily: theme.fontFamily,
86+
}),
87+
);
88+
const renderedMyComponent = (
89+
<React.Fragment>
90+
<MyComponent className="test" />
91+
<StyledMyComponent theme={MyThemeInstance} />
92+
</React.Fragment>
93+
);
94+
}

‎packages/material-ui-styles/test/IsEmptyInterface.spec.ts‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎packages/material-ui-types/index.d.ts‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -44,41 +44,3 @@ export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof
4444
* @internal
4545
*/
4646
export type Overwrite<T, U> = Omit<T, keyof U> & U;
47-
48-
/**
49-
* Returns true if T is any, otherwise false
50-
*/
51-
// https://stackoverflow.com/a/49928360/3406963 without generic branch types
52-
export type IsAny<T> = 0 extends (1 & T) ? true : false;
53-
54-
export type Or<A, B, C = false> = A extends true
55-
? true
56-
: B extends true
57-
? true
58-
: C extends true
59-
? true
60-
: false;
61-
62-
export type And<A, B, C = true> = A extends true
63-
? B extends true
64-
? C extends true
65-
? true
66-
: false
67-
: false
68-
: false;
69-
70-
/**
71-
* @internal
72-
*
73-
* check if a type is `{}`
74-
*
75-
* 1. false if the given type has any members
76-
* 2. false if the type is `object` which is the only other type with no members
77-
* {} is a top type so e.g. `string extends {}` but not `string extends object`
78-
* 3. false if the given type is `unknown`
79-
*/
80-
export type IsEmptyInterface<T> = And<
81-
keyof T extends never ? true : false,
82-
string extends T ? true : false,
83-
unknown extends T ? false : true
84-
>;

‎packages/material-ui/src/styles/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export {
77
} from './createPalette';
88
export { default as createStyles } from './createStyles';
99
export { TypographyStyle } from './createTypography';
10-
export { default as makeStyles, StylesHook } from './makeStyles';
10+
export { default as makeStyles } from './makeStyles';
1111
export { default as responsiveFontSizes } from './responsiveFontSizes';
1212
export { ComponentsPropsList } from './props';
1313
export * from './transitions';

‎packages/material-ui/src/styles/makeStyles.d.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { Theme as DefaultTheme } from './createMuiTheme';
2-
import { Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
3-
import { StylesHook } from '@material-ui/styles/makeStyles';
2+
import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
3+
44
import { Omit } from '@material-ui/types';
55

6+
/**
7+
* `makeStyles` where the passed `styles` do not depend on props
8+
*/
9+
export default function makeStyles<Theme = DefaultTheme, ClassKey extends string = string>(
10+
style: Styles<Theme, {}, ClassKey>,
11+
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
12+
): (props?: any) => ClassNameMap<ClassKey>;
13+
/**
14+
* `makeStyles` where the passed `styles` do depend on props
15+
*/
616
export default function makeStyles<
717
Theme = DefaultTheme,
818
Props extends {} = {},
919
ClassKey extends string = string
1020
>(
1121
styles: Styles<Theme, Props, ClassKey>,
1222
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
13-
): StylesHook<Styles<Theme, Props, ClassKey>>;
14-
15-
export { StylesHook };
23+
): (props: Props) => ClassNameMap<ClassKey>;

0 commit comments

Comments
 (0)