react-native-umui 1.4.11 → 1.4.21

package/src/Button.tsx

@@ -1,142 +0,0 @@
-import React, { ReactNode } from "react";
-import { ActivityIndicator, StyleProp, TouchableOpacity, ViewStyle } from "react-native";
-import { MText } from "./Text";
-
-const colorsBg = {
-    "primary": "#3b82f6",
-    "success": "#22c55e",
-    "warning": "#f97316",
-    "secondary": "#14b8a6",
-    "danger": "#ca251a",
-    "light": "white",
-    "smokelight": "#f7f7f7",
-    "navy": "#3e4b67",
-    "orange": "#ff4e02",
-    "darksky": "#004d6c",
-    "metalic": "#43484b"
-};
-
-const colorsBr = {
-    "primary": "#3b82f6",
-    "success": "#22c55e",
-    "warning": "#f97316",
-    "secondary": "#14b8a6",
-    "danger": "#ca251a",
-    "light": "#dadce0",
-    "smokelight": "white",
-    "navy": "#3e4b67",
-    "orange": "#ff4e02",
-    "darksky": "#004d6c",
-    "metalic": "#43484b"
-};
-
-const colorTxt = {
-    "primary": "white",
-    "success": "white",
-    "warning": "white",
-    "secondary": "white",
-    "danger": "white",
-    "light": "black",
-    "smokelight": "black",
-    "navy": "white",
-    "orange": "white",
-    "darksky": "white",
-    "metalic": "white"
-};
-
-const colorTxtOutline = {
-    "primary": "#3b82f6",
-    "success": "#22c55e",
-    "warning": "#f97316",
-    "secondary": "#14b8a6",
-    "danger": "#ca251a",
-    "light": "black",
-    "smokelight": "black",
-    "navy": "#3e4b67",
-    "orange": "#ff4e02",
-    "darksky": "#004d6c",
-    "metalic": "#43484b"
-};
-
-
-interface MButtonProps {
-    testID?: string;
-    size?: "xs" | "sm" | "md" | "nm";
-    noSizeLimit?: boolean;
-    style?: StyleProp<ViewStyle>;
-    label?: string;
-    textAlign?: "center" | "left" | "right";
-    disabled?: boolean;
-    outline?: boolean;
-    noborder?: boolean;
-    loading?: boolean;
-    btnType: "primary" | "success" | "warning" | "secondary" | "danger" | "light" | "navy" | "smokelight" | "orange" | "darksky" | "metalic";
-    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined;
-    onPress?: () => void;
-    children?: ReactNode;
-}
-
-export function MButton({
-    testID,
-    size = "md",
-    noSizeLimit = false,
-    style,
-    label,
-    textAlign = "center",
-    fontWeight = "500",
-    disabled,
-    outline,
-    noborder,
-    loading,
-    btnType,
-    onPress,
-    children
-}: MButtonProps) {
-    return (
-        <TouchableOpacity
-            testID={testID}
-            style={[
-                disabled || loading ? { opacity: 0.55 } : {},
-                {
-                    flex: 1,
-                    height: noSizeLimit ? null : size === "nm" ? 49 : size === "md" ? 45 : size === "xs" ? 27 : 33,
-                    minHeight: noSizeLimit ? null : size === "nm" ? 49 : size === "md" ? 45 : size === "xs" ? 27 : 33,
-                    maxHeight: noSizeLimit ? null : size === "nm" ? 49 : size === "md" ? 45 : size === "xs" ? 27 : 33,
-                    backgroundColor: "purple",
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    borderRadius: 2
-                },
-                { backgroundColor: outline && btnType !== "smokelight" ? "white" : colorsBg[btnType] },
-                outline ? { borderWidth: 1, borderColor: colorsBr[btnType] } : {},
-                style,
-                noborder ? { borderWidth: 0 } : {}
-            ]}
-            activeOpacity={0.85}
-            disabled={disabled || loading}
-            onPress={onPress}
-        >
-            {loading ? (
-                <ActivityIndicator size={21} color="purple" style={{ flex: 1, marginLeft: 9, marginRight: 9 }} />
-            ) : (
-                label ? (
-                    <MText
-                        style={{
-                            flex: 1,
-                            textAlign: textAlign,
-                            color: outline ? colorTxtOutline[btnType] : colorTxt[btnType],
-                            fontSize: size === "nm" ? 18 : size === "md" ? 16 : size === "xs" ? 11 : 14,
-                            paddingHorizontal: 11,
-                            fontWeight: fontWeight
-                        }}>
-                        {label}
-                    </MText>
-                ) : (
-                    children
-                )
-            )}
-        </TouchableOpacity>
-    )
-}

package/src/Checkbox.tsx

@@ -1 +0,0 @@
-import React, { TextStyle, TouchableHighlight, TouchableHighlightProps, View } from "react-native"; import { MText } from "./Text"; interface MCheckboxProps extends TouchableHighlightProps { name?: string; value: string | number | boolean; checked?: boolean; size?: number; color: string; label: string; labelStyle?: TextStyle; onChange?: (values: string | number | boolean, checked: boolean, name?: string) => void; }; export function MCheckbox({ name = "", value, checked, color, label, size = 26, labelStyle, style, onChange, ...props }: MCheckboxProps) { return (<TouchableHighlight activeOpacity={0.85} {...props} onPress={() => { if (onChange) { onChange(checked ? "" : value, !checked, name); } }} underlayColor="transparent" style={[{ flex: 1, maxHeight: size }, style]}><View style={{ flexDirection: "row", alignItems: "center" }}><View style={{ padding: 4, width: size, minHeight: size, height: size, borderWidth: 1, borderColor: color, backgroundColor: "white", display: "flex", justifyContent: "center", alignItems: "center" }}><View style={{ width: size - 8, minHeight: size - 8, height: size - 8, backgroundColor: checked ? color : "white" }} /></View><MText style={[{ fontSize: 16, paddingLeft: 11 }, labelStyle]}>{label}</MText></View></TouchableHighlight>) }

package/src/Divider.tsx

@@ -1 +0,0 @@
-import React, { ReactNode } from "react"; import { StyleProp, TextStyle, View } from "react-native"; import { MText } from "./Text"; interface MDividerProps { testID?: string; label: string; description?: string; labelStyle?: StyleProp<TextStyle>; descStyle?: StyleProp<TextStyle>; children?: ReactNode; }; export function MDivider(props: MDividerProps) { return (<View testID={props.testID} style={{ padding: 3, paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: "#dadce0" }}><MText style={[{ color: "grey", fontSize: 15 }, props.labelStyle]}>{props.label}</MText><View style={{ marginTop: 5 }}>{props.description?<MText style={[{ width: "100%", color: "black", fontSize: 15, fontWeight: "500" }, props.descStyle]}>{props.description}</MText>:(props.children || <MText style={[{ width: "100%", color: "black", fontSize: 15, fontWeight: "500" }, props.descStyle]}>-</MText>)}</View></View> ) }

package/src/EasyIn.tsx

@@ -1 +0,0 @@
-import React, { FC, useEffect } from "react"; import { Animated, StyleProp, Text, TextStyle, ViewProps } from "react-native"; type MEasyInProps = ViewProps & { direction?: "vr" | "hr"; from?: number; to?: number; duration?: number; children?: React.ReactNode; }; export const MEasyIn: FC<MEasyInProps> = ({ style, direction = "hr", from = 85, to = 0, duration = 500, children, ...props }) => { const popAnim = React.useRef(new Animated.Value(from)).current; useEffect(() => { Animated.timing(popAnim, { toValue: to, duration: duration, useNativeDriver: true, }).start(); }, []); return (<Animated.View {...props} style={[style, { transform: [direction === "hr" ? { translateX: popAnim } : { translateY: popAnim }] }]}>{children}</Animated.View>); }; type MOpacityProps = ViewProps & { from?: number; to?: number; duration?: number; children?: React.ReactNode; }; export function MOpacity({ style, from = 0, to = 1, duration = 500, children, ...props }: MOpacityProps) { const popAnim = React.useRef(new Animated.Value(from)).current; useEffect(() => { Animated.timing(popAnim, { toValue: to, duration: duration, useNativeDriver: true, }).start(); }, []); return (<Animated.View {...props} style={[style, { opacity: popAnim }]}>{children}</Animated.View>); }; interface MEmptyProps { size?: number; style?: StyleProp<TextStyle>; }; export function MEmpty({ size = 35, style }: MEmptyProps) { return (<Text style={[{ fontSize: size, textAlign: "center", letterSpacing: 0.63 }, style]}>📥</Text>); } export function MIPlay({ size = 19, style }: MEmptyProps) { return (<Text style={[{ fontSize: size, textAlign: "center", letterSpacing: 0.63 }, style]}>►</Text>); } export function MIPause({ size = 19, style }: MEmptyProps) { return (<Text style={[{ fontSize: size, textAlign: "center", letterSpacing: 0.63 }, style]}>📥</Text>); } export function MIStop({ size = 19, style }: MEmptyProps) { return (<Text style={[{ fontSize: size, textAlign: "center", letterSpacing: 0.63 }, style]}>📥</Text>); }

package/src/FlatList.tsx

@@ -1 +0,0 @@
-import React, { forwardRef } from "react"; import { FlatList, FlatListProps } from "react-native"; interface MFlatListProps<T> extends FlatListProps<T> { initialNumToRender?: number; }; export const MFlatList = forwardRef<FlatList, MFlatListProps<any>>(({ contentContainerStyle, ...props }, ref) => { return (<FlatList ref={ref} scrollEnabled={true} initialNumToRender={15} {...props} contentContainerStyle={[{ flexGrow: 1, paddingBottom: 125 }, contentContainerStyle]} />); })

package/src/FlatPanel.tsx

@@ -1 +0,0 @@
-import React, { ReactNode } from "react"; import { Dimensions, StyleProp, View, ViewStyle } from "react-native"; interface IFlatPanelProps { position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-center" | "right-center" | "top- center" | "bottom-center"; style?: StyleProp<ViewStyle>; children?: ReactNode; }; const positionconstains = { "top-left": { top: 9, left: 9 }, "top-right": { top: 9, right: 9 }, "top-center": { top: 0, left: 9, right: 9,display: "flex", flexDirection: "row", justifyContent: "center" }, "bottom-left": { bottom: 9, left: 9 }, "bottom-right": { bottom: 9, right: 9 }, "bottom-center": { bottom: 0, left: 9, right: 9, display: "flex", flexDirection: "row", justifyContent: "center" }, "left-center": { top: Dimensions.get("window").height / 2.0, left: 9 }, "right-center": { top: Dimensions.get("window").height / 2.0, right: 9 }, }; export function MFlatPanel(props: IFlatPanelProps) { return (<View style={[ { position: "absolute", zIndex: 99, backgroundColor: "transparent", alignItems: props.position.includes("right") ? "flex-end" : "flex-start", }, positionconstains[props.position] || positionconstains["top-center"], props.style ]}>{props.children}</View>) }

package/src/Grid.tsx

@@ -1 +0,0 @@
-import React, { ReactElement, useMemo } from "react"; import { StyleProp, View, ViewStyle } from "react-native"; interface IColProps { colSpan: number; style?: StyleProp<ViewStyle>; children?: React.ReactNode; }; export function MCol({ }: IColProps) { return (<React.Fragment></React.Fragment>); } interface IMGridProps { testID?: string; cols?: number; content?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"; items?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"; style?: StyleProp<ViewStyle>; gap?: number; children: ReactElement<IColProps> | Array<ReactElement<IColProps>>; }; function calc(cols: number = 12) { let _cols = Number(cols) || 12; _cols = _cols <= 0 ? 12 : cols; return Number((100.0 / _cols).toFixed(5)); }; export function MGrid(props: IMGridProps) { const span = useMemo(() => { return calc(props.cols); }, [props.cols]); return (<View testID={props.testID} style={[ { display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: props.content, alignItems: props.items, columnGap: props.gap }, props.style, ]}>{(Array.isArray(props.children) ? props.children : [props.children])?.map(k => {return(<View style={[k.props.style, { flex: (span * k.props.colSpan) || 0 }]}>{k.props.children}</View>);})}</View>) }

package/src/InputField.tsx

@@ -1 +0,0 @@
-import React, { ReactNode } from "react"; import { TextStyle, View, ViewStyle, StyleProp } from "react-native"; import { MText } from "./Text"; interface InputFieldProps { testID?: string; label?: string; containerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; children?: ReactNode; }; export function MInputField(props: InputFieldProps) {return (<View testID={props.testID} style={[{ width: "100%", marginVertical: 5 }, props.containerStyle]}>{props.label?<MText style={[{ color: "black", marginBottom: 3, fontSize: 15, paddingHorizontal: 3, fontWeight: "500" }, props.labelStyle]}>{props.label}</MText>:<React.Fragment></React.Fragment>}<View>{props.children}</View></View>); }; type MInputSetFieldProps = InputFieldProps & { noBackground?: boolean, border?: boolean }; export function MInputSetField(props: MInputSetFieldProps) { return (<View testID={props.testID} style={[{ width: "100%", marginVertical: 5 }, props.border ? { borderWidth: 1, borderColor: "#dadce0" } : {}, props.containerStyle]}>{props.label?<MText style={[ { color: "black", fontWeight: "500", marginBottom: 3, paddingHorizontal: 7, paddingVertical: 1, fontSize: 15, top: -11.5, left: 7, zIndex: 105, position: "absolute", borderLeftWidth: 1, borderRightWidth: 1, borderColor: "#dadce0" }, props.noBackground ? {} : { backgroundColor: "white" }, props.labelStyle ]}>{props.label}</MText>:<React.Fragment></React.Fragment>}<View>{props.children}</View></View>); }

package/src/Line.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { StyleProp, View, ViewStyle } from "react-native"
-
-interface HrProps {
-    margin?: number
-    direction?: "w" | "h"
-    style?: StyleProp<ViewStyle>
-}
-
-export function MLine({ direction = "w", margin = 5, style }: HrProps) {
-    return (<View style={[
-        direction === "w" ? { flex: 1, height: 1, maxHeight: 1, marginVertical: margin } : { flex: 1, width: 1, maxWidth: 1, marginHorizontal: margin },
-        { backgroundColor: "#dadce0" },
-        style
-    ]} />)
-}

package/src/Load.tsx

@@ -1,68 +0,0 @@
-import React, { ComponentProps, useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, View } from "react-native";
-
-function LoadActivity() {
-    return (
-        <View style={{ flex: 1, display: "flex", justifyContent: "center", alignItems: "center" }}>
-            <ActivityIndicator size={45} color="#016db6" />
-        </View>
-    );
-};
-
-interface MLoadProps extends ComponentProps<any> {
-    loadId: string;
-    showLoading?: boolean;
-    name?: string;
-    delay?: number;
-    load: () => Promise<{}>;
-    onLoaded?: () => void;
-};
-
-export function MLoad({ loadId, showLoading, name = "default", delay, load, ...props }: MLoadProps) {
-    const [loaded, setLoaded] = useState<boolean>(false);
-    const loadIfRef = useRef<string>();
-    const timeRef = useRef<any>();
-    const ref = useRef<any>();
-
-    const loadCmp = useCallback(async () => {
-        try {
-            if (!timeRef.current) {
-                setLoaded(false);
-
-                timeRef.current = setTimeout(async () => {
-                    try {
-                        ref.current = await load();
-                        if (props.onLoaded) {
-                            props.onLoaded();
-                        }
-
-                        clearTimeout(timeRef.current);
-                        timeRef.current = undefined;
-                        loadIfRef.current = loadId;
-                        setLoaded(true);
-                    } catch (error) {
-
-                    }
-                }, delay || 25);
-            }
-        } catch (error) {
-
-        }
-    }, [timeRef, loadId, props.load, props.name]);
-
-    useEffect(() => {
-        loadCmp();
-        return () => {
-            clearTimeout(timeRef.current)
-        };
-    }, [loadCmp]);
-
-    if (showLoading && !loaded) {
-        return (<LoadActivity />);
-    }
-
-    const Component = ref.current && ref.current[name] ? ref.current[name] : LoadActivity;
-
-    return (
-        <Component key={loadIfRef.current} {...props} />);
-}

package/src/Numeral.tsx

@@ -1,242 +0,0 @@
-import React from "react";
-import { cts, stc } from "./common";
-/**
- * @param fraction default 2
- * @param thousandSeperator default true
- */
-export interface INumeralOptions {
-    fraction?: number;
-    thousandSeperator?: boolean;
-};
-/**
- * @param gte >= Y
- * @param gt > Y
- * @param lte <= Y
- * @param lt < Y
- */
-export interface NumeralValidity {
-    gte?: number;
-    gt?: number;
-    lte?: number;
-    lt?: number;
-};
-export interface NumeralUtil {
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    * @returns 
-    */
-    setCode: (code?: string) => void;
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    * @returns 
-    */
-    currency: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction?: "ltr" | "rtl") => string;
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    * @returns 
-    */
-    format: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) => string;
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    * @returns 
-    */
-    parseRaw: (value: string, code?: string | null, fraction?: number) => string;
-
-    /**
-     * 
-     * @returns 
-     */
-    toNumber: (value: string | number, fraction?: number) => number;
-
-    /**
-     * 
-     * @returns 
-     */
-    toFloat: (value: string | number, fraction?: number) => number;
-}
-/**
- * @param code country iat code or currency symbol, if it is empty set it geves from global
- */
-export interface ICurrencySlotProps {
-    direction?: "ltr" | "ltr";
-    value: number;
-    code?: string;
-    thousandSeperator?: boolean | null;
-    fraction?: number;
-};
-/**
- * @param code country iat code or currency symbol, if it is empty set it geves from global
- */
-export interface NumeralSlotProps {
-    value: number;
-    code?: string;
-    thousandSeperator?: boolean | null;
-    fraction?: number;
-};
-
-const fractionDefault: number = 2;
-const isopt = (k: any) => k == undefined || k === null;
-const setFraction = (defaultval: number, fraction?: number) => isopt(fraction) ? defaultval : fraction;
-const decOptions = (fraction?: number) => {
-    const value = setFraction(fractionDefault, fraction)
-    return { minimumFractionDigits: value, maximumFractionDigits: value };
-}
-const fraction = (value: number, fraction: number) => fraction === 0 ? Math.floor(value) : value;
-const cache = {
-    code: "",
-    countryCode: null,
-    symbol: "",
-    separatorThousands: "",
-    separatorDecimal: "",
-    regexThousands: /[]/g,
-    regexDecimal: /[]/g
-};
-class Numeral {
-    private fraction?: number;
-    private thousandSeperator: boolean = false;
-
-    static new() {
-        return new Numeral();
-    }
-
-    static convert(value: number | string, fraction?: number): number {
-        if (isopt(fraction)) {
-            return Number(value);
-        }
-
-        return Number(Number((value || "").toString().replace(",", ".")).toFixed(fraction));
-    }
-
-    init(code?: string) {
-        if (code !== cache.code) {
-            cache.code = code;
-            cache.countryCode = stc[code] || cts[code];
-            if (stc[code]) {
-                cache.countryCode = stc[code];
-            } else if (cts[code]) {
-                cache.countryCode = code;
-            }
-            cache.symbol = cts[cache.countryCode] || "?";
-            cache.separatorThousands = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(1111).replace(/\d/g, "");
-            cache.separatorDecimal = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(11.11).replace(/\d/g, "");
-
-            cache.regexThousands = new RegExp(`[${cache.separatorThousands}]`, "g");
-            cache.regexDecimal = new RegExp(`[${cache.separatorDecimal}]`, "g");
-        }
-
-        return this;
-    }
-
-    setFraction(val?: number) {
-        this.fraction = val;
-        return this;
-    }
-
-    setThousandSeperator(val: boolean = false) {
-        this.thousandSeperator = val;
-        return this;
-    }
-
-    format(value: number): string {
-        try {
-            const amount = fraction(Number(value), this.fraction);
-            const stt = decOptions(this.fraction);
-            const amountformat = new Intl.NumberFormat(cache.countryCode, stt).format(amount);
-            return this.thousandSeperator ? amountformat.replace(cache.regexThousands, "") : amountformat;
-        } catch (error) {
-            return "";
-        }
-    }
-
-    inputFormat(value: number): string {
-        try {
-            const amountformat = this.format(value);
-            return amountformat.replace(cache.regexThousands, "");
-        } catch (error) {
-            return "";
-        }
-    }
-
-    currency(value: number, direction: "ltr" | "rtl" = "ltr") {
-        try {
-            const amountformat = this.format(value);
-            return direction === "ltr" ? `${amountformat}${cache.symbol}` : `${cache.symbol}${amountformat}`;
-        } catch (error) {
-            return "";
-        }
-    }
-
-    parseRawFormat(value: string) {
-        const stringNumber = (value || "")
-            .replace(cache.regexThousands, "")
-            .replace(cache.regexDecimal, ".")
-            .replace(new RegExp(`[${cache.symbol}]`, "g"), "");
-
-        const amount = fraction(parseFloat(stringNumber), this.fraction);
-
-        return stringNumber ? amount.toFixed(setFraction(fractionDefault, this.fraction)) : stringNumber;
-    }
-}
-export const numeral: NumeralUtil = (() => {
-    let _code: string = null;
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    * @returns 
-    */
-    function setCode(code?: string) {
-        _code = code;
-    }
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    */
-    function currency(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction: "ltr" | "rtl" = "ltr") {
-        return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).currency(value, direction);
-    }
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    */
-    function format(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) {
-        return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).format(value);
-    }
-
-    /**
-    * @param code country iat code or currency symbol, if it is empty set it geves from global
-    */
-    function parseRaw(value: string, code?: string | null, fraction?: number) {
-        return Numeral.new().init(code || _code).setFraction(fraction).parseRawFormat(value);
-    }
-
-    /**
-     * 
-     * @param value 
-     * @param fraction 
-     * @returns 
-     */
-    function toNumber(value: string | number, fraction?: number): number {
-        return Numeral.convert(value, fraction);
-    }
-
-    /**
-     * 
-     * @param value 
-     * @param fraction 
-     * @returns 
-     */
-    function toFloat(value: string | number, fraction: number = 2): number {
-        return Numeral.convert(value, fraction);
-    }
-
-    return { setCode, currency, format, parseRaw, toNumber, toFloat };
-})();
-export function CurrencySlot(props: ICurrencySlotProps) {
-    return (<React.Fragment>{numeral.currency(props.value, props.code, props.thousandSeperator, props.fraction)}</React.Fragment>)
-}
-export function NumeralSlot(props: NumeralSlotProps) {
-    return (<React.Fragment>{numeral.format(props.value, props.code, props.thousandSeperator, props.fraction)}</React.Fragment>)
-}

package/src/PanelRK.tsx

@@ -1 +0,0 @@
-import React from "react"; import { TouchableOpacity, TouchableOpacityProps } from "react-native"; interface MPanelRkProps extends TouchableOpacityProps { children?: React.ReactNode; }; export function MPanelRK({ style, children, ...props }: MPanelRkProps) { return (<TouchableOpacity style={[ { backgroundColor: "white", height: 53, borderWidth: 1, borderColor: "gray", marginTop: 7, marginBottom: 7, padding: 11, paddingHorizontal: 9, display: "flex", flexDirection: "row", alignItems: "center" }, style ]} {...props}>{children}</TouchableOpacity>); }