From e53121cd900d91409117bd6d19c3de6376917bbd Mon Sep 17 00:00:00 2001 From: jeff Date: Thu, 7 Jul 2016 08:33:17 -0700 Subject: [PATCH 1/4] Added type definition for react-flexr --- react-flexr/react-flexr-tests.tsx | 106 ++++++++++++++++++++++++++++++ react-flexr/react-flexr.d.ts | 59 +++++++++++++++++ 2 files changed, 165 insertions(+) create mode 100644 react-flexr/react-flexr-tests.tsx create mode 100644 react-flexr/react-flexr.d.ts diff --git a/react-flexr/react-flexr-tests.tsx b/react-flexr/react-flexr-tests.tsx new file mode 100644 index 0000000000..619687097d --- /dev/null +++ b/react-flexr/react-flexr-tests.tsx @@ -0,0 +1,106 @@ +/// +/// + +import * as React from 'react'; +import * as ReactDOMServer from "react-dom/server"; +import { Grid, Cell, findMatch, setBreakpoints, findBreakpoints, getCurrentBreakpoints, optimizedResize, palm, lap, portable, desk } from 'react-flexr'; + +class Example extends React.Component { + render() { + return ( + + 1/3 + 1/3 + 1/3 + + ); + } +} + +class Example2 extends React.Component { + render() { + return ( + + + Fills Half + + + + Fills Rest.. (Yay for Flexbox) + + + + Fills 150px on lap and 200px everywhere else + + + + Fills a quarter on lap and half everywhere else + + + + Fills a quarter + + + + Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else + + + + Hidden on palm, half width otherwise + + + ); + } +} + +class App1 extends React.Component { + render() { + const isPalm = findMatch('palm'); + + if (isPalm) console.log( 'only logged in palm' ); + + return ( +
+

Only visible in palm:

+ { isPalm + ?

Palm

+ : null } + +

Allows Multiple Matches

+ { findMatch('desk', 'lap') + ?

Lap or Desk

+ : null } +
+ ); + } +} + +const isMobile = /iP(hone|od)|Mobile/; +function textFxn(req, res) { + if ( isMobile.test( req.headers['user-agent'] ) ) { + setBreakpoints(['palm', 'portable']) + } + else { + setBreakpoints(['desk']) + } + const html = ReactDOMServer.renderToString( ); + + res.send( '' + html ); +} + +const breakpoints: string[] | boolean = findBreakpoints(); + +class App2 extends React.Component { + componentDidMount() { + optimizedResize.init( () => { + if ( findBreakpoints() ) { + console.log('New Breakpoints'); + this.forceUpdate(); + } + }); + } +} + +const breakpoints2: string[] = getCurrentBreakpoints(); + +const someStrings: string[] = [palm, lap, portable, desk]; diff --git a/react-flexr/react-flexr.d.ts b/react-flexr/react-flexr.d.ts new file mode 100644 index 0000000000..ac8bda60ce --- /dev/null +++ b/react-flexr/react-flexr.d.ts @@ -0,0 +1,59 @@ +// Type definitions for react-flexr v2.0.2 +// Project: https://github.com/kodyl/react-flexr +// Definitions by: Jeffery Grajkowski +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare namespace __ReactFlexr { + export import React = __React; + + interface GridProps extends React.Props { + align?: "top" | "center" | "bottom"; + hAlign?: "left" | "center" | "right"; + gutter?: string; + flexCells?: boolean; + } + + export class Grid extends React.Component { + } + + interface CellProps extends React.Props { + align?: "top" | "center" | "bottom"; + gutter?: string; + flex?: boolean; + size?: string | number; + palm?: string | number; + lap?: string | number; + portable?: string | number; + desk?: string | number; + } + + export class Cell extends React.Component { + } + + interface OptimizedResize { + init: (callback: () => void) => void; + } + + export const optimizedResize: OptimizedResize; + + export type ErgonomicType = "palm" | "lap" | "portable" | "desk"; + + export const findMatch: (...arguments: ErgonomicType[]) => boolean; + + export const setBreakpoints: (breakpoints: ErgonomicType[]) => void; + + export const findBreakpoints: () => ErgonomicType[] | boolean; + + export const getCurrentBreakpoints: () => ErgonomicType[]; + + export const palm: string; + export const lap: string; + export const portable: string; + export const desk: string; +} + +declare module "react-flexr" { + export = __ReactFlexr; +} From 7c4fef450c9adbb688462cdb163d3b5c4d8092e5 Mon Sep 17 00:00:00 2001 From: jeff Date: Thu, 7 Jul 2016 08:54:46 -0700 Subject: [PATCH 2/4] Added comments to the d.ts. --- react-flexr/react-flexr.d.ts | 93 ++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) diff --git a/react-flexr/react-flexr.d.ts b/react-flexr/react-flexr.d.ts index ac8bda60ce..3871abee74 100644 --- a/react-flexr/react-flexr.d.ts +++ b/react-flexr/react-flexr.d.ts @@ -9,9 +9,26 @@ declare namespace __ReactFlexr { export import React = __React; interface GridProps extends React.Props { + /** + * Vertical Align Sub Cells: top, center, bottom + */ align?: "top" | "center" | "bottom"; + + /** + * Horizontal Align Sub Cells: left, center, right + */ hAlign?: "left" | "center" | "right"; + + /** + * Override default gutter: '1em', '5%', '10px', etc. + * Propagates downwards. Cells inside this Grid component + * will use the same gutter. + */ gutter?: string; + + /** + * All sub cells will be full height. + */ flexCells?: boolean; } @@ -19,19 +36,59 @@ declare namespace __ReactFlexr { } interface CellProps extends React.Props { + /** + * Vertical Align This Cell: top, center, bottom + */ align?: "top" | "center" | "bottom"; + + /** + * Override default gutter: '1em', '5%', '10px', etc. + */ gutter?: string; + + /** + * Cell will be full height. + */ flex?: boolean; + + /** + * Takes a fraction. e.g. 1/6 + */ size?: string | number; + + /** + * Like size, but only for palm devices. + * Accepts 'hidden' as well. + */ palm?: string | number; + + /** + * Like size, but only for lap devices. + * Accepts 'hidden' as well. + */ lap?: string | number; + + /** + * Like size, but only for ( palm + lap ) devices. + * Accepts 'hidden' as well. + */ portable?: string | number; + + /** + * Like size, but only for desk devices. + * Accepts 'hidden' as well. + */ desk?: string | number; } export class Cell extends React.Component { } + /** + * Simple resize event throttler. Usefull for force updating when the + * app have been resized. For best performance, use it in your main + * app component in the componentDidMount life cycle. + */ interface OptimizedResize { init: (callback: () => void) => void; } @@ -40,17 +97,53 @@ declare namespace __ReactFlexr { export type ErgonomicType = "palm" | "lap" | "portable" | "desk"; + /** + * The internal function that Flexr uses to check which ergonomic + * state it's currently in. It's really useful if you have components + * outside the grid, that you want to show/hide/manipulate passed properties + * or stuff in your lifecycle hooks. + */ export const findMatch: (...arguments: ErgonomicType[]) => boolean; + /** + * It's posible to force flexr to be in a specific ergonomic state. This is + * primarily usefull when rendering on the server. E.g. looking at the user + * agent string on rendering the app in palm/portable if it's an iOS/iPhone + * or lap/portable if iOS/iPad. + */ export const setBreakpoints: (breakpoints: ErgonomicType[]) => void; + /** + * Force flexr to find the current breakpoints. Returns an array of the + * current breakpoints that flexr matches in. If they haven't changed since + * the last time findBreakpoints() was called, false will be returned. Use + * in combination with optimizedResize. + */ export const findBreakpoints: () => ErgonomicType[] | boolean; + /** + * Returns an array of current breakpoints. + */ export const getCurrentBreakpoints: () => ErgonomicType[]; + /** + * The ergonomic breakpoint media query that flexr uses internally. + */ export const palm: string; + + /** + * The ergonomic breakpoint media query that flexr uses internally. + */ export const lap: string; + + /** + * The ergonomic breakpoint media query that flexr uses internally. + */ export const portable: string; + + /** + * The ergonomic breakpoint media query that flexr uses internally. + */ export const desk: string; } From 015f48d34469e3ee64eeab0d7526ef8d9943289f Mon Sep 17 00:00:00 2001 From: jeff Date: Thu, 7 Jul 2016 08:59:30 -0700 Subject: [PATCH 3/4] Fixing compilation with --noImplicitAny flag. --- react-flexr/react-flexr-tests.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-flexr/react-flexr-tests.tsx b/react-flexr/react-flexr-tests.tsx index 619687097d..f35a849512 100644 --- a/react-flexr/react-flexr-tests.tsx +++ b/react-flexr/react-flexr-tests.tsx @@ -76,7 +76,7 @@ class App1 extends React.Component { } const isMobile = /iP(hone|od)|Mobile/; -function textFxn(req, res) { +function textFxn(req: any, res: any): void { if ( isMobile.test( req.headers['user-agent'] ) ) { setBreakpoints(['palm', 'portable']) } From 47d7f3778be663970eed3bfaae9237269b9ecdd5 Mon Sep 17 00:00:00 2001 From: jeff Date: Fri, 8 Jul 2016 12:36:43 -0700 Subject: [PATCH 4/4] Fixed inconsistent quote usage. --- react-flexr/react-flexr-tests.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/react-flexr/react-flexr-tests.tsx b/react-flexr/react-flexr-tests.tsx index f35a849512..3d7c155386 100644 --- a/react-flexr/react-flexr-tests.tsx +++ b/react-flexr/react-flexr-tests.tsx @@ -1,9 +1,9 @@ /// /// -import * as React from 'react'; +import * as React from "react"; import * as ReactDOMServer from "react-dom/server"; -import { Grid, Cell, findMatch, setBreakpoints, findBreakpoints, getCurrentBreakpoints, optimizedResize, palm, lap, portable, desk } from 'react-flexr'; +import { Grid, Cell, findMatch, setBreakpoints, findBreakpoints, getCurrentBreakpoints, optimizedResize, palm, lap, portable, desk } from "react-flexr"; class Example extends React.Component { render() { @@ -21,7 +21,7 @@ class Example2 extends React.Component { render() { return ( - + Fills Half @@ -37,15 +37,15 @@ class Example2 extends React.Component { Fills a quarter on lap and half everywhere else - + Fills a quarter - + Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else - + Hidden on palm, half width otherwise @@ -55,9 +55,9 @@ class Example2 extends React.Component { class App1 extends React.Component { render() { - const isPalm = findMatch('palm'); + const isPalm = findMatch("palm"); - if (isPalm) console.log( 'only logged in palm' ); + if (isPalm) console.log( "only logged in palm" ); return (
@@ -67,7 +67,7 @@ class App1 extends React.Component { : null }

Allows Multiple Matches

- { findMatch('desk', 'lap') + { findMatch("desk", "lap") ?

Lap or Desk

: null }
@@ -77,15 +77,15 @@ class App1 extends React.Component { const isMobile = /iP(hone|od)|Mobile/; function textFxn(req: any, res: any): void { - if ( isMobile.test( req.headers['user-agent'] ) ) { - setBreakpoints(['palm', 'portable']) + if ( isMobile.test( req.headers["user-agent"] ) ) { + setBreakpoints(["palm", "portable"]) } else { - setBreakpoints(['desk']) + setBreakpoints(["desk"]) } const html = ReactDOMServer.renderToString( ); - res.send( '' + html ); + res.send( "" + html ); } const breakpoints: string[] | boolean = findBreakpoints(); @@ -94,7 +94,7 @@ class App2 extends React.Component { componentDidMount() { optimizedResize.init( () => { if ( findBreakpoints() ) { - console.log('New Breakpoints'); + console.log("New Breakpoints"); this.forceUpdate(); } });