expo-2k-datetime-picker 1.0.0

package/src/components/Time.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from "react-native";
+import formatNb from "../libs/formatNb";
+import { KText, KView } from "../ui";
+
+export default function Time({
+  length,
+  onScrollEnd,
+  color,
+  index = 0,
+  height = 46,
+  start = 0,
+}: Props) {
+  const flatListRef = useRef<FlatList>(null);
+
+  const data = useMemo(() => {
+    let data = Array.from({ length });
+
+    if (start) data = data.map((_, i) => i + start);
+
+    return data;
+  }, [start]);
+
+  useEffect(() => {
+    if (start) index = data.findIndex((d) => d === index);
+
+    flatListRef.current?.scrollToIndex({ index, animated: true });
+  }, [flatListRef.current, data, start, index]);
+
+  const onMomentumScrollEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>,
+  ) => {
+    const { contentOffset, layoutMeasurement } = event.nativeEvent;
+    let value = Math.round(contentOffset.y / layoutMeasurement.height);
+
+    if (start) value = Number(data[value]);
+
+    onScrollEnd?.(value);
+  };
+
+  const onScrollEndDrag = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset } = event.nativeEvent;
+    const currentIndex = Math.round(contentOffset.y / height);
+
+    if (currentIndex === -1) {
+      flatListRef.current?.scrollToIndex({
+        index: data.length - 1,
+        animated: false,
+      });
+    } else if (currentIndex === data.length) {
+      flatListRef.current?.scrollToIndex({
+        index: 0,
+        animated: false,
+      });
+    }
+  };
+
+  return (
+    <FlatList
+      pagingEnabled
+      ref={flatListRef}
+      data={data}
+      showsVerticalScrollIndicator={false}
+      onScrollEndDrag={onScrollEndDrag}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      renderItem={({ item, index }) => (
+        <KView height={height} justifyContent="center" alignItems="center">
+          <KText fontSize={24} fontWeight="bold" color={color}>
+            {formatNb(item || index)}
+          </KText>
+        </KView>
+      )}
+      getItemLayout={(_, index) => ({
+        length: height,
+        offset: height * index,
+        index,
+      })}
+    />
+  );
+}
+
+type Props = {
+  length: number;
+  index?: number;
+  onScrollEnd?: (index: number) => void;
+  height?: number;
+  start?: number;
+  color?: string;
+};

package/src/components/TimeView.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { formatShortDate } from "../libs/format";
+import { KText, KView } from "../ui";
+import Time from "./Time";
+
+type Props = {
+  date: Date;
+  showDate?: boolean;
+  onChangeHours?: (hours: number) => void;
+  onChangeMinutes?: (minutes: number) => void;
+  color?: string;
+};
+export default function TimeView({
+  date,
+  onChangeHours,
+  onChangeMinutes,
+  showDate,
+  color,
+}: Props) {
+  return (
+    <KView
+      flexDirection="row"
+      height={54}
+      backgroundColor={`${color}11`}
+      alignItems="center"
+      width={120}
+      alignSelf="center"
+      paddingHorizontal={8}
+      paddingVertical={4}
+      // borderWidth={3}
+      borderColor={`${color}11`}
+    >
+      {showDate && (
+        <KView
+          backgroundColor={color}
+          paddingHorizontal={10}
+          paddingVertical={1}
+          position="absolute"
+          top={-12}
+          left={19}
+          borderWidth={1}
+          borderColor="white"
+        >
+          <KText color="white">{formatShortDate(date)}</KText>
+        </KView>
+      )}
+      <Time
+        length={24}
+        index={date.getHours()}
+        onScrollEnd={onChangeHours}
+        color={color}
+      />
+      <KText fontSize={18} textAlign="center" fontWeight="bold" color={color}>
+        h
+      </KText>
+      <Time
+        length={60}
+        index={date.getMinutes()}
+        onScrollEnd={onChangeMinutes}
+        color={color}
+      />
+    </KView>
+  );
+}

package/src/hooks/useCalendarDisclose.ts

@@ -0,0 +1,9 @@
+import { useState } from "react";
+
+export default function useCalendarDisclose() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggle = () => setIsOpen((v) => !v);
+
+  return { isOpen, onToggle };
+}

package/src/libs/format.ts

@@ -0,0 +1,57 @@
+export function formatDate(
+  date: Date,
+  locales: Intl.LocalesArgument = "fr-FR",
+  mode: "date" | "time" | "datetime" = "date",
+) {
+  switch (mode) {
+    case "time":
+      return date.toLocaleTimeString(locales, {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+
+    case "date":
+      return date.toLocaleDateString(locales, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+
+    case "datetime":
+      return date.toLocaleDateString(locales, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+
+    default:
+      return "Invalid mode";
+  }
+}
+
+export function formatMonth(
+  date: Date,
+  locales: Intl.LocalesArgument = "fr-FR",
+) {
+  return date.toLocaleDateString(locales, {
+    month: "long",
+  });
+}
+
+export function formatShortDate(
+  date: Date,
+  locales: Intl.LocalesArgument = "fr-FR",
+) {
+  return date.toLocaleDateString(locales, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "2-digit",
+  });
+}
+
+export const getWeekDay = (
+  date: Date,
+  locales: Intl.LocalesArgument = "fr-FR",
+) => date.toLocaleString(locales, { weekday: "short" }).slice(0, 3);

package/src/libs/formatNb.ts

@@ -0,0 +1,3 @@
+export default function formatNb(nb: number) {
+  return nb < 10 ? "0" + nb.toString() : nb.toString();
+}

package/src/libs/getDayMatrix.ts

@@ -0,0 +1,73 @@
+export default function getDayMatrix(value: Date) {
+  const year = value.getFullYear();
+  const month = value.getMonth();
+
+  const offset = new Date(year, month, 1).getDay() - 1;
+  const getDate = (date: number) => new Date(year, month, date - offset);
+
+  return [
+    [
+      getDate(1),
+      getDate(8),
+      getDate(15),
+      getDate(22),
+      getDate(29),
+      getDate(36),
+      getDate(43),
+    ],
+    [
+      getDate(2),
+      getDate(9),
+      getDate(16),
+      getDate(23),
+      getDate(30),
+      getDate(37),
+      getDate(44),
+    ],
+    [
+      getDate(3),
+      getDate(10),
+      getDate(17),
+      getDate(24),
+      getDate(31),
+      getDate(38),
+      getDate(45),
+    ],
+    [
+      getDate(4),
+      getDate(11),
+      getDate(18),
+      getDate(25),
+      getDate(32),
+      getDate(39),
+      getDate(46),
+    ],
+    [
+      getDate(5),
+      getDate(12),
+      getDate(19),
+      getDate(26),
+      getDate(33),
+      getDate(40),
+      getDate(47),
+    ],
+    [
+      getDate(6),
+      getDate(13),
+      getDate(20),
+      getDate(27),
+      getDate(34),
+      getDate(41),
+      getDate(48),
+    ],
+    [
+      getDate(0),
+      getDate(7),
+      getDate(14),
+      getDate(21),
+      getDate(28),
+      getDate(35),
+      getDate(42),
+    ],
+  ];
+}

package/src/libs/getStatus.ts

@@ -0,0 +1,47 @@
+import { DateValueType } from "../Calendar2k.types";
+import isToday from "./isToday";
+import resetTime from "./resetTime";
+
+const getStatus = ({ date, shortDate, selectedDate }: ArgType) => {
+  const status = {
+    isToday: isToday(date),
+    isStartBorn: false,
+    isEndBorn: false,
+    isSelected: false,
+    isForCurrentMonth: date.getMonth() === shortDate.getMonth(),
+  };
+
+  if (selectedDate instanceof Date) {
+    const valueDate = resetTime(selectedDate);
+
+    status.isSelected = date.getTime() === valueDate.getTime();
+  } else if (
+    selectedDate instanceof Object &&
+    selectedDate.start instanceof Date
+  ) {
+    const start = resetTime(selectedDate.start);
+
+    status.isStartBorn = start.getTime() === date.getTime();
+
+    if (selectedDate.end) {
+      const end = resetTime(selectedDate.end as Date);
+
+      status.isSelected = start <= date && date <= end;
+
+      if (status.isSelected)
+        status.isEndBorn = date.getTime() === end.getTime();
+    } else {
+      status.isSelected = status.isStartBorn;
+    }
+  }
+
+  return status;
+};
+
+export default getStatus;
+
+type ArgType = {
+  date: Date;
+  shortDate: Date;
+  selectedDate?: DateValueType;
+};

package/src/libs/getStyle.ts

@@ -0,0 +1,53 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { DateValueType } from "../Calendar2k.types";
+import getStatus from "./getStatus";
+
+const getStyle = ({
+  date,
+  shortDate,
+  selectedDate,
+  color,
+  active,
+}: ArgType) => {
+  const status = getStatus({ date, shortDate, selectedDate });
+
+  const style = { touchableOpacity: {} as ViewStyle, text: {} as TextStyle };
+
+  style.text.color = color;
+
+  if (!status.isForCurrentMonth) style.text.color = `${color}55`;
+  if (!active) style.text.color = `${color}22`;
+
+  if (status.isToday) {
+    style.touchableOpacity.backgroundColor = color;
+    style.text.color = "white";
+    style.text.fontWeight = "bold";
+  }
+
+  if (status.isSelected) {
+    style.touchableOpacity.backgroundColor = `${color}22`;
+    style.text.fontWeight = "bold";
+  }
+
+  if (status.isStartBorn) {
+    style.touchableOpacity.borderTopLeftRadius = 10;
+    style.touchableOpacity.borderBottomLeftRadius = 10;
+  }
+
+  if (status.isEndBorn) {
+    style.touchableOpacity.borderTopRightRadius = 10;
+    style.touchableOpacity.borderBottomRightRadius = 10;
+  }
+
+  return style;
+};
+
+export default getStyle;
+
+type ArgType = {
+  date: Date;
+  shortDate: Date;
+  active?: boolean;
+  selectedDate?: DateValueType;
+  color?: string;
+};

package/src/libs/isActive.ts

@@ -0,0 +1,20 @@
+export default function isActive({ min, max, date, disableDate }: ArgType) {
+  if (!date) return false;
+
+  if (min && max)
+    return date.getTime() >= min.getTime() && date.getTime() <= max.getTime();
+
+  if (min) return date.getTime() >= min.getTime();
+  if (max) return date.getTime() <= max.getTime();
+
+  if (disableDate) return !disableDate(date);
+
+  return true;
+}
+
+type ArgType = {
+  min?: Date;
+  max?: Date;
+  date?: Date;
+  disableDate?: (date: Date) => boolean;
+};

package/src/libs/isToday.ts

@@ -0,0 +1,9 @@
+export default function isToday(date: Date) {
+  const today = new Date();
+
+  return (
+    today.getDate() === date.getDate() &&
+    today.getMonth() === date.getMonth() &&
+    today.getFullYear() === date.getFullYear()
+  );
+}

package/src/libs/resetTime.ts

@@ -0,0 +1,3 @@
+export default function resetTime(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}

package/src/libs/toHexColor.ts

@@ -0,0 +1,13 @@
+import { processColor } from "react-native";
+
+export function toHexColor(color?: string) {
+  if (!color) return "#000000";
+
+  const processed = processColor(color);
+
+  if (!processed) return "#000000";
+
+  const hex = processed.toString(16).padStart(8, "0");
+
+  return `#${hex.slice(2)}`;
+}

package/src/ui/index.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren } from "react";
+import {
+  Text,
+  TextProps,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+
+type KViewProps = ViewStyle &
+  PropsWithChildren & {
+    nativeProps?: ViewProps;
+  };
+export function KView({ nativeProps, children, ...style }: KViewProps) {
+  return (
+    <View style={style} {...nativeProps}>
+      {children}
+    </View>
+  );
+}
+
+type KTouchableOpacityProps = ViewStyle &
+  PropsWithChildren & {
+    nativeProps?: TouchableOpacityProps;
+  };
+export function KTouchableOpacity({
+  nativeProps,
+  children,
+  ...style
+}: KTouchableOpacityProps) {
+  return (
+    <TouchableOpacity style={style} {...nativeProps}>
+      {children}
+    </TouchableOpacity>
+  );
+}
+
+type KTextProps = TextStyle &
+  PropsWithChildren & {
+    nativeProps?: TextProps;
+  };
+export function KText({ nativeProps, children, ...style }: KTextProps) {
+  return (
+    <Text style={style} {...nativeProps}>
+      {children}
+    </Text>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "outDir": "./build",
+        "declaration": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true,
+        "jsx": "react-native",
+        "lib": [
+            "esnext"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "../../node_modules"
+    ],
+    "include": [
+        "src/**/*",
+        "index.ts",
+        "assets/**/*",
+    ],
+}