Inline date picker (#951)

Author: YoussefHenna

packages/core/package.json

@@ -62,6 +62,7 @@
     "lottie-react-native": "6.5.1",
     "react-native-animated-spinkit": "1.5.2",
     "react-native-confirmation-code-field": "^7.3.1",
+    "react-native-date-picker": "^5.0.7",
     "react-native-deck-swiper": "^2.0.12",
     "react-native-dropdown-picker": "^5.4.7-beta.1",
     "react-native-gesture-handler": "~2.14.0",

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -67,6 +67,7 @@ type Props = {
   minimumDate?: Date | string;
   maximumDate?: Date | string;
   hideLabel?: boolean;
+  inline?: boolean;
 } & IconSlot &
   TextInputProps;
 
@@ -109,6 +110,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   minimumDate,
   maximumDate,
   hideLabel = false,
+  inline = false,
   ...props
 }) => {
   const [value, setValue] = React.useState<Date | undefined>(
@@ -395,6 +397,27 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     type === "solid" ? { marginHorizontal: 12 } : {},
   ];
 
+  const Picker = (
+    <DateTimePicker
+      value={getValidDate()}
+      mode={mode}
+      isVisible={inline || pickerVisible}
+      toggleVisibility={toggleVisibility}
+      minimumDate={parseDate(minimumDate)}
+      maximumDate={parseDate(maximumDate)}
+      onChange={(_event: any, data: any) => {
+        toggleVisibility();
+        setValue(data);
+        onDateChange(data);
+      }}
+      inline={inline}
+    />
+  );
+
+  if (inline) {
+    return <View style={style}>{Picker}</View>;
+  }
+
   return (
     <>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
@@ -552,19 +575,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 },
               ]}
             >
-              <DateTimePicker
-                value={getValidDate()}
-                mode={mode}
-                isVisible={pickerVisible}
-                toggleVisibility={toggleVisibility}
-                minimumDate={parseDate(minimumDate)}
-                maximumDate={parseDate(maximumDate)}
-                onChange={(_event: any, data: any) => {
-                  toggleVisibility();
-                  setValue(data);
-                  onDateChange(data);
-                }}
-              />
+              {Picker}
             </View>
           </View>
         </Portal>

packages/core/src/components/DatePicker/DatePickerComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Platform } from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePicker from "react-native-date-picker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 
@@ -11,8 +11,21 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   minimumDate,
   maximumDate,
   toggleVisibility,
+  inline,
 }) => {
-  return Platform.OS === "ios" || Platform.OS === "android" ? (
+  if (inline) {
+    return (
+      <DateTimePicker
+        date={value}
+        mode={mode}
+        onDateChange={onChange}
+        minimumDate={minimumDate}
+        maximumDate={maximumDate}
+      />
+    );
+  }
+
+  return (
     <DateTimePickerModal
       date={value}
       mode={mode}
@@ -28,15 +41,6 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
         onChange(null, data);
       }}
     />
-  ) : (
-    <DateTimePicker
-      value={value}
-      mode={mode}
-      onChange={onChange}
-      display={"default"}
-      minimumDate={minimumDate}
-      maximumDate={maximumDate}
-    />
   );
 };
 

packages/core/src/components/DatePicker/DatePickerComponent.web.tsx

@@ -22,6 +22,7 @@ const DatePickerComponent: React.FC<Props & { theme: ReadTheme }> = ({
   isVisible,
   minimumDate,
   maximumDate,
+  inline,
   theme,
 }) => {
   const internalTheme = createMuiTheme({
@@ -57,7 +58,7 @@ const DatePickerComponent: React.FC<Props & { theme: ReadTheme }> = ({
             onChange(null, d);
           }}
           onClose={() => toggleVisibility()}
-          variant="dialog"
+          variant={inline ? "static" : "dialog"}
           TextFieldComponent={() => null}
           minDate={minimumDate}
           maxDate={maximumDate}

packages/core/src/components/DatePicker/DatePickerComponentType.ts

@@ -7,5 +7,6 @@ export interface DatePickerComponentProps {
   isVisible?: boolean;
   minimumDate?: Date;
   maximumDate?: Date;
+  inline?: boolean;
   theme?: ReadTheme;
 }

yarn.lock

@@ -12961,6 +12961,11 @@ react-native-confirmation-code-field@^7.3.1:
   resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-7.3.1.tgz#e705ee5b73d7749cac29da287379fa8690904fe6"
   integrity sha512-5vI6BclB31e4vTYg0HmV/Vy9zI5MQZfHr1EN3kYzvaZq4GMIsyr6lrSmnQW1TtWR7Z8oURrhCpwo+JsWXxCoug==
 
+react-native-date-picker@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-5.0.7.tgz#24161d30c6dca8627afe1aa5a55a389421fdfba4"
+  integrity sha512-/RodyCZWjb+f3f4YHqKbWFYczGm+tNngwbVSB6MLGgt5Kl7LQXpv4QE6ybnHW+DM4LteTP8A6lj8LEkQ7+usLQ==
+
 react-native-deck-swiper@^2.0.12:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/react-native-deck-swiper/-/react-native-deck-swiper-2.0.12.tgz#941ebfdd7e4e0cff316640dbe795a4a13714ddb5"