react-native-platform-components 1.3.0 → 1.5.0

package/src/web/ButtonGroup.tsx

@@ -0,0 +1,154 @@
+// web/ButtonGroup.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { ButtonGroupProps } from '../ButtonGroup';
+import { Icon } from './Icon';
+import {
+  BUTTON_BASE,
+  BUTTON_SIZES,
+  buttonColors,
+  cssColor,
+  cssFont,
+  usePrimaryColor,
+} from './shared';
+
+/**
+ * The selection after pressing `value`, in button order. Mirrors the native
+ * rules: `single` swaps the selection, `multiple` toggles, and a required
+ * selection never becomes empty.
+ */
+export function nextSelection(
+  values: readonly string[],
+  selected: readonly string[],
+  value: string,
+  selection: 'single' | 'multiple',
+  required: boolean
+): string[] {
+  const isSelected = selected.includes(value);
+  let next: string[];
+  if (selection === 'single') {
+    next = isSelected ? [] : [value];
+  } else {
+    next = isSelected
+      ? selected.filter((v) => v !== value)
+      : [...selected, value];
+  }
+  if (required && next.length === 0) return [...selected];
+  return values.filter((v) => next.includes(v));
+}
+
+/** A row of `<button>`s, with toggle semantics when `selection` is set. */
+export function ButtonGroup(props: ButtonGroupProps): React.ReactElement {
+  const {
+    buttons,
+    variant = 'outlined',
+    size = 'small',
+    shape = 'round',
+    connected: connectedProp,
+    spacing,
+    selection = 'none',
+    selectedValues = [],
+    selectionRequired,
+    disabled,
+    color,
+    tintColor,
+    labelStyle,
+    overflow,
+    onPress,
+    onSelectionChange,
+    android,
+    style,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const metrics = BUTTON_SIZES[size] ?? BUTTON_SIZES.small!;
+  const selectable = selection !== 'none';
+  const connected = connectedProp ?? selectable;
+  const required = selectionRequired ?? selection === 'single';
+  const selected =
+    selection === 'single' ? selectedValues.slice(0, 1) : selectedValues;
+  const radius = shape === 'square' ? 12 : metrics.height / 2;
+  const innerRadius = 8;
+  const gap = spacing ?? (connected ? 2 : 8);
+  // Browsers have no overflow menu; 'wrap' wraps the row
+  const wrap = (overflow ?? android?.overflow) === 'wrap';
+
+  const handlePress = (value: string, index: number) => {
+    onPress?.(value, index);
+    if (selection === 'none') return;
+    const next = nextSelection(
+      buttons.map((b) => b.value),
+      selected,
+      value,
+      selection,
+      required
+    );
+    const changed =
+      next.length !== selected.length ||
+      next.some((v) => !selected.includes(v));
+    if (changed) onSelectionChange?.(next);
+  };
+
+  return (
+    <View
+      {...viewProps}
+      role={selection === 'single' ? 'radiogroup' : 'group'}
+      style={[
+        {
+          flexDirection: 'row',
+          flexWrap: wrap ? 'wrap' : 'nowrap',
+          gap,
+          alignSelf: 'flex-start',
+        },
+        style,
+      ]}
+    >
+      {buttons.map((button, index) => {
+        const isSelected = selectable && selected.includes(button.value);
+        const isDisabled = disabled || button.disabled;
+        const colors = buttonColors(
+          isSelected ? 'filled' : variant,
+          primary,
+          isSelected ? undefined : cssColor(color),
+          isSelected ? undefined : cssColor(tintColor)
+        );
+        const first = index === 0;
+        const last = index === buttons.length - 1;
+        const start = !connected || first ? radius : innerRadius;
+        const end = !connected || last ? radius : innerRadius;
+        return (
+          <button
+            key={button.value}
+            type="button"
+            disabled={isDisabled}
+            role={selection === 'single' ? 'radio' : undefined}
+            aria-checked={selection === 'single' ? isSelected : undefined}
+            aria-pressed={selection === 'multiple' ? isSelected : undefined}
+            aria-label={button.accessibilityLabel ?? button.label}
+            onClick={() => handlePress(button.value, index)}
+            style={{
+              ...BUTTON_BASE,
+              ...colors,
+              height: metrics.height,
+              minWidth: metrics.height,
+              padding: button.label ? `0 ${metrics.padding}px` : 0,
+              borderRadius: `${start}px ${end}px ${end}px ${start}px`,
+              fontSize: metrics.fontSize,
+              opacity: isDisabled ? 0.38 : 1,
+              cursor: isDisabled ? 'default' : 'pointer',
+              ...cssFont(labelStyle),
+            }}
+          >
+            <Icon
+              icon={button.icon}
+              color={colors.color as string | undefined}
+            />
+            {button.label}
+          </button>
+        );
+      })}
+    </View>
+  );
+}

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]);
+}