react-native-unit-components/lib/module/components/UNMultipleCardsComponent/UNMultipleCardsComponent.js

Unit React Native components

import React, { useRef, useState } from 'react';
import { Dimensions } from 'react-native';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { WebComponent } from '../../webComponent/WebComponent';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { withReduxStore } from '../../helpers/store/helpers';
import { getMultipleCardsParams, getMultipleCardsScript, injectCardCreated, injectCardStatusChangedEvent, injectMultipleCardsFiltersChanged } from './UNMultipleCardsComponent.utils';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
import { useListenerToEvent } from '../../hooks/useListenerToEvent';
import { CardMessage } from '../../messages/webMessages/cardMessage';
import { BottomSheetRenderingType } from '../../types/internal/bottomSheet.types';
import { useDispatch } from 'react-redux';
import { setEvent } from '../../slices/SharedEventsSlice';
import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
const UNMultipleCardsComponent = props => {
  const dispatch = useDispatch();
  const webRef = useRef(null);
  const [defaultHeight, setDefaultHeight] = useState();
  const dispatchCardStatusChanged = card => {
    injectCardStatusChangedEvent(webRef.current, card);
  };
  const dispatchMultipleCardsFiltersChanged = query => {
    injectMultipleCardsFiltersChanged(webRef.current, query);
  };
  const dispatchCardCreated = card => {
    injectCardCreated(webRef.current, card);
  };
  useListenerToEvent({
    busEventKey: CardMessage.CARD_STATUS_CHANGED,
    action: dispatchCardStatusChanged
  });
  useListenerToEvent({
    busEventKey: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
    action: dispatchMultipleCardsFiltersChanged
  });
  useListenerToEvent({
    busEventKey: CardMessage.CARD_CREATED,
    action: dispatchCardCreated
  });
  const cardClicked = card => {
    if (props.onCardClicked) {
      props.onCardClicked(card);
    }
  };
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.cards in response) {
      props.onLoad(response[RESPONSE_KEYS.cards]);
      return;
    }
    console.error('On Load Error: unexpected response type');
    return;
  };
  const handleWebViewMessage = message => {
    if (!message || !message.details) return;
    switch (message.type) {
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
      case PageMessage.PAGE_HEIGHT:
        {
          const currentHeight = message.details.height;
          currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
          break;
        }
      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED:
        {
          cardClicked(message.details);
          break;
        }
      case UnitComponentsMessage.UNIT_REQUEST_RENDERING:
        {
          const slotData = {
            componentName: WebComponentType.multipleCards,
            componentResourceId: undefined,
            requestRenderingEvent: message.details
          };
          const data = {
            type: BottomSheetRenderingType.Slot,
            data: slotData
          };
          dispatch(setEvent({
            key: BottomSheetNativeMessage.REQUEST_RENDERING,
            data
          }));
          break;
        }
    }
  };
  const style = defaultHeight ? {
    height: defaultHeight
  } : {
    flex: 1
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: style,
    onLoadError: handleUnitOnLoad,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    ref: webRef,
    type: WebComponentType.multipleCards,
    presentationMode: PresentationMode.Inherit,
    params: getMultipleCardsParams(props),
    script: getMultipleCardsScript(),
    onMessage: message => handleWebViewMessage(message),
    nestedScrollEnabled: true,
    theme: props.theme,
    language: props.language
  }));
};
export default withReduxStore(UNMultipleCardsComponent);
//# sourceMappingURL=UNMultipleCardsComponent.js.map