From 1c5b20f0540af0fe974943acb244e4ec66096bdb Mon Sep 17 00:00:00 2001
From: Kyle Roach <kroach.work@gmail.com>
Date: Fri, 21 Jul 2017 14:40:36 -0400
Subject: [PATCH] Defintions for react-native-material-ui

---
 types/react-native-material-ui/index.d.ts     | 657 ++++++++++++++++++
 .../react-native-material-ui-tests.tsx        | 115 +++
 types/react-native-material-ui/tsconfig.json  |  24 +
 types/react-native-material-ui/tslint.json    |   1 +
 4 files changed, 797 insertions(+)
 create mode 100644 types/react-native-material-ui/index.d.ts
 create mode 100644 types/react-native-material-ui/react-native-material-ui-tests.tsx
 create mode 100644 types/react-native-material-ui/tsconfig.json
 create mode 100644 types/react-native-material-ui/tslint.json

diff --git a/types/react-native-material-ui/index.d.ts b/types/react-native-material-ui/index.d.ts
new file mode 100644
index 0000000000..93eb00a1ab
--- /dev/null
+++ b/types/react-native-material-ui/index.d.ts
@@ -0,0 +1,657 @@
+// Type definitions for react-native-material-ui 1.12
+// Project: https://github.com/xotahal/react-native-material-ui
+// Definitions by: Kyle Roach <https://github.com/iRoachie>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import { Component } from 'react';
+import { ViewStyle, TextStyle, Image } from 'react-native';
+
+export interface ActionButtonProps {
+    actions?: string[] | JSX.Element[] | Array<{
+        icon: string | JSX.Element
+        label: string
+        name: string
+    }>;
+    hidden?: boolean;
+    icon?: string;
+    style?: {
+        container?: ViewStyle
+        icon?: TextStyle
+    };
+    transition?: 'toolbar' | 'speedDial';
+    onPress?(): void;
+    onLongPress?(): void;
+}
+
+/**
+ * Action Button
+ *
+ * @export
+ * @class ActionButton
+ * @extends {Component<ActionButtonProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/ActionButton/ActionButton.react.js
+ */
+export class ActionButton extends Component<ActionButtonProps, any> {}
+
+export interface AvatarProps {
+    image?: Image;
+    icon?: string;
+    iconColor?: string;
+    iconSize?: number;
+    text?: string;
+    size?: number;
+    style?: {
+        container?: ViewStyle
+        content?: ViewStyle
+    };
+}
+
+/**
+ * Avatar
+ *
+ * @export
+ * @class Avatar
+ * @extends {Component<AvatarProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Avatar/Avatar.react.js
+ */
+export class Avatar extends Component<AvatarProps, any> {}
+
+export interface BadgeProps {
+    children?: JSX.Element;
+    text?: string;
+    icon?: string | { name: string, color: string, size: string };
+    size?: number;
+    stroke?: number;
+    accent?: boolean;
+    style?: {
+        container?: ViewStyle
+        content?: ViewStyle
+        strokeContainer?: ViewStyle
+    };
+}
+
+/**
+ * Badge
+ *
+ * @export
+ * @class Badge
+ * @extends {Component<BadgeProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Badge/Badge.react.js
+ */
+export class Badge extends Component<BadgeProps, any> {}
+
+export interface BottomNavigationProps {
+    active?: string;
+    children: JSX.Element | JSX.Element[];
+    hidden?: boolean;
+    style?: {
+        container?: ViewStyle
+    };
+}
+
+/**
+ * Bottom Navigation
+ *
+ * @export
+ * @class BottomNavigation
+ * @extends {Component<BottomNavigationProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/BottomNavigation/BottomNavigation.react.js
+ */
+export class BottomNavigation extends Component<BottomNavigationProps, any> {}
+
+export interface BottomNavigationAction {
+    icon: JSX.Element | string;
+    label?: string;
+    key?: string;
+    active: boolean;
+    disabled?: boolean;
+    style?: {
+        container?: ViewStyle
+        active?: TextStyle
+        disabled?: TextStyle
+    };
+    onPress?(): void;
+}
+
+export namespace BottomNavigation {
+    class Action extends Component<BottomNavigationAction, any> {}
+}
+
+export interface ButtonProps {
+    text: string;
+    primary?: boolean;
+    accent?: boolean;
+    disabled?: boolean;
+    raised?: boolean;
+    upperCase?: boolean;
+    icon?: string | JSX.Element;
+    style?: {
+        container?: ViewStyle
+        text?: TextStyle
+    };
+    onPress?(): void;
+    onLongPress?(): void;
+}
+
+/**
+ * Button
+ *
+ * @export
+ * @class Button
+ * @extends {Component<ButtonProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Button/Button.react.js
+ */
+export class Button extends Component<ButtonProps, any> {}
+
+export interface CardProps {
+    children?: JSX.Element;
+    style?: {
+        container?: ViewStyle
+    };
+    onPress?(): void;
+}
+
+/**
+ * Card
+ *
+ * @export
+ * @class Card
+ * @extends {Component<CardProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Card/Card.react.js
+ */
+export class Card extends Component<CardProps, any> {}
+
+export interface CheckBoxProps {
+    label: string;
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    uncheckedIcon?: string;
+    checkedIcon?: string;
+    style?: {
+        icon?: ViewStyle
+        container?: ViewStyle
+        label?: TextStyle
+    };
+    onCheck(checked: boolean): void;
+}
+
+/**
+ * Checkbox
+ *
+ * @export
+ * @class Checkbox
+ * @extends {Component<CheckBoxProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Checkbox/Checkbox.react.js
+ */
+export class Checkbox extends Component<CheckBoxProps, any> {}
+
+export interface DialogProps {
+    children: JSX.Element | JSX.Element[];
+    style?: {
+        container?: ViewStyle
+    };
+    onPress?(): void;
+}
+
+/**
+ * Dialog
+ *
+ * @export
+ * @class Dialog
+ * @extends {Component<DialogProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Dialog/Dialog.react.js
+ */
+export class Dialog extends Component<DialogProps, any> {}
+
+export interface DialogTitleProps {
+    children: JSX.Element;
+    style?: {
+        titleContainer?: ViewStyle
+        titleText?: TextStyle
+    };
+}
+
+export interface DialogContentProps {
+    children: JSX.Element;
+    style?: {
+        contentContainer?: ViewStyle
+    };
+}
+
+export interface DialogActionsProps {
+    children: JSX.Element;
+    style?: {
+        actionsContainer?: ViewStyle
+    };
+}
+
+export namespace Dialog {
+    class Title extends Component<DialogTitleProps, any> {}
+    class Content extends Component<DialogContentProps, any> {}
+    class Actions extends Component<DialogActionsProps, any> {}
+}
+
+export interface DialogDefaultActionsProps {
+    actions: string[];
+    style?: {
+        defaultActionsContainer?: ViewStyle
+    };
+    onActionPress(action: string): void;
+}
+
+/**
+ * Dialog Default Actions
+ *
+ * @export
+ * @class DialogDefaultActions
+ * @extends {Component<DialogDefaultActionsProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Dialog/DialogDefaultActions.react.js
+ */
+export class DialogDefaultActions extends Component<DialogDefaultActionsProps, any> {}
+
+export interface DialogStackedActionsProps {
+    actions: string[];
+    style?: {
+        stackedActionsContainer?: ViewStyle
+    };
+    onActionPress(action: string): void;
+}
+
+/**
+ * Dialog Stacked Actions
+ *
+ * @export
+ * @class DialogStackedActions
+ * @extends {Component<DialogStackedActionsProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Dialog/DialogStackedActions.react.js
+ */
+export class DialogStackedActions extends Component<DialogStackedActionsProps, any> {}
+
+export interface DividerProps {
+    inset?: boolean;
+    style?: {
+        container?: ViewStyle
+    };
+}
+
+/**
+ * Divider;
+ *
+ * @export
+ * @class Divider
+ * @extends {Component<DividerProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Divider/Divider.react.js
+ */
+export class Divider extends Component<DividerProps, any> {}
+
+export interface DrawerProps {
+    children: JSX.Element;
+    style?: {
+        container?: ViewStyle
+    };
+}
+
+export interface DrawerHeaderProps {
+    image?: Image[];
+    backgroundColor?: string;
+    children?: JSX.Element;
+    style?: {
+        container?: ViewStyle
+        contentContainer?: ViewStyle
+    };
+}
+
+export interface DrawerSectionItem {
+    icon?: string;
+    value?: string | JSX.Element;
+    label?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onPress?(): void;
+    onLongPress?(): void;
+}
+
+export interface DrawerSectionProps {
+    title?: string;
+    items: DrawerSectionItem[];
+    divider?: boolean;
+    style?: {
+        container?: ViewStyle
+        item?: ViewStyle
+        subheader?: TextStyle
+        icon?: ViewStyle
+        value?: TextStyle
+        label?: TextStyle
+    };
+}
+
+export interface DrawerHeaderAccountProps {
+    avatar?: JSX.Element;
+    accounts?: Array<{
+        avatar?: JSX.Element
+        onPress?(): void
+    }>;
+    footer?: {};
+    style?: {
+        container?: ViewStyle
+        accountContainer?: ViewStyle
+        topContainer?: ViewStyle
+        avatarsContainer?: ViewStyle
+        activeAvatarContainer?: ViewStyle
+        inactiveAvatarContainer?: ViewStyle
+    };
+}
+
+/**
+ * Drawer
+ *
+ * @export
+ * @class Drawer
+ * @extends {Component<DrawerProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Drawer/Drawer.react.js
+ */
+export class Drawer extends Component<DrawerProps, any> {}
+export namespace Drawer {
+    class Header extends Component<DrawerHeaderProps, any> {}
+    namespace Header {
+        class Account extends Component<DrawerHeaderAccountProps, any> {}
+    }
+    class Section extends Component<DrawerSectionProps, any> {}
+}
+
+export interface IconProps {
+    name: string;
+    style?: ViewStyle | ViewStyle[];
+    size?: number;
+    color?: string;
+}
+
+/**
+ * Icon
+ *
+ * @export
+ * @class Icon
+ * @extends {Component<IconProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Icon/index.js
+ */
+export class Icon extends Component<IconProps, any> {}
+
+export interface IconToggleProps {
+    color?: string;
+    underlayColor?: string;
+    maxOpacity?: number;
+    percent?: number;
+    disabled?: boolean;
+    size?: number;
+    name: string;
+    children?: JSX.Element;
+    style?: {
+        container?: ViewStyle
+        icon?: ViewStyle
+    };
+    onPress?(): void;
+}
+
+/**
+ * Icon Toggle
+ *
+ * @export
+ * @class IconToggle
+ * @extends {Component<IconToggleProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/IconToggle/IconToggle.react.js
+ */
+export class IconToggle extends Component<IconToggleProps, any> {}
+
+export interface ListItemCenterElement {
+    primaryText: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+}
+
+export interface ListItemStyle {
+    container?: ViewStyle;
+    content?: ViewStyle;
+    contentViewContainer?: ViewStyle;
+    leftElementContainer?: ViewStyle;
+    centerElementContainer?: ViewStyle;
+    textViewContainer?: ViewStyle;
+    primaryText?: TextStyle;
+    firstLine?: TextStyle;
+    primaryTextContainer?: ViewStyle;
+    secondaryText?: TextStyle;
+    tertiaryText?: TextStyle;
+    rightElementContainer?: ViewStyle;
+    rightElement?: TextStyle;
+    LeftElement?: TextStyle;
+}
+
+export interface ListItemProps {
+    numberOfLines?: 1 | 2 | 3 | 'dynamic';
+    leftElement?: JSX.Element | string;
+    rightElement?: JSX.Element | string;
+    centerElement: JSX.Element | string | ListItemCenterElement;
+    style?: ListItemStyle;
+    dense?: boolean;
+    divider?: boolean;
+    onPressValue?: any;
+    onPress?(): void;
+    onRightElementPress?(): void;
+}
+
+/**
+ * List Item
+ *
+ * @export
+ * @class ListItem
+ * @extends {Component<ListItemProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/ListItem/ListItem.react.js
+ */
+export class ListItem extends Component<ListItemProps, any> {}
+
+export interface RadioButtonProps {
+    label: string;
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    theme?: string;
+    onSelect(value: string): void;
+}
+
+/**
+ * Radio Button
+ *
+ * @export
+ * @class RadioButton
+ * @extends {Component<RadioButtonProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/RadioButton/RadioButton.react.js
+ */
+export class RadioButton extends Component<RadioButtonProps, any> {}
+
+export interface SubheaderProps {
+    text: string;
+    inset?: boolean;
+    lines?: number;
+    style?: {
+        container?: ViewStyle
+        text?: TextStyle
+    };
+}
+
+/**
+ * Subheader
+ *
+ * @export
+ * @class Subheader
+ * @extends {Component<SubheaderProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Subheader/Subheader.react.js
+ */
+export class Subheader extends Component<SubheaderProps, any> {}
+
+export interface ToolbarStyle {
+    container?: ViewStyle;
+    leftElementContainer?: ViewStyle;
+    leftElement?: TextStyle;
+    centerElementContainer?: ViewStyle;
+    titleText?: TextStyle;
+    rightElementContainer?: ViewStyle;
+    rightElement?: TextStyle;
+}
+
+export interface Searchable {
+    placeholder?: string;
+    autoFocus?: boolean;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    autoCorrect?: boolean;
+    onChangeText?(text: string): void;
+    onSearchClosed?(): void;
+    onSearchPressed?(): void;
+    onSubmitEditing?(): void;
+}
+
+export interface ToolBarRightElement {
+    actions?: Array<JSX.Element | string>;
+    menu?: {icon: string, labels: string[]};
+}
+
+export interface ToolbarProps {
+    isSearchActive?: boolean;
+    size?: number;
+    hidden?: boolean;
+    leftElement?: JSX.Element | string;
+    rightElement?: JSX.Element | string | string[] | ToolBarRightElement;
+    centerElement?: JSX.Element | string;
+    style?: ToolbarStyle;
+    searchable?: Searchable;
+    onPress?(): void;
+    onLeftElementPress?(): void;
+    onRightElementPress?(): void;
+}
+
+/**
+ * Toolbar
+ *
+ * @export
+ * @class Toolbar
+ * @extends {Component<ToolbarProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Toolbar/Toolbar.react.js
+ */
+export class Toolbar extends Component<ToolbarProps, any> {}
+
+export interface SnackbarProps {
+    message: string;
+    visible: boolean;
+    timeout: number;
+    bottomNavigation: boolean;
+    actionText?: string;
+    button?: ButtonProps;
+    style?: {
+        container?: ViewStyle
+        message?: ViewStyle
+    };
+    onRequestClose(): void;
+    onActionPress?(): void;
+}
+
+/**
+ * Snackbar
+ *
+ * @export
+ * @class Snackbar
+ * @extends {Component<SnackbarProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/Snackbar/Snackbar.react.js
+ */
+export class Snackbar extends Component<SnackbarProps, any> {}
+
+export interface RippleFeedbackProps {
+    color?: string;
+    borderless?: boolean;
+    children: JSX.Element;
+}
+
+/**
+ * Ripple Feedback
+ *
+ * @export
+ * @class RippleFeedback
+ * @extends {Component<IRippleFeedback, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/RippleFeedback/RippleFeedback.react.js
+ */
+export class RippleFeedback extends Component<RippleFeedbackProps, any> {}
+
+export interface ThemeProviderProps {
+    uiTheme: {};
+    children: JSX.Element;
+}
+
+/**
+ * ThemeProvider
+ *
+ * @export
+ * @class ThemeProvider
+ * @extends {Component<ThemeProviderProps, any>}
+ * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/styles/ThemeProvider.react.js
+ */
+export class ThemeProvider extends Component<ThemeProviderProps, any> {}
+
+export interface MKColorStatic {
+    Amber: string;
+    Blue: string;
+    BlueGrey: string;
+    Brown: string;
+    Cyan: string;
+    DeepOrange: string;
+    DeepPurple: string;
+    Green: string;
+    Grey: string;
+    Indigo: string;
+    LightBlue: string;
+    LightGreen: string;
+    Lime: string;
+    Orange: string;
+    Pink: string;
+    Purple: string;
+    RGBIndigo: string;
+    RGBPink: string;
+    RGBPurple: string;
+    RGBTeal: string;
+    Red: string;
+    Silver: string;
+    Teal: string;
+    Transparent: string;
+    Yellow: string;
+    default: {
+      Amber: string;
+      Blue: string;
+      BlueGrey: string;
+      Brown: string;
+      Cyan: string;
+      DeepOrange: string;
+      DeepPurple: string;
+      Green: string;
+      Grey: string;
+      Indigo: string;
+      LightBlue: string;
+      LightGreen: string;
+      Lime: string;
+      Orange: string;
+      Pink: string;
+      Purple: string;
+      RGBIndigo: string;
+      RGBPink: string;
+      RGBPurple: string;
+      RGBTeal: string;
+      Red: string;
+      Silver: string;
+      Teal: string;
+      Transparent: string;
+      Yellow: string;
+    };
+    palette_blue_400: string;
+    palette_green_500: string;
+    palette_red_500: string;
+    palette_yellow_600: string;
+  }
+
+export const MKColor: MKColorStatic;
diff --git a/types/react-native-material-ui/react-native-material-ui-tests.tsx b/types/react-native-material-ui/react-native-material-ui-tests.tsx
new file mode 100644
index 0000000000..1e534e0e71
--- /dev/null
+++ b/types/react-native-material-ui/react-native-material-ui-tests.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import {
+    ActionButton,
+    Avatar,
+    ThemeProvider,
+    MKColor,
+    Badge,
+    Button,
+    Card,
+    Checkbox,
+    Dialog,
+    DialogDefaultActions,
+    BottomNavigation
+} from 'react-native-material-ui';
+
+const theme = {
+    palette: {
+        accentColor: MKColor.Amber,
+        primaryColor: MKColor.Indigo,
+    },
+    fontFamily: 'System'
+};
+
+const Example = () =>
+    <ThemeProvider uiTheme={theme}>
+        <View>
+            <ActionButton />
+            <ActionButton icon="done" />
+
+            <Avatar text="A" />
+            <Avatar icon="grade" />
+            <Avatar icon="person" iconColor="blue" />
+            <Avatar icon="history" iconSize={20} />
+            <Avatar icon="mic" size={75} />
+
+            <Badge />
+
+            <Button text="I'm a button" />
+
+            <Card>
+                <Text>Hello world!</Text>
+            </Card>
+
+            <Checkbox label="Select me" value="chicken" onCheck={a => console.log(a)}/>
+        </View>
+    </ThemeProvider>;
+
+const DialogExample = () =>
+    <Dialog>
+        <Dialog.Title>
+            <Text>Hello world</Text>
+        </Dialog.Title>
+
+        <Dialog.Content>
+            <Text>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </Text>
+        </Dialog.Content>
+
+        <Dialog.Actions>
+            <DialogDefaultActions
+                actions={['Dismiss', 'Keep']}
+                onActionPress={() => {}}
+            />
+        </Dialog.Actions>
+    </Dialog>;
+
+class BottomNavigationExample extends React.Component<null, {active: string}> {
+    constructor() {
+        super();
+
+        this.state = {
+            active: 'today'
+        };
+    }
+
+    render() {
+        return (
+            <BottomNavigation active={this.state.active} hidden={false} >
+                <BottomNavigation.Action
+                    key="today"
+                    icon="today"
+                    label="Today"
+                    active={this.state.active === 'today'}
+                    onPress={() => this.setState({ active: 'today' })}
+                />
+
+                <BottomNavigation.Action
+                    key="people"
+                    icon="people"
+                    label="People"
+                    active={this.state.active === 'people'}
+                    onPress={() => this.setState({ active: 'people' })}
+                />
+
+                <BottomNavigation.Action
+                    key="bookmark-border"
+                    icon="bookmark-border"
+                    label="Bookmark"
+                    active={this.state.active === 'bookmark-border'}
+                    onPress={() => this.setState({ active: 'bookmark-border' })}
+                />
+
+                <BottomNavigation.Action
+                    key="settings"
+                    icon="settings"
+                    label="Settings"
+                    active={this.state.active === 'settings'}
+                    onPress={() => this.setState({ active: 'settings' })}
+                />
+            </BottomNavigation>
+        );
+    }
+}
diff --git a/types/react-native-material-ui/tsconfig.json b/types/react-native-material-ui/tsconfig.json
new file mode 100644
index 0000000000..9d206f47b7
--- /dev/null
+++ b/types/react-native-material-ui/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-native-material-ui-tests.tsx"
+    ]
+}
diff --git a/types/react-native-material-ui/tslint.json b/types/react-native-material-ui/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-native-material-ui/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }