Merge pull request #10009 from pushplay/master

Added type definition for react-flexr
2026-08-11 20:40:20 +00:00 · 2016-07-08 15:39:17 -07:00
parent b8df628bfa 47d7f3778b
commit ea054545ee
2 changed files with 258 additions and 0 deletions
@@ -0,0 +1,106 @@
+/// <reference path="react-flexr.d.ts"/>
+/// <reference path="../react/react-dom.d.ts"/>
+
+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<any, any> {
+    render() {
+        return (
+            <Grid>
+                <Cell>1/3</Cell>
+                <Cell>1/3</Cell>
+                <Cell>1/3</Cell>
+            </Grid>
+        );
+    }
+}
+
+class Example2 extends React.Component<any, any> {
+    render() {
+        return (
+            <Grid>
+                <Cell size="6/12">
+                    Fills Half
+                </Cell>
+
+                <Cell>
+                    Fills Rest.. (Yay for Flexbox)
+                </Cell>
+
+                <Cell size={200} lap={150}>
+                    Fills 150px on lap and 200px everywhere else
+                </Cell>
+
+                <Cell size={0.5} lap={0.25}>
+                    Fills a quarter on lap and half everywhere else
+                </Cell>
+
+                <Cell size="3/12">
+                    Fills a quarter
+                </Cell>
+
+                <Cell palm="3/12" lap="1/2">
+                    Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else
+                </Cell>
+
+                <Cell palm="hidden" size="1/2">
+                    Hidden on palm, half width otherwise
+                </Cell>
+            </Grid>
+        );
+    }
+}
+
+class App1 extends React.Component<any, any> {
+    render() {
+        const isPalm = findMatch("palm");
+
+        if (isPalm) console.log( "only logged in palm" );
+
+        return (
+            <div>
+                <h1>Only visible in palm:</h1>
+                { isPalm
+                    ? <h2>Palm</h2>
+                    : null }
+
+                <h1>Allows Multiple Matches</h1>
+                { findMatch("desk", "lap")
+                    ? <h2>Lap or Desk</h2>
+                    : null }
+            </div>
+        );
+    }
+}
+
+const isMobile = /iP(hone|od)|Mobile/;
+function textFxn(req: any, res: any): void {
+    if ( isMobile.test( req.headers["user-agent"] ) ) {
+        setBreakpoints(["palm", "portable"])
+    }
+    else {
+        setBreakpoints(["desk"])
+    }
+    const html = ReactDOMServer.renderToString( <App1 />);
+
+    res.send( "<!doctype html>" + html );
+}
+
+const breakpoints: string[] | boolean = findBreakpoints();
+
+class App2 extends React.Component<any, any> {
+    componentDidMount() {
+        optimizedResize.init( () => {
+            if ( findBreakpoints() ) {
+                console.log("New Breakpoints");
+                this.forceUpdate();
+            }
+        });
+    }
+}
+
+const breakpoints2: string[] = getCurrentBreakpoints();
+
+const someStrings: string[] = [palm, lap, portable, desk];
@@ -0,0 +1,152 @@
+// Type definitions for react-flexr v2.0.2
+// Project: https://github.com/kodyl/react-flexr
+// Definitions by: Jeffery Grajkowski <https://github.com/pushplay>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+declare namespace __ReactFlexr {
+    export import React = __React;
+
+    interface GridProps extends React.Props<Grid> {
+        /**
+         * 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;
+    }
+
+    export class Grid extends React.Component<GridProps, {}> {
+    }
+
+    interface CellProps extends React.Props<Cell> {
+        /**
+         * 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<CellProps, {}> {
+    }
+
+    /**
+     * 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;
+    }
+
+    export const optimizedResize: OptimizedResize;
+
+    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;
+}
+
+declare module "react-flexr" {
+    export = __ReactFlexr;
+}