mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 19:07:08 +00:00
Merge pull request #19004 from iRoachie/react-native-material-ui
Definitions for react-native-material-ui
This commit is contained in:
Eloy Durán
GitHub
commit
c5d04fb2d5
657
types/react-native-material-ui/index.d.ts
vendored
Normal file
657
types/react-native-material-ui/index.d.ts
vendored
Normal file
@ -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;
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
24
types/react-native-material-ui/tsconfig.json
Normal file
24
types/react-native-material-ui/tsconfig.json
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
1
types/react-native-material-ui/tslint.json
Normal file
1
types/react-native-material-ui/tslint.json
Normal file
@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Loading…
Reference in New Issue
Block a user