pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/date-picker/DatePicker.js

@@ -0,0 +1,162 @@
+"use strict";
+
+/**
+ * DatePicker — a field styled like `Input`'s box (`PickerField`) that opens `Calendar` and/or
+ * `TimePicker` in `PickerShell` (React Native's OWN `Modal` — see `PickerShell.tsx`). In
+ * `"datetime"` mode the sheet shows a Date | Time `Tabs` strip above the active panel — the
+ * library's own `Tabs` component, composed rather than reimplemented.
+ *
+ * The sheet edits a local DRAFT, never `value` directly: `Calendar`/`TimePicker` inside the modal
+ * report into `draft`, and only Confirm commits it via `onChange`. Cancel — and the backdrop, which
+ * is the same dismissal — discards the draft, so "Cancel restores the prior value" holds by
+ * construction (the prior value was never touched).
+ */
+
+import { memo, useCallback, useState } from "react";
+import { View } from "react-native";
+import { Tabs } from "../tabs/index.js";
+import { Calendar } from "./Calendar.js";
+import { PickerField } from "./PickerField.js";
+import { PickerShell } from "./PickerShell.js";
+import { TimePicker } from "./TimePicker.js";
+import { useTheme } from "../../theme/hooks.js";
+import { DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, DEFAULT_PLACEHOLDER, clampToRange, formatFieldValue, withDay } from "./DatePicker.variants.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SHEET_LABELS = {
+  date: "Date picker",
+  datetime: "Date and time picker",
+  time: "Time picker"
+};
+const DATE_TIME_TABS = [{
+  label: "Date",
+  value: "date"
+}, {
+  label: "Time",
+  value: "time"
+}];
+export const DatePicker = /*#__PURE__*/memo(function DatePicker({
+  value = null,
+  onChange,
+  mode = "date",
+  confirmOnSelect = false,
+  label,
+  placeholder = DEFAULT_PLACEHOLDER,
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  clearable = true,
+  format,
+  use24Hour = false,
+  firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK,
+  locale = DEFAULT_LOCALE,
+  containerStyle,
+  testID
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [activeTab, setActiveTab] = useState("date");
+  const displayText = formatFieldValue(value, mode, {
+    locale,
+    use24Hour,
+    format
+  });
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    setDraft(value);
+    setActiveTab("date");
+    setOpen(true);
+  }, [disabled, value]);
+  const closePicker = useCallback(() => setOpen(false), []);
+  const confirm = useCallback(() => {
+    onChange(draft === null ? null : clampToRange(draft, minDate, maxDate));
+    setOpen(false);
+  }, [draft, onChange, minDate, maxDate]);
+  const clearValue = useCallback(() => onChange(null), [onChange]);
+
+  // Preserves any time already chosen on the Time tab: Calendar's own `onChange` only ever reports
+  // a day (at noon — it has no concept of time-of-day), so switching the day must re-apply the
+  // draft's existing time-of-day rather than resetting it to noon.
+  const handleDateChange = useCallback(date => {
+    setDraft(prev => withDay(prev, date));
+  }, []);
+  const handleDateSelect = useCallback(date => {
+    const next = withDay(draft, date);
+    if (confirmOnSelect && mode === "date") {
+      onChange(clampToRange(next, minDate, maxDate));
+      setOpen(false);
+      return;
+    }
+    handleDateChange(date);
+  }, [draft, confirmOnSelect, mode, onChange, minDate, maxDate, handleDateChange]);
+
+  // TimePicker's `onChange` already merges against the draft it was given as `value`, so its output
+  // is the new committed draft directly.
+  const handleTimeChange = useCallback(date => setDraft(date), []);
+  const handleTabChange = useCallback(tab => setActiveTab(tab), []);
+  const trailingIcon = mode === "time" ? "clock" : "calendar";
+  const body = mode === "time" ? /*#__PURE__*/_jsx(TimePicker, {
+    value: draft,
+    onChange: handleTimeChange,
+    use24Hour: use24Hour,
+    testID: testID ? `${testID}-time` : undefined
+  }) : mode === "datetime" ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      items: DATE_TIME_TABS,
+      value: activeTab,
+      onValueChange: handleTabChange,
+      size: "sm",
+      style: {
+        marginBottom: theme.space[1]
+      },
+      testID: testID ? `${testID}-tabs` : undefined
+    }), activeTab === "date" ? /*#__PURE__*/_jsx(Calendar, {
+      value: draft,
+      onSelect: handleDateSelect,
+      minDate: minDate,
+      maxDate: maxDate,
+      firstDayOfWeek: firstDayOfWeek,
+      locale: locale,
+      testID: testID ? `${testID}-calendar` : undefined
+    }) : /*#__PURE__*/_jsx(TimePicker, {
+      value: draft,
+      onChange: handleTimeChange,
+      use24Hour: use24Hour,
+      testID: testID ? `${testID}-time` : undefined
+    })]
+  }) : /*#__PURE__*/_jsx(Calendar, {
+    value: draft,
+    onSelect: handleDateSelect,
+    minDate: minDate,
+    maxDate: maxDate,
+    firstDayOfWeek: firstDayOfWeek,
+    locale: locale,
+    testID: testID ? `${testID}-calendar` : undefined
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsx(PickerField, {
+      label: label,
+      placeholder: placeholder,
+      displayText: displayText,
+      error: error,
+      disabled: disabled,
+      open: open,
+      clearable: clearable,
+      clearAccessibilityLabel: "Clear date",
+      trailingIcon: trailingIcon,
+      onPress: openPicker,
+      onClear: clearValue,
+      testID: testID
+    }), /*#__PURE__*/_jsx(PickerShell, {
+      open: open,
+      accessibilityLabel: SHEET_LABELS[mode],
+      onCancel: closePicker,
+      onConfirm: confirm,
+      testID: testID,
+      children: body
+    })]
+  });
+});
+//# sourceMappingURL=DatePicker.js.map