react-native-unit-components/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.utils.ts

Unit React Native components

import type { UNMultipleCardsComponentProps } from './UNMultipleCardsComponent';
import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
import WebView from 'react-native-webview';
import { UNCard } from '../../types/shared';

export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) => {
  const paginationType = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
  const cardsPerPage = props.cardsPerPage ? `cards-per-page="${props.cardsPerPage}"` : '';
  const queryFilter = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
  return `
  ${paginationType}
  ${cardsPerPage}
  disable-card-click="${props.disableCardClick || false}"
  is-row-item-clickable="${props.isRowItemClickable || false}"
  show-see-all-cards-link="${props.showSeeAllCardsLink || false}"
  ${queryFilter}
  hide-title="${props.hideTitle || false}"
  hide-back-to-top="${props.hideBackToTop || false}"
  style="height: 100%"
  `;
};

const MULTIPLE_CARDS_LISTENERS = {
  cardClicked: `
    window.addEventListener("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", (e) => {
      const response = e.detail
      response.then((data) => {
        postMessageToSDK({ type: "${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", details: data.data })
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
};

export const getMultipleCardsScript = () => {
  return `
    ${MULTIPLE_CARDS_LISTENERS.cardClicked}
  `;
};

export const injectMultipleCardsFiltersChanged = (currentWeb: WebView | null, query: string) => {
  currentWeb?.injectJavaScript(`dispatchMultipleCardsFilterChangedEvent('${query}')`);
};

export const injectCardCreated = (currentWeb: WebView | null, card: UNCard) => {
  currentWeb?.injectJavaScript(`dispatchCardCreatedEvent(${JSON.stringify(card)})`);
};

export const injectCardStatusChangedEvent = (currentWeb: WebView | null, card: UNCard | null) => {
  currentWeb?.injectJavaScript(`dispatchCardStatusChanged('${JSON.stringify({ data: card })}')`);
};