@hzblj/kara-components 0.14.0 → 0.14.2

package/src/atoms/segmented-control/segmented-control.android.tsx

@@ -4,6 +4,7 @@ import {haptics} from '@hzblj/expo-rich-haptics'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
+import {useInsideHost} from '../../host-context'
 import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
@@ -13,8 +14,9 @@ const SEGMENT = [weight(1)]
 
 /**
  * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
- * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Material plays
- * nothing on a new segment, so this plays `selection`.
+ * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Inside a `Screen`
+ * or `Island` it renders into that host instead (see `useInsideHost`). Material plays nothing on a new segment, so this
+ * plays `selection`.
  */
 export const SegmentedControl: SegmentedControlComponent = ({
   disabled = false,
@@ -24,6 +26,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
   values,
 }: SegmentedControlProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
 
   // Every segment keeps the same outline, the selected one too: an accent border would run its fill out over the line
   // the others draw inside, and make it look taller than its neighbours.
@@ -58,24 +61,32 @@ export const SegmentedControl: SegmentedControlComponent = ({
     [onChange, selectedIndex, values]
   )
 
+  const row = (
+    <SingleChoiceSegmentedButtonRow modifiers={rowModifiers}>
+      {values.map((label, index) => (
+        <SegmentedButton
+          colors={colors}
+          enabled={!disabled}
+          key={index}
+          modifiers={SEGMENT}
+          onClick={() => select(index)}
+          selected={index === selectedIndex}
+        >
+          <SegmentedButton.Label>
+            <Text style={theme.typography.subheadlineMedium}>{label}</Text>
+          </SegmentedButton.Label>
+        </SegmentedButton>
+      ))}
+    </SingleChoiceSegmentedButtonRow>
+  )
+
+  if (insideHost) {
+    return row
+  }
+
   return (
     <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents={MATCH_HEIGHT_ONLY} seedColor={theme.materialSeed}>
-      <SingleChoiceSegmentedButtonRow modifiers={rowModifiers}>
-        {values.map((label, index) => (
-          <SegmentedButton
-            colors={colors}
-            enabled={!disabled}
-            key={index}
-            modifiers={SEGMENT}
-            onClick={() => select(index)}
-            selected={index === selectedIndex}
-          >
-            <SegmentedButton.Label>
-              <Text style={theme.typography.subheadlineMedium}>{label}</Text>
-            </SegmentedButton.Label>
-          </SegmentedButton>
-        ))}
-      </SingleChoiceSegmentedButtonRow>
+      {row}
     </Host>
   )
 }

package/src/atoms/segmented-control/segmented-control.ios.tsx

@@ -1,13 +1,18 @@
+import {RNHostView} from '@expo/ui/swift-ui'
 import {SegmentedControl as NativeSegmentedControl} from '@hzblj/kara-native/swift-ui'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
+import {useInsideHost} from '../../host-context'
 import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
 
+const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
+
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export const SegmentedControl: SegmentedControlComponent = ({
   disabled = false,
@@ -17,6 +22,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
   values,
 }: SegmentedControlProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
   const face = theme.typography.footnoteMedium
 
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
@@ -30,7 +36,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
     [onChange, values]
   )
 
-  return (
+  const control = (
     <NativeSegmentedControl
       activePillColor={theme.color('fill.accent.primary')}
       activeTextColor={theme.color('content.on.accent')}
@@ -44,4 +50,6 @@ export const SegmentedControl: SegmentedControlComponent = ({
       testID={testID}
     />
   )
+
+  return insideHost ? <RNHostView matchContents={MATCH_HEIGHT_ONLY}>{control}</RNHostView> : control
 }

package/src/atoms/segmented-control/segmented-control.types.ts

@@ -3,7 +3,8 @@ import type {ReactNode} from 'react'
 /**
  * A row of mutually exclusive segments, the selected one in the accent: kara's own `UISegmentedControl` on iOS,
  * Material's single-choice segmented buttons on Android. It needs no `Screen` or `Island`: iOS is a plain view, Android
- * brings its own host. It takes the width it is given; the height is the platform's.
+ * brings its own host. Inside one it joins that host, so it can share a stack with other native views. It takes the
+ * width it is given; the height is the platform's.
  */
 export type SegmentedControlProps = {
   /** Stops the user changing the segment, and dims the control. */

package/src/host-context.tsx

@@ -6,6 +6,14 @@ export const HostBoundary = ({children}: {children: ReactNode}) => (
   <HostContext.Provider value>{children}</HostContext.Provider>
 )
 
+/**
+ * Whether this renders inside a `Screen` or `Island` already. An atom that brings its own host renders straight into
+ * that one instead: on Android a host nested in another is a real view beside the outer host's own `ComposeView`, and
+ * the outer host (a horizontal `LinearLayout`) measures its `ComposeView` in the width the nested one leaves over,
+ * which for a full-width nested host is none.
+ */
+export const useInsideHost = () => useContext(HostContext)
+
 export const useHostGuard = (atom: string) => {
   const insideHost = useContext(HostContext)