adalo-pdf-viewer 1.2.2

package/src/components/PDFViewer/index.native.js

@@ -0,0 +1,521 @@
+/**
+ * PDFViewer — Native component (iOS & Android)
+ *
+ * Design language:
+ *   iOS   → HIG / iOS 18: floating frosted-glass pill, SF-style circular
+ *            chevron buttons, hairline border, spring opacity feedback
+ *   Android → Material Design 3: bottom surface bar with rounded top
+ *             corners, ripple touch feedback, M3 elevation + typography
+ */
+
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  ActivityIndicator,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  Share,
+} from 'react-native'
+import Pdf from 'react-native-pdf'
+
+const IS_IOS = Platform.OS === 'ios'
+
+// ─── Main Component ─────────────────────────────────────────────────────────
+
+class PDFViewer extends Component {
+  constructor(props) {
+    super(props)
+    const { width, height } = Dimensions.get('window')
+    this.state = {
+      currentPage: 1,
+      totalPages: 0,
+      loading: true,
+      error: false,
+      containerWidth: width,
+      containerHeight: height,
+    }
+    this.pdfRef = null
+  }
+
+  // Capture the actual pixel bounds Adalo assigns to this component.
+  // react-native-pdf needs explicit numbers — '100%' strings are unreliable.
+  handleRootLayout = ({ nativeEvent: { layout: { width, height } } }) => {
+    if (width > 0 && height > 0) {
+      this.setState({ containerWidth: width, containerHeight: height })
+    }
+  }
+
+  handleLoadComplete = (numberOfPages) => {
+    const { onLoadComplete } = this.props
+    this.setState({ totalPages: numberOfPages, loading: false, error: false })
+    if (onLoadComplete) onLoadComplete(numberOfPages)
+  }
+
+  handlePageChanged = (page, numberOfPages) => {
+    const { onPageChange } = this.props
+    this.setState({ currentPage: page, totalPages: numberOfPages })
+    if (onPageChange) onPageChange(page, numberOfPages)
+  }
+
+  handleError = (err) => {
+    const { onError } = this.props
+    console.warn('[PDFViewer] Error:', err)
+    this.setState({ loading: false, error: true })
+    if (onError) onError()
+  }
+
+  goToPrevPage = () => {
+    const { currentPage } = this.state
+    if (currentPage > 1 && this.pdfRef) this.pdfRef.setPage(currentPage - 1)
+  }
+
+  goToNextPage = () => {
+    const { currentPage, totalPages } = this.state
+    if (currentPage < totalPages && this.pdfRef) this.pdfRef.setPage(currentPage + 1)
+  }
+
+  handleShare = async () => {
+    const { pdfUrl } = this.props
+    if (!pdfUrl) return
+    try {
+      await Share.share(
+        // iOS Share sheet accepts a url; Android uses message
+        IS_IOS
+          ? { url: pdfUrl }
+          : { message: pdfUrl, title: 'PDF Document' }
+      )
+    } catch (e) {
+      // User cancelled or share not supported — silently ignore
+    }
+  }
+
+  render() {
+    const {
+      pdfUrl,
+      fitWidth,
+      showControls,
+      backgroundColor,
+      controlColor,
+      controlTextColor,
+      loadingText,
+      loadingTextColor,
+      errorText,
+      errorTextColor,
+    } = this.props
+
+    const { currentPage, totalPages, loading, error, containerWidth, containerHeight } = this.state
+    const primaryColor = controlColor || (IS_IOS ? '#007AFF' : '#6750A4')
+    const bgColor = backgroundColor || '#FFFFFF'
+
+    // ── Editor / no-URL placeholder ──────────────────────────────────────────
+    if (!pdfUrl) {
+      return (
+        <View style={[shared.placeholder, { backgroundColor: bgColor }]} onLayout={this.handleRootLayout}>
+          <Text style={shared.placeholderIcon}>{'📄'}</Text>
+          <Text style={shared.placeholderTitle}>PDF Viewer</Text>
+          <Text style={[shared.placeholderSub, { color: loadingTextColor || '#8E8E93' }]}>
+            Set a PDF URL to preview
+          </Text>
+        </View>
+      )
+    }
+
+    return (
+      <View
+        style={[shared.root, { backgroundColor: bgColor }]}
+        onLayout={this.handleRootLayout}
+      >
+
+        {/* ── PDF renderer ───────────────────────────────────────────────── */}
+        <Pdf
+          ref={(r) => { this.pdfRef = r }}
+          source={{ uri: pdfUrl, cache: true }}
+          fitWidth={fitWidth !== false}
+          onLoadComplete={this.handleLoadComplete}
+          onPageChanged={this.handlePageChanged}
+          onError={this.handleError}
+          style={[shared.pdf, { width: containerWidth, height: containerHeight }]}
+          renderActivityIndicator={() => (
+            <View style={shared.loadingContainer}>
+              <ActivityIndicator size="large" color={primaryColor} />
+              <Text style={[shared.loadingText, { color: loadingTextColor || '#8E8E93' }]}>
+                {loadingText || 'Loading PDF…'}
+              </Text>
+            </View>
+          )}
+        />
+
+        {/* ── Error overlay ───────────────────────────────────────────────── */}
+        {error && (
+          <View style={shared.errorOverlay}>
+            <Text style={shared.errorIcon}>{'⚠️'}</Text>
+            <Text style={[shared.errorText, { color: errorTextColor || (IS_IOS ? '#FF3B30' : '#B3261E') }]}>
+              {errorText || 'Could not load PDF.\nPlease check the URL.'}
+            </Text>
+          </View>
+        )}
+
+        {/* ── Share button ────────────────────────────────────────────────── */}
+        {/* Always visible once loaded. iOS: opens system share sheet         */}
+        {/* (Save to Files, AirDrop, Mail…). Android: standard share intent. */}
+        {!loading && !error && (
+          <Pressable
+            onPress={this.handleShare}
+            style={({ pressed }) => [share.btn, { opacity: pressed ? 0.55 : 1 }]}
+            accessibilityLabel="Share PDF"
+            accessibilityRole="button"
+          >
+            {/* iOS-style share icon: box with upward arrow */}
+            <Text style={share.icon}>{IS_IOS ? '⬆' : '⤴'}</Text>
+          </Pressable>
+        )}
+
+        {/* ── Page controls ───────────────────────────────────────────────── */}
+        {showControls && !loading && !error && totalPages > 1 && (
+          IS_IOS
+            ? (
+              <IOSControls
+                currentPage={currentPage}
+                totalPages={totalPages}
+                primaryColor={primaryColor}
+                onPrev={this.goToPrevPage}
+                onNext={this.goToNextPage}
+              />
+            )
+            : (
+              <AndroidControls
+                currentPage={currentPage}
+                totalPages={totalPages}
+                primaryColor={primaryColor}
+                textColor={controlTextColor || '#FFFFFF'}
+                onPrev={this.goToPrevPage}
+                onNext={this.goToNextPage}
+              />
+            )
+        )}
+      </View>
+    )
+  }
+}
+
+// ─── iOS Controls ────────────────────────────────────────────────────────────
+// HIG / iOS 18: floating pill, frosted-glass feel, SF-style thin chevrons
+
+function IOSControls({ currentPage, totalPages, primaryColor, onPrev, onNext }) {
+  const canPrev = currentPage > 1
+  const canNext = currentPage < totalPages
+
+  return (
+    <View style={ios.wrapper} pointerEvents="box-none">
+      <View style={ios.pill}>
+
+        {/* Prev */}
+        <Pressable
+          onPress={onPrev}
+          disabled={!canPrev}
+          style={({ pressed }) => [
+            ios.btn,
+            { opacity: !canPrev ? 0.25 : pressed ? 0.5 : 1 },
+          ]}
+          hitSlop={10}
+          accessibilityLabel="Previous page"
+          accessibilityRole="button"
+        >
+          <Text style={[ios.chevron, { color: primaryColor }]}>{'‹'}</Text>
+        </Pressable>
+
+        {/* Hairline divider */}
+        <View style={ios.divider} />
+
+        {/* Page indicator */}
+        <View style={ios.indicatorWrap}>
+          <Text style={ios.pageNum}>{currentPage}</Text>
+          <Text style={ios.pageSep}>{' of '}</Text>
+          <Text style={ios.pageTotal}>{totalPages}</Text>
+        </View>
+
+        {/* Hairline divider */}
+        <View style={ios.divider} />
+
+        {/* Next */}
+        <Pressable
+          onPress={onNext}
+          disabled={!canNext}
+          style={({ pressed }) => [
+            ios.btn,
+            { opacity: !canNext ? 0.25 : pressed ? 0.5 : 1 },
+          ]}
+          hitSlop={10}
+          accessibilityLabel="Next page"
+          accessibilityRole="button"
+        >
+          <Text style={[ios.chevron, { color: primaryColor }]}>{'›'}</Text>
+        </Pressable>
+
+      </View>
+    </View>
+  )
+}
+
+const ios = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    bottom: 24,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  // Frosted-glass pill: high-opacity white, multi-layer shadow, hairline border
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.90)',
+    borderRadius: 32,
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.10,
+    shadowRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0,0,0,0.10)',
+    minWidth: 172,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  btn: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // SF-style thin single-chevron — system font renders this beautifully on iOS
+  chevron: {
+    fontSize: 28,
+    fontWeight: '300',
+    lineHeight: 32,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  divider: {
+    width: StyleSheet.hairlineWidth,
+    height: 22,
+    backgroundColor: 'rgba(0,0,0,0.12)',
+    marginHorizontal: 2,
+  },
+  indicatorWrap: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  pageNum: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#1C1C1E',
+    letterSpacing: -0.3,
+    includeFontPadding: false,
+  },
+  pageSep: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: '#8E8E93',
+    marginHorizontal: 1,
+    includeFontPadding: false,
+  },
+  pageTotal: {
+    fontSize: 15,
+    fontWeight: '400',
+    color: '#8E8E93',
+    includeFontPadding: false,
+  },
+})
+
+// ─── Android Controls ─────────────────────────────────────────────────────────
+// Material Design 3: bottom bar, rounded top (16dp), elevation 4, ripple
+
+function AndroidControls({ currentPage, totalPages, primaryColor, textColor, onPrev, onNext }) {
+  const canPrev = currentPage > 1
+  const canNext = currentPage < totalPages
+
+  return (
+    <View style={[android.bar, { backgroundColor: primaryColor }]}>
+
+      {/* Prev — M3 icon button with ripple */}
+      <Pressable
+        onPress={onPrev}
+        disabled={!canPrev}
+        android_ripple={{ color: 'rgba(255,255,255,0.28)', radius: 28, borderless: true }}
+        style={[android.iconBtn, { opacity: canPrev ? 1 : 0.38 }]}
+        accessibilityLabel="Previous page"
+        accessibilityRole="button"
+      >
+        <Text style={[android.arrowText, { color: textColor }]}>{'◀'}</Text>
+      </Pressable>
+
+      {/* Page indicator — M3 Label Large: 14sp / 500 / tracking +0.1 */}
+      <Text style={[android.indicator, { color: textColor }]}>
+        {currentPage}{'  ·  '}{totalPages}
+      </Text>
+
+      {/* Next */}
+      <Pressable
+        onPress={onNext}
+        disabled={!canNext}
+        android_ripple={{ color: 'rgba(255,255,255,0.28)', radius: 28, borderless: true }}
+        style={[android.iconBtn, { opacity: canNext ? 1 : 0.38 }]}
+        accessibilityLabel="Next page"
+        accessibilityRole="button"
+      >
+        <Text style={[android.arrowText, { color: textColor }]}>{'▶'}</Text>
+      </Pressable>
+
+    </View>
+  )
+}
+
+const android = StyleSheet.create({
+  // M3 Bottom App Bar: elevation 4, shape.cornerLarge top = 16dp
+  bar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 4,
+    elevation: 4,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  iconBtn: {
+    width: 56,
+    height: 56,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 28,
+  },
+  arrowText: {
+    fontSize: 16,
+    includeFontPadding: false,
+  },
+  indicator: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: '500',
+    letterSpacing: 0.1,
+    includeFontPadding: false,
+  },
+})
+
+// ─── Share Button ────────────────────────────────────────────────────────────
+
+const share = StyleSheet.create({
+  btn: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0,0,0,0.08)',
+  },
+  icon: {
+    fontSize: 16,
+    color: '#007AFF',
+    includeFontPadding: false,
+  },
+})
+
+// ─── Shared Styles ────────────────────────────────────────────────────────────
+
+const shared = StyleSheet.create({
+  // absoluteFillObject fills whatever container Adalo gives us, independent
+  // of the parent's flex direction or layout constraints.
+  root: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  // width/height are set dynamically via onLayout — explicit pixels are
+  // required because react-native-pdf doesn't handle '100%' strings reliably.
+  pdf: {
+    flex: 1,
+  },
+  placeholder: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E5E5EA',
+    borderStyle: 'dashed',
+    borderRadius: IS_IOS ? 12 : 4,
+    margin: 4,
+  },
+  placeholderIcon: {
+    fontSize: 36,
+    marginBottom: 10,
+  },
+  placeholderTitle: {
+    fontSize: IS_IOS ? 17 : 16,
+    fontWeight: IS_IOS ? '600' : '500',
+    color: '#1C1C1E',
+    letterSpacing: IS_IOS ? -0.4 : 0,
+    marginBottom: 4,
+  },
+  placeholderSub: {
+    fontSize: 13,
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 14,
+    fontWeight: IS_IOS ? '400' : '500',
+  },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  errorIcon: {
+    fontSize: 32,
+    marginBottom: 10,
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+    fontWeight: IS_IOS ? '400' : '500',
+  },
+})
+
+export { PDFViewer }
+export default PDFViewer

package/src/components/PDFViewer/index.web.js

@@ -0,0 +1,172 @@
+/**
+ * PDFViewer — Web component
+ * Uses an iframe with the browser's native PDF renderer.
+ * Falls back to a Google Docs viewer for environments that block inline PDFs.
+ */
+
+import React, { Component } from 'react'
+
+// Detect if we're on a mobile browser (not the native app)
+const isMobileBrowser = () => {
+  if (typeof window === 'undefined') return false
+  return (
+    typeof window.orientation !== 'undefined' ||
+    navigator.userAgent.indexOf('IEMobile') !== -1
+  )
+}
+
+class PDFViewerWeb extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: true,
+      error: false,
+    }
+  }
+
+  handleLoad = () => {
+    const { onLoadComplete } = this.props
+    this.setState({ loading: false, error: false })
+    // Web can't know page count from an iframe, so we pass 0
+    if (onLoadComplete) onLoadComplete(0)
+  }
+
+  handleError = () => {
+    const { onError } = this.props
+    this.setState({ loading: false, error: true })
+    if (onError) onError()
+  }
+
+  buildEmbedUrl = (pdfUrl) => {
+    if (!pdfUrl) return null
+    // On mobile browsers, native PDF rendering in iframes is unreliable.
+    // Use Google Docs viewer as a universal fallback.
+    if (isMobileBrowser()) {
+      return `https://docs.google.com/gviewer?embedded=true&url=${encodeURIComponent(pdfUrl)}`
+    }
+    // On desktop browsers, the browser's built-in PDF renderer is reliable.
+    return pdfUrl
+  }
+
+  render() {
+    const {
+      pdfUrl,
+      backgroundColor,
+      controlColor,
+      loadingText,
+      loadingTextColor,
+      errorText,
+      errorTextColor,
+    } = this.props
+
+    const { loading, error } = this.state
+
+    const containerStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      backgroundColor: backgroundColor || '#fff',
+      position: 'relative',
+      overflow: 'hidden',
+    }
+
+    const overlayStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: backgroundColor || '#fff',
+      zIndex: 1,
+    }
+
+    // Placeholder in editor when no URL
+    if (!pdfUrl) {
+      return (
+        <div style={containerStyle}>
+          <div style={{ ...overlayStyle, border: '1px dashed #ccc', borderRadius: 4 }}>
+            <span style={{ fontSize: 14, color: loadingTextColor || '#888', textAlign: 'center' }}>
+              PDF Viewer<br />Set a PDF URL to preview
+            </span>
+          </div>
+        </div>
+      )
+    }
+
+    const embedUrl = this.buildEmbedUrl(pdfUrl)
+
+    return (
+      <div style={containerStyle}>
+        {/* Loading overlay */}
+        {loading && (
+          <div style={overlayStyle}>
+            <div style={spinnerStyle(controlColor || '#0066cc')} />
+            <span style={{ marginTop: 12, fontSize: 14, color: loadingTextColor || '#555' }}>
+              {loadingText || 'Loading PDF…'}
+            </span>
+          </div>
+        )}
+
+        {/* Error overlay */}
+        {error && (
+          <div style={overlayStyle}>
+            <span style={{ fontSize: 14, color: errorTextColor || '#E53E3E', textAlign: 'center', padding: '0 20px' }}>
+              {errorText || 'Could not load PDF. Please check the URL.'}
+            </span>
+          </div>
+        )}
+
+        {/* PDF iframe */}
+        {!error && (
+          <iframe
+            src={embedUrl}
+            onLoad={this.handleLoad}
+            onError={this.handleError}
+            style={{
+              flex: 1,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              display: 'block',
+            }}
+            title="PDF Viewer"
+            allow="fullscreen"
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+// Simple CSS spinner — no external library needed on web
+const spinnerStyle = (color) => ({
+  width: 36,
+  height: 36,
+  border: `3px solid ${color}33`,
+  borderTop: `3px solid ${color}`,
+  borderRadius: '50%',
+  animation: 'adalo-pdf-spin 0.8s linear infinite',
+})
+
+// Inject keyframes once
+if (typeof document !== 'undefined') {
+  const styleId = 'adalo-pdf-viewer-styles'
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style')
+    style.id = styleId
+    style.textContent = `
+      @keyframes adalo-pdf-spin {
+        0%   { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `
+    document.head.appendChild(style)
+  }
+}
+
+export default PDFViewerWeb