@draftbit/core 46.4.4-caab07.0 → 46.4.4-cc754a.2

package/src/components/DatePicker/DatePicker.js

@@ -1,511 +1,368 @@
 import * as React from "react";
-import {
-  View,
-  Animated,
-  Text,
-  StyleSheet,
-  I18nManager,
-  TextInput as NativeTextInput,
-} from "react-native";
+import { View, Animated, Text, StyleSheet, 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 Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
-import { extractStyles } from "../../utilities";
 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",
+    "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,
-  labelSize,
-  labelColor,
-  placeholder,
-  borderColor: inputBorderColor,
-  borderColorActive: inputBorderColorActive,
-  ...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 { textStyles } = extractStyles(style);
-  const getValidDate = () => {
-    if (!value) {
-      return new Date();
+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 === null || value === void 0 ? void 0 : 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;
     }
-    return typeof (value === null || value === void 0
-      ? void 0
-      : 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()}`;
+    else {
+        activeColor = colors.primary;
+        placeholderColor = borderColor = colors.light;
+        underlineColor = colors.light;
+        backgroundColor = colors.background;
     }
-    if (mode === "datetime") {
-      return `${newDate.toLocaleString()}`;
+    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,
+        };
     }
-    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();
+    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;
     }
-  }, [value, focused, placeholder1, labeled]);
-  React.useEffect(() => {
-    const _showPlaceholder = () =>
-      setTimeout(() => setPlaceholder1(placeholder || ""), 50);
-    if (focused || !label) {
-      _showPlaceholder();
-    } else {
-      _hidePlaceholder();
+    if (leftIconName && leftIconMode === "outset") {
+        containerStyle.marginLeft = ICON_SIZE + 8;
     }
-    return () => {
-      clearTimeout(_showPlaceholder());
-    };
-  }, [focused, label, placeholder]);
-  const _handleFocus = () => {
-    if (disabled) {
-      return;
+    let leftIconColor;
+    if (focused) {
+        leftIconColor = colors.primary;
     }
-    setFocused(true);
-  };
-  const _handleBlur = () => {
-    if (disabled) {
-      return;
+    else {
+        leftIconColor = colors.light;
     }
-    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 =
-    (textStyles === null || textStyles === void 0
-      ? void 0
-      : textStyles.fontSize) || typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = labelSize
-    ? labelSize
-    : 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 = inputBorderColorActive || colors.primary;
-    placeholderColor = borderColor = inputBorderColor || colors.light;
-    underlineColor = inputBorderColor || 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,
+    const leftIconProps = {
+        size: 24,
+        color: leftIconColor,
+        name: leftIconName || "",
     };
-  } 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,
+    const leftIconStyle = {
+        position: "absolute",
+        marginTop: type === "solid"
+            ? leftIconMode === "inset"
+                ? MINIMIZED_LABEL_FONT_SIZE + 4
+                : 16
+            : leftIconMode === "outset"
+                ? 16
+                : 0,
     };
-    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,
-    fontFamily:
-      textStyles === null || textStyles === void 0
-        ? void 0
-        : textStyles.fontFamily,
-    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 } : {},
-    textStyles,
-  ];
-  // 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,
-                      },
+    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,
                     ],
-                  },
-                  React.createElement(
-                    AnimatedText,
+                }),
+            },
+            {
+                // 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,
                     {
-                      onLayout: (e) =>
-                        setLabelLayout({
-                          width: e.nativeEvent.layout.width,
-                          measured: true,
-                        }),
-                      style: [
-                        styles.placeholder,
-                        type === "solid" ? { paddingHorizontal: 12 } : {},
-                        labelStyle,
-                        {
-                          color: labelColor || colors.light,
-                          opacity: labeled.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [hasActiveOutline ? 1 : 0, 0],
-                          }),
-                        },
-                      ],
-                      numberOfLines: 1,
+                        backgroundColor: colors.divider,
                     },
-                    label
-                  ),
-                  React.createElement(
-                    AnimatedText,
-                    {
-                      style: [
-                        styles.placeholder,
-                        type === "solid" ? { paddingHorizontal: 12 } : {},
-                        labelStyle,
+                ] },
+                React.createElement(View, { style: [
+                        styles.pickerContainer,
                         {
-                          color: labelColor || placeholder,
-                          opacity: hasActiveOutline ? labeled : 1,
+                            paddingTop: insets.top,
+                            paddingBottom: insets.bottom,
+                            paddingLeft: insets.left,
+                            paddingRight: insets.right,
                         },
-                      ],
-                      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,
-                },
-              ],
-            },
-            React.createElement(DateTimePicker, {
-              value: getValidDate(),
-              mode: mode,
-              isVisible: pickerVisible,
-              toggleVisibility: toggleVisibility,
-              onChange: (_event, data) => {
-                toggleVisibility();
-                setValue(data);
-                onDateChange(data);
-              },
-            })
-          )
-        )
-      )
-  );
+                    ] },
+                    React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                            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%", zIndex: 100 },
-  closeButton: {
-    alignSelf: "flex-end",
-  },
+    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%", zIndex: 100 },
+    closeButton: {
+        alignSelf: "flex-end",
+    },
 });
 export default withTheme(DatePicker);