react-native-readium 3.0.0 → 3.0.2

package/README.md

@@ -53,6 +53,8 @@ allows you to do things like:
 1. **iOS**: Requires an iOS target >= `13.0` (see the iOS section for more details).
 2. **Android**: Requires `compileSdkVersion` >= `31` (see the Android section for more details).
 
+:warning: This library does not current support `newArch`. Please disable `newArch` if you intend to use it. PR's welcome.
+
 #### Install Module
 
 **NPM**

package/android/src/main/java/com/reactnativereadium/ReadiumViewManager.kt

@@ -82,7 +82,7 @@ class ReadiumViewManager(
   }
 
   fun locationToLinkOrLocator(location: ReadableMap): LinkOrLocator? {
-    val json = JSONObject(location.toHashMap())
+    val json = JSONObject(location.toHashMap() as HashMap<*, *>)
     val hasLocations = json.has("locations")
     val hasChildren = json.has("children")
     val hasHashHref = (json.get("href") as String).contains("#")
@@ -114,7 +114,9 @@ class ReadiumViewManager(
 
   @ReactProp(name = "settings")
   fun setSettings(view: ReadiumView, settings: ReadableMap) {
-    view.updateSettingsFromMap(settings.toHashMap())
+    val map = mutableMapOf<String, Any>()
+    settings.toHashMap().forEach { (key, value) -> if (value != null) map[key] = value }
+    view.updateSettingsFromMap(map)
   }
 
   @ReactPropGroup(names = ["width", "height"], customType = "Style")

package/lib/src/components/BaseReadiumView.js

@@ -1,4 +1,4 @@
-import { requireNativeComponent, UIManager, } from 'react-native';
+import { requireNativeComponent, UIManager } from 'react-native';
 import { COMPONENT_NAME, LINKING_ERROR } from '../utils';
 export const BaseReadiumView = UIManager.getViewManagerConfig(COMPONENT_NAME) != null
     ? requireNativeComponent(COMPONENT_NAME)

package/lib/src/components/ReadiumView.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect, forwardRef, useRef } from 'react';
+import React, { useCallback, useState, useEffect, forwardRef, useRef, } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 import { Settings } from '../interfaces';
 import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
@@ -10,7 +10,7 @@ export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChan
         height: 0,
     });
     // set the view dimensions on layout
-    const onLayout = useCallback(({ nativeEvent: { layout: { width, height } } }) => {
+    const onLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => {
         setDimensions({
             width: dimension(width),
             height: dimension(height),
@@ -45,8 +45,8 @@ export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChan
         }
     }, [defaultRef.current !== null]);
     return (<View style={styles.container} onLayout={onLayout}>
-      <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={defaultRef}/>
-    </View>);
+        <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={defaultRef}/>
+      </View>);
 });
 const styles = StyleSheet.create({
     container: { width: '100%', height: '100%' },

package/lib/src/components/ReadiumView.web.js

@@ -27,14 +27,14 @@ export const ReadiumView = React.forwardRef(({ file, settings, location, onLocat
     if (width)
         mainStyle.width = width;
     return (<View style={styles.container}>
-      {!reader && <div style={loaderStyle}>Loading reader...</div>}
-      <div id="D2Reader-Container" style={styles.d2Container}>
-        <main style={mainStyle} tabIndex={-1} id="iframe-wrapper">
-          <div id="reader-loading" className="loading" style={loaderStyle}></div>
-          <div id="reader-error" className="error"></div>
-        </main>
-      </div>
-    </View>);
+        {!reader && <div style={loaderStyle}>Loading reader...</div>}
+        <div id="D2Reader-Container" style={styles.d2Container}>
+          <main style={mainStyle} tabIndex={-1} id="iframe-wrapper">
+            <div id="reader-loading" className="loading" style={loaderStyle}/>
+            <div id="reader-error" className="error"/>
+          </main>
+        </div>
+      </View>);
 });
 const loaderStyle = {
     width: '100%',

package/lib/src/interfaces/Settings.js

@@ -1,5 +1,5 @@
-import { Appearance, FontFamily, TextAlignment, ColumnCount, } from '../enums';
-import { RANGES, indexOfObjectValue, clamp, } from '../utils';
+import { Appearance, FontFamily, TextAlignment, ColumnCount } from '../enums';
+import { RANGES, indexOfObjectValue, clamp } from '../utils';
 /**
  * A reader settings object with sensible defaults.
  */
@@ -43,10 +43,10 @@ export class Settings {
     static map(settings) {
         const defaultValues = new Settings();
         const mapped = {};
-        Object.keys(defaultValues)
-            .forEach((key) => {
-            // @ts-ignore
-            mapped[key] = settings[key] !== undefined ? settings[key] : defaultValues[key];
+        Object.keys(defaultValues).forEach((key) => {
+            mapped[key] =
+                // @ts-ignore
+                settings[key] !== undefined ? settings[key] : defaultValues[key];
         });
         mapped.appearance = indexOfObjectValue(Appearance, mapped.appearance);
         mapped.fontFamily = indexOfObjectValue(FontFamily, mapped.fontFamily);

package/lib/src/utils/getWidthOrHeightValue.js

@@ -1,4 +1,6 @@
 import { Platform, PixelRatio } from 'react-native';
 export const getWidthOrHeightValue = (val) => {
-    return Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(val) : val;
+    return Platform.OS === 'android'
+        ? PixelRatio.getPixelSizeForLayoutSize(val)
+        : val;
 };

package/lib/web/hooks/useReaderRef.js

@@ -68,18 +68,18 @@ export const useReaderRef = ({ file, onLocationChange, onTableOfContents, }) =>
 // consider bundling them with the library.
 const injectables = [
     {
-        type: "style",
-        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css",
+        type: 'style',
+        url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css',
         r2before: true,
     },
     {
-        type: "style",
-        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css",
+        type: 'style',
+        url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css',
         r2default: true,
     },
     {
-        type: "style",
-        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css",
+        type: 'style',
+        url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css',
         r2after: true,
     },
 ];

package/lib/web/hooks/useSettingsObserver.js

@@ -6,8 +6,5 @@ export const useSettingsObserver = (reader, settings) => {
             // are equivalent or not
             reader?.applyUserSettings(settings);
         }
-    }, [
-        settings,
-        !!reader,
-    ]);
+    }, [settings, !!reader]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-readium",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/src/index",
   "types": "lib/src/index.d.ts",
@@ -24,7 +24,8 @@
   "scripts": {
     "test": "jest",
     "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "eslint \"./src/**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint ./src  --fix",
     "prepare": "rimraf lib && tsc",
     "release": "release-it",
     "example": "yarn --cwd example",

package/src/components/BaseReadiumView.tsx

@@ -1,7 +1,4 @@
-import {
-  requireNativeComponent,
-  UIManager,
-} from 'react-native';
+import { requireNativeComponent, UIManager } from 'react-native';
 
 import type { BaseReadiumViewProps } from '../interfaces';
 import { COMPONENT_NAME, LINKING_ERROR } from '../utils';

package/src/components/BaseReadiumView.web.tsx

@@ -1 +1 @@
-export const BaseReadiumView = () => null
+export const BaseReadiumView = () => null;

package/src/components/ReadiumView.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useState, useEffect, forwardRef, ForwardedRef, useRef, createRef } from 'react';
+import React, {
+  useCallback,
+  useState,
+  useEffect,
+  forwardRef,
+  useRef,
+} from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 
 import type { BaseReadiumViewProps, Dimensions } from '../interfaces';
@@ -8,74 +14,91 @@ import { BaseReadiumView } from './BaseReadiumView';
 
 export type ReadiumProps = BaseReadiumViewProps;
 
-export const ReadiumView: React.FC<ReadiumProps> = forwardRef(({
-  onLocationChange: wrappedOnLocationChange,
-  onTableOfContents: wrappedOnTableOfContents,
-  settings: unmappedSettings,
-  ...props
-}, forwardedRef) => {
-  const defaultRef = useRef<any>(null);
-  const [{ height, width }, setDimensions] = useState<Dimensions>({
-    width: 0,
-    height: 0,
-  });
-
-  // set the view dimensions on layout
-  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}: any) => {
-    setDimensions({
-      width: dimension(width),
-      height: dimension(height),
+export const ReadiumView: React.FC<ReadiumProps> = forwardRef(
+  (
+    {
+      onLocationChange: wrappedOnLocationChange,
+      onTableOfContents: wrappedOnTableOfContents,
+      settings: unmappedSettings,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const defaultRef = useRef<any>(null);
+    const [{ height, width }, setDimensions] = useState<Dimensions>({
+      width: 0,
+      height: 0,
     });
-  }, []);
 
-  // wrap the native onLocationChange and extract the raw event value
-  const onLocationChange = useCallback((event: any) => {
-    if (wrappedOnLocationChange) {
-      wrappedOnLocationChange(event.nativeEvent);
-    }
-  }, [wrappedOnLocationChange]);
+    // set the view dimensions on layout
+    const onLayout = useCallback(
+      ({
+        nativeEvent: {
+          layout: { width, height },
+        },
+      }: any) => {
+        setDimensions({
+          width: dimension(width),
+          height: dimension(height),
+        });
+      },
+      []
+    );
 
-  const onTableOfContents = useCallback((event: any) => {
-    if (wrappedOnTableOfContents) {
-      const toc = event.nativeEvent.toc || null;
-      wrappedOnTableOfContents(toc);
-    }
-  }, [wrappedOnTableOfContents]);
+    // wrap the native onLocationChange and extract the raw event value
+    const onLocationChange = useCallback(
+      (event: any) => {
+        if (wrappedOnLocationChange) {
+          wrappedOnLocationChange(event.nativeEvent);
+        }
+      },
+      [wrappedOnLocationChange]
+    );
 
-  // create the view fragment on android
-  useEffect(() => {
-    if (Platform.OS === 'android' && defaultRef.current) {
-      const viewId = findNodeHandle(defaultRef.current);
-      createFragment(viewId);
-    }
-  }, []);
+    const onTableOfContents = useCallback(
+      (event: any) => {
+        if (wrappedOnTableOfContents) {
+          const toc = event.nativeEvent.toc || null;
+          wrappedOnTableOfContents(toc);
+        }
+      },
+      [wrappedOnTableOfContents]
+    );
 
-  // assign the forwarded ref
-  useEffect(() => {
-    if (forwardedRef && 'current' in forwardedRef) {
-      forwardedRef.current = defaultRef.current;
-    } else if (forwardedRef) {
-      forwardedRef(defaultRef);
-    }
-  }, [defaultRef.current !== null])
+    // create the view fragment on android
+    useEffect(() => {
+      if (Platform.OS === 'android' && defaultRef.current) {
+        const viewId = findNodeHandle(defaultRef.current);
+        createFragment(viewId);
+      }
+    }, []);
 
-  return (
-    <View
-      style={styles.container}
-      onLayout={onLayout}
-    >
-      <BaseReadiumView
-        height={height}
-        width={width}
-        {...props}
-        onLocationChange={onLocationChange}
-        onTableOfContents={onTableOfContents}
-        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}
-        ref={defaultRef}
-      />
-    </View>
-  );
-});
+    // assign the forwarded ref
+    useEffect(() => {
+      if (forwardedRef && 'current' in forwardedRef) {
+        forwardedRef.current = defaultRef.current;
+      } else if (forwardedRef) {
+        forwardedRef(defaultRef);
+      }
+    }, [defaultRef.current !== null]);
+
+    return (
+      <View style={styles.container} onLayout={onLayout}>
+        <BaseReadiumView
+          height={height}
+          width={width}
+          {...props}
+          onLocationChange={onLocationChange}
+          onTableOfContents={onTableOfContents}
+          settings={
+            unmappedSettings ? Settings.map(unmappedSettings) : undefined
+          }
+          ref={defaultRef}
+        />
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: { width: '100%', height: '100%' },

package/src/components/ReadiumView.web.tsx

@@ -9,62 +9,66 @@ import {
   useLocationObserver,
 } from '../../web/hooks';
 
-export const ReadiumView = React.forwardRef<{
-  nextPage: () => void;
-  prevPage: () => void;
-}, ReadiumProps>(({
-  file,
-  settings,
-  location,
-  onLocationChange,
-  onTableOfContents,
-  style = {},
-  height,
-  width,
-}, ref) => {
-  const readerRef = useReaderRef({
-    file,
-    onLocationChange,
-    onTableOfContents,
-  });
-  const reader = readerRef.current;
-
-  useImperativeHandle(ref, () => ({
-    nextPage: () => {
-      readerRef.current?.nextPage();
-    },
-    prevPage: () => {
-      readerRef.current?.previousPage();
+export const ReadiumView = React.forwardRef<
+  {
+    nextPage: () => void;
+    prevPage: () => void;
+  },
+  ReadiumProps
+>(
+  (
+    {
+      file,
+      settings,
+      location,
+      onLocationChange,
+      onTableOfContents,
+      style = {},
+      height,
+      width,
     },
-  }));
+    ref
+  ) => {
+    const readerRef = useReaderRef({
+      file,
+      onLocationChange,
+      onTableOfContents,
+    });
+    const reader = readerRef.current;
 
-  useSettingsObserver(reader, settings);
-  useLocationObserver(reader, location);
+    useImperativeHandle(ref, () => ({
+      nextPage: () => {
+        readerRef.current?.nextPage();
+      },
+      prevPage: () => {
+        readerRef.current?.previousPage();
+      },
+    }));
 
-  const mainStyle = {
-    ...styles.maximize,
-    ...(style as CSSProperties),
-  };
+    useSettingsObserver(reader, settings);
+    useLocationObserver(reader, location);
 
-  if (height) mainStyle.height = height;
-  if (width) mainStyle.width = width;
+    const mainStyle = {
+      ...styles.maximize,
+      ...(style as CSSProperties),
+    };
 
-  return (
-    <View style={styles.container}>
-      {!reader && <div style={loaderStyle}>Loading reader...</div>}
-      <div id="D2Reader-Container" style={styles.d2Container}>
-        <main
-          style={mainStyle}
-          tabIndex={-1}
-          id="iframe-wrapper"
-        >
-          <div id="reader-loading" className="loading" style={loaderStyle}></div>
-          <div id="reader-error" className="error"></div>
-        </main>
-      </div>
-    </View>
-  );
-});
+    if (height) mainStyle.height = height;
+    if (width) mainStyle.width = width;
+
+    return (
+      <View style={styles.container}>
+        {!reader && <div style={loaderStyle}>Loading reader...</div>}
+        <div id="D2Reader-Container" style={styles.d2Container}>
+          <main style={mainStyle} tabIndex={-1} id="iframe-wrapper">
+            <div id="reader-loading" className="loading" style={loaderStyle} />
+            <div id="reader-error" className="error" />
+          </main>
+        </div>
+      </View>
+    );
+  }
+);
 
 const loaderStyle: React.CSSProperties = {
   width: '100%',

package/src/interfaces/File.ts

@@ -1,7 +1,6 @@
 import type { Link } from './Link';
 import type { Locator } from './Locator';
 
-
 export interface File {
   /**
    * A string path to an eBook on disk.

package/src/interfaces/Settings.ts

@@ -1,15 +1,6 @@
-import {
-  Appearance,
-  FontFamily,
-  TextAlignment,
-  ColumnCount,
-} from '../enums';
+import { Appearance, FontFamily, TextAlignment, ColumnCount } from '../enums';
 
-import {
-  RANGES,
-  indexOfObjectValue,
-  clamp,
-} from '../utils';
+import { RANGES, indexOfObjectValue, clamp } from '../utils';
 
 /**
  * A reader settings object with sensible defaults.
@@ -63,12 +54,11 @@ export class Settings {
     const defaultValues = new Settings();
     const mapped: Record<string, any> = {};
 
-    Object.keys(defaultValues)
-      .forEach((key: string) => {
+    Object.keys(defaultValues).forEach((key: string) => {
+      mapped[key] =
         // @ts-ignore
-        mapped[key] = settings[key] !== undefined ? settings[key] : defaultValues[key];
-      })
-    ;
+        settings[key] !== undefined ? settings[key] : defaultValues[key];
+    });
 
     mapped.appearance = indexOfObjectValue(Appearance, mapped.appearance);
     mapped.fontFamily = indexOfObjectValue(FontFamily, mapped.fontFamily);

package/src/utils/RANGES.ts

@@ -1,8 +1,8 @@
 export const RANGES = {
-  fontSize:         [100.0, 300.0],
-  wordSpacing:      [0.0, 0.5],
-  letterSpacing:    [0.0, 0.5],
-  pageMargins:      [0.5, 4.0],
-  lineHeight:       [1.0, 2.0],
+  fontSize: [100.0, 300.0],
+  wordSpacing: [0.0, 0.5],
+  letterSpacing: [0.0, 0.5],
+  pageMargins: [0.5, 4.0],
+  lineHeight: [1.0, 2.0],
   paragraphMargins: [0.0, 2.0],
 };

package/src/utils/clamp.ts

@@ -2,4 +2,4 @@ export const clamp = (val: number, lower: number, upper: number): number => {
   if (val < lower) return lower;
   if (val > upper) return upper;
   return val;
-}
+};

package/src/utils/createFragment.ts

@@ -9,7 +9,7 @@ export const createFragment = (viewId: number | null) => {
       // we are calling the 'create' command
       // @ts-ignore
       UIManager.getViewManagerConfig(COMPONENT_NAME).Commands.create.toString(),
-      [viewId],
+      [viewId]
     );
   }
-}
+};

package/src/utils/getWidthOrHeightValue.ts

@@ -1,5 +1,7 @@
 import { Platform, PixelRatio } from 'react-native';
 
 export const getWidthOrHeightValue = (val: number) => {
-  return Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(val) : val;
-}
+  return Platform.OS === 'android'
+    ? PixelRatio.getPixelSizeForLayoutSize(val)
+    : val;
+};

package/src/utils/indexOfObjectValue.ts

@@ -1,3 +1,3 @@
 export const indexOfObjectValue = (obj: any, val: any): number => {
   return Object.values(obj).indexOf(val);
-}
+};

package/web/hooks/useLocationObserver.ts

@@ -4,7 +4,7 @@ import type { Link, Locator } from '../../src/interfaces';
 
 export const useLocationObserver = (
   reader?: D2Reader | null,
-  location?: Link | Locator | null,
+  location?: Link | Locator | null
 ) => {
   useDeepCompareEffect(() => {
     if (reader && location) {

package/web/hooks/useReaderRef.ts

@@ -7,7 +7,7 @@ export const useReaderRef = ({
   file,
   onLocationChange,
   onTableOfContents,
-}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {
+}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents'>) => {
   const readerRef = useRef<D2Reader | null>(null);
   const readingOrder = useRef<Locator[]>([]);
 
@@ -84,7 +84,7 @@ export const useReaderRef = ({
     run();
   }, [file.url]);
 
-  return readerRef
+  return readerRef;
 };
 
 // NOTE: right now we're serving these through statically.io, which is just
@@ -92,19 +92,18 @@ export const useReaderRef = ({
 // consider bundling them with the library.
 const injectables: any[] = [
   {
-    type: "style",
-    url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css",
+    type: 'style',
+    url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css',
     r2before: true,
   },
   {
-    type: "style",
-    url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css",
+    type: 'style',
+    url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css',
     r2default: true,
   },
   {
-    type: "style",
-    url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css",
+    type: 'style',
+    url: 'https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css',
     r2after: true,
   },
 ];
-

package/web/hooks/useSettingsObserver.ts

@@ -4,7 +4,7 @@ import type { Settings } from '../../src/interfaces';
 
 export const useSettingsObserver = (
   reader?: D2Reader | null,
-  settings?: Partial<Settings> | null,
+  settings?: Partial<Settings> | null
 ) => {
   useDeepCompareEffect(() => {
     if (reader && settings) {
@@ -12,8 +12,5 @@ export const useSettingsObserver = (
       // are equivalent or not
       reader?.applyUserSettings(settings as Partial<D2UserSettings>);
     }
-  }, [
-    settings,
-    !!reader,
-  ]);
+  }, [settings, !!reader]);
 };