@draftbit/core 43.4.10 → 43.4.11-776ef8.0

package/src/components/Checkbox/CheckboxRow.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { StyleSheet, View, Platform, } from "react-native";
+import Checkbox from "./Checkbox";
+import Text from "../Text";
+import { useCheckboxGroupContext } from "./context";
+import { Direction as GroupDirection } from "./context";
+import Touchable from "../Touchable";
+import { extractStyles } from "../../utilities";
+export var Direction;
+(function (Direction) {
+    Direction["Row"] = "row";
+    Direction["RowReverse"] = "row-reverse";
+})(Direction || (Direction = {}));
+const getCheckboxAlignment = (parentDirection, direction) => {
+    if (parentDirection === GroupDirection.Horizontal) {
+        return direction === Direction.Row ? "flex-start" : "flex-end";
+    }
+    else if (direction === Direction.RowReverse) {
+        return "flex-start";
+    }
+    else {
+        return "flex-end";
+    }
+};
+const renderLabel = (value, labelStyle, textStyle) => {
+    if (typeof value === "string") {
+        return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
+    }
+    else {
+        return React.createElement(React.Fragment, null, value);
+    }
+};
+const CheckboxRow = ({ Icon, label = "Label", status, value, onPress = () => { }, labelContainerStyle, labelStyle, checkboxStyle, direction = Direction.Row, disabled, style, color, uncheckedColor, ...rest }) => {
+    const { values: selectedValues, onValueChange, direction: parentDirection, } = useCheckboxGroupContext();
+    const values = Array.isArray(selectedValues) ? selectedValues : [];
+    const isChecked = status || values.includes(value);
+    const handlePress = () => {
+        if (!disabled) {
+            onPress(!isChecked);
+            onValueChange && onValueChange(value, !isChecked);
+        }
+    };
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
+        React.createElement(View, { style: [
+                styles.label,
+                {
+                    alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
+                },
+                labelContainerStyle,
+            ] }, renderLabel(label, labelStyle, textStyles)),
+        React.createElement(View, { style: {
+                flex: 1,
+                alignItems: getCheckboxAlignment(parentDirection, direction),
+            } },
+            React.createElement(Checkbox, { Icon: Icon, status: isChecked, onPress: handlePress, style: checkboxStyle, disabled: disabled, color: color, uncheckedColor: uncheckedColor }))));
+};
+const styles = StyleSheet.create({
+    mainParent: {
+        alignItems: "center",
+        justifyContent: "space-around",
+        paddingStart: 20,
+        minHeight: 50,
+        paddingEnd: 20,
+        flex: 1,
+        ...Platform.select({
+            web: {
+                cursor: "pointer",
+                userSelect: "none",
+            },
+        }),
+    },
+    label: {
+        flex: 3,
+    },
+});
+export default CheckboxRow;

package/src/components/Checkbox/context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+export var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+export const checkboxGroupContext = createContext({
+    onValueChange: () => { },
+    values: [],
+    direction: undefined,
+});
+export function useCheckboxGroupContext() {
+    return useContext(checkboxGroupContext);
+}

package/src/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox";
+export { default as CheckboxGroup } from "./CheckboxGroup";
+export { default as CheckboxRow } from "./CheckboxRow";

package/src/components/CircleImage.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Image, } from "react-native";
+import Config from "./Config";
+const CircleImage = ({ source = Config.placeholderImageURL, size = 60, style, ...props }) => {
+    const borderRadius = size / 2;
+    return (React.createElement(Image, { style: [{ width: size, height: size, borderRadius }, style], source: typeof source === "string" ? { uri: source } : source, resizeMode: "cover", ...props }));
+};
+export default CircleImage;

package/src/components/CircularProgress.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { View } from "react-native";
+import { Svg, Path, G } from "react-native-svg";
+class CircularProgress extends React.Component {
+    polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+        var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+        return {
+            x: centerX + radius * Math.cos(angleInRadians),
+            y: centerY + radius * Math.sin(angleInRadians),
+        };
+    };
+    circlePath = (x, y, radius, startAngle, endAngle) => {
+        var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
+        var end = this.polarToCartesian(x, y, radius, startAngle);
+        var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+        var d = [
+            "M",
+            start.x,
+            start.y,
+            "A",
+            radius,
+            radius,
+            0,
+            largeArcFlag,
+            0,
+            end.x,
+            end.y,
+        ];
+        return d.join(" ");
+    };
+    clampFill = (fill) => Math.min(100, Math.max(0, fill));
+    render() {
+        const { size, width, backgroundWidth, tintColor = "black", tintTransparency = true, backgroundColor, style, rotation = 90, lineCap = "butt", arcSweepAngle = 360, fill, children, childrenContainerStyle, padding = 0, renderCap, dashedBackground = { width: 0, gap: 0 }, dashedTint = { width: 0, gap: 0 }, } = this.props;
+        const maxWidthCircle = backgroundWidth
+            ? Math.max(width, backgroundWidth)
+            : width;
+        const sizeWithPadding = size / 2 + padding / 2;
+        const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
+        const currentFillAngle = (arcSweepAngle * this.clampFill(fill)) / 100;
+        const backgroundPath = this.circlePath(sizeWithPadding, sizeWithPadding, radius, tintTransparency ? 0 : currentFillAngle, arcSweepAngle);
+        const circlePathItem = this.circlePath(sizeWithPadding, sizeWithPadding, radius, 0, currentFillAngle);
+        const coordinate = this.polarToCartesian(sizeWithPadding, sizeWithPadding, radius, currentFillAngle);
+        const cap = renderCap ? renderCap({ center: coordinate }) : null;
+        const offset = size - maxWidthCircle * 2;
+        const localChildrenContainerStyle = [
+            {
+                position: "absolute",
+                left: maxWidthCircle + padding / 2,
+                top: maxWidthCircle + padding / 2,
+                width: offset,
+                height: offset,
+                borderRadius: offset / 2,
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+            },
+            childrenContainerStyle,
+        ];
+        const strokeDasharrayTint = dashedTint.gap > 0
+            ? Object.values(dashedTint)
+                .map((value) => value.toString())
+                .join(" ")
+            : "";
+        const strokeDasharrayBackground = dashedBackground.gap > 0
+            ? Object.values(dashedBackground)
+                .map((value) => value.toString())
+                .join(" ")
+            : "";
+        return (React.createElement(View, { style: style },
+            React.createElement(Svg, { width: size + padding, height: size + padding },
+                React.createElement(G, { rotation: rotation, originX: (size + padding) / 2, originY: (size + padding) / 2 },
+                    backgroundColor && (React.createElement(Path, { d: backgroundPath, stroke: backgroundColor, strokeWidth: backgroundWidth || width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayBackground, fill: "transparent" })),
+                    fill > 0 && (React.createElement(Path, { d: circlePathItem, stroke: tintColor, strokeWidth: width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayTint, fill: "transparent" })),
+                    cap)),
+            children && (React.createElement(View, { style: localChildrenContainerStyle }, children(fill)))));
+    }
+}
+export default CircularProgress;

package/src/components/Config.js

@@ -0,0 +1,63 @@
+import { Dimensions, Platform } from "react-native";
+const getWindowDimensions = () => {
+    const { width, height } = Dimensions.get("window");
+    return {
+        windowWidth: width,
+        windowHeight: height,
+    };
+};
+const { windowWidth, windowHeight } = getWindowDimensions();
+const getFilters = (options) => {
+    const { width, height } = options;
+    const filters = ["c_scale", "q_auto", "dpr_auto"];
+    if (width)
+        filters.push(`w_${width}`);
+    if (height)
+        filters.push(`h_${height}`);
+    return filters.join(",");
+};
+const buildImageUrl = (options, name) => {
+    const filters = getFilters(options);
+    return [
+        "https://res.cloudinary.com/altos/image/upload",
+        filters,
+        `${name}.png`,
+    ].join("/");
+};
+const getExtension = () => {
+    return Platform.OS === "web" ? ".svg" : ".png";
+};
+export default {
+    windowWidth,
+    windowHeight,
+    avatarImageUrl: buildImageUrl({
+        width: 60,
+        height: 60,
+    }, "Avatar"),
+    avatarImageSize: 60,
+    cardImageSize: 200,
+    cardImageUrl: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+    cardIconSize: 16,
+    cardIconBackgroundOpacity: 0.24,
+    cardIconElevation: 1,
+    placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+    getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
+    squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
+    FABSize: 40,
+    FABBorderRadius: 20,
+    FABFixedHeight: 64,
+    cardContainerShortImageAspectRatio: 1,
+    rowSingleLineImageSize: 24,
+    rowMultiLineImageSize: 48,
+    rowSingleLineIconSize: 24,
+    rowMultiLineIconSize: 16,
+    headerIconSize: 24,
+    buttonIconSize: 24,
+    swiperInactiveDotSize: 6,
+    swiperActiveDotSize: 10,
+    fieldSearchBarFullIconSize: 24,
+    stepperButtonSize: 40,
+    radioButtonSize: 24,
+    topSafeAreaViewHeight: 0,
+    // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
+};

package/src/components/Container.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { View, ImageBackground, StyleSheet, } from "react-native";
+import { withTheme } from "../theming";
+import Elevation from "./Elevation";
+const Container = ({ useThemeGutterPadding, borderColor, borderWidth, backgroundColor, backgroundImage, backgroundImageResizeMode, elevation, style, children, theme, // eslint-disable-line @typescript-eslint/no-unused-vars
+...rest }) => {
+    const { flex, flexGrow, flexWrap, flexBasis, flexShrink, flexDirection, alignContent, justifyContent, alignItems, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingVertical, paddingHorizontal, ...styleProp } = StyleSheet.flatten(style) || {};
+    const containerStyle = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        width: "100%",
+        ...styleProp,
+    };
+    const innerStyle = {
+        flex,
+        flexGrow,
+        flexWrap,
+        flexBasis,
+        flexShrink,
+        flexDirection,
+        alignContent,
+        justifyContent,
+        alignItems,
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        paddingVertical,
+        paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,
+    };
+    const Wrap = elevation ? Elevation : View;
+    if (elevation) {
+        containerStyle.elevation = elevation;
+    }
+    return (React.createElement(Wrap, { style: [containerStyle, style], ...rest }, backgroundImage ? (React.createElement(ImageBackground, { source: typeof backgroundImage === "string"
+            ? { uri: backgroundImage }
+            : backgroundImage, resizeMode: backgroundImageResizeMode, style: {
+            flex: 1,
+        } },
+        React.createElement(View, { style: innerStyle }, children))) : (React.createElement(View, { style: innerStyle }, children))));
+};
+export default withTheme(Container);

package/src/components/DatePicker/DatePicker.js

@@ -0,0 +1,370 @@
+import * as React from "react";
+import { View, Animated, Text, StyleSheet, Platform, I18nManager, TextInput as NativeTextInput, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import dateFormat from "dateformat";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const FOCUS_ANIMATION_DURATION = 150;
+const BLUR_ANIMATION_DURATION = 180;
+const ICON_SIZE = 24;
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
+    const [value, setValue] = React.useState(date || defaultValue);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const [labeled] = React.useState(new Animated.Value(date ? 0 : 1));
+    const [placeholder1, setPlaceholder1] = React.useState("");
+    const [focused, setFocused] = React.useState(false);
+    const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
+    const getValidDate = () => {
+        if (!value) {
+            return new Date();
+        }
+        return typeof value?.getMonth === "function" ? value : new Date();
+    };
+    const formatDate = () => {
+        if (!value)
+            return "";
+        let newDate = getValidDate();
+        if (format)
+            return dateFormat(newDate, format);
+        if (mode === "time") {
+            return `${newDate.toLocaleTimeString()}`;
+        }
+        if (mode === "datetime") {
+            return `${newDate.toLocaleString()}`;
+        }
+        return `${MONTHS[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
+    };
+    const toggleVisibility = async () => {
+        setPickerVisible(!pickerVisible);
+        focused ? _handleBlur() : _handleFocus();
+    };
+    const insets = useSafeAreaInsets();
+    // const _restoreLabel = () =>
+    //   Animated.timing(labeled, {
+    //     toValue: 1,
+    //     duration: FOCUS_ANIMATION_DURATION,
+    //     useNativeDriver: true,
+    //   }).start();
+    // const _minmizeLabel = () =>
+    //   Animated.timing(labeled, {
+    //     toValue: 0,
+    //     duration: BLUR_ANIMATION_DURATION,
+    //     useNativeDriver: true,
+    //   }).start();
+    // const _showPlaceholder = () =>
+    //   setTimeout(() => setPlaceholder1(placeholder || ""), 50);
+    const _hidePlaceholder = () => {
+        setPlaceholder1("");
+    };
+    React.useEffect(() => {
+        setValue(date);
+    }, [date]);
+    React.useEffect(() => {
+        if (value || focused || placeholder1) {
+            // _minmizeLabel();
+            Animated.timing(labeled, {
+                toValue: 0,
+                duration: BLUR_ANIMATION_DURATION,
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            // _restoreLabel();
+            Animated.timing(labeled, {
+                toValue: 1,
+                duration: FOCUS_ANIMATION_DURATION,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [value, focused, placeholder1, labeled]);
+    React.useEffect(() => {
+        const _showPlaceholder = () => setTimeout(() => setPlaceholder1(placeholder || ""), 50);
+        if (focused || !label) {
+            _showPlaceholder();
+        }
+        else {
+            _hidePlaceholder();
+        }
+        return () => {
+            clearTimeout(_showPlaceholder());
+        };
+    }, [focused, label, placeholder]);
+    const _handleFocus = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(true);
+    };
+    const _handleBlur = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(false);
+    };
+    const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
+    const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
+    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+    const hasActiveOutline = focused;
+    let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+    inputTextColor = colors.strong;
+    if (disabled) {
+        activeColor = colors.light;
+        placeholderColor = colors.light;
+        borderColor = "transparent";
+        underlineColor = "transparent";
+        backgroundColor = colors.divider;
+    }
+    else {
+        activeColor = colors.primary;
+        placeholderColor = borderColor = colors.light;
+        underlineColor = colors.light;
+        backgroundColor = colors.background;
+    }
+    const { lineHeight, ...subtitle1 } = typography.subtitle1;
+    inputStyle = {
+        paddingVertical: 0,
+        color: inputTextColor,
+        paddingLeft: leftIconName && leftIconMode === "inset"
+            ? ICON_SIZE + (type === "solid" ? 16 : 12)
+            : 0,
+        paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
+        ...subtitle1,
+        height: lineHeight,
+    };
+    if (type === "underline") {
+        containerStyle = {
+            borderTopLeftRadius: roundness,
+            borderTopRightRadius: roundness,
+            paddingBottom: 12,
+            marginTop: 16,
+        };
+    }
+    else {
+        containerStyle = {
+            borderRadius: roundness,
+            borderColor: hasActiveOutline ? activeColor : borderColor,
+            borderWidth: 1,
+            paddingTop: labeled ? 16 * 1.5 : 16,
+            paddingBottom: labeled ? 16 * 0.5 : 16,
+            opacity: disabled ? disabledOpacity : 1,
+            backgroundColor,
+        };
+        inputStyle.paddingHorizontal = 12;
+    }
+    if (leftIconName && leftIconMode === "outset") {
+        containerStyle.marginLeft = ICON_SIZE + 8;
+    }
+    let leftIconColor;
+    if (focused) {
+        leftIconColor = colors.primary;
+    }
+    else {
+        leftIconColor = colors.light;
+    }
+    const leftIconProps = {
+        size: 24,
+        color: leftIconColor,
+        name: leftIconName || "",
+    };
+    const leftIconStyle = {
+        position: "absolute",
+        marginTop: type === "solid"
+            ? leftIconMode === "inset"
+                ? MINIMIZED_LABEL_FONT_SIZE + 4
+                : 16
+            : leftIconMode === "outset"
+                ? 16
+                : 0,
+    };
+    const labelStyle = {
+        ...typography.subtitle1,
+        top: type === "solid" ? 16 : 0,
+        left: leftIconName && leftIconMode === "inset"
+            ? ICON_SIZE + (type === "solid" ? 16 : 12)
+            : 0,
+        transform: [
+            {
+                // Move label to top
+                translateY: labeled.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                        type === "solid"
+                            ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET
+                            : MINIMIZED_LABEL_Y_OFFSET,
+                        0,
+                    ],
+                }),
+            },
+            {
+                // Make label smaller
+                scale: labeled.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                        MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE,
+                        1,
+                    ],
+                }),
+            },
+            {
+                // Offset label scale since RN doesn't support transform origin
+                translateX: labeled.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                        -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) *
+                            (labelLayout.width / 2),
+                        0,
+                    ],
+                }),
+            },
+        ],
+    };
+    const inputStyles = [
+        styles.input,
+        inputStyle,
+        type === "solid" ? { marginHorizontal: 12 } : {},
+    ];
+    // const render = (props) => <NativeTextInput {...props} />;
+    return (React.createElement(View, { style: [styles.container, style] },
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(View, { style: [styles.container, style] },
+                    leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
+                    React.createElement(View, { style: [containerStyle, style ? { height: style.height } : {}] },
+                        type === "underline" ? (
+                        // When type === 'flat', render an underline
+                        React.createElement(Animated.View, { style: [
+                                styles.underline,
+                                {
+                                    backgroundColor: focused ? activeColor : underlineColor,
+                                    // Underlines is thinner when input is not focused
+                                    transform: [{ scaleY: focused ? 1 : 0.5 }],
+                                },
+                            ] })) : null,
+                        label ? (
+                        // Position colored placeholder and gray placeholder on top of each other and crossfade them
+                        // This gives the effect of animating the color, but allows us to use native driver
+                        React.createElement(View, { pointerEvents: "none", style: [
+                                StyleSheet.absoluteFill,
+                                {
+                                    opacity: 
+                                    // Hide the label in minimized state until we measure its width
+                                    date || focused ? (labelLayout.measured ? 1 : 0) : 1,
+                                },
+                            ] },
+                            React.createElement(AnimatedText, { onLayout: (e) => setLabelLayout({
+                                    width: e.nativeEvent.layout.width,
+                                    measured: true,
+                                }), style: [
+                                    styles.placeholder,
+                                    type === "solid" ? { paddingHorizontal: 12 } : {},
+                                    labelStyle,
+                                    {
+                                        color: colors.light,
+                                        opacity: labeled.interpolate({
+                                            inputRange: [0, 1],
+                                            outputRange: [hasActiveOutline ? 1 : 0, 0],
+                                        }),
+                                    },
+                                ], numberOfLines: 1 }, label),
+                            React.createElement(AnimatedText, { style: [
+                                    styles.placeholder,
+                                    type === "solid" ? { paddingHorizontal: 12 } : {},
+                                    labelStyle,
+                                    {
+                                        color: placeholderColor,
+                                        opacity: hasActiveOutline ? labeled : 1,
+                                    },
+                                ], numberOfLines: 1 }, label))) : null,
+                        leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
+                                ...leftIconStyle,
+                                marginLeft: type === "solid" ? 16 : 0,
+                            } })) : null,
+                        React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: inputStyles, ...props })),
+                    rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
+                            position: "absolute",
+                            right: 16,
+                            marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16,
+                        } })) : null))),
+        pickerVisible && (React.createElement(Portal, null,
+            React.createElement(View, { style: [
+                    styles.picker,
+                    {
+                        backgroundColor: colors.divider,
+                    },
+                ] },
+                React.createElement(View, { style: [
+                        styles.pickerContainer,
+                        {
+                            paddingTop: insets.top,
+                            paddingBottom: insets.bottom,
+                            paddingLeft: insets.left,
+                            paddingRight: insets.right,
+                        },
+                    ] },
+                    Platform.OS === "ios" && (React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close")),
+                    React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                            Platform.OS === "ios" ? null : toggleVisibility();
+                            setValue(data);
+                            onDateChange(data);
+                        } })))))));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+    picker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    underline: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 2,
+    },
+    input: {
+        flexGrow: 1,
+        justifyContent: "center",
+        textAlignVertical: "center",
+        margin: 0,
+        textAlign: I18nManager.isRTL ? "right" : "left",
+    },
+    placeholder: {
+        position: "absolute",
+        left: 0,
+    },
+    pickerContainer: { flexDirection: "column", width: "100%" },
+    closeButton: {
+        alignSelf: "flex-end",
+    },
+});
+export default withTheme(DatePicker);

package/src/components/DatePicker/DatePickerComponent.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Platform } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, }) => {
+    return Platform.OS === "ios" || Platform.OS === "android" ? (React.createElement(DateTimePickerModal, { date: value, mode: mode, isVisible: true, display: Platform.OS === "ios" ? "spinner" : "default", onCancel: () => {
+            console.log("Picker cancelled before selecting anything.");
+            toggleVisibility();
+        }, onConfirm: (data) => {
+            onChange(null, data);
+        } })) : (React.createElement(DateTimePicker, { value: value, mode: mode, onChange: onChange, display: "default" }));
+};
+export default DatePickerComponent;