初始化版本

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-present, Meituan-Dianping
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

dist/common/animations/index.d.ts

@@ -0,0 +1,27 @@
+declare class CommonAnimated {
+    state: any;
+    animated: any;
+    constructor(props?: any);
+    getState(): any;
+    setState(key: any, value: any): void;
+    stop(): void;
+    toIn(): void;
+    toOut(): void;
+}
+export declare class FadeAnimated extends CommonAnimated {
+    constructor(props?: any);
+    getPropertyValue(type: any, tag: any): any;
+    toIn(): Promise<void | {}>;
+    toOut(): Promise<void | {}>;
+    reset(params: any): void;
+    fade(tag: boolean): Promise<void | {}>;
+}
+export declare class SlideAnimated extends CommonAnimated {
+    constructor(props?: any);
+    reset(params: any): void;
+    getPropertyValue(type: any, tag: any): any;
+    toIn(): Promise<void | {}>;
+    toOut(): Promise<void | {}>;
+    slide(tag: boolean): Promise<void | {}>;
+}
+export {};

dist/common/animations/index.js

@@ -0,0 +1,229 @@
+import { Animated, Easing } from 'react-native';
+class CommonAnimated {
+    constructor(props) {
+        props = props || {};
+        this.state = {
+            opacityList: props.opacityList || [0, 1],
+            duration: props.duration || 300,
+            easing: props.easing || Easing.elastic(0.8)
+        };
+    }
+    getState() {
+        return {
+            ...this.state
+        };
+    }
+    setState(key, value) {
+        this.state[key] = value;
+    }
+    stop() {
+        if (this.animated) {
+            this.animated.stop();
+            this.animated = null;
+        }
+    }
+    /* tslint:disable:no-empty */
+    toIn() { }
+    /* tslint:disable:no-empty */
+    toOut() { }
+}
+export class FadeAnimated extends CommonAnimated {
+    constructor(props) {
+        props = props || {};
+        super(props);
+        this.state = {
+            ...this.state,
+            scaleList: [0, 1],
+            translateXList: [0, 0],
+            translateYList: [0, 0],
+            ...props,
+        };
+        this.state.opacity = new Animated.Value(this.getPropertyValue('opacity', true));
+        this.state.scale = new Animated.Value(this.getPropertyValue('scale', true));
+        this.state.translateX = new Animated.Value(this.getPropertyValue('translateX', true));
+        this.state.translateY = new Animated.Value(this.getPropertyValue('translateY', true));
+    }
+    getPropertyValue(type, tag) {
+        if (tag) {
+            return this.state[type + 'List'][0];
+        }
+        else {
+            return this.state[type + 'List'][1];
+        }
+    }
+    toIn() {
+        return this.fade(true);
+    }
+    toOut() {
+        return this.fade(false);
+    }
+    reset(params) {
+        const ret = {};
+        params.forEach((paramItem) => {
+            const key = paramItem.key + 'List';
+            const tmp = this.state[key].concat();
+            tmp.splice(0, 1, paramItem.value);
+            ret[key] = tmp;
+        });
+        this.state = {
+            ...this.state,
+            ...ret
+        };
+    }
+    fade(tag) {
+        this.stop();
+        this.state.opacity.setValue(this.getPropertyValue('opacity', tag));
+        this.state.scale.setValue(this.getPropertyValue('scale', tag));
+        this.state.translateX.setValue(this.getPropertyValue('translateX', tag));
+        this.state.translateY.setValue(this.getPropertyValue('translateY', tag));
+        return new Promise((resolve) => {
+            const invalid = ['translateXList', 'translateYList'].some((key) => {
+                return this.state[key][0] == null;
+            });
+            if (invalid) {
+                setTimeout(() => {
+                    resolve('pre animated end');
+                    // console.log('pre animated end')
+                }, 100);
+            }
+            else {
+                resolve('pre animated end');
+            }
+        }).then(() => {
+            this.state.translateX.setValue(this.getPropertyValue('translateX', tag));
+            this.state.translateY.setValue(this.getPropertyValue('translateY', tag));
+            this.animated = Animated.parallel([
+                Animated.timing(this.state.opacity, {
+                    toValue: this.getPropertyValue('opacity', !tag),
+                    duration: this.state.opacityDuration || this.state.duration,
+                    easing: this.state.easing
+                }),
+                Animated.timing(this.state.scale, {
+                    toValue: this.getPropertyValue('scale', !tag),
+                    duration: this.state.scaleDuration || this.state.duration,
+                    easing: this.state.easing
+                }),
+                Animated.timing(this.state.translateX, {
+                    toValue: this.getPropertyValue('translateX', !tag),
+                    duration: this.state.duration,
+                    easing: this.state.easing
+                }),
+                Animated.timing(this.state.translateY, {
+                    toValue: this.getPropertyValue('translateY', !tag),
+                    duration: this.state.duration,
+                    easing: this.state.easing
+                })
+            ]);
+        }).then(() => {
+            return new Promise(resolve => {
+                this.animated.start(() => {
+                    resolve('animated end');
+                });
+            }).catch(e => {
+                console.log(e);
+            });
+        });
+    }
+}
+export class SlideAnimated extends CommonAnimated {
+    constructor(props) {
+        props = props || {};
+        super(props);
+        this.state = {
+            ...this.state,
+            directionType: ['horizontal'],
+            translateYList: [null, 0],
+            translateXList: [null, 0],
+            ...props,
+        };
+        this.state.opacity = new Animated.Value(this.getPropertyValue('opacity', true));
+        this.state.translateY = new Animated.Value(this.getPropertyValue('translateY', true));
+        this.state.translateX = new Animated.Value(this.getPropertyValue('translateX', true));
+    }
+    reset(params) {
+        const map = {
+            vertical: 'translateYList',
+            horizontal: 'translateXList'
+        };
+        const ret = {};
+        params.forEach((paramItem) => {
+            const key = map[paramItem.directionTypeItem];
+            const tmp = this.state[key].concat();
+            tmp.splice(0, 1, paramItem.size);
+            ret[key] = tmp;
+        });
+        this.state = {
+            ...this.state,
+            ...ret
+        };
+    }
+    getPropertyValue(type, tag) {
+        const tmp = tag
+            ? this.state[type + 'List'][0]
+            : this.state[type + 'List'][1];
+        return tmp == null ? 0 : tmp;
+    }
+    toIn() {
+        return this.slide(true);
+    }
+    toOut() {
+        return this.slide(false);
+    }
+    slide(tag) {
+        this.stop();
+        this.state.opacity.setValue(this.getPropertyValue('opacity', tag));
+        const map = {
+            vertical: 'translateY',
+            horizontal: 'translateX'
+        };
+        const keys = this.state.directionType.map((item) => {
+            return map[item];
+        });
+        keys.forEach((key) => {
+            this.state[key].setValue(this.getPropertyValue(key, tag));
+        });
+        return new Promise(resolve => {
+            const invalid = keys.some((key) => {
+                return this.state[key + 'List'][0] == null;
+            });
+            if (invalid) {
+                setTimeout(() => {
+                    // console.log('setTimeout 100 resolve')
+                    resolve('pre animated end');
+                }, 100);
+            }
+            else {
+                resolve('pre animated end');
+            }
+        })
+            .then(ret => {
+            keys.forEach((key) => {
+                this.state[key].setValue(this.getPropertyValue(key, tag));
+            });
+            const parallelArray = keys.map((key) => {
+                return Animated.timing(this.state[key], {
+                    toValue: this.getPropertyValue(key, !tag),
+                    duration: this.state.duration,
+                    easing: this.state.easing
+                });
+            });
+            this.animated = Animated.parallel([
+                Animated.timing(this.state.opacity, {
+                    toValue: this.getPropertyValue('opacity', !tag),
+                    duration: this.state.duration,
+                    easing: this.state.easing
+                }),
+                ...parallelArray
+            ]);
+            return new Promise(resolve => {
+                this.animated.start(() => {
+                    resolve('animated end');
+                });
+            });
+        })
+            .catch(e => {
+            console.log(e);
+        });
+    }
+}
+//# sourceMappingURL=index.js.map

dist/common/styles/utils.d.ts

@@ -0,0 +1,53 @@
+declare const utils: {
+    /**
+     * Text align
+     */
+    textCenter: {
+        textAlign: "center";
+    };
+    textLeft: {
+        textAlign: "left";
+    };
+    textRight: {
+        textAlign: "right";
+    };
+    /**
+     * Text color
+     */
+    textPrimary: {
+        color: any;
+    };
+    textPrimaryDark: {
+        color: any;
+    };
+    textSuccess: {
+        color: any;
+    };
+    textInfo: {
+        color: any;
+    };
+    textDanger: {
+        color: any;
+    };
+    textWarning: {
+        color: any;
+    };
+    /**
+     * Text weight
+     */
+    textNormal: {
+        fontWeight: "normal";
+    };
+    textBold: {
+        fontWeight: "bold";
+    };
+    /**
+     * hidden
+     */
+    hidden: {
+        position: "absolute";
+        width: number;
+        height: number;
+    };
+};
+export default utils;

dist/common/styles/utils.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import variables from './variables';
+const utils = StyleSheet.create({
+    /**
+     * Text align
+     */
+    textCenter: {
+        textAlign: 'center'
+    },
+    textLeft: {
+        textAlign: 'left'
+    },
+    textRight: {
+        textAlign: 'right'
+    },
+    /**
+     * Text color
+     */
+    textPrimary: {
+        color: variables.mtdBrandPrimary
+    },
+    textPrimaryDark: {
+        color: variables.mtdBrandPrimaryDark
+    },
+    textSuccess: {
+        color: variables.mtdBrandSuccess
+    },
+    textInfo: {
+        color: variables.mtdBrandInfo
+    },
+    textDanger: {
+        color: variables.mtdBrandDanger
+    },
+    textWarning: {
+        color: variables.mtdBrandWarning
+    },
+    /**
+     * Text weight
+     */
+    textNormal: {
+        fontWeight: 'normal'
+    },
+    textBold: {
+        fontWeight: 'bold'
+    },
+    /**
+     * hidden
+     */
+    hidden: {
+        position: 'absolute',
+        width: 0,
+        height: 0
+    }
+});
+export default utils;
+//# sourceMappingURL=utils.js.map

dist/common/styles/variables.d.ts

@@ -0,0 +1,4 @@
+declare const variables: any;
+declare function useTheme(args?: {}): any;
+export default variables;
+export { useTheme };

dist/common/styles/variables.js

@@ -0,0 +1,147 @@
+import { StyleSheet, Platform } from 'react-native';
+// 品牌色
+const mtdBrandColors = {
+    mtdBrandPrimary: '#ffd800',
+    mtdBrandPrimaryDark: '#FFA000',
+    mtdBrandSuccess: '#61cb28',
+    mtdBrandWarning: '#ff8400',
+    mtdBrandDanger: '#f23244',
+    mtdBrandInfo: '#188afa'
+};
+// 灰度
+const mtdGrayColors = {
+    mtdGrayBase: '#111',
+    mtdGrayDarker: '#333',
+    mtdGrayDark: '#555',
+    mtdGray: '#888',
+    mtdGrayLight: '#aaaaaa',
+    mtdGrayLighter: '#cccccc',
+    mtdGrayLightest: '#ebebeb'
+};
+// 背景色
+const mtdFillColors = {
+    mtdFillBase: '#ffffff',
+    mtdFillGray: '#F5F5F5',
+    mtdFillBody: '#F8F8F8',
+    mtdFillBackdrop: 'rgba(0, 0, 0, .3)',
+    mtdFillBackdropDark: 'rgba(0, 0, 0, 0.75)'
+};
+// 字体尺寸
+const mtdFontSize = {
+    mtdFontSizeXS: 10,
+    mtdFontSizeS: 12,
+    mtdFontSizeM: 14,
+    mtdFontSizeL: 16,
+    mtdFontSizeXL: 18,
+    mtdFontSizeX2L: 20,
+    mtdFontSizeX3L: 22,
+    mtdFontSizeX4L: 24,
+    mtdFontSizeX5L: 28
+};
+const mtdSpacing = {
+    // 水平间距
+    mtdHSpacingS: 4,
+    mtdHSpacingM: 8,
+    mtdHSpacingL: 12,
+    mtdHSpacingXL: 16,
+    mtdHSpacingX2L: 20,
+    // 垂直间距
+    mtdVSpacingXS: 2,
+    mtdVSpacingS: 4,
+    mtdVSpacingM: 8,
+    mtdVSpacingL: 10,
+    mtdVSpacingXL: 12,
+    mtdVSpacingX2L: 16,
+    mtdVSpacingX3L: 18,
+    mtdVSpacingX4L: 20
+};
+// 圆角
+const mtdRadius = {
+    mtdRadiusXS: 2,
+    mtdRadiusS: 4,
+    mtdRadiusM: 6,
+    mtdRadiusL: 8
+};
+const mtdBorder = {
+    mtdBorderWidth: StyleSheet.hairlineWidth,
+    mtdBorderColor: '#F5F5F5',
+    mtdBorderColorDark: '#e5e5e5',
+    mtdBorderColorDarker: '#d5d5d5'
+};
+const mtdOpacity = 0.3;
+const mtdEnableAnimated = true;
+/**
+ * Button 组件
+ */
+const button = {
+    buttonEnableAnimated: Platform.OS === 'ios',
+    buttonBorderRadius: mtdRadius.mtdRadiusXS,
+    buttonActiveOpacity: mtdOpacity,
+    buttonLFontSize: mtdFontSize.mtdFontSizeXL,
+    buttonLHSpacing: 50,
+    buttonLVSpacing: 14,
+    buttonMFontSize: mtdFontSize.mtdFontSizeL,
+    buttonMHSpacing: 46,
+    buttonMVSpacing: 12,
+    buttonSFontSize: mtdFontSize.mtdFontSizeM,
+    buttonSHSpacing: mtdSpacing.mtdHSpacingXL,
+    buttonSVSpacing: 8
+};
+/**
+ * Form 组件
+ */
+const form = {};
+const formItem = {
+    formItemHSpacing: mtdSpacing.mtdHSpacingXL,
+    formItemVSpacing: 18,
+    formItemLabelWidth: 90,
+    formItemLabelMarginRight: 32
+};
+/**
+ * Input组件
+ */
+const input = {
+    // input组件安全区域 高度
+    inputTextFontSize: 14,
+    inputAreaHeight: 30
+};
+const radio = {
+    radioEnableAnimated: mtdEnableAnimated
+};
+const checkbox = {
+    checkboxEnableAnimated: mtdEnableAnimated
+};
+const topview = {
+    topviewZIndex: 100
+};
+const slider = {};
+const dropdown = {
+    dropdownEnableAnimated: mtdEnableAnimated
+};
+const variables = {
+    ...mtdBrandColors,
+    ...mtdGrayColors,
+    ...mtdFillColors,
+    ...mtdFontSize,
+    ...mtdSpacing,
+    ...mtdRadius,
+    ...mtdBorder,
+    mtdOpacity,
+    mtdEnableAnimated,
+    ...button,
+    ...form,
+    ...formItem,
+    ...input,
+    ...radio,
+    ...checkbox,
+    ...slider,
+    ...topview,
+    ...dropdown
+};
+function useTheme(args = {}) {
+    Object.assign(variables, args);
+    return variables;
+}
+export default variables;
+export { useTheme };
+//# sourceMappingURL=variables.js.map

dist/common/utils/Tree.d.ts

@@ -0,0 +1,2 @@
+declare function Tree(options: any): void;
+export default Tree;

dist/common/utils/Tree.js

@@ -0,0 +1,87 @@
+const DEFAULT_OPTIONS = {
+    idKey: 'id',
+    pIdKey: 'pId',
+    childrenKey: 'children',
+    type: 'nested',
+    data: []
+};
+function Tree(options) {
+    this.options = {
+        ...DEFAULT_OPTIONS,
+        ...options,
+    };
+    const { type, data } = options;
+    this.data = [
+        ...this.parse(type, data)
+    ];
+}
+Tree.prototype.parse = function () {
+    return this[arguments[0] + 'Parser'].call(this, arguments[1]);
+};
+Tree.prototype.nestedParser = function (data) {
+    const ret = deepFirstRecursive.call(this, data);
+    return ret;
+    /**
+     * 深度优先
+     *       +-D
+     *   +-B-|
+     * A-|   +-E
+     *   +-C-F
+     *
+     * 找到 B 节点后把 B 作为父节点，children 数组作为数据，进入下次递归
+     */
+    function deepFirstRecursive(data, pItem, unique) {
+        pItem = pItem || null;
+        unique = unique || { id: 1 };
+        let result = [];
+        data.forEach((item) => {
+            const tmpItem = {
+                ...item
+            };
+            // 没有唯一标志时增加一个
+            if (tmpItem[this.options.idKey] == null) {
+                tmpItem[this.options.idKey] = unique.id++;
+            }
+            // 没有对父节点的引用关系时增加一个
+            if (pItem && tmpItem[this.options.pIdKey] == null) {
+                tmpItem[this.options.pIdKey] = pItem[this.options.idKey];
+            }
+            result.push(tmpItem);
+            if (tmpItem[this.options.childrenKey] && tmpItem[this.options.childrenKey].length) {
+                const children = tmpItem[this.options.childrenKey];
+                tmpItem[this.options.childrenKey] = children.map((child) => {
+                    return child[this.options.idKey];
+                });
+                const restList = deepFirstRecursive.call(this, children, tmpItem, unique);
+                result = result.concat(restList);
+            }
+        });
+        return result;
+    }
+};
+Tree.prototype.getData = function () {
+    return this.data;
+};
+Tree.prototype.flattenedParser = function (data) {
+    let result = data.concat();
+    data.forEach((item) => {
+        if (item[this.options.pIdKey]) {
+            result = result.map((tmpItem) => {
+                if (tmpItem[this.options.idKey] === item[this.options.pIdKey]) {
+                    return {
+                        ...tmpItem,
+                        [this.options.childrenKey]: [
+                            ...(tmpItem[this.options.childrenKey] || [])
+                        ].concat(item[this.options.idKey])
+                    };
+                }
+                else {
+                    return tmpItem;
+                }
+            });
+        }
+    });
+    return result;
+};
+export default Tree;
+//# sourceMappingURL=Tree.js.map

dist/common/utils/fns.d.ts

@@ -0,0 +1 @@
+export declare function noop(e?: any): void;

dist/common/utils/fns.js

@@ -0,0 +1,3 @@
+// tslint:disable:no-empty
+export function noop(e) { }
+//# sourceMappingURL=fns.js.map

dist/common/utils/index.d.ts

@@ -0,0 +1,8 @@
+export declare function range(length: any): any[];
+export declare function hexToRgb(hex: any): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function isLeapYear(year: any): boolean;
+export declare function convert2Digit(i: any): any;

dist/common/utils/index.js

@@ -0,0 +1,35 @@
+export function range(length) {
+    const ret = [];
+    for (let i = 0; i < length; i++) {
+        ret.push(i);
+    }
+    return ret;
+}
+export function hexToRgb(hex) {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+export function isLeapYear(year) {
+    year = parseInt(year, 10);
+    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+export function convert2Digit(i) {
+    i = Number(i);
+    if (i >= 0 && i < 10) {
+        i = '0' + i;
+    }
+    else {
+        i = '' + i;
+    }
+    return i;
+}
+//# sourceMappingURL=index.js.map

dist/common/utils/renderSafeArea.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function (): JSX.Element;

dist/common/utils/renderSafeArea.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View, SafeAreaView } from 'react-native';
+export default function () {
+    return (React.createElement(View, { style: { maxHeight: 30 } },
+        React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(View, { style: { height: 60 } }))));
+}
+//# sourceMappingURL=renderSafeArea.js.map

dist/common/utils/validator.d.ts

@@ -0,0 +1,7 @@
+declare function dispatch(...funcs: Function[]): (...args: any[]) => boolean;
+declare function register(key: string, func: Function): (...args: any[]) => boolean;
+declare const _default: {
+    dispatch: typeof dispatch;
+    register: typeof register;
+};
+export default _default;

dist/common/utils/validator.js

@@ -0,0 +1,25 @@
+function dispatch(...funcs) {
+    return function (...args) {
+        return funcs.some((item) => {
+            const ret = item.apply(this, args);
+            return ret;
+        });
+    };
+}
+function register(key, func) {
+    const keyArray = key.split(',');
+    return function (...args) {
+        if (keyArray.indexOf(args[0]) !== -1) {
+            func.apply(this, args);
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+}
+export default {
+    dispatch,
+    register
+};
+//# sourceMappingURL=validator.js.map

dist/components/Actionsheet/index.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { SlideModal, SlideModalProps } from '../SlideModal';
+import actionsheetStyles from './styles';
+export { actionsheetStyles };
+interface DataItem {
+    label: string;
+    [propName: string]: any;
+}
+interface ActionsheetProps extends SlideModalProps {
+    header?: any;
+    footer?: any;
+    data?: DataItem[] | any;
+    maxShowNum?: number | null | undefined;
+    renderItem?: Function;
+    onPressCancel?: Function;
+    onPressConfirm?: Function;
+    useSafeAreaView?: boolean;
+}
+export declare class Actionsheet extends SlideModal<ActionsheetProps> {
+    static defaultProps: {
+        cancelable: boolean;
+        maxShowNum: any;
+        header: string;
+        footer: string;
+        useSafeAreaView: boolean;
+        data: any[];
+        renderItem: any;
+        onPressCancel: any;
+        onPressConfirm: any;
+        styles: {};
+        offsetX: number;
+        offsetY: any;
+        direction: string;
+        align: string;
+        fullScreenPatch: boolean[];
+        scrollable: boolean;
+        backdropColor: any;
+        screenWidth: number;
+        screenHeight: number;
+        animatedTranslateX: any;
+        animatedTranslateY: any;
+        containerStyle: {};
+        style: {};
+        onOpen: any;
+        onOpened: any;
+        onClose: any;
+        onClosed: any;
+    };
+    constructor(props: any);
+    getHeader(): JSX.Element;
+    getBody(): JSX.Element;
+    handlePress(type: string, item?: any, index?: any): void;
+    getFooter(): JSX.Element;
+    getContent(): any;
+}

dist/components/Actionsheet/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, ScrollView, Text, TouchableOpacity, Dimensions, SafeAreaView } from 'react-native';
+import { SlideModal } from '../SlideModal';
+import actionsheetStyles from './styles';
+export { actionsheetStyles };
+const window = Dimensions.get('window');
+export class Actionsheet extends SlideModal {
+    constructor(props) {
+        super(props);
+    }
+    getHeader() {
+        const styles = actionsheetStyles;
+        const { header } = this.props;
+        return React.isValidElement(header) ? header : (React.createElement(View, { style: styles.header },
+            React.createElement(Text, { style: styles.title }, header)));
+    }
+    getBody() {
+        const { data, maxShowNum, renderItem } = this.props;
+        const styles = actionsheetStyles;
+        return (React.createElement(ScrollView, { style: [
+                styles.body,
+                maxShowNum != null ? { maxHeight: 50 * maxShowNum + 30 } : {}
+            ], alwaysBounceVertical: maxShowNum != null }, data.map((item, index) => {
+            const tmpStyle = index === data.length - 1 ? { borderBottomWidth: 0 } : {};
+            return (React.createElement(TouchableOpacity, { key: index, onPress: () => {
+                    this.handlePress('confirm', item, index);
+                } }, renderItem ?
+                renderItem(item, index) :
+                React.createElement(View, { style: [
+                        styles.item,
+                        tmpStyle
+                    ] },
+                    React.createElement(Text, { style: styles.itemText }, typeof item === 'object' ? item['label'] : item))));
+        })));
+    }
+    handlePress(type, item, index) {
+        const callbackName = 'onPress' + type.slice(0, 1).toUpperCase() + type.slice(1);
+        this.close().then(() => {
+            this.props[callbackName] && this.props[callbackName](item, index);
+        }).catch((e) => {
+            console.log(e);
+        });
+    }
+    getFooter() {
+        const { footer } = this.props;
+        const styles = actionsheetStyles;
+        return (React.createElement(TouchableOpacity, { style: { marginTop: 4 }, onPress: () => {
+                this.handlePress('cancel');
+            } }, footer && React.isValidElement(footer) ?
+            footer :
+            React.createElement(View, { style: [
+                    styles.item,
+                    { borderBottomWidth: 0 }
+                ] },
+                React.createElement(Text, { style: styles.itemText }, footer))));
+    }
+    getContent() {
+        const styles = actionsheetStyles;
+        const inner = (React.createElement(View, { style: [styles.container, { width: window.width }] },
+            this.getHeader(),
+            this.getBody(),
+            this.getFooter(),
+            this.props.useSafeAreaView ?
+                React.createElement(View, { style: { maxHeight: 30 }, onLayout: (e) => {
+                        // const { height } = e.nativeEvent.layout
+                        // console.log('Actionsheet SafeAreaView height: ', height)
+                    } },
+                    React.createElement(SafeAreaView, { style: { flex: 1 } },
+                        React.createElement(View, { style: { height: 60 } }))) : null));
+        return SlideModal.prototype.getContent.call(this, inner);
+    }
+}
+Actionsheet.defaultProps = {
+    ...SlideModal.defaultProps,
+    cancelable: true,
+    maxShowNum: null,
+    header: '标题',
+    footer: '取消',
+    useSafeAreaView: true,
+    data: [],
+    renderItem: null,
+    onPressCancel: null,
+    onPressConfirm: null
+};
+//# sourceMappingURL=index.js.map

dist/components/Actionsheet/styles.d.ts

@@ -0,0 +1,35 @@
+declare const _default: {
+    container: {
+        backgroundColor: any;
+    };
+    header: {
+        borderBottomWidth: number;
+        borderBottomColor: any;
+        backgroundColor: string;
+    };
+    title: {
+        paddingVertical: any;
+        paddingHorizontal: any;
+        textAlign: "center";
+        fontSize: any;
+        color: any;
+    };
+    body: {
+        flex: number;
+        flexDirection: "column";
+        backgroundColor: string;
+    };
+    item: {
+        borderBottomWidth: number;
+        borderBottomColor: any;
+        backgroundColor: string;
+    };
+    itemText: {
+        paddingVertical: any;
+        paddingHorizontal: any;
+        fontSize: any;
+        textAlign: "center";
+        color: any;
+    };
+};
+export default _default;

dist/components/Actionsheet/styles.js

@@ -0,0 +1,38 @@
+import { StyleSheet, PixelRatio } from 'react-native';
+import variables from '../../common/styles/variables';
+const px = 1 / PixelRatio.get();
+export default StyleSheet.create({
+    container: {
+        backgroundColor: variables.mtdFillBody
+    },
+    header: {
+        borderBottomWidth: 1 * px,
+        borderBottomColor: variables.mtdBorderColorDark,
+        backgroundColor: '#fff'
+    },
+    title: {
+        paddingVertical: variables.mtdVSpacingXL,
+        paddingHorizontal: variables.mtdHSpacingXL,
+        textAlign: 'center',
+        fontSize: variables.mtdFontSizeM,
+        color: variables.mtdGray
+    },
+    body: {
+        flex: 1,
+        flexDirection: 'column',
+        backgroundColor: 'rgba(0, 0, 0, 0)'
+    },
+    item: {
+        borderBottomWidth: 1 * px,
+        borderBottomColor: variables.mtdBorderColorDark,
+        backgroundColor: '#fff'
+    },
+    itemText: {
+        paddingVertical: variables.mtdVSpacingX2L,
+        paddingHorizontal: variables.mtdHSpacingXL,
+        fontSize: variables.mtdFontSizeL,
+        textAlign: 'center',
+        color: variables.mtdGrayBase
+    }
+});
+//# sourceMappingURL=styles.js.map

dist/components/Badge/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export interface BadgeProps {
+    style?: ViewStyle;
+    label?: string | number;
+    labelStyle?: TextStyle;
+}
+export declare class Badge extends React.PureComponent<BadgeProps> {
+    static defaultProps: {};
+    constructor(props: any);
+    render(): JSX.Element;
+}

dist/components/Badge/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import styleObject from './styles';
+const styles = StyleSheet.create(styleObject);
+export class Badge extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { style, label, labelStyle } = this.props;
+        if (label != null) {
+            return (React.createElement(View, { style: [styles.wrapper, style] },
+                React.createElement(Text, { style: [styles.label, labelStyle] }, label)));
+        }
+        else {
+            return (React.createElement(View, { style: [styles.dot, style] }));
+        }
+    }
+}
+Badge.defaultProps = {};
+//# sourceMappingURL=index.js.map

dist/components/Badge/styles.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    wrapper: {
+        alignItems: string;
+        justifyContent: string;
+        minWidth: number;
+        height: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: any;
+        backgroundColor: any;
+    };
+    label: {
+        textAlign: string;
+        color: string;
+        fontSize: number;
+    };
+    dot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+    };
+};
+export default _default;

dist/components/Badge/styles.js

@@ -0,0 +1,27 @@
+import variables from '../../common/styles/variables';
+import { StyleSheet } from 'react-native';
+export default {
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 18,
+        height: 18,
+        paddingHorizontal: 5,
+        borderRadius: 9,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: variables.mtdBrandDanger,
+        backgroundColor: variables.mtdBrandDanger,
+    },
+    label: {
+        textAlign: 'center',
+        color: '#fff',
+        fontSize: 10
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: variables.mtdBrandDanger
+    }
+};
+//# sourceMappingURL=styles.js.map

dist/components/BottomModal/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+import { SlideModal, SlideModalProps } from '../SlideModal';
+export interface BottomModalProps extends SlideModalProps {
+    testID?: string;
+    titleContainer?: any;
+    title?: string;
+    titleStyle?: TextStyle;
+    rightLabel?: any;
+    rightLabelText?: string;
+    rightLabelTextStyle?: TextStyle;
+    rightCallback?: Function;
+    leftLabel?: any;
+    leftLabelText?: string;
+    leftLabelTextStyle?: TextStyle;
+    leftCallback?: Function;
+}
+export declare class BottomModal extends SlideModal<BottomModalProps> {
+    static defaultProps: {
+        cancelable: boolean;
+        screenWidth: number;
+        titleContainer: any;
+        title: string;
+        titleStyle: {};
+        rightLabel: any;
+        rightLabelText: string;
+        rightLabelTextStyle: {};
+        rightCallback: any;
+        leftLabel: any;
+        leftLabelText: string;
+        leftLabelTextStyle: {};
+        leftCallback: any;
+        styles: {};
+        offsetX: number;
+        offsetY: any;
+        direction: string;
+        align: string;
+        fullScreenPatch: boolean[];
+        scrollable: boolean;
+        backdropColor: any;
+        screenHeight: number;
+        animatedTranslateX: any;
+        animatedTranslateY: any;
+        containerStyle: {};
+        style: {};
+        onOpen: any;
+        onOpened: any;
+        onClose: any;
+        onClosed: any;
+    };
+    constructor(props: any);
+    getHeader(): JSX.Element;
+    getBody(): React.ReactNode;
+    getContent(): any;
+}

dist/components/BottomModal/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Dimensions } from 'react-native';
+import { SlideModal } from '../SlideModal';
+import styleUtils from '../../common/styles/utils';
+import bottomModalStyles from './styles';
+const window = Dimensions.get('window');
+export class BottomModal extends SlideModal {
+    constructor(props) {
+        super(props);
+    }
+    getHeader() {
+        const styles = bottomModalStyles;
+        const { titleContainer, title, titleStyle, rightLabel, rightLabelText, rightLabelTextStyle, rightCallback, leftLabel, leftLabelText, leftLabelTextStyle, leftCallback } = this.props;
+        let rightEl = null;
+        if (rightLabel || rightLabelText) {
+            rightEl = (React.createElement(TouchableOpacity, { testID: 'right', activeOpacity: 1, onPress: () => {
+                    this.close().then(() => {
+                        rightCallback && rightCallback();
+                    });
+                } }, React.isValidElement(rightLabel) ? rightLabel :
+                React.createElement(Text, { style: [
+                        styles.operator,
+                        styleUtils.textRight,
+                        styleUtils.textPrimaryDark,
+                        styleUtils.textBold,
+                        rightLabelTextStyle
+                    ], numberOfLines: 1 }, rightLabelText)));
+        }
+        let leftEl = null;
+        if (leftLabel || leftLabelText) {
+            leftEl = (React.createElement(TouchableOpacity, { testID: 'left', activeOpacity: 1, onPress: () => {
+                    this.close().then(() => {
+                        leftCallback && leftCallback();
+                    });
+                } }, React.isValidElement(leftLabel) ? leftLabel :
+                React.createElement(Text, { style: [styles.operator, styleUtils.textLeft, leftLabelTextStyle], numberOfLines: 1 }, leftLabelText)));
+        }
+        let titleContainerEl = null;
+        if (titleContainer || title) {
+            titleContainerEl = React.isValidElement(titleContainer) ? titleContainer : (React.createElement(Text, { style: [styles.title, titleStyle] }, title));
+        }
+        return (React.createElement(View, { style: styles.header },
+            React.createElement(View, { style: styles.colSide }, leftEl),
+            React.createElement(View, { style: styles.colMiddle }, titleContainerEl),
+            React.createElement(View, { style: styles.colSide }, rightEl)));
+    }
+    getBody() {
+        return this.props.children;
+    }
+    getContent() {
+        const styles = bottomModalStyles;
+        const inner = (React.createElement(View, { testID: this.props.testID, style: [styles.container, { width: this.props.screenWidth }, this.props.style] },
+            this.getHeader(),
+            this.getBody()));
+        return SlideModal.prototype.getContent.call(this, inner);
+    }
+}
+BottomModal.defaultProps = {
+    ...SlideModal.defaultProps,
+    cancelable: true,
+    screenWidth: window.width,
+    titleContainer: null,
+    title: '标题',
+    titleStyle: {},
+    rightLabel: null,
+    rightLabelText: '完成',
+    rightLabelTextStyle: {},
+    rightCallback: null,
+    leftLabel: null,
+    leftLabelText: '取消',
+    leftLabelTextStyle: {},
+    leftCallback: null,
+};
+//# sourceMappingURL=index.js.map

dist/components/BottomModal/styles.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    container: {
+        backgroundColor: string;
+    };
+    header: {
+        borderBottomWidth: any;
+        borderBottomColor: any;
+        flexDirection: "row";
+    };
+    colSide: {
+        flex: number;
+        justifyContent: "center";
+    };
+    colMiddle: {
+        flex: number;
+        justifyContent: "center";
+    };
+    title: {
+        paddingVertical: any;
+        paddingHorizontal: any;
+        fontSize: any;
+        textAlign: "center";
+        color: any;
+    };
+    operator: {
+        flex: number;
+        paddingVertical: any;
+        paddingHorizontal: any;
+        fontSize: any;
+        color: any;
+    };
+};
+export default _default;