uilib-native 4.2.0 → 4.4.0

package/components/DynamicFonts/index.js

@@ -0,0 +1,154 @@
+import FontLoader, { FontExtension } from "./FontLoader";
+import FontDownloader from "./FontDownloader";
+// @ts-expect-error
+import PermissionsAcquirer from "./PermissionsAcquirer";
+import NoPermissionsAcquirer from "./NoPermissionsAcquirer";
+const DEFAULT_FONT_LOAD_ERROR_MESSAGE = 'Unable to load this font.';
+export { FontExtension };
+export default class DynamicFonts {
+  constructor(props) {
+    const {
+      debug = __DEV__,
+      doNotRequestPermissions
+    } = props;
+    this.props = {
+      fontLoadErrorMessage: DEFAULT_FONT_LOAD_ERROR_MESSAGE,
+      ...props
+    };
+    this.permissionsAcquirer = doNotRequestPermissions ? new NoPermissionsAcquirer() : new PermissionsAcquirer(this.props.permissionsAcquirerProps ?? {});
+    this.fontLoader = new FontLoader({
+      debug
+    });
+    const fontDownloadingProps = this.props.fontDownloadingProps ?? {};
+    this.fontDownloader = new FontDownloader({
+      ...fontDownloadingProps,
+      debug
+    });
+  }
+  log(message, ...optionalParams) {
+    const {
+      debug
+    } = this.props;
+    if (debug) {
+      console.log(message, optionalParams);
+    }
+  }
+  async loadFont(input) {
+    const {
+      fontLoadErrorMessage
+    } = this.props;
+    try {
+      return await this.fontLoader.loadFont(input);
+    } catch (err) {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:loadFont',
+        message: `${fontLoadErrorMessage} fontName: ${input.fontName} error: ${JSON.stringify(err)}`
+      });
+    }
+  }
+
+  /**
+   * Get font - download from uri (or from cache if already downloaded) and load it to memory
+   * You need to handle errors in the form of Promise.reject
+   * @param fontUri the uri of the font (to be downloaded from)
+   * @param fontName the full name of the font
+   * @param fontExtension the extension of the font, i.e. '.ttf' or '.otf'
+   * @param timeout milliseconds for the download to complete in (defaults to 5000)
+   */
+  async getFont({
+    fontUri,
+    fontName,
+    fontExtension,
+    timeout = 5000
+  }) {
+    const {
+      fontLoadErrorMessage
+    } = this.props;
+    await this.permissionsAcquirer.getPermissions();
+    if (await this.fontDownloader.isFontDownloaded(fontName, fontExtension)) {
+      this.log(fontName, 'Already downloaded');
+    } else {
+      await this.fontDownloader.downloadFont(fontUri, fontName, fontExtension, timeout);
+    }
+    const base64FontString = await this.fontDownloader.readFontFromDisk(fontName, fontExtension);
+    if (base64FontString) {
+      this.log(fontName, 'Loading');
+      const _fontName = await this.loadFont({
+        fontName,
+        base64FontString,
+        fontExtension
+      });
+      this.log(_fontName, 'Finished loading');
+      return Promise.resolve(_fontName);
+    } else {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:getFont',
+        message: `${fontLoadErrorMessage} fontName: ${fontName}`
+      });
+    }
+  }
+  async getFonts(fonts) {
+    await this.permissionsAcquirer.getPermissions();
+    if (fonts instanceof Array) {
+      return Promise.all(fonts.filter(font => font).map(font => this.getFont(font)));
+    } else {
+      return Promise.resolve([await this.getFont(fonts)]);
+    }
+  }
+  buildFontData(rootUri, fontName, fontExtension, fontNamePrefix) {
+    const _fontName = `${fontNamePrefix ?? ''}${fontName}`;
+    const fullFontName = `${_fontName}.${fontExtension}`;
+    return {
+      fontUri: `${rootUri}${fullFontName}`,
+      fontName: _fontName,
+      fontExtension,
+      fullFontName
+    };
+  }
+
+  // eslint-disable-next-line max-params
+  async getFontFamily(rootUri, fontNames, fontExtension, fontNamePrefix, retries = 1) {
+    const fonts = fontNames.map(fontName => this.buildFontData(rootUri, fontName, fontExtension, fontNamePrefix));
+    let fontsLoaded = [];
+    let tryCounter = 0;
+    while (fontsLoaded.length < fontNames.length && tryCounter < retries) {
+      try {
+        ++tryCounter;
+        // TODO: we should return successful loaded fonts and not fail all of them
+        fontsLoaded = await this.getFonts(fonts);
+      } catch (error) {
+        this.log(`getFontFamily failed (try #${tryCounter}) error:`, error);
+      }
+    }
+    return Promise.resolve(fontsLoaded);
+  }
+  async deleteFontFromDisk(fontName, fontExtension, fontNamePrefix) {
+    const fontInput = this.buildFontData('', fontName, fontExtension, fontNamePrefix);
+    await this.fontDownloader.deleteFontFromDisk(fontInput.fullFontName);
+  }
+  async deleteFont(fontName, fontExtension) {
+    await this.permissionsAcquirer.getPermissions();
+    await this.deleteFontFromDisk(fontName, fontExtension);
+  }
+  async deleteFontFamily(fontNames, fontExtension, fontNamePrefix) {
+    await this.permissionsAcquirer.getPermissions();
+    fontNames.forEach(async fontName => {
+      await this.deleteFontFromDisk(fontName, fontExtension, fontNamePrefix);
+    });
+  }
+  async isFontDownloaded(fontName, fontExtension) {
+    return await this.fontDownloader.isFontDownloaded(fontName, fontExtension);
+  }
+  async isFontFamilyDownloaded(rootUri, fontNames, fontExtension, fontNamePrefix) {
+    const fonts = fontNames.map(fontName => this.buildFontData(rootUri, fontName, fontExtension, fontNamePrefix));
+    try {
+      const areDownloaded = await Promise.all(fonts.filter(font => font).map(font => {
+        return this.fontDownloader.isFontDownloaded(font.fontName, font.fontExtension);
+      }));
+      return Promise.resolve(areDownloaded.every(v => v === true));
+    } catch (error) {
+      this.log(`isFontFamilyDownloaded failed error:`, error);
+      return Promise.resolve(false);
+    }
+  }
+}

package/components/HighlighterOverlayView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { requireNativeComponent, processColor, Platform, StyleSheet, Modal } from 'react-native';
+const NativeHighlighterView = requireNativeComponent('HighlighterView');
+const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
+const HighlighterOverlayView = props => {
+  const {
+    overlayColor,
+    borderRadius,
+    strokeColor,
+    strokeWidth,
+    visible,
+    onRequestClose,
+    highlightFrame,
+    style,
+    children,
+    highlightViewTag,
+    highlightViewTagParams,
+    minimumRectSize,
+    innerPadding
+  } = props;
+  let overlayColorToUse = overlayColor || DefaultOverlayColor;
+  let strokeColorToUse = strokeColor;
+  if (Platform.OS === 'android') {
+    // @ts-ignore
+    overlayColorToUse = processColor(overlayColorToUse);
+    // @ts-ignore
+    strokeColorToUse = processColor(strokeColorToUse);
+  }
+  return <Modal visible={!!visible} animationType={'fade'} transparent onRequestClose={() => onRequestClose?.()}>
+      <NativeHighlighterView
+    // @ts-ignore, this became private, not sure if I should remove it 
+    highlightFrame={highlightFrame} style={[style, {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'transparent'
+    }]} overlayColor={overlayColorToUse} borderRadius={borderRadius} strokeColor={strokeColorToUse} strokeWidth={strokeWidth} highlightViewTag={highlightViewTag} highlightViewTagParams={highlightViewTagParams} minimumRectSize={minimumRectSize} innerPadding={innerPadding} />
+      {children}
+    </Modal>;
+};
+HighlighterOverlayView.displayName = 'IGNORE';
+export default HighlighterOverlayView;

package/components/HighlighterOverlayView.web.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Modal } from 'react-native';
+const HighlighterOverlayView = props => {
+  const {
+    visible,
+    onRequestClose,
+    children
+  } = props;
+  return <Modal visible={!!visible} animationType={'fade'} transparent onRequestClose={() => onRequestClose?.()}>
+
+      {children}
+    </Modal>;
+};
+HighlighterOverlayView.displayName = 'IGNORE';
+export default HighlighterOverlayView;

package/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from '../CustomKeyboardViewBase';
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
+    static displayName: string;
+    componentDidUpdate(prevProps: CustomKeyboardViewBaseProps): Promise<void>;
+    render(): React.JSX.Element;
+}

package/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+import TextInputKeyboardManager from "../TextInputKeyboardManager/TextInputKeyboardManager.android";
+import KeyboardRegistry from "../KeyboardRegistry";
+import CustomKeyboardViewBase from "../CustomKeyboardViewBase";
+const CustomKeyboardViewNativeAndroid = requireNativeComponent('CustomKeyboardViewNativeTemp');
+export default class CustomKeyboardView extends CustomKeyboardViewBase {
+  static displayName = 'IGNORE';
+  async componentDidUpdate(prevProps) {
+    const {
+      component
+    } = this.props;
+    if (prevProps.component !== component && !component) {
+      await TextInputKeyboardManager.reset();
+    }
+    super.componentDidUpdate(prevProps);
+  }
+  render() {
+    const {
+      component,
+      initialProps
+    } = this.props;
+    const KeyboardComponent = component && KeyboardRegistry.getKeyboard(component);
+    return <CustomKeyboardViewNativeAndroid>
+        {KeyboardComponent && <KeyboardComponent {...initialProps} />}
+      </CustomKeyboardViewNativeAndroid>;
+  }
+}

package/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.d.ts

@@ -0,0 +1,19 @@
+import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from './../CustomKeyboardViewBase';
+export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
+    /**
+     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
+     */
+    inputRef?: any;
+    useSafeArea?: boolean;
+};
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewProps> {
+    static displayName: string;
+    static defaultProps: {
+        initialProps: {};
+        useSafeArea: boolean;
+    };
+    constructor(props: CustomKeyboardViewProps);
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: CustomKeyboardViewProps): void;
+    render(): null;
+}

package/components/Keyboard/KeyboardInput/CustomKeyboardView/{CustomKeyboardView.ios.tsx → CustomKeyboardView.ios.js}

@@ -1,54 +1,48 @@
-import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
-import KeyboardRegistry from './../KeyboardRegistry';
-import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
-
-export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
-  /**
-   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
-   */
-  inputRef?: any;
-  useSafeArea?: boolean;
-};
-
-export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewProps> {
+import TextInputKeyboardManager from "./../TextInputKeyboardManager/TextInputKeyboardManager.ios";
+import KeyboardRegistry from "./../KeyboardRegistry";
+import CustomKeyboardViewBase from "./../CustomKeyboardViewBase";
+export default class CustomKeyboardView extends CustomKeyboardViewBase {
   static displayName = 'IGNORE';
-
   static defaultProps = {
     initialProps: {},
     useSafeArea: true
   };
-
-  constructor(props: CustomKeyboardViewProps) {
+  constructor(props) {
     super(props);
-
-    const {component} = props;
+    const {
+      component
+    } = props;
     if (component) {
       this.registeredRequestShowKeyboard = false;
     }
-
-    KeyboardRegistry.addListener('onToggleExpandedKeyboard', (args: any) => {
-      const {inputRef, initialProps} = this.props;
+    KeyboardRegistry.addListener('onToggleExpandedKeyboard', args => {
+      const {
+        inputRef,
+        initialProps
+      } = this.props;
       if (inputRef) {
         if (this.keyboardExpandedToggle[args.keyboardId] === undefined) {
           this.keyboardExpandedToggle[args.keyboardId] = false;
         }
         this.keyboardExpandedToggle[args.keyboardId] = !this.keyboardExpandedToggle[args.keyboardId];
-        TextInputKeyboardManager.toggleExpandKeyboard(inputRef,
-          this.keyboardExpandedToggle[args.keyboardId],
-          initialProps.expandWithLayoutAnimation);
+        TextInputKeyboardManager.toggleExpandKeyboard(inputRef, this.keyboardExpandedToggle[args.keyboardId], initialProps.expandWithLayoutAnimation);
       }
     });
   }
-
   componentWillUnmount() {
     KeyboardRegistry.removeListeners('onToggleExpandedKeyboard');
     super.componentWillUnmount();
   }
-
-  componentDidUpdate(prevProps: CustomKeyboardViewProps) {
-    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = this.props;
-    const {component} = prevProps;
-
+  componentDidUpdate(prevProps) {
+    const {
+      inputRef: nextInputRef,
+      component: nextComponent,
+      initialProps: nextInitialProps,
+      useSafeArea
+    } = this.props;
+    const {
+      component
+    } = prevProps;
     if (nextInputRef && nextComponent !== component) {
       if (nextComponent) {
         TextInputKeyboardManager.setInputComponent(nextInputRef, {
@@ -60,11 +54,9 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKey
         TextInputKeyboardManager.removeInputComponent(nextInputRef);
       }
     }
-
     super.componentDidUpdate(prevProps);
   }
-
   render() {
     return null;
   }
-}
+}

package/components/Keyboard/KeyboardInput/CustomKeyboardView/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CustomKeyboardViewProps } from './CustomKeyboardView.ios';
+declare const CustomKeyboardView: (props: CustomKeyboardViewProps) => React.JSX.Element;
+export default CustomKeyboardView;

package/components/Keyboard/KeyboardInput/CustomKeyboardView/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { default as CustomKeyboardViewIOS } from "./CustomKeyboardView.ios";
+import { default as CustomKeyboardViewAndroid } from "./CustomKeyboardView.android";
+const IsAndroid = Platform.OS === 'android';
+const CustomKeyboardView = props => {
+  const Container = IsAndroid ? CustomKeyboardViewAndroid : CustomKeyboardViewIOS;
+  return <Container {...props} />;
+};
+export default CustomKeyboardView;

package/components/Keyboard/KeyboardInput/CustomKeyboardView/{index.web.tsx → index.web.js}

@@ -1,11 +1,6 @@
 import 'react';
-
 console.log('keyboard is not supported on web');
 const CustomKeyboardView = () => {
-
-  return (
-    null
-  );
+  return null;
 };
-
-export default CustomKeyboardView;
+export default CustomKeyboardView;

package/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.d.ts

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { EventSubscription } from 'react-native';
+export type CustomKeyboardViewBaseProps = {
+    inputRef?: any;
+    initialProps?: any;
+    component?: string;
+    onItemSelected?: (component?: string, args?: any) => void;
+    onRequestShowKeyboard?: (keyboardId: string) => void;
+    children?: React.ReactChild | React.ReactChild[];
+};
+export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProps> extends Component<T> {
+    static defaultProps: {
+        initialProps: {};
+    };
+    registeredRequestShowKeyboard: boolean;
+    keyboardExpandedToggle: any;
+    keyboardEventListeners: EventSubscription[];
+    constructor(props: T);
+    shouldComponentUpdate(nextProps: T): boolean;
+    componentWillUnmount(): void;
+    addOnItemSelectListener(onItemSelected: CustomKeyboardViewBaseProps['onItemSelected'], component: CustomKeyboardViewBaseProps['component']): void;
+    componentDidUpdate(prevProps: T): void;
+    registerListener(props: T, nextProps: T): void;
+}

package/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.js

@@ -0,0 +1,67 @@
+import { Component } from 'react';
+import KeyboardRegistry from "./KeyboardRegistry";
+export default class CustomKeyboardViewBase extends Component {
+  static defaultProps = {
+    initialProps: {}
+  };
+  registeredRequestShowKeyboard = false;
+  keyboardEventListeners = [];
+  constructor(props) {
+    super(props);
+    const {
+      component,
+      onItemSelected
+    } = props;
+    if (component) {
+      this.addOnItemSelectListener(onItemSelected, component);
+    }
+    this.keyboardExpandedToggle = {};
+  }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.component !== this.props.component;
+  }
+  componentWillUnmount() {
+    const {
+      component
+    } = this.props;
+    KeyboardRegistry.removeListeners('onRequestShowKeyboard');
+    if (this.keyboardEventListeners) {
+      this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
+    }
+    if (component) {
+      KeyboardRegistry.removeListeners(`${component}.onItemSelected`);
+    }
+  }
+  addOnItemSelectListener(onItemSelected, component) {
+    if (onItemSelected) {
+      KeyboardRegistry.addListener(`${component}.onItemSelected`, args => {
+        onItemSelected(component, args);
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      onRequestShowKeyboard
+    } = this.props;
+    if (onRequestShowKeyboard && !this.registeredRequestShowKeyboard) {
+      this.registeredRequestShowKeyboard = true;
+      KeyboardRegistry.addListener('onRequestShowKeyboard', args => {
+        onRequestShowKeyboard(args.keyboardId);
+      });
+    }
+    this.registerListener(prevProps, this.props);
+  }
+  registerListener(props, nextProps) {
+    const {
+      component,
+      onItemSelected
+    } = nextProps;
+    if (component && props.component !== component) {
+      if (props.component) {
+        KeyboardRegistry.removeListeners(`${props.component}.onItemSelected`);
+      }
+      KeyboardRegistry.removeListeners(`${component}.onItemSelected`);
+      this.addOnItemSelectListener(onItemSelected, component);
+    }
+  }
+}

package/components/Keyboard/KeyboardInput/KeyboardAccessoryView.d.ts

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import { KeyboardTrackingViewProps } from '../KeyboardTracking/KeyboardTrackingView';
+type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'scrollBehavior' | 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
+export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
+    /**
+     * Content to be rendered above the keyboard
+     */
+    renderContent?: () => React.ReactElement;
+    /**
+     * iOS only.
+     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
+     * This is required.
+     */
+    kbInputRef?: any;
+    /**
+     * The keyboard ID (the componentID sent to KeyboardRegistry)
+     */
+    kbComponent?: string;
+    /**
+     * The props that will be sent to the KeyboardComponent
+     */
+    kbInitialProps?: any;
+    /**
+     * A callback for when the height is changed
+     */
+    onHeightChanged?: (height: number) => void;
+    /**
+     * Callback that will be called when an item on the keyboard has been pressed.
+     */
+    onItemSelected?: (component?: string, args?: any) => void;
+    /**
+     * Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
+     */
+    onRequestShowKeyboard?: () => void;
+    /**
+     * Callback that will be called once the keyboard has been closed
+     */
+    onKeyboardResigned?: () => void;
+    children?: React.ReactChild;
+};
+/**
+ * @description: View that allows replacing the default keyboard with other components
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
+ */
+declare class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
+    static scrollBehaviors: {
+        NONE: any;
+        SCROLL_TO_BOTTOM_INVERTED_ONLY: any;
+        FIXED_OFFSET: any;
+    };
+    static defaultProps: {
+        revealKeyboardInteractive: boolean;
+        manageScrollView: boolean;
+        requiresSameParentToManageScrollView: boolean;
+        addBottomView: boolean;
+        allowHitsOutsideBounds: boolean;
+        scrollBehavior: any;
+    };
+    customInputControllerEventsSubscriber: any;
+    trackingViewRef: any;
+    constructor(props: KeyboardAccessoryViewProps);
+    componentWillUnmount(): void;
+    onContainerComponentHeightChanged(event: LayoutChangeEvent): void;
+    onAndroidBackPressed(): boolean;
+    getNativeProps(): Promise<any>;
+    registerForKeyboardResignedEvent(): void;
+    registerAndroidBackHandler(): void;
+    processInitialProps(): any;
+    scrollToStart(): void;
+    render(): React.JSX.Element;
+}
+export default KeyboardAccessoryView;