react-native-platform-components 1.3.0 → 1.5.0

package/src/web/shared.ts

@@ -0,0 +1,176 @@
+// web/shared.ts
+//
+// Helpers shared by the web implementations. The web entry point renders
+// through react-native-web: `style` and the rest of the view props go on a
+// `View`, and the browser's own controls (`<button>`, `<input>`, `<select>`,
+// `<dialog>`) are rendered inside it.
+import { useSyncExternalStore } from 'react';
+import type { ColorValue, ImageSourcePropType } from 'react-native';
+
+import type { PlatformIcon, PlatformIconSource } from '../icons';
+import type { LabelStyle } from '../labelStyle';
+
+/** A CSS style object for a DOM element. */
+export type CSSStyle = Record<string, string | number | undefined>;
+
+/** The Material 3 baseline primary color, used until a theme is set. */
+const DEFAULT_PRIMARY = '#6750A4';
+
+let themePrimary: string | undefined;
+const themeListeners = new Set<() => void>();
+
+/** Sets the brand color the web components use; `undefined` restores the default. */
+export function setThemePrimary(primary: string | undefined): void {
+  if (primary === themePrimary) return;
+  themePrimary = primary;
+  themeListeners.forEach((listener) => listener());
+}
+
+function subscribeTheme(listener: () => void): () => void {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+
+function getThemePrimary(): string {
+  return themePrimary ?? DEFAULT_PRIMARY;
+}
+
+/** The current brand color, from `setNativeTheme` / `useNativeTheme`. */
+export function usePrimaryColor(): string {
+  return useSyncExternalStore(subscribeTheme, getThemePrimary, getThemePrimary);
+}
+
+/**
+ * A color prop as CSS. `PlatformColor` and `DynamicColorIOS` have no web
+ * equivalent and fall back to the default.
+ */
+export function cssColor(color: ColorValue | undefined): string | undefined {
+  return typeof color === 'string' ? color : undefined;
+}
+
+/** A label font as CSS. */
+export function cssFont(labelStyle: LabelStyle | undefined): CSSStyle {
+  if (!labelStyle) return {};
+  return {
+    fontFamily: labelStyle.fontFamily,
+    fontSize: labelStyle.fontSize,
+    fontWeight: labelStyle.fontWeight,
+    fontStyle: labelStyle.fontStyle,
+  };
+}
+
+/**
+ * The image to draw for an icon on web. Only `{ type: 'image' }` sources
+ * render: SF Symbols and Android drawables don't exist in a browser.
+ */
+export function webIcon(
+  icon: PlatformIcon | undefined
+): { source: ImageSourcePropType; tinted: boolean } | undefined {
+  if (icon === undefined || typeof icon === 'string') return undefined;
+  const candidates: (PlatformIconSource | undefined)[] =
+    'type' in icon ? [icon] : [icon.ios, icon.android];
+  for (const source of candidates) {
+    if (source && typeof source !== 'string' && source.type === 'image') {
+      return { source: source.source, tinted: source.tinted !== false };
+    }
+  }
+  return undefined;
+}
+
+const warned = new Set<string>();
+
+function isDev(): boolean {
+  if (typeof __DEV__ !== 'undefined') return __DEV__;
+  return (
+    typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
+  );
+}
+
+/** Logs a development warning once per key. */
+export function warnOnce(key: string, message: string): void {
+  if (warned.has(key) || !isDev()) return;
+  warned.add(key);
+  console.warn(`react-native-platform-components: ${message}`);
+}
+
+/** Resets `warnOnce`; for tests. */
+export function resetWarnings(): void {
+  warned.clear();
+}
+
+/** The value of the form control that fired a DOM event. */
+export function eventValue(event: { target: unknown }): string {
+  return (event.target as { value: string }).value;
+}
+
+/** Styles for the variants shared by Button and ButtonGroup. */
+export function buttonColors(
+  variant: string,
+  primary: string,
+  color: string | undefined,
+  tintColor: string | undefined
+): CSSStyle {
+  switch (variant) {
+    // Glass is an iOS 26 material; browsers get the Android mapping.
+    case 'tonal':
+    case 'glass':
+    case 'clearGlass':
+      return {
+        backgroundColor: color ?? `color-mix(in srgb, ${primary} 18%, Canvas)`,
+        color: tintColor ?? 'CanvasText',
+        border: 'none',
+      };
+    case 'outlined':
+      return {
+        backgroundColor: color ?? 'transparent',
+        color: tintColor ?? primary,
+        border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+      };
+    case 'text':
+      return {
+        backgroundColor: color ?? 'transparent',
+        color: tintColor ?? primary,
+        border: 'none',
+      };
+    case 'elevated':
+      return {
+        backgroundColor: color ?? 'Canvas',
+        color: tintColor ?? primary,
+        border: 'none',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
+      };
+    default:
+      return {
+        backgroundColor: color ?? primary,
+        color: tintColor ?? '#fff',
+        border: 'none',
+      };
+  }
+}
+
+/** Height and horizontal padding for each button size. */
+export const BUTTON_SIZES: Record<
+  string,
+  { height: number; padding: number; fontSize: number }
+> = {
+  xsmall: { height: 32, padding: 12, fontSize: 14 },
+  small: { height: 40, padding: 16, fontSize: 14 },
+  medium: { height: 56, padding: 24, fontSize: 16 },
+  large: { height: 96, padding: 48, fontSize: 24 },
+  xlarge: { height: 136, padding: 64, fontSize: 32 },
+};
+
+/** Base style of a `<button>` rendered by these components. */
+export const BUTTON_BASE: CSSStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  fontWeight: 500,
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+};

package/src/webComponents.ts

@@ -0,0 +1,45 @@
+import type { ComponentType, ReactNode, RefAttributes } from 'react';
+import type { ButtonProps } from './Button';
+import type { ButtonGroupProps } from './ButtonGroup';
+import type { SplitButtonProps } from './SplitButton';
+import type { ContextMenuProps } from './ContextMenu';
+import type { DatePickerProps, DateRangePickerProps } from './DatePicker';
+import type { FloatingActionButtonProps } from './FloatingActionButton';
+import type { FloatingToolbarProps } from './FloatingToolbar';
+import type { LiquidGlassProps } from './LiquidGlass';
+import type { LiquidGlassContainerProps } from './LiquidGlassContainer';
+import type { NavigationRailProps } from './NavigationRail';
+import type { SegmentedControlProps } from './SegmentedControl';
+import type { SelectionMenuProps } from './SelectionMenu';
+import type { TabBarProps } from './TabBar';
+import type { TextFieldProps, TextFieldRef } from './TextField';
+
+/** Public contracts accepted by consumer-supplied web components. */
+export interface WebComponentProps {
+  Button: ButtonProps;
+  ButtonGroup: ButtonGroupProps;
+  SplitButton: SplitButtonProps;
+  ContextMenu: ContextMenuProps;
+  DatePicker: DatePickerProps;
+  DateRangePicker: DateRangePickerProps;
+  FloatingActionButton: FloatingActionButtonProps;
+  FloatingToolbar: FloatingToolbarProps;
+  LiquidGlass: LiquidGlassProps;
+  LiquidGlassContainer: LiquidGlassContainerProps;
+  NavigationRail: NavigationRailProps;
+  SegmentedControl: SegmentedControlProps;
+  SelectionMenu: SelectionMenuProps;
+  TabBar: TabBarProps;
+  TextField: TextFieldProps & RefAttributes<TextFieldRef>;
+}
+
+/** Implement one or more entries with the same props, callbacks and ref contract. */
+export type WebComponents = {
+  [Name in keyof WebComponentProps]: ComponentType<WebComponentProps[Name]>;
+};
+
+export interface PlatformComponentsProviderProps {
+  /** Web overrides for this subtree; ignored on iOS and Android. */
+  web?: Partial<WebComponents>;
+  children?: ReactNode;
+}

package/android/src/main/java/com/platformcomponents/DateConstraints.kt

@@ -1,83 +0,0 @@
-package com.platformcomponents.datepicker
-
-import com.google.android.material.datepicker.CalendarConstraints
-import com.google.android.material.datepicker.DateValidatorPointBackward
-import com.google.android.material.datepicker.DateValidatorPointForward
-import java.util.TimeZone
-
-object DateConstraints {
-  fun build(minMs: Double, maxMs: Double, firstDayOfWeek: Int?): CalendarConstraints? {
-    val hasMin = minMs >= 0
-    val hasMax = maxMs >= 0
-    if (!hasMin && !hasMax && firstDayOfWeek == null) return null
-
-    val builder = CalendarConstraints.Builder()
-
-    // First day of week: MaterialDatePicker uses java.util.Calendar constants. We map ISO 1..7.
-    firstDayOfWeek?.let {
-      val calDay = isoToCalendarDay(it)
-      if (calDay != null) builder.setFirstDayOfWeek(calDay)
-    }
-
-    val validators = ArrayList<CalendarConstraints.DateValidator>(2)
-    if (hasMin) validators.add(DateValidatorPointForward.from(minMs.toLong()))
-    if (hasMax) validators.add(DateValidatorPointBackward.before(maxMs.toLong()))
-
-    if (validators.isNotEmpty()) {
-      builder.setValidator(CompositeValidator(validators))
-    }
-
-    return builder.build()
-  }
-
-  private fun isoToCalendarDay(iso: Int): Int? {
-    // ISO: 1=Mon ... 7=Sun
-    return when (iso) {
-      1 -> java.util.Calendar.MONDAY
-      2 -> java.util.Calendar.TUESDAY
-      3 -> java.util.Calendar.WEDNESDAY
-      4 -> java.util.Calendar.THURSDAY
-      5 -> java.util.Calendar.FRIDAY
-      6 -> java.util.Calendar.SATURDAY
-      7 -> java.util.Calendar.SUNDAY
-      else -> null
-    }
-  }
-
-  private class CompositeValidator(
-    private val validators: List<CalendarConstraints.DateValidator>
-  ) : CalendarConstraints.DateValidator {
-
-    override fun isValid(date: Long): Boolean {
-      for (v in validators) if (!v.isValid(date)) return false
-      return true
-    }
-
-    override fun describeContents(): Int = 0
-
-    override fun writeToParcel(dest: android.os.Parcel, flags: Int) {
-      dest.writeInt(validators.size)
-      validators.forEach { dest.writeParcelable(it, flags) }
-    }
-
-    companion object {
-      @JvmField
-      val CREATOR: android.os.Parcelable.Creator<CompositeValidator> =
-        object : android.os.Parcelable.Creator<CompositeValidator> {
-          override fun createFromParcel(source: android.os.Parcel): CompositeValidator {
-            val n = source.readInt()
-            val list = ArrayList<CalendarConstraints.DateValidator>(n)
-            repeat(n) {
-              val v = source.readParcelable<CalendarConstraints.DateValidator>(
-                CalendarConstraints.DateValidator::class.java.classLoader
-              )
-              if (v != null) list.add(v)
-            }
-            return CompositeValidator(list)
-          }
-
-          override fun newArray(size: Int): Array<CompositeValidator?> = arrayOfNulls(size)
-        }
-    }
-  }
-}