// Type definitions for react-native-material-kit 0.5 // Project: https://github.com/xinthink/react-native-material-kit // Definitions by: Kyle Roach // Tim Wang // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; import { ViewStyle, TextStyle, TextInputProps, TouchableWithoutFeedbackProps, ViewProps, } from 'react-native'; /////////////////////////////// // COMPONENT STYLES /////////////////////////////// export interface ProgressStyle { backgroundColor?: string; progressColor?: string; bufferColor?: string; } export interface TextFieldStyle { tintColor?: string; highlightColor?: string; textInputStyle?: { color?: string; fontSize?: number; paddingLeft?: number; paddingRight?: number; }; } export interface SpinnerStyle { strokeColor?: string[]; } export interface SliderStyle { lowerTrackColor?: string; upperTrackColor?: string; } export interface IconToggleStyle { onColor?: string; offColor?: string; rippleColor?: string; } export interface SwitchStyle { onColor?: string; offColor?: string; thumbOnColor?: string; thumbOffColor?: string; rippleColor?: string; } export interface RadioStyle { borderOnColor?: string; borderOffColor?: string; fillColor?: string; rippleColor?: string; extraRippleRadius?: number; } export interface CheckboxStyle { borderOnColor?: string; borderOffColor?: string; fillColor?: string; rippleColor?: string; inset?: number; } export interface CardStyle { backgroundColor?: string; borderRadius?: number; borderColor?: string; borderWidth?: number; shadowColor?: string; shadowOpacity?: number; shadowRadius?: number; shadowOffset?: { height: number; width: number; }; } export interface CardImageStyle { height?: number; resizeMode?: string; } export interface CardTitleStyle { position?: 'absolute' | 'relative'; top?: number; left?: number; backgroundColor?: string; padding?: number; fontSize?: number; color?: string; fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; } export interface CardContentStyle { padding?: number; color?: string; } export interface CardActionStyle { borderStyle?: 'solid' | 'dotted' | 'dashed'; borderTopColor?: string; borderTopWidth?: number; padding?: number; } export interface CardMenuStyle { position?: 'absolute' | 'relative'; top?: number; right?: number; backgroundColor?: string; } export interface ThemeStatic { primaryColor?: string; primaryColorRGB?: string; accentColor?: string; accentColorRGB?: string; bgPlain?: string; bgDisabled?: string; fontColor?: string; fontSize?: number; rippleColor?: string; textfieldStyle?: TextFieldStyle; progressStyle?: ProgressStyle; spinnerStyle?: SpinnerStyle; sliderStyle?: SliderStyle; iconToggleStyle?: IconToggleStyle; switchStyle?: SwitchStyle; radioStyle?: RadioStyle; checkboxStyle?: CheckboxStyle; cardStyle?: CardStyle; cardImageStyle?: CardImageStyle; cardTitleStyle?: CardTitleStyle; cardContentStyle?: CardContentStyle; cardActionStyle?: CardActionStyle; cardMenuStyle?: CardMenuStyle; } /////////////////////////////// // HELPERS /////////////////////////////// export interface FloatingLabelProperties { floatingLabelEnabled?: boolean; floatingLabelAniDuration?: number; floatingLabelBottomMargin?: number; floatingLabelFont?: MKPropTypes.font; allowFontScaling?: boolean; } export namespace MKPropTypes { interface dimen { width?: number; height?: number; } interface font { color?: string; fontSize?: number; fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; fontStyle?: 'normal' | 'italic'; fontFamily?: string; } type rippleLocation = 'tapLocation' | 'center'; } export interface TickProperties extends ViewProps { fillColor?: string; inset?: number; } /////////////////////////////// // COMPONENTS /////////////////////////////// export class MKComponent extends React.Component { static Builder: 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 interface MKButtonProperties extends TouchableWithoutFeedbackProps, MKRippleProperties { fab?: boolean; enabled?: boolean; } export interface MKTextFieldProperties extends TextInputProps, FloatingLabelProperties { text?: string; password?: boolean; underlineEnabled?: boolean; underlineSize?: number; highlightColor?: string; tintColor?: string; textInputStyle?: TextStyle; allowFontScaling?: boolean; additionalInputProps?: TextInputProps; onTextChange?(val: string): void; } export interface MKSwitchProperties extends TouchableWithoutFeedbackProps { checked?: boolean; onColor?: string; offColor?: string; trackSize?: number; trackLength?: number; thumbRadius?: number; thumbOnColor?: string; thumbOffColor?: string; thumbAniDuration?: number; rippleColor?: string; rippleAniDuration?: number; onCheckedChange?(opts: { checked: boolean }): void; } export interface MKIconToggleProperties extends MKRippleProperties, TouchableWithoutFeedbackProps { checked?: boolean; onCheckedChange?(checked: boolean): void; } export interface MKRippleProperties extends ViewProps { rippleColor?: string; rippleDuration?: number; rippleLocation?: MKPropTypes.rippleLocation; maskEnabled?: boolean; maskColor?: string; maskBorderRadius?: number; maskBorderRadiusInPercent?: number; maskDuration?: number; shadowAniEnabled?: boolean; } export interface MKProgressProperties extends ViewProps { progress?: number; buffer?: number; progressColor?: string; bufferColor?: string; progressAniDuration?: number; bufferAniDuration?: number; } export interface IndeterminateProgressProperties extends ViewProps { progressColor?: string; progressAniDuration?: number; } export interface BaseSlider extends ViewProps { min?: number; max?: number; value?: number; trackSize?: number; thumbRadius?: number; thumbPadding?: number; lowerTrackColor?: string; upperTrackColor?: string; step?: number; } export interface MKSliderProperties extends BaseSlider { onChange?(value: number): void; onConfirm?(): void; } export interface MKRangeSliderProperties extends BaseSlider { minValue?: number; maxValue?: number; onStart?(): void; onConfirm?(curValue: { min: number, max: number }): void; onChange?(curValue: { min: number, max: number }): void; } export interface MKSpinnerProperties extends ViewProps { strokeColor?: string; strokeWidth?: number; spinnerAniDuration?: number; } export interface MKRadioButtonProperties extends MKRippleProperties, TouchableWithoutFeedbackProps { borderOnColor?: string; borderOffColor?: string; fillColor?: string; checked?: boolean; group?: MKRadioButtonGroup; extraRippleRadius?: number; onCheckedChange?(opts: { checked: boolean }): void; } export interface MKCheckboxProperties extends MKRippleProperties, TickProperties, TouchableWithoutFeedbackProps { borderOnColor?: string; borderOffColor?: string; fillColor?: string; checked?: boolean; editable?: boolean; extraRippleRadius?: number; onCheckedChange?(opts: { checked: boolean }): void; } export interface MKRadioButtonGroup { buttons: any[]; } /////////////////////////////// // MAIN EXPORTS /////////////////////////////// export const theme: ThemeStatic; export const MKColor: MKColorStatic; export function setTheme(theme: ThemeStatic): void; export function getTheme(): ThemeStatic; export class MKButton extends MKComponent {} export class MKTextField extends MKComponent {} export class MKSwitch extends MKComponent {} export class MKIconToggle extends MKComponent {} export class MKRipple extends MKComponent {} export class MKProgress extends MKComponent {} export namespace MKProgress { class Indeterminate extends React.Component {} } export class MKSlider extends MKComponent {} export class MKRangeSlider extends MKComponent {} export class MKSpinner extends MKComponent {} export class MKRadioButton extends MKComponent {} export namespace MKRadioButton { class MKRadioButton {} class Group implements MKRadioButtonGroup { buttons: any[]; constructor( onAdd?: (btn: MKRadioButton) => void, onRemove?: (btn: MKRadioButton) => void ); add: (btn: MKRadioButton) => void; onChecked: (btn: MKRadioButton, checked: boolean) => void; onRemoved: (btn: MKRadioButton) => void; } } export class MKCheckbox extends MKComponent {}