Inline date picker (#951)

draftbit · Oct 16, 2024 · d8fa10e · d8fa10e
1 parent 9b141af
commit d8fa10e
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 25 deletions.
diff --git a/packages/core/package.json b/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",

diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/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>

diff --git a/packages/core/src/components/DatePicker/DatePickerComponent.tsx b/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}
- />
  );
 };
 

diff --git a/packages/core/src/components/DatePicker/DatePickerComponent.web.tsx b/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}

diff --git a/packages/core/src/components/DatePicker/DatePickerComponentType.ts b/packages/core/src/components/DatePicker/DatePickerComponentType.ts
@@ -7,5 +7,6 @@ export interface DatePickerComponentProps {
  isVisible?: boolean;
  minimumDate?: Date;
  maximumDate?: Date;
+ inline?: boolean;
  theme?: ReadTheme;
 }
diff --git a/yarn.lock b/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"