@adiraku/react-native-ui 1.2.8-canary-1 → 1.2.8-canary-2

package/src/components/TextInput/TextInput.component.tsx

@@ -1,14 +1,20 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { getStyle } from './TextInput.style';
-import type { TextInputProps } from './TextInput.type';
+import { Animated } from 'react-native';
+import type {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+} from 'react-native';
 import MaskInput from 'react-native-mask-input';
+
+import { getStyle } from './TextInput.style';
 import { Typography } from '../typography/typography.component';
-import { Animated } from 'react-native';
+import { Calendars } from '../calendars/calendars.component';
+
 import { Palettes } from '../../themes';
-import type { LayoutChangeEvent } from 'react-native';
-import type { NativeSyntheticEvent } from 'react-native';
-import type { TextInputFocusEventData } from 'react-native';
+import type { TextInputProps } from './TextInput.type';
 
 const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
   const {
@@ -22,12 +28,20 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
     isError,
     counter = 0,
     inputIcon = null,
+    onTouchStart,
+    showSoftInputOnFocus = true,
+    inputType = 'text',
+    calendarProps,
+    onChangeDate: onDateChange,
     ...rest
   } = props;
 
   const [labelWidth, setLabelWidth] = React.useState(0);
   const [focused, setFocused] = React.useState(false);
 
+  // for date input
+  const [isModalDateVisible, setIsModalDateVisible] = React.useState(false);
+
   const computedStyle = getStyle(props, focused);
 
   const animation = React.useRef(new Animated.Value(0));
@@ -76,53 +90,103 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
     setLabelWidth(width + 24);
   };
 
+  const computedValue = React.useMemo(() => {
+    if (inputType === 'date' && typeof value === 'object') {
+      const options: Intl.DateTimeFormatOptions = {
+        weekday: 'long',
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+      };
+
+      const formattedDate = new Intl.DateTimeFormat('id-ID', options).format(
+        value
+      );
+
+      // Capitalize the first letter of the weekday and month for consistency with the example format.
+      return formattedDate.replace(/(^\w{1})|(\s\w{1})/g, (letter) =>
+        letter.toUpperCase()
+      );
+    }
+    return value;
+  }, [value, inputType]);
+
+  const handleOnTouchStart = (e: GestureResponderEvent) => {
+    if (inputType === 'date') {
+      setIsModalDateVisible(true);
+    }
+
+    onTouchStart?.(e);
+  };
+
+  const handleOnDateChangeSave = (date: Date) => {
+    onDateChange?.(date);
+  };
+
   return (
-    <View style={computedStyle.fieldWrapper}>
-      <View style={computedStyle.fieldContainer}>
-        {!!label && (
-          <Animated.View
-            style={[
-              computedStyle.labelContainer,
-              {
-                transform: [{ scale }, { translateY }, { translateX }],
-              },
-            ]}
-            onLayout={getLabelWidth}
-            pointerEvents="none"
-          >
-            <Typography variant="body2" style={computedStyle.label}>
-              {label}
-            </Typography>
-          </Animated.View>
-        )}
-        <View style={computedStyle.inputWrapper}>
-          <MaskInput
-            value={value}
-            style={[computedStyle.textField]}
-            onFocus={handleOnFocus}
-            onBlur={handleOnBlur}
-            placeholderTextColor={focused ? Palettes.black[500] : 'transparent'}
-            {...rest}
-          />
-          {inputIcon || counter > 0
-            ? inputIcon || (
-                <Typography style={computedStyle.counter} variant="caption">
-                  {`${value?.length}/${counter}`}
-                </Typography>
-              )
-            : null}
+    <>
+      <View style={computedStyle.fieldWrapper}>
+        <View style={computedStyle.fieldContainer}>
+          {!!label && (
+            <Animated.View
+              style={[
+                computedStyle.labelContainer,
+                {
+                  transform: [{ scale }, { translateY }, { translateX }],
+                },
+              ]}
+              onLayout={getLabelWidth}
+              pointerEvents="none"
+            >
+              <Typography variant="body2" style={computedStyle.label}>
+                {label}
+              </Typography>
+            </Animated.View>
+          )}
+          <View style={computedStyle.inputWrapper}>
+            <MaskInput
+              value={computedValue}
+              style={[computedStyle.textField]}
+              onFocus={handleOnFocus}
+              onBlur={handleOnBlur}
+              placeholderTextColor={
+                focused ? Palettes.black[500] : 'transparent'
+              }
+              showSoftInputOnFocus={
+                inputType === 'date' ? false : showSoftInputOnFocus
+              }
+              onTouchStart={handleOnTouchStart}
+              {...rest}
+            />
+            {inputIcon || counter > 0
+              ? inputIcon || (
+                  <Typography style={computedStyle.counter} variant="caption">
+                    {`${computedValue?.length}/${counter}`}
+                  </Typography>
+                )
+              : null}
+          </View>
         </View>
+        {errorMessage || helperMessage ? (
+          <Typography
+            variant="caption"
+            style={computedStyle.messageHelper}
+            {...helperMessageProps}
+          >
+            {errorMessage || ((!isError && helperMessage) as string)}
+          </Typography>
+        ) : null}
       </View>
-      {errorMessage || helperMessage ? (
-        <Typography
-          variant="caption"
-          style={computedStyle.messageHelper}
-          {...helperMessageProps}
-        >
-          {errorMessage || ((!isError && helperMessage) as string)}
-        </Typography>
-      ) : null}
-    </View>
+
+      {inputType === 'date' && (
+        <Calendars
+          isVisible={isModalDateVisible}
+          onDateSave={handleOnDateChangeSave}
+          onDismiss={() => setIsModalDateVisible(false)}
+          {...calendarProps}
+        />
+      )}
+    </>
   );
 };
 

package/src/components/TextInput/TextInput.type.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { MaskInputProps } from 'react-native-mask-input';
 import { TypographyProps } from '../typography/typography.type';
+import { CalendarPropsAleph } from '../calendars/calendars.type';
 
 export interface TextInputProps extends MaskInputProps {
   /**
@@ -37,4 +38,14 @@ export interface TextInputProps extends MaskInputProps {
    * Show Icon at the end of TextInput.
    */
   inputIcon?: ReactNode;
+
+  /**
+   * Type of the input. won't show keyboard if value set to 'date'
+   */
+  inputType?: 'text' | 'date';
+
+  // handler which get executed when the save button on calendar pressed. Usable only when inputType='date'
+  onChangeDate?: (date: Date) => void;
+
+  calendarProps?: Omit<CalendarPropsAleph, 'isVisible' | 'onDateSave'>;
 }

package/src/components/calendars/calendars.component.tsx

@@ -0,0 +1,296 @@
+import React, {
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { TouchableHighlight, View } from 'react-native';
+import {
+  Calendar,
+  LocaleConfig,
+} from 'react-native-calendars';
+import { DateData, MarkedDates } from 'react-native-calendars/src/types';
+import ReactNativeModal from 'react-native-modal';
+
+import { Palettes, Spacing } from '../../themes';
+import {
+  adjustDate,
+  findYearPairIndex,
+  generateYearPairs,
+  getFullDate,
+  getMonth,
+  getYear,
+} from './calendars.service';
+import { calendarTheme, getStyle } from './calendars.style';
+import { CalendarPropsAleph, ModeSelect, MonthID } from './calendars.type';
+
+import { IconChevronLeft, IconChevronRight } from '../../icons';
+import { Typography } from '../typography/typography.component';
+import { Button } from '../button/button.component';
+import { MonthPickerModal, YearPicker } from './month-picker-modal.component';
+
+// localization for calendar component
+LocaleConfig.locales['id'] = MonthID;
+LocaleConfig.defaultLocale = 'id';
+
+export type OnMonthChange = (data: { num: number }) => void;
+
+export type OnArrowChange = (direction: 'left' | 'right') => void;
+
+export function Calendars({
+  isVisible,
+  initialDate = new Date(),
+  onDismiss = () => {},
+  minDate,
+  maxDate,
+  onDateSave,
+  selectedDate,
+  ...rest
+}: CalendarPropsAleph) {
+  const computedStyle = getStyle();
+
+  const [dateindicator, setDateIndicator] = useState(
+    selectedDate || initialDate
+  );
+  const [markedDate, setMarkedDate] = useState<MarkedDates>({});
+  const [selectMode, setSelectMode] = useState<ModeSelect>('calendar');
+
+  const yearIntervalPair = useMemo(() => {
+    let minYear = 1900;
+    let maxYear = new Date().getFullYear();
+    if (minDate) {
+      minYear = new Date(minDate).getFullYear();
+    }
+
+    if (maxDate) {
+      maxYear = new Date(maxDate).getFullYear();
+    }
+
+    console.log({ minYear, maxYear, minDate, maxDate });
+
+    return generateYearPairs(minYear, maxYear, 12);
+  }, [minDate, maxDate]);
+
+  const initYearPairIndex = findYearPairIndex(
+    yearIntervalPair,
+    initialDate?.getFullYear() || 0
+  );
+
+  const [yearPairSelectIndex, setYearPairSelectIndex] =
+    useState(initYearPairIndex);
+
+  const handleOnMonthChange: OnMonthChange = ({ num }) => {
+    setDateIndicator(adjustDate(dateindicator, num));
+    setSelectMode('calendar');
+  };
+
+  const handleOnArrowPress: OnArrowChange = (direction) => {
+    if (selectMode === 'calendar') {
+      setDateIndicator(
+        adjustDate(dateindicator, direction === 'left' ? -1 : 1)
+      );
+    } else if (selectMode === 'month') {
+      setDateIndicator(
+        adjustDate(dateindicator, direction === 'left' ? -12 : 12)
+      );
+    } else {
+      if (yearPairSelectIndex <= 0 && direction === 'right') return;
+      if (
+        yearPairSelectIndex >= yearIntervalPair.length - 1 &&
+        direction === 'left'
+      )
+        return;
+
+      // don't ask what i'm doing, I know it's crazy T_T
+      setYearPairSelectIndex((e) => (direction === 'left' ? e + 1 : e - 1));
+    }
+  };
+
+  const onDayPress = useCallback((dates: DateData) => {
+    if (!dates) return;
+
+    setDateIndicator(new Date(dates.timestamp));
+    setMarkedDate({
+      [dates.dateString]: { selected: true, ...dates },
+    });
+  }, []);
+
+  const handleSelectModeChange = (mode: ModeSelect) => {
+    setSelectMode(mode);
+  };
+
+  const handleOnDismiss = () => {
+    onDismiss();
+
+    // reset back to initial state
+    setSelectMode('calendar');
+    setDateIndicator(initialDate);
+    setYearPairSelectIndex(initYearPairIndex);
+    setMarkedDate({});
+  };
+
+  const handleOnDateSubmit = () => {
+    const keys = Object.keys(markedDate)
+
+    if (keys.length <= 0) return;
+
+  const testDate = markedDate[keys[0] || ''] as MarkedDates[number] & {
+    timestamp: number;
+  };
+
+    const selectedDate = new Date(testDate?.timestamp);
+    onDateSave?.(selectedDate);
+    onDismiss();
+  }
+
+  return (
+    <ReactNativeModal
+      isVisible={isVisible}
+      onBackdropPress={handleOnDismiss}
+      onBackButtonPress={handleOnDismiss}
+      backdropTransitionOutTiming={0}
+      needsOffscreenAlphaCompositing={true}
+      animationIn="zoomInDown"
+      animationOut="zoomOut"
+      style={computedStyle.modalContainer}
+    >
+      <View style={computedStyle.container}>
+        <CalendarHeader
+          initialDate={dateindicator}
+          mode={selectMode}
+          handleOnArrowPress={handleOnArrowPress}
+          handleSelectMode={handleSelectModeChange}
+          yearPairSelectIndex={yearPairSelectIndex}
+          yearIntervalPair={yearIntervalPair}
+        />
+
+        <View
+          style={[
+            computedStyle.calendarContainer,
+            {
+              paddingHorizontal:
+                selectMode === 'calendar' ? Spacing[4] : Spacing[4],
+            },
+          ]}
+        >
+          {selectMode === 'calendar' ? (
+            <>
+              <Calendar
+                markedDates={markedDate}
+                initialDate={getFullDate(dateindicator)}
+                style={{ marginHorizontal: Spacing[12] }}
+                theme={calendarTheme}
+                renderHeader={() => null}
+                onDayPress={onDayPress}
+                enableSwipeMonths
+                minDate={minDate}
+                maxDate={maxDate}
+                {...rest}
+              />
+
+              <View style={computedStyle.calendarBottomContainer}>
+                <View style={{ flex: 1 }}>
+                  <Button
+                    label="Batal"
+                    variant="secondary"
+                    onPress={handleOnDismiss}
+                  />
+                </View>
+                <View style={{ width: 16 }} />
+                <View style={{ flex: 1 }}>
+                  <Button
+                    label="Simpan"
+                    onPress={handleOnDateSubmit}
+                    disabled={Object.keys(markedDate).length <= 0}
+                  />
+                </View>
+              </View>
+            </>
+          ) : selectMode === 'month' ? (
+            <MonthPickerModal
+              initialDate={dateindicator}
+              onMonthChange={handleOnMonthChange}
+            />
+          ) : (
+            <YearPicker
+              initialDate={dateindicator}
+              yearPairSelectIndex={yearPairSelectIndex}
+              yearIntervalPair={yearIntervalPair}
+              onYearChange={handleOnMonthChange}
+            />
+          )}
+        </View>
+      </View>
+    </ReactNativeModal>
+  );
+}
+
+type CalendarHeaderProps = {
+  mode: ModeSelect;
+  handleSelectMode: (mode: ModeSelect) => void;
+  handleOnArrowPress: OnArrowChange;
+  yearPairSelectIndex: number;
+  yearIntervalPair: [number, number][];
+} & Pick<CalendarPropsAleph, 'initialDate'>;
+
+const CalendarHeader = memo(function ({
+  mode = 'calendar',
+  initialDate = new Date(),
+  yearIntervalPair,
+  yearPairSelectIndex,
+  handleSelectMode,
+  handleOnArrowPress,
+}: CalendarHeaderProps) {
+  const computedStyle = getStyle();
+
+  return (
+    <View style={computedStyle.headerContainer}>
+      <TouchableHighlight
+        onPress={() => handleOnArrowPress('left')}
+        style={computedStyle.headerArrowWrapper}
+        underlayColor={Palettes.black[900] + '33'}
+      >
+        <IconChevronLeft />
+      </TouchableHighlight>
+
+      <View style={computedStyle.headerCenterWrapper}>
+        {mode === 'calendar' || mode === 'month' ? (
+          <>
+            <TouchableHighlight
+              onPress={() => handleSelectMode('month')}
+              style={computedStyle.headerCenterItem}
+              underlayColor={Palettes.black[900] + '33'}
+            >
+              <Typography variant="button">{getMonth(initialDate)}</Typography>
+            </TouchableHighlight>
+            <TouchableHighlight
+              onPress={() => handleSelectMode('year')}
+              style={computedStyle.headerCenterItem}
+              underlayColor={Palettes.black[900] + '33'}
+            >
+              <Typography variant="button">{getYear(initialDate)}</Typography>
+            </TouchableHighlight>
+          </>
+        ) : (
+          <TouchableHighlight
+            style={computedStyle.headerCenterItem}
+            underlayColor={Palettes.black[900] + '33'}
+          >
+            <Typography variant="button">
+              {yearIntervalPair[yearPairSelectIndex]?.[1]} -{' '}
+              {yearIntervalPair[yearPairSelectIndex]?.[0]}
+            </Typography>
+          </TouchableHighlight>
+        )}
+      </View>
+
+      <TouchableHighlight
+        onPress={() => handleOnArrowPress('right')}
+        style={computedStyle.headerArrowWrapper}
+        underlayColor={Palettes.black[900] + '33'}
+      >
+        <IconChevronRight />
+      </TouchableHighlight>
+    </View>
+  );
+});

package/src/components/calendars/calendars.service.ts

@@ -0,0 +1,64 @@
+export const getMonth = (date: Date) => {
+  return new Intl.DateTimeFormat('id-ID', { month: 'long' }).format(date);
+};
+
+export const getYear = (date: Date) => {
+  return new Intl.DateTimeFormat('id-ID', { year: 'numeric' }).format(date);
+};
+
+export const getFullDate = (date: Date) => {
+  const formatter = new Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+
+  // Format the date
+  const formattedDate = formatter.format(date);
+
+  // Since the formatter returns a date in the format of "YYYY/MM/DD",
+  // we need to replace the slashes with dashes
+  return formattedDate.replace(/\//g, '-');
+};
+
+export function adjustDate(date: Date, number: number) {
+  // Ensure the input date is a Date object
+  const newDate = new Date(date);
+
+  // Adjust the date by the specified number of days
+  newDate.setMonth(newDate.getMonth() + number);
+
+  return newDate;
+}
+
+type YearPair = [number, number];
+
+// endYear < startYear
+export function generateYearPairs(endYear: number, startYear: number, interval: number): YearPair[] {
+  const yearPairs: YearPair[] = [];
+  let currentYear = startYear;
+
+  while (currentYear - interval >= endYear) {
+    yearPairs.push([currentYear, currentYear - interval + 1]);
+    currentYear -= interval;
+  }
+
+  yearPairs.push([currentYear, endYear])
+  
+  return yearPairs;
+}
+export function findYearPairIndex(
+  years: [number, number][],
+  targetYear: number
+): number {
+  for (let i = 0; i < years.length; i++) {
+    const pair = years[i];
+    if (!pair) continue; // Skip if the pair is undefined
+
+    const [startYear, endYear] = pair;
+    if (targetYear >= endYear && targetYear <= startYear) {
+      return i;
+    }
+  }
+  return -1; // Return -1 if the target year is not found in any pair
+}