@utilitywarehouse/hearth-react-native 0.24.0 → 0.25.0

package/src/components/TimePickerInput/TimePickerInput.tsx

@@ -0,0 +1,283 @@
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { CloseSmallIcon, TimeSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, TextInputFocusEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import type { DateType } from '../DatePicker/DatePicker.props';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { TimePicker } from '../TimePicker';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type TimePickerInputProps from './TimePickerInput.props';
+import TimePickerInputDoneButton from './TimePickerInputDoneButton';
+
+dayjs.extend(customParseFormat);
+
+const DEFAULT_FORMAT_24 = 'HH:mm';
+const DEFAULT_FORMAT_12 = 'hh:mm A';
+
+const maskDefaultFormat = (value: string) => {
+  const digitsOnly = value.replace(/\D/g, '').slice(0, 4);
+  const hours = digitsOnly.slice(0, 2);
+  const minutes = digitsOnly.slice(2, 4);
+
+  return [hours, minutes].filter(Boolean).join(':');
+};
+
+const TimePickerInput = ({
+  validationStatus = 'initial',
+  disabled,
+  focused,
+  readonly,
+  placeholder = '--:--',
+  inBottomSheet = false,
+  format,
+  openButtonLabel = 'Open time picker',
+  autoCloseOnSelect = true,
+  label,
+  labelVariant,
+  helperText,
+  helperIcon,
+  validText,
+  invalidText,
+  required = true,
+  onChange,
+  onChangeText,
+  onBlur,
+  onFocus,
+  value,
+  timePickerProps,
+  onClear,
+  ...rest
+}: TimePickerInputProps) => {
+  const formFieldContext = useFormFieldContext();
+  const isDisabled = formFieldContext?.disabled ?? disabled;
+  const isReadonly = formFieldContext?.readonly ?? readonly;
+
+  const pickerRef = useRef<BottomSheetModalMethods | null>(null);
+  const accessoryViewID = useMemo(() => {
+    if (Platform.OS !== 'ios') return undefined;
+    return `timepicker-input-${Math.random().toString(36).slice(2)}`;
+  }, []);
+
+  const use12Hours = timePickerProps?.use12Hours ?? false;
+  const resolvedFormat = useMemo(
+    () => format ?? (use12Hours ? DEFAULT_FORMAT_12 : DEFAULT_FORMAT_24),
+    [format, use12Hours]
+  );
+
+  const formatTime = useCallback(
+    (dateValue?: DateType) => {
+      if (!dateValue) return '';
+      const parsed = dayjs(dateValue);
+      return parsed.isValid() ? parsed.format(resolvedFormat) : '';
+    },
+    [resolvedFormat]
+  );
+
+  const isDefaultFormat = resolvedFormat === DEFAULT_FORMAT_24;
+
+  const [inputValue, setInputValue] = useState(() => formatTime(value));
+
+  useEffect(() => {
+    setInputValue(formatTime(value));
+  }, [value, formatTime]);
+
+  const handleTextChange = useCallback(
+    (text: string) => {
+      const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+
+      setInputValue(nextValue);
+      onChangeText?.(nextValue);
+
+      if (!nextValue) {
+        onChange?.({ date: undefined });
+        return;
+      }
+
+      const parsed = dayjs(nextValue, resolvedFormat, true);
+
+      if (parsed.isValid()) {
+        onChange?.({ date: parsed.toDate() });
+      } else {
+        onChange?.({ date: undefined });
+      }
+    },
+    [isDefaultFormat, onChange, onChangeText, resolvedFormat]
+  );
+
+  const handleClear = useCallback(() => {
+    setInputValue('');
+    onChange?.({ date: undefined });
+    onClear?.();
+  }, [onChange, onClear]);
+
+  const closeKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const openPicker = useCallback(() => {
+    if (isDisabled || isReadonly) return;
+    closeKeyboard();
+    pickerRef.current?.present();
+  }, [closeKeyboard, isDisabled, isReadonly]);
+
+  const selectedDate = useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const parsed = dayjs(inputValue, resolvedFormat, true);
+    return parsed.isValid() ? parsed.toDate() : undefined;
+  }, [value, inputValue, resolvedFormat]);
+
+  const handlePickerChange = useCallback(
+    ({ date }: { date: DateType }) => {
+      if (!date) {
+        handleClear();
+        return;
+      }
+
+      const formatted = formatTime(date);
+      setInputValue(formatted);
+      onChange?.({ date });
+
+      if (autoCloseOnSelect) {
+        pickerRef.current?.close?.();
+      }
+    },
+    [autoCloseOnSelect, formatTime, handleClear, onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: TextInputFocusEvent) => {
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
+  const handleFocus = useCallback(
+    (event: TextInputFocusEvent) => {
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+
+  const { onCancel: pickerOnCancel, ...restTimePickerProps } = timePickerProps ?? {};
+  const {
+    style: inputStyle,
+    keyboardType: keyboardTypeProp,
+    inputMode: inputModeProp,
+    accessibilityHint: accessibilityHintProp,
+    accessibilityLabel: accessibilityLabelProp,
+    accessible: accessibleProp,
+    importantForAccessibility: importantForAccessibilityProp,
+    ...textInputProps
+  } = rest;
+
+  const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+  const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+  const resolvedAccessibilityHint =
+    accessibilityHintProp ?? `Enter the time in ${resolvedFormat} format`;
+  const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Time input';
+  const resolvedAccessible = accessibleProp ?? true;
+  const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+
+  const handleCancel = useCallback(() => {
+    pickerOnCancel?.();
+    pickerRef.current?.close?.();
+  }, [pickerOnCancel]);
+
+  const placeholderValue = placeholder;
+
+  return (
+    <>
+      <Input
+        validationStatus={validationStatus}
+        disabled={disabled}
+        readonly={readonly}
+        focused={focused}
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validText={validText}
+        invalidText={invalidText}
+        required={required}
+        style={styles.wrap}
+        accessible={false}
+      >
+        <InputField
+          editable={!isReadonly && !isDisabled}
+          value={inputValue}
+          placeholder={placeholderValue}
+          onChangeText={handleTextChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          inBottomSheet={inBottomSheet}
+          keyboardType={resolvedKeyboardType}
+          inputMode={resolvedInputMode}
+          accessibilityHint={resolvedAccessibilityHint}
+          aria-label="Time input"
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessible={resolvedAccessible}
+          accessibilityState={{
+            disabled: isDisabled || isReadonly,
+          }}
+          importantForAccessibility={resolvedImportantForAccessibility}
+          inputAccessoryViewID={Platform.OS === 'ios' ? accessoryViewID : undefined}
+          {...textInputProps}
+          style={[styles.input, inputStyle]}
+        />
+        {!!inputValue && onClear && !isReadonly && !isDisabled && (
+          <InputSlot accessibilityElementsHidden={false}>
+            <UnstyledIconButton
+              accessibilityLabel="Clear time"
+              accessibilityHint="Removes the current time"
+              icon={CloseSmallIcon}
+              onPress={handleClear}
+            />
+          </InputSlot>
+        )}
+        <InputSlot accessibilityElementsHidden={false}>
+          <UnstyledIconButton
+            accessibilityLabel={openButtonLabel}
+            accessibilityHint="Opens the time picker"
+            icon={TimeSmallIcon}
+            onPress={openPicker}
+            disabled={isDisabled || isReadonly}
+          />
+        </InputSlot>
+      </Input>
+      <TimePicker
+        ref={pickerRef}
+        date={selectedDate}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+        {...restTimePickerProps}
+      />
+      {Platform.OS === 'ios' && accessoryViewID && (
+        <TimePickerInputDoneButton
+          accessoryViewID={accessoryViewID}
+          closeKeyboard={closeKeyboard}
+        />
+      )}
+    </>
+  );
+};
+
+TimePickerInput.displayName = 'TimePickerInput';
+
+const styles = StyleSheet.create(theme => ({
+  wrap: {
+    gap: theme.components.input.date.gap,
+  },
+  input: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+export default TimePickerInput;

package/src/components/TimePickerInput/TimePickerInputDoneButton.tsx

@@ -0,0 +1,42 @@
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+
+const TimePickerInputDoneButton = ({
+  accessoryViewID,
+  closeKeyboard,
+}: {
+  accessoryViewID: string;
+  closeKeyboard: () => void;
+}) => {
+  return (
+    <InputAccessoryView nativeID={accessoryViewID}>
+      <View style={styles.accessory}>
+        <Button
+          accessibilityRole="button"
+          accessibilityLabel="Done"
+          onPress={closeKeyboard}
+          variant="ghost"
+          colorScheme="functional"
+        >
+          Done
+        </Button>
+      </View>
+    </InputAccessoryView>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  accessory: {
+    paddingHorizontal: 16,
+    paddingVertical: 2,
+    alignItems: 'flex-end',
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.color.border.subtle,
+  },
+}));
+
+TimePickerInputDoneButton.DisplayName = 'TimePickerInputDoneButton';
+
+export default TimePickerInputDoneButton;

package/src/components/TimePickerInput/TimePickerInputDoneButton.web.tsx

@@ -0,0 +1,7 @@
+const TimePickerInputDoneButton = () => {
+  return null;
+};
+
+TimePickerInputDoneButton.DisplayName = 'TimePickerInputDoneButton';
+
+export default TimePickerInputDoneButton;

package/src/components/TimePickerInput/index.ts

@@ -0,0 +1,2 @@
+export { default as TimePickerInput } from './TimePickerInput';
+export type { default as TimePickerInputProps } from './TimePickerInput.props';

package/src/components/index.ts

@@ -53,6 +53,8 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './TimePicker';
+export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
 export * from './VerificationInput';

package/build/components/DatePicker/TimePicker.d.ts

@@ -1,3 +0,0 @@
-export type Period = 'AM' | 'PM';
-declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
-export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { ScrollView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useDatePickerContext } from './DatePicker.context';
-import { CONTAINER_HEIGHT } from './enums';
-import PeriodPicker from './time-picker/period-picker';
-import Wheel from './time-picker/wheel';
-import { formatNumber, getParsedDate } from './utils';
-const createNumberList = (num, numerals, startFrom = 0) => {
-    return Array.from({ length: num }, (_, i) => ({
-        value: i + startFrom,
-        text: i + startFrom < 10
-            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
-            : `${formatNumber(i + startFrom, numerals)}`,
-    }));
-};
-const TimePicker = () => {
-    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
-    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
-    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
-    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
-    const handleChangeHour = useCallback((value) => {
-        let hour24 = value;
-        if (use12Hours) {
-            if (period === 'AM' && value === 12) {
-                hour24 = 0;
-            }
-            else if (period === 'PM' && value < 12) {
-                hour24 = value + 12;
-            }
-            else {
-                hour24 = value;
-            }
-        }
-        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
-    const handleChangeMinute = useCallback((value) => {
-        const newDate = dayjs.tz(date, timeZone).minute(value);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone]);
-    const handlePeriodChange = useCallback((newPeriod) => {
-        let newHour = hour12;
-        if (newPeriod === 'PM' && hour12 < 12) {
-            newHour = hour12 + 12;
-        }
-        else if (newPeriod === 'AM' && hour12 === 12) {
-            newHour = 0;
-        }
-        else if (newPeriod === 'AM' && hour >= 12) {
-            newHour = hour12;
-        }
-        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
-        onSelectDate(newDate);
-    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
-    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    wheelContainer: {
-        flex: 1,
-    },
-    timePickerContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: CONTAINER_HEIGHT / 2,
-        height: CONTAINER_HEIGHT / 2,
-        flexDirection: 'row',
-    },
-    timeSeparator: {
-        marginHorizontal: 5,
-    },
-    periodContainer: {
-        marginLeft: 10,
-    },
-});
-export default TimePicker;

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -1,4 +0,0 @@
-import { Animated } from 'react-native';
-declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
-declare function normalize(animated: Animated.Animated): Animated.Animated;
-export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -1,19 +0,0 @@
-import { Animated } from 'react-native';
-const FACTORIAL_3 = 3 * 2;
-const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
-const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
-function sin(animated) {
-    const normalized = normalize(animated);
-    const square = Animated.multiply(normalized, normalized);
-    const pow3 = Animated.multiply(normalized, square);
-    const pow5 = Animated.multiply(pow3, square);
-    const pow7 = Animated.multiply(pow5, square);
-    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
-}
-function normalize(animated) {
-    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
-        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
-        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
-    });
-}
-export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import WheelPicker from './wheel-picker';
-const options = [
-    { value: 'AM', text: 'AM' },
-    { value: 'PM', text: 'PM' },
-];
-const PeriodNative = ({ value, setValue = () => { } }) => {
-    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
-        //containerStyle={defaultStyles.container}
-        itemHeight: 44, decelerationRate: "fast" }));
-};
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodNative, customComparator);

package/build/components/DatePicker/time-picker/period-picker.d.ts

@@ -1,6 +0,0 @@
-type PeriodProps = {
-    value: string;
-    setValue?: (value: any) => void;
-};
-declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-picker.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import PeriodNative from './period-native';
-import PeriodWeb from './period-web';
-const PeriodPicker = (props) => {
-    const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
-    return _jsx(Component, { ...props });
-};
-export default memo(PeriodPicker);

package/build/components/DatePicker/time-picker/period-web.d.ts

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-web.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-const PeriodWeb = ({ value, setValue = () => { } }) => {
-    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
-};
-const styles = StyleSheet.create({
-    period: {
-        width: 65,
-        height: 44,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel-native.d.ts

@@ -1,8 +0,0 @@
-import { PickerOption } from '../DatePicker.props';
-interface WheelProps {
-    value: number | string;
-    setValue?: (value: any) => void;
-    items: PickerOption[];
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/wheel-native.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import WheelPicker from './wheel-picker';
-const WheelNative = ({ value, setValue = () => { }, items }) => {
-    return (_jsx(WheelPicker, { value: value, options: items, onChange: setValue, containerStyle: styles.container, itemHeight: 44, decelerationRate: "fast" }));
-};
-const styles = StyleSheet.create({
-    container: {
-        display: 'flex',
-        ...Platform.select({
-            web: {
-                userSelect: 'none',
-            },
-        }),
-    },
-});
-export default memo(WheelNative);

package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/index.js

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-interface ItemProps {
-    style: StyleProp<ViewStyle>;
-    option: PickerOption | null;
-    height: number;
-    index: number;
-    currentScrollIndex: Animated.AnimatedAddition<number>;
-    visibleRest: number;
-    rotationFunction: (x: number) => number;
-    opacityFunction: (x: number) => number;
-    scaleFunction: (x: number) => number;
-}
-declare const _default: React.NamedExoticComponent<ItemProps>;
-export default _default;