react-native-platform-components 1.4.0 → 1.6.0

package/src/web/DatePicker.tsx

@@ -0,0 +1,204 @@
+// web/DatePicker.tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import type { DatePickerProps } from '../DatePicker';
+import { Dialog } from './Dialog';
+import {
+  formatInputValue,
+  inputTypeForMode,
+  isWithinInputBounds,
+  parseInputValue,
+} from './dateInput';
+import { BUTTON_BASE, eventValue, usePrimaryColor } from './shared';
+
+const INPUT_STYLE = {
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: 40,
+  padding: '0 12px',
+  border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+  borderRadius: 8,
+  fontFamily: 'inherit',
+  fontSize: 16,
+  color: 'inherit',
+  backgroundColor: 'transparent',
+} as const;
+
+/**
+ * The browser's date and time inputs. `embedded` renders the input in place
+ * and reports every change with `confirmed: true`. `modal` opens it in a
+ * `<dialog>` with Cancel/Done buttons, like the iOS popover: changes report
+ * `confirmed: false`, Done reports `confirmed: true`, and Cancel, Escape or a
+ * click outside call `onClosed`. In `countDownTimer` mode the input is a time
+ * input and `onConfirm`'s `durationSeconds` is its hours and minutes;
+ * `yearAndMonth` is a month input. The browser's input has its own clock, so
+ * `is24Hour` and `android.inputMode` don't apply.
+ */
+export function DatePicker(props: DatePickerProps): React.ReactElement {
+  const {
+    style,
+    date,
+    minDate,
+    maxDate,
+    locale,
+    mode,
+    presentation = 'modal',
+    visible,
+    onConfirm,
+    onClosed,
+    ios,
+    testID,
+  } = props;
+
+  const primary = usePrimaryColor();
+  const type = inputTypeForMode(mode);
+  const label =
+    mode === 'countDownTimer'
+      ? 'Duration'
+      : {
+          'date': 'Date',
+          'time': 'Time',
+          'datetime-local': 'Date and time',
+          'month': 'Month',
+        }[type];
+  const step =
+    (type === 'time' || type === 'datetime-local') && ios?.minuteInterval
+      ? ios.minuteInterval * 60
+      : undefined;
+  const isValid = (next: Date | null) =>
+    isWithinInputBounds(next, type, minDate, maxDate);
+  const confirm = (next: Date, confirmed: boolean) => {
+    if (!isValid(next)) return;
+    onConfirm?.(
+      next,
+      confirmed,
+      mode === 'countDownTimer'
+        ? next.getHours() * 3600 + next.getMinutes() * 60
+        : 0
+    );
+  };
+
+  const renderInput = (
+    value: Date | null,
+    onValue: (next: Date | null) => void,
+    autoFocus: boolean
+  ) => (
+    <input
+      type={type}
+      aria-label={label}
+      lang={locale}
+      value={formatInputValue(value, type)}
+      min={formatInputValue(minDate, type) || undefined}
+      max={formatInputValue(maxDate, type) || undefined}
+      step={step}
+      autoFocus={autoFocus}
+      onChange={(event) => {
+        const next = parseInputValue(eventValue(event), type, value);
+        onValue(next);
+      }}
+      style={{ ...INPUT_STYLE, accentColor: primary }}
+    />
+  );
+
+  if (presentation === 'embedded') {
+    return (
+      <View testID={testID} style={style}>
+        {renderInput(date, (next) => next && confirm(next, true), false)}
+      </View>
+    );
+  }
+
+  return (
+    <View testID={testID} style={style}>
+      {visible ? (
+        <ModalPicker
+          date={date}
+          label={label}
+          primary={primary}
+          renderInput={renderInput}
+          onConfirm={confirm}
+          onClosed={onClosed}
+          isValid={isValid}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function ModalPicker({
+  date,
+  label,
+  primary,
+  renderInput,
+  onConfirm,
+  onClosed,
+  isValid,
+}: {
+  date: Date | null;
+  label: string;
+  primary: string;
+  renderInput: (
+    value: Date | null,
+    onValue: (next: Date | null) => void,
+    autoFocus: boolean
+  ) => React.ReactElement;
+  onConfirm: (next: Date, confirmed: boolean) => void;
+  onClosed: DatePickerProps['onClosed'];
+  isValid: (next: Date | null) => boolean;
+}): React.ReactElement {
+  const [draft, setDraft] = useState(date);
+  const dateMs = date?.getTime() ?? null;
+  const [previousDateMs, setPreviousDateMs] = useState(dateMs);
+  // Honor external updates without remounting the dialog or discarding edits
+  // when the parent creates another Date representing the same instant.
+  if (!Object.is(dateMs, previousDateMs)) {
+    setPreviousDateMs(dateMs);
+    setDraft(date);
+  }
+  const valid = isValid(draft);
+  const dismiss = () => onClosed?.();
+  const textButton = {
+    ...BUTTON_BASE,
+    height: 40,
+    padding: '0 12px',
+    border: 'none',
+    borderRadius: 20,
+    fontSize: 14,
+    color: primary,
+    backgroundColor: 'transparent',
+  };
+
+  return (
+    <Dialog label={label} onDismiss={dismiss}>
+      {renderInput(
+        draft,
+        (next) => {
+          setDraft(next);
+          if (next) onConfirm(next, false);
+        },
+        true
+      )}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: 8,
+          marginTop: 12,
+        }}
+      >
+        <button type="button" onClick={dismiss} style={textButton}>
+          Cancel
+        </button>
+        <button
+          type="button"
+          disabled={!valid}
+          onClick={() => valid && draft && onConfirm(draft, true)}
+          style={{ ...textButton, opacity: valid ? 1 : 0.38 }}
+        >
+          Done
+        </button>
+      </div>
+    </Dialog>
+  );
+}

package/src/web/DateRangePicker.tsx

@@ -0,0 +1,135 @@
+// web/DateRangePicker.tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import type { DateRangePickerProps } from '../DatePicker';
+import { Dialog } from './Dialog';
+import {
+  formatInputValue,
+  isWithinInputBounds,
+  parseInputValue,
+} from './dateInput';
+import { BUTTON_BASE, eventValue, usePrimaryColor } from './shared';
+
+/** The browser has start and end date inputs, so the range picker works on web. */
+export const isDateRangePickerSupported: boolean = true;
+
+const INPUT_STYLE = {
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: 40,
+  padding: '0 12px',
+  border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+  borderRadius: 8,
+  fontFamily: 'inherit',
+  fontSize: 16,
+  color: 'inherit',
+  backgroundColor: 'transparent',
+} as const;
+
+const startOfDay = (date: Date | null | undefined): Date | null => {
+  if (!date || !Number.isFinite(date.getTime())) return null;
+  const day = new Date(date.getTime());
+  day.setHours(0, 0, 0, 0);
+  return day;
+};
+
+/**
+ * A `<dialog>` with start and end date inputs and Cancel/Done buttons. Done
+ * reports the range (the start of each day) once both are set and in order,
+ * then calls `onClosed`, as the Android dialog does.
+ */
+export function DateRangePicker(
+  props: DateRangePickerProps
+): React.ReactElement {
+  const { style, testID, visible } = props;
+  return (
+    <View testID={testID} style={style}>
+      {visible ? <RangeDialog {...props} /> : null}
+    </View>
+  );
+}
+
+function RangeDialog({
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  locale,
+  onConfirm,
+  onClosed,
+}: DateRangePickerProps): React.ReactElement {
+  const primary = usePrimaryColor();
+  const [start, setStart] = useState(startOfDay(startDate));
+  const [end, setEnd] = useState(startOfDay(endDate));
+  const valid =
+    isWithinInputBounds(start, 'date', minDate, maxDate) &&
+    isWithinInputBounds(end, 'date', minDate, maxDate) &&
+    end >= start;
+  const minimumEndDate =
+    start && (!minDate || start >= minDate) ? start : minDate;
+  const dismiss = () => onClosed?.();
+  const textButton = {
+    ...BUTTON_BASE,
+    height: 40,
+    padding: '0 12px',
+    border: 'none',
+    borderRadius: 20,
+    fontSize: 14,
+    color: primary,
+    backgroundColor: 'transparent',
+  };
+
+  const renderInput = (
+    label: string,
+    value: Date | null,
+    onValue: (next: Date | null) => void,
+    min: Date | null | undefined
+  ) => (
+    <input
+      type="date"
+      lang={locale}
+      aria-label={label}
+      value={formatInputValue(value, 'date')}
+      min={formatInputValue(min, 'date') || undefined}
+      max={formatInputValue(maxDate, 'date') || undefined}
+      onChange={(event) =>
+        onValue(parseInputValue(eventValue(event), 'date', null))
+      }
+      style={{ ...INPUT_STYLE, accentColor: primary }}
+    />
+  );
+
+  return (
+    <Dialog label="Date range" onDismiss={dismiss}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {renderInput('Start date', start, setStart, minDate)}
+        {renderInput('End date', end, setEnd, minimumEndDate)}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: 8,
+          marginTop: 12,
+        }}
+      >
+        <button type="button" onClick={dismiss} style={textButton}>
+          Cancel
+        </button>
+        <button
+          type="button"
+          disabled={!valid}
+          onClick={() => {
+            if (!valid) return;
+            onConfirm?.({ startDate: start, endDate: end });
+            onClosed?.();
+          }}
+          style={{ ...textButton, opacity: valid ? 1 : 0.38 }}
+        >
+          Done
+        </button>
+      </div>
+    </Dialog>
+  );
+}

package/src/web/Dialog.tsx

@@ -0,0 +1,54 @@
+// web/Dialog.tsx
+import React, { useLayoutEffect, useRef } from 'react';
+
+type DialogElement = {
+  open: boolean;
+  showModal?: () => void;
+};
+
+/**
+ * A modal `<dialog>`, open while mounted. Escape and a click on the backdrop
+ * call `onDismiss`; like the native modals, the caller closes it by flipping
+ * its `visible` prop, which unmounts it.
+ */
+export function Dialog({
+  label,
+  onDismiss,
+  children,
+}: {
+  label?: string;
+  onDismiss: () => void;
+  children: React.ReactNode;
+}): React.ReactElement {
+  const ref = useRef<DialogElement | null>(null);
+
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    if (dialog && !dialog.open) dialog.showModal?.();
+  }, []);
+
+  return (
+    <dialog
+      ref={(element) => {
+        ref.current = element as unknown as DialogElement | null;
+      }}
+      aria-label={label}
+      onClose={onDismiss}
+      onClick={(event) => {
+        // The dialog has no padding, so a click on the element itself is a
+        // click on the backdrop.
+        if (event.target === event.currentTarget) onDismiss();
+      }}
+      style={{
+        padding: 0,
+        border: 'none',
+        borderRadius: 16,
+        backgroundColor: 'Canvas',
+        color: 'CanvasText',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
+      }}
+    >
+      <div style={{ padding: 16 }}>{children}</div>
+    </dialog>
+  );
+}

package/src/web/FloatingActionButton.tsx

@@ -0,0 +1,76 @@
+// web/FloatingActionButton.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { FloatingActionButtonProps } from '../FloatingActionButton';
+import { Icon } from './Icon';
+import { BUTTON_BASE, cssColor, usePrimaryColor } from './shared';
+
+/** Height (and diameter when shrunk), icon and label size for each size. */
+const FAB_SIZES: Record<
+  string,
+  { height: number; icon: number; fontSize: number; padding: number }
+> = {
+  small: { height: 40, icon: 24, fontSize: 16, padding: 16 },
+  regular: { height: 56, icon: 24, fontSize: 16, padding: 16 },
+  medium: { height: 80, icon: 28, fontSize: 22, padding: 26 },
+  large: { height: 96, icon: 36, fontSize: 24, padding: 28 },
+};
+
+/**
+ * A `<button>` styled after the Material 3 FAB: a rounded square with the
+ * icon, or the extended FAB with the label. `scrollViewNativeID` is ignored.
+ */
+export function FloatingActionButton(
+  props: FloatingActionButtonProps
+): React.ReactElement {
+  const {
+    icon,
+    label,
+    extended = true,
+    size = 'regular',
+    color,
+    tintColor,
+    disabled,
+    accessibilityLabel,
+    onPress,
+    scrollViewNativeID: _scrollViewNativeID,
+    style,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const metrics = FAB_SIZES[size] ?? FAB_SIZES.regular!;
+  const showsLabel = !!label && extended;
+  const foreground = cssColor(tintColor) ?? 'CanvasText';
+
+  return (
+    <View {...viewProps} style={[{ alignSelf: 'flex-start' }, style]}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={accessibilityLabel ?? label}
+        onClick={onPress}
+        style={{
+          ...BUTTON_BASE,
+          gap: 12,
+          height: metrics.height,
+          minWidth: metrics.height,
+          padding: showsLabel ? `0 ${metrics.padding}px` : 0,
+          border: 'none',
+          borderRadius: size === 'small' ? 12 : metrics.height / 3.5,
+          backgroundColor:
+            cssColor(color) ?? `color-mix(in srgb, ${primary} 24%, Canvas)`,
+          color: foreground,
+          boxShadow: '0 3px 6px rgba(0, 0, 0, 0.2)',
+          fontSize: metrics.fontSize,
+          opacity: disabled ? 0.38 : 1,
+          cursor: disabled ? 'default' : 'pointer',
+        }}
+      >
+        <Icon icon={icon} color={foreground} size={metrics.icon} />
+        {showsLabel ? label : null}
+      </button>
+    </View>
+  );
+}

package/src/web/Icon.tsx

@@ -0,0 +1,33 @@
+// web/Icon.tsx
+import React from 'react';
+import { Image } from 'react-native';
+
+import type { PlatformIcon } from '../icons';
+import { webIcon } from './shared';
+
+/**
+ * Draws an icon on web, tinted with `color` unless the source opts out.
+ * Renders nothing for SF Symbols and Android drawables.
+ */
+export function Icon({
+  icon,
+  color,
+  size = 20,
+}: {
+  icon: PlatformIcon | undefined;
+  color: string | undefined;
+  size?: number;
+}): React.ReactElement | null {
+  const resolved = webIcon(icon);
+  if (!resolved) return null;
+  return (
+    <Image
+      source={resolved.source}
+      style={{
+        width: size,
+        height: size,
+        tintColor: resolved.tinted ? color : undefined,
+      }}
+    />
+  );
+}

package/src/web/NativeTheme.ts

@@ -0,0 +1,23 @@
+// web/NativeTheme.ts
+import { useLayoutEffect } from 'react';
+
+import type { NativeTheme } from '../NativeTheme';
+import { cssColor, setThemePrimary } from './shared';
+
+/**
+ * Applies the theme's brand color to the web components (filled buttons, the
+ * selected segment, focus rings and the browser's own controls through
+ * `accent-color`). Pass `null` to restore the default.
+ */
+export function setNativeTheme(theme: NativeTheme | null): void {
+  setThemePrimary(theme ? cssColor(theme.colors.primary) : undefined);
+}
+
+/** Keeps the web components' brand color in sync with `theme`. */
+export function useNativeTheme(theme: NativeTheme | null | undefined): void {
+  const primary = theme ? cssColor(theme.colors.primary) : undefined;
+
+  useLayoutEffect(() => {
+    setThemePrimary(primary);
+  }, [primary]);
+}

package/src/web/NavigationRail.tsx

@@ -0,0 +1,148 @@
+// web/NavigationRail.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { NavigationRailProps } from '../NavigationRail';
+import { Icon } from './Icon';
+import { cssColor, cssFont, usePrimaryColor } from './shared';
+
+const JUSTIFY = { top: 'flex-start', center: 'center', bottom: 'flex-end' };
+
+/**
+ * A vertical `tablist` of `<button>` destinations, icon over label (beside it
+ * when expanded), with the header above them.
+ */
+export function NavigationRail(props: NavigationRailProps): React.ReactElement {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    labelVisibility = 'auto',
+    menuGravity = 'top',
+    expanded,
+    header,
+    activeTintColor,
+    inactiveTintColor,
+    railColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    android,
+    style,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const activeColor = cssColor(activeTintColor) ?? primary;
+  const inactiveColor = cssColor(inactiveTintColor) ?? 'GrayText';
+
+  return (
+    <View
+      {...viewProps}
+      style={[
+        {
+          alignItems: expanded ? 'stretch' : 'center',
+          width: expanded ? 220 : 96,
+          paddingVertical: 12,
+          gap: 12,
+          backgroundColor: cssColor(railColor),
+        },
+        style,
+      ]}
+    >
+      {header ? <View style={{ alignItems: 'center' }}>{header}</View> : null}
+      <View
+        role="tablist"
+        aria-orientation="vertical"
+        style={{
+          flex: 1,
+          gap: 4,
+          justifyContent: JUSTIFY[menuGravity] as 'flex-start',
+        }}
+      >
+        {items.map((item, index) => {
+          const isSelected = item.value === selectedValue;
+          const color = isSelected ? activeColor : inactiveColor;
+          const showLabel =
+            labelVisibility !== 'unlabeled' &&
+            (labelVisibility !== 'selected' || isSelected);
+          const icon = isSelected
+            ? (item.selectedIcon ?? item.icon)
+            : item.icon;
+          return (
+            <button
+              key={item.value}
+              data-testid={item.testID}
+              type="button"
+              role="tab"
+              aria-selected={isSelected}
+              aria-label={item.accessibilityLabel ?? item.label}
+              disabled={item.disabled}
+              onClick={() => {
+                if (isSelected) onReselect?.(item.value, index);
+                else onSelect?.(item.value, index);
+              }}
+              style={{
+                display: 'flex',
+                flexDirection: expanded ? 'row' : 'column',
+                alignItems: 'center',
+                gap: expanded ? 12 : 4,
+                padding: expanded ? '0 12px' : '4px',
+                border: 'none',
+                fontFamily: 'inherit',
+                fontSize: 12,
+                fontWeight: isSelected ? 600 : 500,
+                color,
+                backgroundColor: 'transparent',
+                outlineColor: primary,
+                opacity: item.disabled ? 0.38 : 1,
+                cursor: item.disabled ? 'default' : 'pointer',
+                ...cssFont(labelStyle),
+              }}
+            >
+              <span
+                style={{
+                  position: 'relative',
+                  display: 'flex',
+                  padding: '4px 16px',
+                  borderRadius: 16,
+                  backgroundColor: isSelected
+                    ? (cssColor(android?.indicatorColor) ??
+                      'rgba(118, 118, 128, 0.16)')
+                    : 'transparent',
+                }}
+              >
+                <Icon icon={icon} color={color} size={24} />
+                {item.badge !== undefined ? (
+                  <span
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      right: 8,
+                      minWidth: item.badge === '' ? 8 : 16,
+                      height: item.badge === '' ? 8 : 16,
+                      padding: item.badge === '' ? 0 : '0 4px',
+                      boxSizing: 'border-box',
+                      borderRadius: 8,
+                      fontSize: 11,
+                      lineHeight: '16px',
+                      fontWeight: 600,
+                      textAlign: 'center',
+                      backgroundColor:
+                        cssColor(badgeStyle?.backgroundColor) ?? '#FF3B30',
+                      color: cssColor(badgeStyle?.color) ?? '#fff',
+                    }}
+                  >
+                    {item.badge}
+                  </span>
+                ) : null}
+              </span>
+              {showLabel ? item.label : null}
+            </button>
+          );
+        })}
+      </View>
+    </View>
+  );
+}