@ornikar/kitt-universal 4.6.1 → 5.0.2

package/dist/index-node-14.17.cjs.js

@@ -10,9 +10,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const Animated = require('react-native-reanimated');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
+const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const react$1 = require('@linaria/react');
-const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const expoLinearGradient = require('expo-linear-gradient');
 const reactNative$1 = require('@floating-ui/react-native');
@@ -1484,7 +1484,7 @@ function useKittTheme() {
 const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 const CheckboxContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
@@ -1624,6 +1624,129 @@ function DatePickerInputPart({
   });
 }
 
+function prefixWithZero(value) {
+  return `${value}`.padStart(2, '0');
+}
+
+const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "DatePickerInputs__PartContainer",
+  componentId: "kitt-universal__sc-j9hin5-0"
+})(["margin-right:", ";", ";"], ({
+  theme,
+  $isLast
+}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
+  $isStretch
+}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
+const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "DatePickerInputs__DatePickerPressable",
+  componentId: "kitt-universal__sc-j9hin5-1"
+})(["display:flex;flex-direction:row;", ";"], ({
+  $isStretch
+}) => {
+  if ($isStretch) {
+    return styled.css(["width:100%;"]);
+  }
+
+  return styled.css(["align-self:baseline;"]);
+});
+function DatePickerInputs({
+  state,
+  internalForceState,
+  isFocused,
+  disabled,
+  stretch,
+  id,
+  testID,
+  handleModalOpen,
+  currentValue,
+  placeholder
+}) {
+  const currentState = internalForceState || getInputUIState({
+    isFocused,
+    isDisabled: Boolean(disabled),
+    formState: state
+  });
+  const sharedPartProps = {
+    disabled,
+    $state: currentState
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
+    $isStretch: stretch,
+    nativeID: id,
+    disabled: disabled,
+    testID: testID,
+    onPress: handleModalOpen,
+    children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "day",
+        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+        placeholder: placeholder?.day
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "month",
+        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+        placeholder: placeholder?.month
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isLast: true,
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "year",
+        value: currentValue ? currentValue.getFullYear() : undefined,
+        placeholder: placeholder?.year
+      })
+    })]
+  });
+}
+
+function DatePickerAndroid({
+  onBlur,
+  onFocus,
+  pickerDefaultDate,
+  pickerUITestID,
+  setIsFocused,
+  currentValue,
+  setCurrentValue,
+  onChange,
+  isFocused,
+  ...props
+}) {
+  const handleClose = () => {
+    if (onBlur) onBlur();
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
+    handleModalOpen: () => {
+      setIsFocused(true);
+      if (onFocus) onFocus();
+      DateTimePicker.DateTimePickerAndroid.open({
+        testID: pickerUITestID,
+        value: currentValue || pickerDefaultDate || new Date(Date.now()),
+        onChange: e => {
+          setIsFocused(false);
+          const {
+            timestamp
+          } = e.nativeEvent;
+
+          if (timestamp) {
+            const date = new Date(timestamp);
+            setCurrentValue(date);
+            onChange(date);
+            handleClose();
+          }
+        },
+        onTouchCancel: handleClose
+      });
+    },
+    currentValue: currentValue,
+    isFocused: isFocused,
+    ...props
+  });
+}
+
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -2154,122 +2277,64 @@ function ModalPlatformDateTimePicker({
   });
 }
 
-function prefixWithZero(value) {
-  return `${value}`.padStart(2, '0');
-}
-
-const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "DatePicker__PartContainer",
-  componentId: "kitt-universal__sc-ebllsn-0"
-})(["margin-right:", ";", ";"], ({
-  theme,
-  $isLast
-}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
-  $isStretch
-}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
-const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "DatePicker__DatePickerPressable",
-  componentId: "kitt-universal__sc-ebllsn-1"
-})(["display:flex;flex-direction:row;", ";"], ({
-  $isStretch
-}) => {
-  if ($isStretch) {
-    return styled.css(["width:100%;"]);
-  }
-
-  return styled.css(["align-self:baseline;"]);
-});
 function DatePicker({
   value,
-  id,
-  disabled,
-  placeholder,
-  state,
-  internalForceState,
-  testID,
-  stretch,
-  pickerDefaultDate,
   pickerUITestID,
   pickerUITitle,
   pickerUIValidateButtonLabel,
   onChange,
   onFocus,
-  onBlur
+  onBlur,
+  pickerDefaultDate,
+  ...props
 }) {
   const [isPickerUIVisible, setIsPickerUIVisible] = react.useState(false);
   const [isFocused, setIsFocused] = react.useState(false);
   const [currentValue, setCurrentValue] = react.useState(value);
 
+  if (reactNative.Platform.OS === 'android') {
+    return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
+      pickerDefaultDate: pickerDefaultDate,
+      pickerUITestID: pickerUITestID,
+      currentValue: currentValue,
+      setCurrentValue: setCurrentValue,
+      isFocused: isFocused,
+      setIsFocused: setIsFocused,
+      onChange: onChange,
+      onBlur: onBlur,
+      ...props
+    });
+  }
+
   const handleModalClose = () => {
     if (onBlur) onBlur();
     setIsPickerUIVisible(false);
     setIsFocused(false);
   };
 
-  const handleChange = newDate => {
-    setCurrentValue(newDate);
-    onChange(newDate);
-    handleModalClose();
-  };
-
-  const currentState = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  const sharedPickerProps = {
-    testID: pickerUITestID,
-    value: currentValue,
-    onChange: handleChange
-  };
-  const sharedPartProps = {
-    disabled,
-    $state: currentState,
-    defaultDate: pickerDefaultDate
-  };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
-      $isStretch: stretch,
-      nativeID: id,
-      disabled: disabled,
-      testID: testID,
-      onPress: () => {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
+      handleModalOpen: () => {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "day",
-          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-          placeholder: placeholder?.day
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "month",
-          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-          placeholder: placeholder?.month
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isLast: true,
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "year",
-          value: currentValue ? currentValue.getFullYear() : undefined,
-          placeholder: placeholder?.year
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [reactNative.Platform.OS === 'android' && isPickerUIVisible ? /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, { ...sharedPickerProps
-      }) : null, reactNative.Platform.OS !== 'android' ? /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, { ...sharedPickerProps,
-        isVisible: isPickerUIVisible,
-        title: pickerUITitle,
-        validateButtonLabel: pickerUIValidateButtonLabel,
-        onClose: handleModalClose,
-        onChange: handleChange
-      }) : null]
+      currentValue: currentValue,
+      isFocused: isFocused,
+      ...props
+    }), /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, {
+      testID: pickerUITestID,
+      value: currentValue,
+      isVisible: isPickerUIVisible,
+      title: pickerUITitle,
+      validateButtonLabel: pickerUIValidateButtonLabel,
+      defaultDate: pickerDefaultDate,
+      onClose: handleModalClose,
+      onChange: newDate => {
+        setCurrentValue(newDate);
+        onChange(newDate);
+        handleModalClose();
+      }
     })]
   });
 }