kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-05-13 12:37:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #28454 from dborysov/master

Browse Source 
withBreakpoints HOC injects `breakpoints` prop
This commit is contained in:
Armando Aguirre
2018-08-28 13:08:05 -07:00
committed by GitHub
parent b9a7dbf727 38428c1494
commit 88889aab7f
2 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
types/hedron/hedron-tests.tsx
View File

@@ -4,7 +4,29 @@ import * as hedron from 'hedron';
<hedron.BreakpointProvider breakpoints={{ lg: 1, md: 2 }}>
<hedron.Page debug fluid tagName="div" width="10px">
<hedron.Row debug tagName="div">
<hedron.Column debug divisions={3} fluid lg={3} smShift={2}>test</hedron.Column>
<hedron.Column debug divisions={3} fluid lg={3} smShift={2}>
test
</hedron.Column>
</hedron.Row>
</hedron.Page>
</hedron.BreakpointProvider>;
// withBreakpoints test
interface Props {
numeric: number;
str: string;
}
class ComponentWithBreakpoints extends React.Component<Props & hedron.BreakpointsProps> {
render() {
// `breakpoints` prop is accessible in component
this.props.breakpoints;
return null;
}
}
const WithBreakpoints = hedron.withBreakpoints(ComponentWithBreakpoints);
// breakpoints props is not needed
<WithBreakpoints numeric={42} str='str' />;

14
types/hedron/index.d.ts vendored
View File

@@ -150,8 +150,14 @@ export interface HiddenProps {
lg?: boolean;
}
export interface BreakpointProviderProps {
breakpoints: { sm?: number; md?: number; lg?: number };
export interface Breakpoints {
sm?: number;
md?: number;
lg?: number;
}
export interface BreakpointsProps {
breakpoints: Breakpoints;
}
export class Column extends React.Component<ColumnProps & React.HTMLProps<HTMLElement>> {}
@@ -159,8 +165,8 @@ export class Page extends React.Component<PageProps & React.HTMLProps<HTMLElemen
export class Row extends React.Component<RowProps & React.HTMLProps<HTMLElement>> {}
export class Hidden extends React.Component<HiddenProps & React.HTMLProps<HTMLElement>> {}
export class BreakpointProvider extends React.Component<
BreakpointProviderProps & React.HTMLProps<HTMLElement>
BreakpointsProps & React.HTMLProps<HTMLElement>
> {}
export function withBreakpoints<T>(
wrappedComponent: React.ComponentClass<T>
wrappedComponent: React.ComponentClass<T & BreakpointsProps>
): React.ComponentClass<T>;