Definitions for react-native-material-kit (#19464)

types/react-native-material-kit/index.d.ts

@@ -0,0 +1,410 @@
+// Type definitions for react-native-material-kit 0.4
+// Project: https://github.com/xinthink/react-native-material-kit
+// Definitions by: Kyle Roach <https://github.com/iRoachie>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.4
+
+import * as React from 'react';
+import {
+    ViewStyle,
+    TextStyle,
+    TextInputProperties,
+    TouchableWithoutFeedbackProperties,
+    ViewProperties,
+} 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 ViewProperties {
+    fillColor?: string;
+    inset?: number;
+}
+
+///////////////////////////////
+// COMPONENTS
+///////////////////////////////
+
+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
+    TouchableWithoutFeedbackProperties, MKRippleProperties {
+        fab?: boolean;
+        enabled?: boolean;
+}
+
+export interface MKTextFieldProperties extends TextInputProperties, FloatingLabelProperties {
+    text?: string;
+    password?: boolean;
+    underlineEnabled?: boolean;
+    underlineSize?: number;
+    highlightColor?: string;
+    tintColor?: string;
+    textInputStyle?: TextStyle;
+    allowFontScaling?: boolean;
+    additionalInputProps?: TextInputProperties;
+    onTextChange?(val: string): void;
+}
+
+export interface MKSwitchProperties extends TouchableWithoutFeedbackProperties {
+    checked?: boolean;
+    onColor?: string;
+    offColor?: string;
+    trackSize?: number;
+    trackLength?: number;
+    thumbRadius?: number;
+    thumbOnColor?: string;
+    thumbOffColor?: string;
+    thumbAniDuration?: number;
+    rippleColor?: string;
+    rippleAniDuration?: number;
+    onCheckedChange?(checked: boolean): void;
+}
+
+export interface MKIconToggleProperties extends MKRippleProperties, TouchableWithoutFeedbackProperties {
+    checked?: boolean;
+    onCheckedChange?(checked: boolean): void;
+}
+
+export interface MKRippleProperties extends ViewProperties {
+    rippleColor?: string;
+    rippleDuration?: number;
+    rippleLocation?: MKPropTypes.rippleLocation;
+    maskEnabled?: boolean;
+    maskColor?: string;
+    maskBorderRadius?: number;
+    maskBorderRadiusInPercent?: number;
+    maskDuration?: number;
+    shadowAniEnabled?: boolean;
+}
+
+export interface MKProgressProperties extends ViewProperties {
+    progress?: number;
+    buffer?: number;
+    progressColor?: string;
+    bufferColor?: string;
+    progressAniDuration?: number;
+    bufferAniDuration?: number;
+}
+
+export interface BaseSlider extends ViewProperties {
+    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 ViewProperties {
+    strokeColor?: string;
+    strokeWidth?: number;
+    spinnerAniDuration?: number;
+}
+
+export interface MKRadioButtonProperties extends MKRippleProperties, TouchableWithoutFeedbackProperties {
+    borderOnColor?: string;
+    borderOffColor?: string;
+    fillColor?: string;
+    checked?: boolean;
+    group?: MKRadioButtonGroup;
+    extraRippleRadius?: number;
+    onCheckedChange?(opts: { checked: boolean }): void;
+}
+
+export interface MKCheckboxProperties extends MKRippleProperties, TickProperties, TouchableWithoutFeedbackProperties {
+    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 React.Component<MKButtonProperties, any> {}
+
+export class MKTextField extends React.Component<MKTextFieldProperties, any> {}
+
+export class MKSwitch extends React.Component<MKSwitchProperties, any> {}
+
+export class MKIconToggle extends
+    React.Component<MKIconToggleProperties, any> {}
+
+export class MKRipple extends React.Component<MKRippleProperties, any> {}
+
+export class MKProgress extends React.Component<MKProgressProperties, any> {}
+
+export class MKSlider extends React.Component<MKSliderProperties, any> {}
+
+export class MKRangeSlider extends
+    React.Component<MKRangeSliderProperties, any> {}
+
+export class MKSpinner extends React.Component<MKSpinnerProperties, any> {}
+
+export class MKRadioButton extends
+React.Component<MKRadioButtonProperties, any> {}
+
+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 React.Component<MKCheckboxProperties, any> {}

types/react-native-material-kit/react-native-material-kit-tests.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import {
+    MKButton,
+    MKColor,
+    MKTextField,
+    MKSwitch,
+    MKIconToggle,
+    MKProgress,
+    MKSlider,
+    MKRangeSlider,
+    MKSpinner,
+    MKRadioButton,
+    MKCheckbox,
+    setTheme
+} from 'react-native-material-kit';
+
+//// BUTTON
+
+const ButtonTest = () =>
+    <MKButton
+        style={{ backgroundColor: MKColor.Amber }}
+        onPress={() => console.log('hi, raised button!')}
+    >
+        <Text style={{color: 'white', fontWeight: 'bold'}}>
+            RAISED BUTTON
+        </Text>
+    </MKButton>;
+
+//// TEXT FIELD
+
+interface MKTextFieldTestState {
+    value: string;
+}
+
+class MKTextFieldTest extends React.Component<any, MKTextFieldTestState> {
+    state = {
+        value: ''
+    };
+
+    render() {
+        return (
+            <MKTextField
+              tintColor={MKColor.Lime}
+              textInputStyle={{color: MKColor.Orange}}
+              placeholder="Text"
+              value={this.state.value}
+              onTextChange={a => this.setState({value: a})}
+            />
+        );
+    }
+}
+
+//// SWITCH
+
+const MKSwitchTest = () =>
+    <MKSwitch
+        onColor="rgba(255,152,0,.3)"
+        thumbOnColor={MKColor.Orange}
+        rippleColor="rgba(255,152,0,.2)"
+        onPress={() => console.log('orange switch pressed')}
+        onCheckedChange={checked =>
+            console.log('orange switch checked', checked)}
+    />;
+
+//// ICON TOGGLE
+
+const MKIconToggleTest = () =>
+    <MKIconToggle
+        checked={true}
+        onCheckedChange={checked =>
+            console.log('orange switch checked', checked)}
+        onPress={() => console.log('pressed')}
+    >
+        <Text>Off</Text>
+        <Text>On</Text>
+    </MKIconToggle>;
+
+//// PROGRESS
+const MKProgressTest = () => <MKProgress progress={0.2} />;
+
+//// SLIDER
+interface MKSliderTestState {
+    curValue: number;
+}
+
+class MKSliderTest extends React.Component<null, MKSliderTestState> {
+    state = {
+        curValue: 3
+    };
+
+    render() {
+        return (
+            <MKSlider
+                min={10}
+                max={100}
+                onChange={curValue => this.setState({curValue})}
+            />
+        );
+    }
+}
+
+//// RANGE SLIDER
+interface MKRangeSliderTestState {
+    min: number;
+    max: number;
+}
+
+class MKRangeSliderTest extends React.Component<null, MKRangeSliderTestState> {
+    state = {
+        min: 0,
+        max: 2
+    };
+
+    render() {
+        return (
+            <MKRangeSlider
+                min={10}
+                max={100}
+                minValue={30}
+                maxValue={50}
+                onChange={(curValue) => this.setState({
+                    min: curValue.min,
+                    max: curValue.max,
+                })}
+                onConfirm={(curValue) => {
+                    console.log("Slider drag ended");
+                    console.log(curValue);
+                }}
+            />
+        );
+    }
+}
+
+/// Spinner Test
+const MKSpinnerTest = () => <MKSpinner />;
+
+/// Radio Button
+class MKRadioButtonTest extends React.Component<null, null> {
+    radioGroup: MKRadioButton.Group;
+
+    constructor() {
+        super();
+        this.radioGroup = new MKRadioButton.Group();
+
+        setTheme({radioStyle: {
+            fillColor: `rgba(${MKColor.RGBTeal},.8)`,
+            borderOnColor: `rgba(${MKColor.RGBTeal},.6)`,
+            borderOffColor: `rgba(${MKColor.RGBTeal},.3)`,
+            rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
+        }});
+    }
+
+    render() {
+        return (
+            <MKRadioButton
+                checked={true}
+                group={this.radioGroup}
+            />
+        );
+    }
+}
+
+/// Checkbox
+class MKCheckboxTest extends React.Component<null, null> {
+    constructor() {
+        super();
+
+        setTheme({checkboxStyle: {
+            fillColor: MKColor.Teal,
+            borderOnColor: MKColor.Teal,
+            borderOffColor: MKColor.Teal,
+            rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
+        }});
+    }
+
+    render() {
+        return (
+            <MKCheckbox checked={true} />
+        );
+    }
+}

types/react-native-material-kit/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-native"
+    },
+    "files": [
+        "index.d.ts",
+        "react-native-material-kit-tests.tsx"
+    ]
+}

types/react-native-material-kit/tslint.json

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