react-native-ui-lib 7.46.3 → 8.0.0

package/lib/android/src/main/java/com/wix/reactnativeuilib/textinput/TextInputDelKeyHandlerPackage.java

@@ -1,28 +0,0 @@
-package com.wix.reactnativeuilib.textinput;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.JavaScriptModule;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-
-public class TextInputDelKeyHandlerPackage implements ReactPackage {
-    @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(new TextInputDelKeyHandlerModule(reactContext));
-    }
-
-//    @Override
-//    public List<Class<? extends JavaScriptModule>> createJSModules() {
-//        return Collections.emptyList();
-//    }
-
-    @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-}

package/lib/android/src/main/java/com/wix/reactnativeuilib/textinput/ViewUtils.java

@@ -1,36 +0,0 @@
-package com.wix.reactnativeuilib.textinput;
-
-import android.view.View;
-import android.view.ViewGroup;
-
-import androidx.annotation.Nullable;
-
-import com.facebook.react.views.textinput.ReactEditText;
-
-class ViewUtils {
-
-    @Nullable
-    static ReactEditText getEditTextInView(View view) {
-        if (view == null) {
-            return null;
-        }
-
-        if (view instanceof ReactEditText) {
-            return (ReactEditText) view;
-        }
-
-        if (view instanceof ViewGroup) {
-            final ViewGroup viewGroup = (ViewGroup) view;
-
-            for (int i = 0; i < viewGroup.getChildCount(); i++) {
-                final View child = viewGroup.getChildAt(i);
-                final View childView = getEditTextInView(child);
-
-                if (childView != null) {
-                    return (ReactEditText) childView;
-                }
-            }
-        }
-        return null;
-    }
-}

package/lib/components/HighlighterOverlayView.js

@@ -1,40 +0,0 @@
-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/lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.js

@@ -1,28 +0,0 @@
-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/lib/components/Keyboard/KeyboardInput/utils/KeyboardUtils.d.ts

@@ -1,11 +0,0 @@
-/**
- * @description: util for managing the keyboard.
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js
- */
-export default class KeyboardUtils {
-    static displayName: string;
-    /**
-     * Used to dismiss (close) the keyboard.
-     */
-    static dismiss: () => void;
-}

package/lib/components/Keyboard/KeyboardInput/utils/KeyboardUtils.js

@@ -1,17 +0,0 @@
-import { Keyboard } from 'react-native';
-import TextInputKeyboardManager from "../TextInputKeyboardManager";
-
-/**
- * @description: util for managing the keyboard.
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js
- */
-export default class KeyboardUtils {
-  static displayName = 'KeyboardUtils';
-  /**
-   * Used to dismiss (close) the keyboard.
-   */
-  static dismiss = () => {
-    Keyboard.dismiss();
-    TextInputKeyboardManager.dismissKeyboard();
-  };
-}

package/panningViews.d.ts

@@ -1,2 +0,0 @@
-import {PanningViews} from './src';
-export default PanningViews;

package/panningViews.js

@@ -1 +0,0 @@
-module.exports = require('./src/components/panningViews').default;

package/react-native.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-  dependency: {
-    platforms: {
-      /* TODO: Once we upgrade to RN69 we should try using podspecPath again, for now I copied ReactNativeUiLib.podspec file to the root - it seems to work
-      I copied it, because we need it for both the main uilib and the uilib-native package */
-      // ios: {
-      //   podspecPath: './lib/ReactNativeUiLib.podspec'
-      // },
-      android: {
-        sourceDir: '../uilib-native/android/',
-        packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
-import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
-import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
-import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`,
-        packageInstance: `new DynamicFontPackage(),
-      new HighlighterViewPackage(),
-      new TextInputDelKeyHandlerPackage(),
-      new KeyboardInputPackage(getApplication())`
-      }
-    }
-  }
-};

package/sharedTransition.d.ts

@@ -1,2 +0,0 @@
-import {SharedTransition} from './src';
-export default SharedTransition;

package/sharedTransition.js

@@ -1 +0,0 @@
-module.exports = require('./src/components/sharedTransition').default;

package/src/components/dialog/DialogDismissibleView.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { PanningDirections } from '../panningViews/panningProvider';
-interface DialogDismissibleProps {
-    /**
-     * Additional styling
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * The direction of the allowed pan (default is DOWN)
-     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
-     */
-    direction?: PanningDirections;
-    /**
-     * onDismiss callback
-     */
-    onDismiss?: () => void;
-    /**
-     * The dialog`s container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Whether to show the dialog or not
-     */
-    visible?: boolean;
-}
-interface Props extends DialogDismissibleProps {
-    children?: React.ReactNode | React.ReactNode[];
-}
-declare const DialogDismissibleView: {
-    (props: Props): React.JSX.Element;
-    displayName: string;
-};
-export default DialogDismissibleView;

package/src/components/dialog/DialogDismissibleView.js

@@ -1,184 +0,0 @@
-import _isUndefined from "lodash/isUndefined";
-import React, { useEffect, useRef, useCallback, useContext } from 'react';
-import { Animated, Easing, StyleSheet } from 'react-native';
-import { Constants } from "../../commons/new";
-import View from "../view";
-import PanningContext from "../panningViews/panningContext";
-import PanningProvider from "../panningViews/panningProvider";
-import PanResponderView from "../panningViews/panResponderView";
-const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
-
-// TODO: move this to panningContext
-
-const DEFAULT_DIRECTION = PanningProvider.Directions.DOWN;
-const DialogDismissibleView = props => {
-  const {
-    direction = DEFAULT_DIRECTION,
-    visible: propsVisible,
-    containerStyle,
-    style,
-    children,
-    onDismiss = () => {}
-  } = props;
-  // @ts-expect-error
-  const {
-    isPanning,
-    dragDeltas,
-    swipeDirections
-  } = useContext(PanningContext);
-  const width = useRef(Constants.screenWidth);
-  const height = useRef(Constants.screenHeight);
-  const TOP_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().top : Constants.isIOS ? 20 : 0);
-  const BOTTOM_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().bottom : Constants.isIOS ? 20 : 0);
-  const thresholdX = useRef(0);
-  const thresholdY = useRef(0);
-  const dragsCounter = useRef(0);
-  const containerRef = useRef();
-  const animatedValue = useRef(new Animated.Value(0));
-  const mutableSwipeDirections = useRef({});
-  const prevDragDeltas = useRef();
-  const prevSwipeDirections = useRef();
-  const visible = useRef(Boolean(propsVisible));
-  const getHiddenLocation = useCallback((left, top) => {
-    const result = {
-      left: 0,
-      top: 0
-    };
-    switch (direction) {
-      case PanningProvider.Directions.LEFT:
-        result.left = -left - width.current;
-        break;
-      case PanningProvider.Directions.RIGHT:
-        result.left = Constants.screenWidth - left;
-        break;
-      case PanningProvider.Directions.UP:
-        result.top = -top - height.current - TOP_INSET.current;
-        break;
-      case PanningProvider.Directions.DOWN:
-      default:
-        result.top = Constants.screenHeight - top + BOTTOM_INSET.current;
-        break;
-    }
-    return result;
-  }, [direction]);
-  const hiddenLocation = useRef(getHiddenLocation(0, 0));
-  const animateTo = useCallback((toValue, animationEndCallback) => {
-    Animated.timing(animatedValue.current, {
-      toValue,
-      duration: 300,
-      easing: Easing.bezier(0.2, 0, 0.35, 1),
-      useNativeDriver: true
-    }).start(animationEndCallback);
-  }, []);
-  const isSwiping = useCallback(() => {
-    return !_isUndefined(mutableSwipeDirections.current.x) || !_isUndefined(mutableSwipeDirections.current.y);
-  }, []);
-  const resetSwipe = useCallback(() => {
-    dragsCounter.current = 0;
-    mutableSwipeDirections.current = {};
-  }, []);
-  const onDrag = useCallback(() => {
-    if (isSwiping()) {
-      if (dragsCounter.current < MAXIMUM_DRAGS_AFTER_SWIPE) {
-        dragsCounter.current += 1;
-      } else {
-        resetSwipe();
-      }
-    }
-  }, [isSwiping, resetSwipe]);
-  const hide = useCallback(() => {
-    // TODO: test we're not animating?
-    animateTo(0, () => {
-      visible.current = false;
-      onDismiss?.();
-    });
-  }, [animateTo, onDismiss]);
-  useEffect(() => {
-    if (isPanning && (dragDeltas.x || dragDeltas.y) && (dragDeltas.x !== prevDragDeltas.current?.x || dragDeltas.y !== prevDragDeltas.current?.y)) {
-      onDrag();
-      prevDragDeltas.current = dragDeltas;
-    }
-  }, [isPanning, dragDeltas, onDrag, hide]);
-  useEffect(() => {
-    if (isPanning && (swipeDirections.x || swipeDirections.y) && (swipeDirections.x !== prevSwipeDirections.current?.x || swipeDirections.y !== prevSwipeDirections.current?.y)) {
-      mutableSwipeDirections.current = swipeDirections;
-    }
-  }, [isPanning, swipeDirections, hide]);
-  useEffect(() => {
-    if (visible.current && !propsVisible) {
-      hide();
-    }
-  }, [propsVisible, hide]);
-  const onLayout = useCallback(event => {
-    // DO NOT move the width\height into the measureInWindow - it causes errors with orientation change
-    const layout = event.nativeEvent.layout;
-    width.current = layout.width;
-    height.current = layout.height;
-    thresholdX.current = width.current / 2;
-    thresholdY.current = height.current / 2;
-    if (containerRef.current) {
-      // @ts-ignore TODO: can we fix this on ViewProps \ View?
-      containerRef.current.measureInWindow((x, y) => {
-        hiddenLocation.current = getHiddenLocation(x, y);
-        animateTo(1);
-      });
-    }
-  }, [getHiddenLocation, animateTo]);
-  const getAnimationStyle = useCallback(() => {
-    return {
-      transform: [{
-        translateX: animatedValue.current.interpolate({
-          inputRange: [0, 1],
-          outputRange: [hiddenLocation.current.left, 0]
-        })
-      }, {
-        translateY: animatedValue.current.interpolate({
-          inputRange: [0, 1],
-          outputRange: [hiddenLocation.current.top, 0]
-        })
-      }]
-    };
-  }, []);
-  const resetToShown = useCallback((left, top, direction) => {
-    const toValue =
-    //@ts-expect-error
-    [PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT].includes(direction) ? 1 + left / hiddenLocation.current.left : 1 + top / hiddenLocation.current.top;
-    animateTo(toValue);
-  }, [animateTo]);
-  const onPanLocationChanged = useCallback(({
-    left = 0,
-    top = 0
-  }) => {
-    const endValue = {
-      x: Math.round(left),
-      y: Math.round(top)
-    };
-    if (isSwiping()) {
-      hide();
-    } else {
-      resetSwipe();
-      if (direction === PanningProvider.Directions.LEFT && endValue.x <= -thresholdX.current || direction === PanningProvider.Directions.RIGHT && endValue.x >= thresholdX.current || direction === PanningProvider.Directions.UP && endValue.y <= -thresholdY.current || direction === PanningProvider.Directions.DOWN && endValue.y >= thresholdY.current) {
-        hide();
-      } else {
-        resetToShown(left, top, direction);
-      }
-    }
-  }, [isSwiping, hide, resetSwipe, direction, resetToShown]);
-  return (
-    // @ts-ignore
-    <View ref={containerRef} style={containerStyle} onLayout={onLayout}>
-      <PanResponderView
-      // !visible.current && styles.hidden is done to fix a bug is iOS
-      style={[style, getAnimationStyle(), !visible.current && styles.hidden]} isAnimated onPanLocationChanged={onPanLocationChanged}>
-        {children}
-      </PanResponderView>
-    </View>
-  );
-};
-DialogDismissibleView.displayName = 'IGNORE';
-export default DialogDismissibleView;
-const styles = StyleSheet.create({
-  hidden: {
-    opacity: 0
-  }
-});

package/src/components/dialog/OverlayFadingBackground.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-interface Props {
-    testID?: string;
-    dialogVisibility?: boolean;
-    modalVisibility?: boolean;
-    overlayBackgroundColor?: string;
-    onFadeDone?: () => void;
-    fadeOut?: boolean;
-}
-declare const OverlayFadingBackground: {
-    ({ testID, dialogVisibility, modalVisibility, overlayBackgroundColor, onFadeDone: propsOnFadeDone, fadeOut }: Props): React.JSX.Element;
-    displayName: string;
-};
-export default OverlayFadingBackground;

package/src/components/dialog/OverlayFadingBackground.js

@@ -1,45 +0,0 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react';
-import View from "../view";
-import { Animated } from 'react-native';
-const OverlayFadingBackground = ({
-  testID,
-  dialogVisibility,
-  modalVisibility,
-  overlayBackgroundColor,
-  onFadeDone: propsOnFadeDone,
-  fadeOut
-}) => {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-  const isAnimating = useRef(false);
-  const onFadeDone = useCallback(() => {
-    isAnimating.current = false;
-    propsOnFadeDone?.();
-  }, [propsOnFadeDone]);
-  const animateFading = useCallback(toValue => {
-    isAnimating.current = true;
-    Animated.timing(fadeAnimation, {
-      toValue,
-      duration: 400,
-      useNativeDriver: true
-    }).start(onFadeDone);
-  }, [fadeAnimation, onFadeDone]);
-  useEffect(() => {
-    if (!isAnimating.current && (!dialogVisibility || fadeOut)) {
-      animateFading(0);
-    }
-  }, [dialogVisibility, animateFading, fadeOut]);
-  useEffect(() => {
-    if (modalVisibility) {
-      animateFading(1);
-    }
-  }, [modalVisibility, animateFading]);
-  const style = useMemo(() => {
-    return {
-      opacity: fadeAnimation,
-      backgroundColor: overlayBackgroundColor
-    };
-  }, [overlayBackgroundColor, fadeAnimation]);
-  return <View testID={testID} absF animated style={style} pointerEvents="none" />;
-};
-OverlayFadingBackground.displayName = 'IGNORE';
-export default OverlayFadingBackground;

package/src/components/panningViews/asPanViewConsumer.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function asPanViewConsumer<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS>;
-export default asPanViewConsumer;

package/src/components/panningViews/asPanViewConsumer.js

@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-import PanningContext from "./panningContext";
-function asPanViewConsumer(WrappedComponent) {
-  class PanViewConsumer extends Component {
-    saveRef = r => {
-      this.contentRef = r;
-    };
-    render() {
-      return <PanningContext.Consumer>
-          {context => <WrappedComponent ref={this.saveRef} context={context} {...this.props} />}
-        </PanningContext.Consumer>;
-    }
-  }
-  return PanViewConsumer;
-}
-export default asPanViewConsumer;

package/src/components/panningViews/panDismissibleView.d.ts

@@ -1,51 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { PanningDirections, PanAmountsProps } from './panningProvider';
-export interface DismissibleAnimationProps {
-    /**
-     * The return animation speed (default is 20)
-     */
-    speed?: number;
-    /**
-     * The return animation bounciness (default is 6)
-     */
-    bounciness?: number;
-    /**
-     * The dismiss animation duration (default is 280)
-     */
-    duration?: number;
-}
-export interface PanDismissibleViewProps {
-    /**
-     * Additional styling
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * The directions of the allowed pan (default allows all directions)
-     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
-     */
-    directions?: PanningDirections[];
-    /**
-     * onDismiss callback
-     */
-    onDismiss?: () => void;
-    /**
-     * Some animation options to choose from, defaults are set for:
-     * speed - the animation speed (default is 20)
-     * bounciness - the animation bounciness (default is 6)
-     * duration - the dismiss animation duration (default is 280)
-     */
-    animationOptions?: DismissibleAnimationProps;
-    /**
-     * Override the default threshold (height/2 and width/2) with different values.
-     */
-    threshold?: PanAmountsProps;
-    /**
-     * Allow diagonal dismiss, this is false by default,
-     * since it looks better and most cases.
-     */
-    allowDiagonalDismiss?: boolean;
-    children?: React.ReactNode;
-}
-declare const _default: React.ComponentClass<PanDismissibleViewProps, any>;
-export default _default;