Change DatePickerOverlay and add it in navigation and storybook

template/src/common/components/DatePickerOverlay.tsx

@@ -1,8 +1,8 @@
 import React, {useCallback, useMemo, useState} from "react";
-import {Colors, CommonStyles, Fonts, isAndroid, isIos} from "../../core/theme";
+import {Colors, CommonSizes, CommonStyles, Fonts, isAndroid, isIos} from "../../core/theme";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import {getLanguage, localization} from "../localization";
-import {Platform, SafeAreaView, View, ViewStyle, StyleSheet} from "react-native";
+import {Platform, SafeAreaView, StyleSheet, View, ViewStyle} from "react-native";
 import {Navigation, NavigationFunctionComponent, OptionsTopBarButton} from "react-native-navigation";
 import {ButtonType} from "../../types";
 import {useNavigationButtonPress} from "react-native-navigation-hooks";
@@ -68,7 +68,6 @@ export const DatePickerOverlay: NavigationFunctionComponent<IDatePickerProps> =
           minimumDate={minDate}
           maximumDate={maxDate}
           locale={locale}
-          textColor={Colors.red}
         />
         {isIos && <PrimaryButton label={localization.common.select} type={ButtonType.solid} onPress={changeDate} />}
       </View>
@@ -100,13 +99,11 @@ const styles = StyleSheet.create({
       ios: {
         flex: 1,
         justifyContent: "space-between",
-        paddingHorizontal: 16,
-        paddingVertical: 24,
+        paddingHorizontal: CommonSizes.spacing.medium,
+        paddingVertical: CommonSizes.spacing.large,
       } as ViewStyle,
       android: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
+        ...CommonStyles.flexCenter,
         backgroundColor: Colors.transparent,
       } as ViewStyle,
     }),

template/src/navigation/navigation.ts

@@ -8,7 +8,7 @@ import {localization} from "../common/localization";
 import {Main} from "../modules/main/Main";
 import {gestureHandlerRootHOC} from "react-native-gesture-handler";
 import {Splash} from "../modules/splash/Splash";
-import {Toast} from "../common/components";
+import {DatePickerOverlay, Toast} from "../common/components";
 import {getStorybookUI} from "@storybook/react-native";
 import {reduxProvider} from "../core/store/store";
 import {useState} from "react";
@@ -69,7 +69,7 @@ export function setDefaultOptions() {
         fontFamily: Fonts.system,
       },
       searchBar: {
-        visible: true,
+        visible: false,
         hideOnScroll: true,
         hideTopBarOnFocus: true,
         obscuresBackgroundDuringPresentation: true,
@@ -110,4 +110,5 @@ export function registerComponents() {
   Navigation.registerComponent(Pages.demo.name, () => Demo);
   Navigation.registerComponent(Pages.more.name, () => More);
   Navigation.registerComponent(Pages.toast.name, () => Toast);
+  Navigation.registerComponent(Pages.datePicker.name, () => DatePickerOverlay);
 }

template/storybook/stories.ts

@@ -6,3 +6,5 @@ import "./stories/Formatter.stories";
 import "./stories/Resources.stories";
 // eslint-disable-next-line import/no-unassigned-import
 import "./stories/Components.stories";
+// eslint-disable-next-line import/no-unassigned-import
+import "./stories/Dialogs.stories";

template/storybook/stories/Dialogs.stories.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import {storiesOf} from "@storybook/react-native";
+import {DatePickerOverlay} from "../../src/common/components";
+import {DatePickerOverlayStories} from "./components/DatePickerOverlay.stories";
+
+const DialogsStories = storiesOf("Dialogs", module);
+
+DialogsStories.add("DatePickerOverlay", () => <DatePickerOverlayStories />);

template/storybook/stories/components/DatePickerOverlay.stories.tsx

@@ -0,0 +1,38 @@
+import React, {FC, useCallback, useState} from "react";
+import {ScrollView} from "react-native";
+import {CommonStyles} from "../../../src/core/theme";
+import {PrimaryButton, Separator} from "../../../src/common/components";
+import {DescriptionText} from "../../components/DescriptionText";
+import {DateFormat, dateFromFormat} from "../../../src/common/localization";
+import {showDatePicker} from "../../../src/navigation/helpers";
+import {ButtonType} from "../../../src/types";
+import moment from "moment";
+
+export const DatePickerOverlayStories: FC = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  const onPress = useCallback(() => {
+    return showDatePicker({
+      value: selectedDate,
+      onDateChange: setSelectedDate,
+    });
+  }, [selectedDate, setSelectedDate]);
+
+  const onPressMinMax = useCallback(() => {
+    return showDatePicker({
+      value: selectedDate,
+      onDateChange: setSelectedDate,
+      minDate: moment().subtract(10, "days").toDate(),
+      maxDate: moment().add(2, "days").toDate(),
+    });
+  }, [selectedDate, setSelectedDate]);
+
+  return (
+    <ScrollView style={CommonStyles.flexPlatformBackground} contentContainerStyle={CommonStyles.flexColumnCenterStretch}>
+      <PrimaryButton type={ButtonType.solid} label={"Select date"} onPress={onPress} />
+      <Separator />
+      <PrimaryButton type={ButtonType.solid} label={"Select date (min, max)"} onPress={onPressMinMax} />
+      <DescriptionText>{dateFromFormat(selectedDate, DateFormat.yearDateTime)}</DescriptionText>
+    </ScrollView>
+  );
+};