react-native-platform-components 1.4.0 → 1.6.0

package/src/web/PlatformComponentsProvider.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type {
+  PlatformComponentsProviderProps,
+  WebComponents,
+  WebComponentProps,
+} from '../webComponents';
+
+const WebContext = createContext<Partial<WebComponents>>({});
+
+/** Replacements apply only to descendants; nested registrations inherit missing entries. */
+export function PlatformComponentsProvider({
+  web,
+  children,
+}: PlatformComponentsProviderProps): React.ReactElement {
+  const parent = useContext(WebContext);
+  const components = useMemo(() => {
+    if (!web) return parent;
+    const merged = { ...parent };
+    for (const [name, implementation] of Object.entries(web)) {
+      if (implementation !== undefined)
+        Object.assign(merged, { [name]: implementation });
+    }
+    return merged;
+  }, [parent, web]);
+  return (
+    <WebContext.Provider value={components}>{children}</WebContext.Provider>
+  );
+}
+
+export function useWebComponent<Name extends keyof WebComponents>(
+  name: Name
+): WebComponents[Name] | undefined {
+  return useContext(WebContext)[name];
+}
+
+export function withWebComponent<Name extends keyof WebComponents>(
+  name: Name,
+  fallback: WebComponents[Name]
+) {
+  function WebComponent(props: WebComponentProps[Name]): React.ReactElement {
+    // The mapped key couples each implementation to its own public props.
+    const Component = (useWebComponent(name) ??
+      fallback) as React.ComponentType<WebComponentProps[Name]>;
+    return <Component {...props} />;
+  }
+  WebComponent.displayName = name;
+  return WebComponent;
+}

package/src/web/SegmentedControl.tsx

@@ -0,0 +1,127 @@
+// web/SegmentedControl.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { SegmentedControlProps } from '../SegmentedControl';
+import { Icon } from './Icon';
+import { cssColor, cssFont, usePrimaryColor, webIcon } from './shared';
+
+/**
+ * A radio group of `<button>`s in a track, like the iOS segmented control.
+ * Like iOS, tapping the selected segment keeps it selected.
+ */
+export function SegmentedControl(
+  props: SegmentedControlProps
+): React.ReactElement {
+  const {
+    segments,
+    selectedValue,
+    onSelect,
+    onDeselect,
+    disabled,
+    labelVisibility = 'auto',
+    selectedSegmentColor,
+    activeTintColor,
+    inactiveTintColor,
+    labelStyle,
+    maxFontSizeMultiplier,
+    badgeStyle,
+    ios,
+    android,
+    style,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const selectedBackground =
+    cssColor(selectedSegmentColor) ?? ios?.selectedSegmentTintColor ?? 'Canvas';
+  const activeColor = cssColor(activeTintColor) ?? 'CanvasText';
+  const inactiveColor = cssColor(inactiveTintColor) ?? 'CanvasText';
+
+  return (
+    <View
+      {...viewProps}
+      role="radiogroup"
+      style={[
+        {
+          flexDirection: 'row',
+          padding: 2,
+          borderRadius: 9,
+          backgroundColor: 'rgba(118, 118, 128, 0.12)',
+        },
+        style,
+      ]}
+    >
+      {segments.map((segment, index) => {
+        const isSelected = segment.value === selectedValue;
+        const isDisabled = disabled || segment.disabled;
+        const hasIcon = webIcon(segment.icon) !== undefined;
+        // Web can show both, so `auto` behaves like `labeled`.
+        const showLabel = labelVisibility !== 'unlabeled' || !hasIcon;
+        const foreground = isSelected ? activeColor : inactiveColor;
+        return (
+          <button
+            key={segment.value}
+            data-testid={segment.testID}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            aria-label={segment.accessibilityLabel ?? segment.label}
+            disabled={isDisabled}
+            onClick={() => {
+              if (!isSelected) onSelect?.(segment.value, index);
+            }}
+            style={{
+              position: 'relative',
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 6,
+              minHeight: 28,
+              padding: '0 12px',
+              border: 'none',
+              borderRadius: 7,
+              fontFamily: 'inherit',
+              fontSize: 13,
+              fontWeight: isSelected ? 600 : 400,
+              color: foreground,
+              backgroundColor: isSelected ? selectedBackground : 'transparent',
+              boxShadow: isSelected ? '0 1px 3px rgba(0, 0, 0, 0.15)' : 'none',
+              outlineColor: primary,
+              opacity: isDisabled ? 0.38 : 1,
+              cursor: isDisabled || isSelected ? 'default' : 'pointer',
+              ...cssFont(labelStyle),
+            }}
+          >
+            <Icon icon={segment.icon} color={foreground} size={16} />
+            {showLabel ? segment.label : null}
+            {segment.badge !== undefined ? (
+              <span
+                style={{
+                  position: 'absolute',
+                  top: -4,
+                  right: -2,
+                  minWidth: 16,
+                  height: 16,
+                  padding: '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',
+                }}
+              >
+                {segment.badge}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </View>
+  );
+}

package/src/web/SelectionMenu.tsx

@@ -0,0 +1,149 @@
+// web/SelectionMenu.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { SelectionMenuProps } from '../SelectionMenu';
+import { Dialog } from './Dialog';
+import { Icon } from './Icon';
+import { eventValue, usePrimaryColor } from './shared';
+
+/**
+ * `embedded` renders a `<select>` (labels only). `modal` stays headless like on
+ * native: while `visible`, it opens the options in a `<dialog>`, with their
+ * image icons and subtitles; picking one calls `onSelect`, and Escape or a
+ * click outside calls `onRequestClose`. `android.searchable` is ignored.
+ */
+export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
+  const {
+    options,
+    selected,
+    disabled,
+    placeholder,
+    accessibilityLabel,
+    presentation = 'modal',
+    visible,
+    onSelect,
+    onRequestClose,
+    ios,
+    android,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const label = accessibilityLabel ?? placeholder ?? 'Select an option';
+
+  const select = (index: number) => {
+    const option = options[index];
+    if (option && !disabled && !option.disabled)
+      onSelect?.(option.data, option.label, index);
+  };
+
+  if (presentation === 'embedded') {
+    return (
+      <View {...viewProps}>
+        <select
+          aria-label={label}
+          value={selected ?? ''}
+          disabled={disabled}
+          onChange={(event) => {
+            const data = eventValue(event);
+            select(options.findIndex((o) => o.data === data));
+          }}
+          style={{
+            boxSizing: 'border-box',
+            width: '100%',
+            minHeight: 40,
+            padding: '0 8px',
+            border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+            borderRadius: 8,
+            fontFamily: 'inherit',
+            fontSize: 16,
+            color: 'inherit',
+            backgroundColor: 'transparent',
+            accentColor: primary,
+          }}
+        >
+          {selected === null ? (
+            <option value="" disabled>
+              {placeholder ?? ''}
+            </option>
+          ) : null}
+          {options.map((option) => (
+            <option
+              key={option.data}
+              value={option.data}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </View>
+    );
+  }
+
+  const dismiss = () => onRequestClose?.();
+
+  return (
+    <View {...viewProps}>
+      {visible && !disabled ? (
+        <Dialog label={label} onDismiss={dismiss}>
+          <div
+            role="listbox"
+            aria-label={label}
+            style={{ display: 'flex', flexDirection: 'column', minWidth: 200 }}
+          >
+            {options.map((option, index) => {
+              const isSelected = option.data === selected;
+              return (
+                <button
+                  key={option.data}
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  disabled={option.disabled}
+                  autoFocus={
+                    !option.disabled &&
+                    (isSelected ||
+                      (selected === null &&
+                        index === options.findIndex((item) => !item.disabled)))
+                  }
+                  onClick={() => select(index)}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    minHeight: 44,
+                    padding: '0 12px',
+                    border: 'none',
+                    borderRadius: 8,
+                    fontFamily: 'inherit',
+                    fontSize: 16,
+                    fontWeight: isSelected ? 600 : 400,
+                    textAlign: 'start',
+                    color: isSelected ? primary : 'inherit',
+                    backgroundColor: 'transparent',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <Icon
+                    icon={option.icon}
+                    color={isSelected ? primary : 'CanvasText'}
+                  />
+                  <span style={{ display: 'flex', flexDirection: 'column' }}>
+                    <span>{option.label}</span>
+                    {option.subtitle ? (
+                      <span style={{ fontSize: 13, opacity: 0.7 }}>
+                        {option.subtitle}
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </Dialog>
+      ) : null}
+    </View>
+  );
+}

package/src/web/SplitButton.tsx

@@ -0,0 +1,32 @@
+// web/SplitButton.tsx
+import React from 'react';
+
+import type { SplitButtonProps } from '../SplitButton';
+import { Button } from './Button';
+import { warnOnce } from './shared';
+import { useWebComponent } from './PlatformComponentsProvider';
+
+/**
+ * The main button alone: browsers have no native menu to attach, so the
+ * menu button is left out. Provide a web menu with a `.web.tsx` file in your
+ * app.
+ */
+export function SplitButton(props: SplitButtonProps): React.ReactElement {
+  const MainButton = useWebComponent('Button') ?? Button;
+  const {
+    menu,
+    menuAccessibilityLabel,
+    onMenuSelect,
+    onMenuOpen,
+    onMenuClose,
+    ...buttonProps
+  } = props;
+
+  warnOnce(
+    'SplitButton',
+    'SplitButton has no web menu; only its main button renders. ' +
+      'See https://jarx-concepts.github.io/react-native-platform-components/guides/web'
+  );
+
+  return <MainButton {...buttonProps} />;
+}

package/src/web/TabBar.tsx

@@ -0,0 +1,150 @@
+// web/TabBar.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { TabBarProps } from '../TabBar';
+import { Icon } from './Icon';
+import { cssColor, cssFont, usePrimaryColor } from './shared';
+
+/**
+ * A `tablist` of `<button>` tabs, icon over label, with the selected tab's
+ * icon in a pill as on the Material navigation bar. An `accessory` is a
+ * plain view above the bar.
+ */
+export function TabBar(props: TabBarProps): React.ReactElement {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    labelVisibility = 'auto',
+    activeTintColor,
+    inactiveTintColor,
+    barColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    minimizeBehavior,
+    scrollViewNativeID,
+    accessory,
+    onAccessoryEnvironmentChange,
+    android,
+    style,
+    ...viewProps
+  } = props;
+
+  const primary = usePrimaryColor();
+  const activeColor = cssColor(activeTintColor) ?? primary;
+  const inactiveColor = cssColor(inactiveTintColor) ?? 'GrayText';
+  const horizontal = android?.itemLayout === 'horizontal';
+  const indicatorRadius =
+    typeof android?.indicatorShape === 'number' ? android.indicatorShape : 16;
+  const hasAccessory =
+    accessory !== undefined && accessory !== null && accessory !== false;
+
+  const bar = (
+    <View
+      {...viewProps}
+      role="tablist"
+      style={[
+        {
+          flexDirection: 'row',
+          backgroundColor: cssColor(barColor) ?? 'rgba(118, 118, 128, 0.08)',
+        },
+        hasAccessory ? null : style,
+      ]}
+    >
+      {items.slice(0, 5).map((item, index) => {
+        const isSelected = item.value === selectedValue;
+        const color = isSelected ? activeColor : inactiveColor;
+        const showLabel =
+          labelVisibility === 'labeled' ||
+          labelVisibility === 'auto' ||
+          (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={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: horizontal ? 'row' : 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 4,
+              padding: '10px 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 20px',
+                borderRadius: indicatorRadius,
+                backgroundColor:
+                  isSelected && android?.indicator !== false
+                    ? (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: 12,
+                    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>
+  );
+
+  if (!hasAccessory) return bar;
+  return (
+    <View style={style}>
+      <View>{accessory}</View>
+      {bar}
+    </View>
+  );
+}