Adding react-onsenui

types/react-onsenui/index.d.ts

@@ -0,0 +1,314 @@
+// Type definitions for React OnSenui (react-onsenui) 2.1
+// Project: https://onsen.io/v2/docs/guide/react/
+// Definitions by: Ozytis <https://ozytis.fr>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+import { Component } from 'react';
+
+declare interface Modifiers_string {
+    default?: string,
+    material?: string
+}
+
+declare interface Modifiers_number {
+    default?: number,
+    material?: number
+}
+
+declare interface AnimationOptions {
+    duration?: number,
+    delay?: number,
+    timing?: string
+}
+
+/*** splitter ***/
+declare class SplitterSide extends Component<{
+    side?: "left" | "right",
+    collapse?: "portrait" | "landscape" | boolean,
+    isOpen?: boolean,
+    onOpen?: (e?: Event) => void,
+    onPreOpen?: (e?: Event) => void,
+    onPreClose?: (e?: Event) => void,
+    onModeChange?: (e?: Event) => void,
+    onClose?: (e?: Event) => void,
+    isSwipeable?: boolean,
+    swipeTargetWidth?: number,
+    width?: number,
+    animation?: "overlay" | "default"
+    animationOptions?: AnimationOptions,
+    openThreshold?: number,
+    mode?: "collapse" | "split"
+}, any>{ }
+
+
+declare class SplitterContent extends Component<{}, any> { }
+
+declare class Splitter extends Component<{}, any> { }
+
+/*** toolbar ***/
+
+declare class Toolbar extends Component<{}, any>{}
+
+
+declare class BottomToolbar extends Component<{
+    modifier?: string
+}, any>{}
+
+
+declare class ToolbarButton extends Component<{
+    modifier?: string,
+    disabled?: boolean,
+    onClick?: (e?: Event) => void
+}, any>{}
+
+/*** icon ***/
+declare class Icon extends Component<{
+    modifier?: string,
+    icon?: string | Modifiers_string,
+    size?: number | Modifiers_number,
+    rotate?: 90 | 180 | 270,
+    fixedWidth?: boolean,
+    spin?: boolean
+}, any>{}
+
+/*** page ***/
+
+declare class Page extends Component<{
+    contentStyle?: any,
+    modifier?: string,
+    renderModal?: () => void,
+    renderToolbar?: () => void,
+    renderBottomToolbar?: () => void,
+    renderFixed?: () => void,
+    onInit?: () => void,
+    onShow?: () => void,
+    onHide?: () => void
+}, any>{}
+
+/*** Grid ***/
+declare class Col extends Component<{
+    verticalAlign?: "top" | "bottom" | "center",
+    width?: string
+}, any>{}
+
+declare class Row extends Component<{
+    verticalAlign?: "top" | "bottom" | "center",
+}, any>{}
+
+/*** Navigation ***/
+declare class BackButton extends Component<{
+    modifier?: string,
+    onClick?: (navigator: Navigator) => void
+}, any>{}
+
+declare class Navigator extends Component<{
+    renderPage: () => any,
+    initialRouteStack?: string[],
+    initialRoute?: any,
+    onPrePush?: () => void,
+    onPostPush?: () => void,
+    onPrePop?: () => void,
+    onPostPop?: () => void,
+    animation?: "slide" | "lift" | "fade" | "none" | string,
+    animationOptions?: AnimationOptions
+}, any>{
+    resetPage(route: any, options: any): void;
+    resetPageStack(route: any, options: any): void;
+    pushPage(route: any, options: any): void;
+    popPage(route: any, options: any): void;
+}
+
+/*** Carousel ***/
+declare class Carousel extends Component<{
+    direction?: "horizontal" | "vertical",
+    fullscreen?: boolean,
+    overscrollable?: boolean,
+    centered?: boolean,
+    itemWidth?: number,
+    itemHeight?: number,
+    autoScroll?: boolean,
+    autoScrollRatio?: number,
+    swipeable?: boolean,
+    disabled?: boolean,
+    index?: number,
+    autoRefresh?: boolean,
+    onPostChange?: () => void,
+    onRefresh?: () => void,
+    onOverscroll?: () => void
+    animationOptions?: AnimationOptions
+}, any>{}
+
+declare class CarouselItem extends Component<{
+    modifier: string
+}, any>{}
+
+/*** AlertDialog ***/
+declare class AlertDialog extends Component<{
+    onCancel?: () => void,
+    isOpen?: boolean,
+    isCancelable?: boolean,
+    isDisabled?: boolean,
+    animation?: "none" | "default",
+    modifier?: string,
+    maskColor?: string,
+    animationOptions?: AnimationOptions,
+    onPreShow?: () => void,
+    onPostShow?: () => void,
+    onPreHide?: () => void,
+    onPostHide?: () => void,
+}, any>{}
+
+declare class Dialog extends Component<{
+    onCancel?: () => void,
+    isOpen?: boolean,
+    isCancelable?: boolean,
+    isDisabled?: boolean,
+    animation?: "none" | "default",
+    modifier?: string,
+    maskColor?: string,
+    animationOptions?: AnimationOptions,
+    onPreShow?: () => void,
+    onPostShow?: () => void,
+    onPreHide?: () => void,
+    onPostHide?: () => void,
+}, any>{}
+
+declare class Modal extends Component<{
+    animation?: "fade" | "none",
+    animationOptions?: AnimationOptions
+    onShow?: () => void,
+    onHide?: () => void,
+    isOpen?: boolean
+}, any>{}
+
+declare class Popover extends Component<{
+    getTarget?: () => Component<any, any> | HTMLElement,
+    onCancel?: () => void,
+    isOpen?: boolean,
+    isCancelable?: boolean,
+    isDisabled?: boolean,
+    animation?: "none" | "default",
+    modifier?: string,
+    maskColor?: string,
+    animationOptions?: AnimationOptions,
+    onPreShow?: () => void,
+    onPostShow?: () => void,
+    onPreHide?: () => void,
+    onPostHide?: () => void,
+}, any>{}
+
+declare class ProgressBar extends Component<{
+    modifier?: string,
+    value?: number,
+    secondaryValue?: boolean,
+    intermediate?: boolean,
+}, any> {}
+
+declare class ProgressCircular extends Component<{
+    modifier?: string,
+    value?: number,
+    secondaryValue?: boolean,
+    intermediate?: boolean,
+}, any>{}
+
+declare class Ripple extends Component<{
+    color?: string,
+    background?: string,
+    disabled?: boolean,
+}, any>{}
+
+/*** Forms ***/
+declare class Fab extends Component<{
+    modifier?: string,
+    ripple?: boolean,
+    position?: string,
+    disabled?: boolean,
+    onClick?: () => void,
+}, any>{}
+
+declare class Button extends Component<{
+    modifier?: string,
+    disabled?: boolean,
+    ripple?: boolean,
+    onClick?: (e?: Event) => void
+}, any>{}
+
+declare class Input extends Component<{
+    modifier?: string,
+    disabled?: boolean,
+    onChange?: (e: Event) => void,
+    value?: string,
+    checked?: boolean,
+    placehoder?: string,
+    type?: string,
+    inputId?: string,
+    float?: boolean,
+}, any> {}
+
+declare class Range extends Component<{
+    modifier?: string,
+    onChange?: (e: Event) => void,
+    value?: number,
+    disabled?: boolean,
+}, any>{}
+
+declare class Switch extends Component<{
+    onChange?: (e: Event) => void,
+    checked?: boolean,
+    disabled?: boolean,
+    inputId?: string
+}, any>{}
+
+/**
+* Tabs
+*/
+
+declare class Tab extends Component<{}, any>{ }
+
+declare class TabActive extends Component<{}, any>{ }
+
+declare class TabInactive extends Component<{}, any>{ }
+
+declare class Tabbar extends Component<{
+    index?: number,
+    renderTabs?: () => any,
+    position?: "bottom" | "top" | "auto",
+    animation: "none" | "slide" | "fade",
+    animationOptions?: AnimationOptions,
+    onPreChange?: () => void,
+    onPostChange?: () => void,
+    onReactive?: () => void,
+}, any> { }
+
+
+/**
+* Lists
+*/
+
+declare class LazyList extends Component<{
+    modifier?: string,
+    length?: number,
+    renderRow: (rowIndex: number) => any,
+    calculateItemHeight: (rowIndex: number) => any,
+}, any>{ }
+
+declare class List extends Component<{
+    modifier?: string,
+    dataSource?: string[],
+    renderRow?: () => void,
+    renderHeader?: () => void,
+    renderFooter?: () => void,
+}, any>{}
+
+declare class ListHeader extends Component<{
+    modifier?: string,
+}, any>{}
+
+declare class ListItem extends Component<{
+    modifier?: string,
+    tappable?: boolean,
+    tapBackgroundColor?: string,
+    lockOnDrag?: boolean,
+}, any>{}
+
+

types/react-onsenui/react-onsenui-tests.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { SplitterSide, Splitter, SplitterContent, Page } from "react-onsenui";
+
+class AppState {
+    isOpen: boolean = false;
+}
+
+interface AppProps {
+}
+
+export class App extends React.Component<AppProps, AppState>{
+
+    constructor(props?: AppProps) {
+        super(props);
+        this.state = new AppState();
+    }
+
+    hide() {
+        this.setState({ isOpen: false });
+    }
+
+    render() {
+
+        return (
+            <Splitter>
+                <SplitterSide
+                    side='left'
+                    collapse={true}
+                    isOpen={this.state.isOpen}
+                    onClose={() => this.hide()}
+                    isSwipeable={true}>
+                    <Page>
+                        Menu content
+					</Page>
+                </SplitterSide>
+                <SplitterContent>
+                    <Page>
+                        Test page
+					</Page>
+                </SplitterContent>
+            </Splitter>
+        );
+    }
+
+}
+
+
+ReactDOM.render(<App />, document.getElementById('react-body'));

types/react-onsenui/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "experimentalDecorators": true,
+    "baseUrl": "../",
+    "typeRoots": [ "../" ],
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "types": []
+  },
+  "files": [
+    "index.d.ts",
+    "react-onsenui-tests.tsx"
+  ]
+}

types/react-onsenui/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }