@livelike/react-native/lib/module/components/LLWidgets/LLWidgets.js

LiveLike React Native package

import React, { useCallback, useMemo } from 'react';
import { useLoadTimelineWidgetEffect, useStyles, useTimelineWidgets, useTimelineWidgetActions } from '../../hooks';
import { StyleSheet, ActivityIndicator, View, ScrollView } from 'react-native';
import { WidgetMode } from '../../types';
import { LLWidget } from './LLWidget';
import { LLWidgetSeparator } from './LLWidgetSeparator';
import { WidgetKind } from '@livelike/javascript';
import { LLWidgetsLoadMoreButton } from './LLWidgetsLoadMoreButton';
import { LLText } from '../LLText';
const UNSUPPORTED_TIMELINE_WIDGET_KIND = [WidgetKind.VIDEO_ALERT, WidgetKind.SOCIAL_EMBED];
export function LLWidgets(_ref) {
  let {
    programId,
    mode,
    onLoadMore: onLoadMoreProp,
    WidgetComponent = LLWidget,
    LoadingComponent,
    ErrorComponent,
    LoadMoreComponent = LLWidgetsLoadMoreButton,
    WidgetSeparatorComponent = LLWidgetSeparator,
    WidgetSeparatorComponentStyles,
    LoadMoreComponentStyles,
    styles: stylesProp
  } = _ref;
  const styles = useStyles({
    componentStylesFn: getWidgetsStyles,
    stylesProp
  });
  const {
    isLoading,
    error,
    onLoadMore
  } = useLoadTimelineWidgetEffect({
    programId,
    mode
  });
  const widgets = useTimelineWidgets({
    programId
  });
  const {
    onWidgetInteractiveTimeout
  } = useTimelineWidgetActions({
    programId
  });
  const widgetsWithSeparator = useMemo(() => {
    return widgets === null || widgets === void 0 ? void 0 : widgets.reduce((_widgets, widget, index) => {
      if (index !== 0) {
        _widgets.push({
          widgetId: 'NA',
          widgetKind: 'NA',
          isSeparator: true
        });
      }
      _widgets.push(widget);
      return _widgets;
    }, []);
  }, [widgets]);
  const onLoadMoreHandler = useCallback(() => {
    return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore().then(() => {
      onLoadMoreProp === null || onLoadMoreProp === void 0 || onLoadMoreProp();
    });
  }, [onLoadMore, onLoadMoreProp]);
  if (isLoading) {
    return LoadingComponent ? /*#__PURE__*/React.createElement(LoadingComponent, null) : /*#__PURE__*/React.createElement(ActivityIndicator, {
      size: 'small',
      color: "blue"
    });
  }
  if (error) {
    return ErrorComponent ? /*#__PURE__*/React.createElement(ErrorComponent, null) : /*#__PURE__*/React.createElement(View, {
      style: styles.errorContainer
    }, /*#__PURE__*/React.createElement(LLText, {
      style: styles.errorText
    }, 'Unable to load widgets'));
  }
  const isPopupMode = mode === WidgetMode.POPUP;
  if (isPopupMode) {
    if (!(widgets !== null && widgets !== void 0 && widgets.length)) {
      return undefined;
    }
    // when in popup mode only show last older widget from widgets array,
    // when widget interactive timeouts or widget is dismissed, last older widget
    // is removed from list and then the last array item would point to second last older widget
    // This way we show one widget at a time in pop up mode.
    const {
      widgetId,
      widgetKind
    } = widgets[widgets.length - 1];
    return /*#__PURE__*/React.createElement(WidgetComponent, {
      key: widgetId,
      programId: programId,
      widgetId: widgetId,
      widgetKind: widgetKind,
      onDismiss: () => onWidgetInteractiveTimeout(widgetId),
      onInteractiveTimeout: () => onWidgetInteractiveTimeout(widgetId)
    });
  }
  return /*#__PURE__*/React.createElement(ScrollView, {
    style: styles.container
  }, !!(widgets !== null && widgets !== void 0 && widgets.length) && widgetsWithSeparator.map((_ref2, index) => {
    let {
      widgetId,
      widgetKind,
      isSeparator
    } = _ref2;
    if (isSeparator) {
      return !UNSUPPORTED_TIMELINE_WIDGET_KIND.includes(widgetKind) && /*#__PURE__*/React.createElement(WidgetSeparatorComponent, {
        key: 'separator' + index,
        styles: WidgetSeparatorComponentStyles
      });
    }
    return /*#__PURE__*/React.createElement(WidgetComponent, {
      key: widgetId,
      programId: programId,
      widgetId: widgetId,
      widgetKind: widgetKind,
      interactiveTimeout: null
    });
  }), onLoadMore && /*#__PURE__*/React.createElement(LoadMoreComponent, {
    onPress: onLoadMoreHandler,
    styles: LoadMoreComponentStyles
  }));
}
const getWidgetsStyles = _ref3 => {
  let {
    theme
  } = _ref3;
  return StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'column',
      flex: 1,
      gap: 5
    },
    errorContainer: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    errorText: {
      color: theme.error
    }
  });
};
//# sourceMappingURL=LLWidgets.js.map