@ankhorage/zora 2.4.8 → 2.5.1

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -1,10 +1,59 @@
 import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Drawer } from '../../components/drawer';
 import { Modal } from '../../components/modal';
+import type { ZoraContentWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
-import type { ResponsivePanelProps } from './types';
+import type { ResponsivePanelProps, ResponsivePanelScroll, ResponsivePanelSize } from './types';
+
+function resolvePanelWidth(size: ResponsivePanelSize): number {
+  switch (size) {
+    case 'compact':
+      return 300;
+    case 'wide':
+      return 420;
+    case 'extraWide':
+      return 560;
+    case 'default':
+    default:
+      return 360;
+  }
+}
+
+function resolveModalWidth(size: ResponsivePanelSize | undefined): ZoraContentWidth | undefined {
+  switch (size) {
+    case 'compact':
+      return 'narrow';
+    case 'wide':
+    case 'extraWide':
+      return 'wide';
+    case 'default':
+      return 'default';
+    default:
+      return undefined;
+  }
+}
+
+function renderPanelBody(children: React.ReactNode, scroll: ResponsivePanelScroll) {
+  if (children == null) return null;
+
+  if (scroll === 'content') {
+    return (
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator
+        style={styles.scrollBody}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return children;
+}
 
 function ResponsivePanelInner({
   themeId: _themeId,
@@ -20,14 +69,20 @@ function ResponsivePanelInner({
   desktopMode = 'inline',
   mobileMode = 'drawer',
   compact = true,
+  size,
+  scroll = 'none',
   testID,
 }: ResponsivePanelProps) {
   if (!open) return null;
 
+  const body = renderPanelBody(children, scroll);
+
   // For now, we assume desktopMode determines the rendering.
   // In a real app, this would react to window size.
   if (desktopMode === 'floating') {
     if (mobileMode === 'modal') {
+      const modalWidth = resolveModalWidth(size);
+
       return (
         <Modal
           description={description}
@@ -36,8 +91,9 @@ function ResponsivePanelInner({
           testID={testID}
           title={title}
           visible={open}
+          width={modalWidth}
         >
-          {children}
+          {body}
         </Modal>
       );
     }
@@ -52,13 +108,12 @@ function ResponsivePanelInner({
         title={title}
         visible={open}
       >
-        {children}
+        {body}
       </Drawer>
     );
   }
 
-  // default: inline -> Panel
-  return (
+  const panel = (
     <Panel
       actions={actions}
       compact={compact}
@@ -67,9 +122,26 @@ function ResponsivePanelInner({
       testID={testID}
       title={title}
     >
-      {children}
+      {body}
     </Panel>
   );
+
+  if (size === undefined) return panel;
+
+  return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;
 }
 
+const styles = StyleSheet.create({
+  inlineSizedPanel: {
+    maxWidth: '100%',
+  },
+  scrollBody: {
+    flexGrow: 0,
+    maxHeight: '100%',
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});
+
 export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/types.ts

@@ -5,6 +5,8 @@ import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
+export type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';
+export type ResponsivePanelScroll = 'none' | 'content';
 
 export interface ResponsivePanelProps extends ZoraBaseProps {
   title?: React.ReactNode;
@@ -18,4 +20,6 @@ export interface ResponsivePanelProps extends ZoraBaseProps {
   desktopMode?: ResponsivePanelDesktopMode;
   mobileMode?: ResponsivePanelMobileMode;
   compact?: boolean;
+  size?: ResponsivePanelSize;
+  scroll?: ResponsivePanelScroll;
 }