react-native-chatbot-ai 0.1.19 → 0.1.22

package/src/components/portal/BottomSheet.tsx

@@ -0,0 +1,307 @@
+import React, {
+  ComponentType,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { BackHandler, Keyboard, StyleSheet } from 'react-native';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import isEmpty from 'lodash/isEmpty';
+import set from 'lodash/set';
+import { ScrollView } from 'react-native-gesture-handler';
+import {
+  KBars,
+  KButton,
+  KContainer,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+  KColors,
+  KDims,
+} from '@droppii/libs';
+import { KBottomSheetPropsEnhance, WithBottomSheetProps } from '../../types';
+import { Z_INDEX_PRIORITY } from '../../constants';
+
+const UNIT = KSpacingValue['1rem'];
+const ANIMATE_CONFIGS = {
+  damping: 80,
+  overshootClamping: true,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1,
+  stiffness: 500,
+};
+
+export const useBottomSheetBackHandler = (
+  bottomSheetRef: React.RefObject<any>
+) => {
+  const backHandlerSubscriptionRef = useRef<ReturnType<
+    typeof BackHandler.addEventListener
+  > | null>(null);
+  const handleSheetPositionChange = useCallback<
+    NonNullable<React.ComponentProps<typeof BottomSheetModal>['onChange']>
+  >(
+    (index: number) => {
+      const isBottomSheetVisible = index >= 0;
+      if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+        backHandlerSubscriptionRef.current = BackHandler.addEventListener(
+          'hardwareBackPress',
+          () => {
+            bottomSheetRef.current?.close();
+            return true;
+          }
+        );
+      } else if (!isBottomSheetVisible) {
+        backHandlerSubscriptionRef.current?.remove();
+        backHandlerSubscriptionRef.current = null;
+      }
+    },
+    [bottomSheetRef, backHandlerSubscriptionRef]
+  );
+  return { handleSheetPositionChange };
+};
+
+const BottomSheet = forwardRef<WithBottomSheetProps>((_, ref) => {
+  const [data, setData] = useState<KBottomSheetPropsEnhance | undefined>(
+    undefined
+  );
+
+  const bottomSheetRef = useRef<any>(null);
+
+  const { handleSheetPositionChange } =
+    useBottomSheetBackHandler(bottomSheetRef);
+
+  const dismiss = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  const onBackdropPress = useCallback(() => {}, []);
+
+  const renderBackdrop = useCallback(
+    (p: any) => (
+      <BottomSheetBackdrop
+        {...p}
+        opacity={0.8}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        onPress={onBackdropPress}
+      />
+    ),
+    [onBackdropPress]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (payload) => {
+        setData(payload);
+        Keyboard.dismiss();
+      },
+      dismiss,
+    }),
+    [dismiss]
+  );
+
+  useEffect(() => {
+    if (data) {
+      bottomSheetRef.current?.present();
+    }
+  }, [data, dismiss]);
+
+  const onPressWrapper = useCallback(
+    (callback: any) => {
+      dismiss();
+      callback?.();
+    },
+    [dismiss]
+  );
+
+  const renderHeader = useMemo(() => {
+    if (!data?.header) {
+      return null;
+    }
+    const {
+      header: { showCloseButton, subTitle, title, alignment, customRenderer },
+    } = data;
+
+    if (customRenderer) {
+      return customRenderer(dismiss);
+    }
+
+    return (
+      // @ts-ignore
+      <KContainer.View
+        padding="1rem"
+        row
+        alignItems
+        brBW={1}
+        brBC={KColors.border.light}
+      >
+        {showCloseButton && alignment === 'center' && (
+          // @ts-ignore
+          <KContainer.View marginR={'1rem'}>
+            <KButton.Close color={KColors.transparent} />
+          </KContainer.View>
+        )}
+        {/* @ts-ignore */}
+        <KContainer.View
+          alignItems={alignment === 'left' ? 'flex-start' : 'center'}
+          flex
+          justifyContent
+        >
+          {!!title && (
+            // @ts-ignore
+            <KLabel.Text
+              typo={title.typo || 'TextLgBold'}
+              color={title.color}
+              numberOfLines={2}
+              textAlign="left"
+            >
+              {title.text}
+            </KLabel.Text>
+          )}
+          {!!subTitle && (
+            // @ts-ignore
+            <KLabel.Text
+              typo={subTitle.typo || 'TextSmNormal'}
+              color={subTitle.color || KColors.gray.light}
+              numberOfLines={2}
+              marginT="0.25rem"
+            >
+              {subTitle.text}
+            </KLabel.Text>
+          )}
+        </KContainer.View>
+        {showCloseButton && (
+          // @ts-ignore
+          <KContainer.View marginL={'1rem'}>
+            <KButton.Close onPress={dismiss} color={KColors.gray.dark} />
+          </KContainer.View>
+        )}
+      </KContainer.View>
+    );
+  }, [data, dismiss]);
+
+  const renderActions = useMemo(() => {
+    if (!data || !data.actions || isEmpty(data.actions.buttons)) {
+      return null;
+    }
+    const mActions = data.actions;
+    mActions.buttons = mActions.buttons.map((i: any) => {
+      const clone = { ...i };
+      delete clone.onPress;
+      set(clone, 'onPress', () => onPressWrapper(() => i.onPress?.()));
+      return clone;
+    });
+    return (
+      // @ts-ignore
+      <KContainer.View paddingH="1rem" brTW={1} brTC={KColors.border.light}>
+        <KBars.ActionBar {...mActions} type="horizontal-button" />
+      </KContainer.View>
+    );
+  }, [data, onPressWrapper]);
+
+  const renderBody = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+
+    const message = data?.body?.message;
+    const renderContent = data?.body?.renderContent;
+
+    return (
+      <>
+        {message ? (
+          // @ts-ignore
+          <KContainer.View padding={'1rem'} background={KColors.white}>
+            {/* @ts-ignore */}
+            <KLabel.Text typo={message.typo} color={message.color}>
+              {message.text}
+            </KLabel.Text>
+          </KContainer.View>
+        ) : (
+          (renderContent?.(dismiss) ?? null)
+        )}
+      </>
+    );
+  }, [data, dismiss]);
+
+  const onDismiss = useCallback(() => {
+    data?.onDismiss?.();
+  }, [data]);
+
+  if (!data) {
+    return null;
+  }
+
+  const { scrollable = true } = data || {};
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetRef}
+      handleComponent={null}
+      enableDynamicSizing
+      backdropComponent={renderBackdrop}
+      onDismiss={onDismiss}
+      bottomInset={KDims.bottomSafeHeight > 0 ? UNIT * 1.5 : UNIT}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
+      containerStyle={styles.sheetContainer}
+      backgroundStyle={styles.sheetBackground}
+      animationConfigs={ANIMATE_CONFIGS}
+      onChange={handleSheetPositionChange}
+    >
+      <BottomSheetView
+        style={styles.sheetView}
+
+        // onLayout={handleContentLayout}
+      >
+        {renderHeader}
+        {scrollable ? (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+            bounces={false}
+          >
+            {renderBody}
+          </ScrollView>
+        ) : (
+          renderBody
+        )}
+        {renderActions}
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+});
+
+(BottomSheet as ComponentType<any>).displayName = 'Portal.BottomSheet';
+
+export default memo(BottomSheet);
+
+const styles = StyleSheet.create({
+  sheetBackground: {
+    backgroundColor: KColors.transparent,
+  },
+  sheetContainer: {
+    borderRadius: KRadiusValue['4x'],
+    overflow: 'hidden',
+    paddingBottom: KDims.height,
+    zIndex: Z_INDEX_PRIORITY.bottomSheet,
+  },
+  sheetView: {
+    marginHorizontal: UNIT,
+    maxHeight: KDims.height * 0.9,
+    borderRadius: KRadiusValue['4x'],
+    overflow: 'hidden',
+    backgroundColor: KColors.white,
+    marginBottom: UNIT,
+  },
+});

package/src/components/portal/Popup.tsx

@@ -0,0 +1,345 @@
+import {
+  ComponentType,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  BackHandler,
+  Dimensions,
+  StatusBar,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeInUp,
+  FadeOut,
+  FadeOutDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+} from 'react-native-reanimated';
+import set from 'lodash/set';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import last from 'lodash/last';
+import {
+  KBars,
+  KButton,
+  KContainer,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+  KPopupProps,
+  KColors,
+  KDims,
+} from '@droppii/libs';
+import { Z_INDEX_PRIORITY } from '../../constants';
+import { ScrollView } from 'react-native-gesture-handler';
+import { WithPopupProps } from '../../types';
+
+const UNIT = KSpacingValue['1rem'];
+const STATUS_BAR_HEIGHT = KDims.os === 'ios' ? 0 : StatusBar.currentHeight || 0;
+const VIEWABLE_HEIGHT =
+  KDims.os === 'ios'
+    ? Dimensions.get('screen').height
+    : Dimensions.get('window').height - STATUS_BAR_HEIGHT; // ignore statusBar area & soft navigation bar height
+
+const PADDING_VERTICAL = KDims.isIphoneX ? UNIT * 3 : UNIT * 2.25;
+const PADDING_HORIZONTAL = UNIT;
+const CONTENT_MAX_HEIGHT = VIEWABLE_HEIGHT - 2 * PADDING_VERTICAL;
+
+const Popup = forwardRef<WithPopupProps>((_, ref) => {
+  const queue = useRef<KPopupProps[]>([]);
+  const [data, setData] = useState<KPopupProps | undefined>(undefined);
+
+  const scale = useSharedValue(1);
+
+  const {
+    touchOutsideToDismiss = true,
+    header,
+    actions,
+    backgroundColor = KColors.white,
+    wrapperStyle = {},
+  } = data || {};
+
+  const { showCloseButton, subTitle, title, alignment } = header || {};
+
+  const dismiss = useCallback(() => {
+    const newPayload = queue.current.shift();
+    if (newPayload) {
+      scale.value = withSequence(
+        withSpring(0.9, { mass: 0.3 }),
+        withSpring(1, { mass: 0.3 })
+      );
+    }
+    setData(newPayload);
+  }, [scale]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (payload) => {
+        if (!isEqual(last(queue.current), payload)) {
+          if (data) {
+            scale.value = withSequence(
+              withSpring(1.1, { mass: 0.3 }),
+              withSpring(1, { mass: 0.3 })
+            );
+            queue.current?.push(payload);
+          } else {
+            setData(payload);
+            Keyboard.dismiss();
+          }
+        }
+      },
+      dismiss,
+      dismissAll: () => {
+        setData(undefined);
+        queue.current = [];
+      },
+    }),
+    [dismiss, scale, data]
+  );
+
+  useEffect(() => {
+    if (data && KDims.os === 'android') {
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (touchOutsideToDismiss) {
+          dismiss?.();
+          return true;
+        }
+        return false;
+      });
+
+      return () => {
+        sub.remove();
+      };
+    }
+
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onPressWrapper = useCallback(
+    (onPress: any) => {
+      onPress?.();
+      dismiss();
+    },
+    [dismiss]
+  );
+
+  const renderHeader = useMemo(() => {
+    if (!data || isEmpty(data.header)) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={styles.header} padding="1rem">
+        {showCloseButton && alignment !== 'left' && (
+          <KContainer.View marginR={'1rem'}>
+            <KButton.Close color={KColors.transparent} />
+          </KContainer.View>
+        )}
+        <KContainer.View
+          alignItems={alignment === 'left' ? 'flex-start' : 'center'}
+          flex
+          justifyContent
+        >
+          {!!title && (
+            <KLabel.Text
+              typo={title.typo || 'TextLgBold'}
+              color={title.color}
+              numberOfLines={2}
+              textAlign="left"
+            >
+              {title.text}
+            </KLabel.Text>
+          )}
+          {!!subTitle && (
+            <KLabel.Text
+              typo={subTitle.typo || 'TextSmNormal'}
+              color={subTitle.color || KColors.gray.light}
+              numberOfLines={2}
+              marginT="0.25rem"
+            >
+              {subTitle.text}
+            </KLabel.Text>
+          )}
+        </KContainer.View>
+        {showCloseButton && (
+          <KContainer.View marginL={'1rem'}>
+            <KButton.Close onPress={dismiss} />
+          </KContainer.View>
+        )}
+      </KContainer.View>
+    );
+  }, [alignment, data, dismiss, showCloseButton, subTitle, title]);
+
+  const renderActions = useMemo(() => {
+    if (!actions?.buttons) {
+      return null;
+    }
+
+    actions.buttons = actions.buttons.map((i: any) => {
+      const clone = { ...i };
+      delete clone.onPress;
+      set(clone, 'onPress', () => onPressWrapper(() => i.onPress?.()));
+      return clone;
+    });
+    return (
+      <KContainer.View paddingH="1rem" style={styles.actions}>
+        <KBars.ActionBar {...(actions as any)} />
+      </KContainer.View>
+    );
+  }, [actions, onPressWrapper]);
+
+  const onStartShouldSetResponder = useCallback(() => true, []);
+
+  const renderBody = useMemo(() => {
+    if (!data || !data.body) {
+      return null;
+    }
+
+    const {
+      body: { message, renderContent, scrollable = true },
+    } = data;
+
+    const content = (
+      <KContainer.View onStartShouldSetResponder={onStartShouldSetResponder}>
+        {message ? (
+          <KContainer.View padding={'1rem'}>
+            <KLabel.Text typo={message.typo} color={message.color} textAlign>
+              {message.text}
+            </KLabel.Text>
+          </KContainer.View>
+        ) : (
+          (renderContent?.(dismiss) ?? null)
+        )}
+      </KContainer.View>
+    );
+
+    if (scrollable) {
+      return <ScrollView bounces={false}>{content}</ScrollView>;
+    }
+
+    return content;
+  }, [data, dismiss, onStartShouldSetResponder]);
+
+  const stopPropagation = useCallback((e: any) => {
+    e.stopPropagation();
+  }, []);
+
+  const rStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={touchOutsideToDismiss ? dismiss : undefined}
+    >
+      <Animated.View
+        style={[styles.wrapper, wrapperStyle]}
+        entering={FadeIn}
+        exiting={FadeOut}
+      >
+        <TouchableWithoutFeedback onPress={stopPropagation}>
+          <Animated.View entering={FadeInUp} exiting={FadeOutDown}>
+            <Animated.View
+              style={[
+                styles.content,
+                rStyle,
+                { backgroundColor },
+                data?.contentStyle,
+              ]}
+            >
+              {renderHeader}
+              {renderBody}
+              {renderActions}
+            </Animated.View>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+});
+
+(Popup as ComponentType<any>).displayName = 'Portal.Popup';
+
+export default memo(Popup);
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  wrapper: {
+    // @ts-ignore
+    ...StyleSheet.absoluteFill,
+    zIndex: Z_INDEX_PRIORITY.popup,
+    backgroundColor: KColors.overlayDark,
+    paddingHorizontal: PADDING_HORIZONTAL,
+    paddingVertical: PADDING_VERTICAL,
+    justifyContent: 'center',
+  },
+  avoiding: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  content: {
+    maxHeight: CONTENT_MAX_HEIGHT,
+    overflow: 'hidden',
+    borderRadius: KRadiusValue['4x'],
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: KColors.border.light,
+    overflow: 'hidden',
+  },
+  actions: {
+    borderTopWidth: 1,
+    borderColor: KColors.border.light,
+    overflow: 'hidden',
+  },
+  item: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionsVertical: {
+    flexDirection: 'column',
+  },
+  actionsHorizontal: {
+    flexDirection: 'row',
+  },
+  itemWrapperLastHorizontal: {
+    marginRight: 0,
+  },
+  verticalItem: {
+    borderBottomWidth: 1,
+    borderColor: KColors.border.light,
+  },
+  verticalLastItem: {
+    borderBottomWidth: 0,
+  },
+  horizontalItem: {
+    borderRightWidth: 1,
+    borderColor: KColors.border.light,
+  },
+  horizontalLastItem: {
+    borderRightWidth: 0,
+  },
+});

package/src/components/portal/index.tsx

@@ -1,11 +1,15 @@
 import { memo } from 'react';
 import ToastBar from './Toast';
-import { toastRef } from '../../constants';
+import BottomSheet from './BottomSheet';
+import Popup from './Popup';
+import { toastRef, bottomSheetRef, popupRef } from '../../constants';
 
 const Portal = memo(() => {
   return (
     <>
       <ToastBar ref={toastRef} />
+      <BottomSheet ref={bottomSheetRef} />
+      <Popup ref={popupRef} />
     </>
   );
 });