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

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LLWidgets = LLWidgets;
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("../../hooks");
var _reactNative = require("react-native");
var _types = require("../../types");
var _LLWidget = require("./LLWidget");
var _LLWidgetSeparator = require("./LLWidgetSeparator");
var _javascript = require("@livelike/javascript");
var _LLWidgetsLoadMoreButton = require("./LLWidgetsLoadMoreButton");
var _LLText = require("../LLText");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const UNSUPPORTED_TIMELINE_WIDGET_KIND = [_javascript.WidgetKind.VIDEO_ALERT, _javascript.WidgetKind.SOCIAL_EMBED];
function LLWidgets(_ref) {
  let {
    programId,
    mode,
    onLoadMore: onLoadMoreProp,
    WidgetComponent = _LLWidget.LLWidget,
    LoadingComponent,
    ErrorComponent,
    LoadMoreComponent = _LLWidgetsLoadMoreButton.LLWidgetsLoadMoreButton,
    WidgetSeparatorComponent = _LLWidgetSeparator.LLWidgetSeparator,
    WidgetSeparatorComponentStyles,
    LoadMoreComponentStyles,
    styles: stylesProp
  } = _ref;
  const styles = (0, _hooks.useStyles)({
    componentStylesFn: getWidgetsStyles,
    stylesProp
  });
  const {
    isLoading,
    error,
    onLoadMore
  } = (0, _hooks.useLoadTimelineWidgetEffect)({
    programId,
    mode
  });
  const widgets = (0, _hooks.useTimelineWidgets)({
    programId
  });
  const {
    onWidgetInteractiveTimeout
  } = (0, _hooks.useTimelineWidgetActions)({
    programId
  });
  const widgetsWithSeparator = (0, _react.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 = (0, _react.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.default.createElement(LoadingComponent, null) : /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
      size: 'small',
      color: "blue"
    });
  }
  if (error) {
    return ErrorComponent ? /*#__PURE__*/_react.default.createElement(ErrorComponent, null) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.errorContainer
    }, /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
      style: styles.errorText
    }, 'Unable to load widgets'));
  }
  const isPopupMode = mode === _types.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.default.createElement(WidgetComponent, {
      key: widgetId,
      programId: programId,
      widgetId: widgetId,
      widgetKind: widgetKind,
      onDismiss: () => onWidgetInteractiveTimeout(widgetId),
      onInteractiveTimeout: () => onWidgetInteractiveTimeout(widgetId)
    });
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(WidgetSeparatorComponent, {
        key: 'separator' + index,
        styles: WidgetSeparatorComponentStyles
      });
    }
    return /*#__PURE__*/_react.default.createElement(WidgetComponent, {
      key: widgetId,
      programId: programId,
      widgetId: widgetId,
      widgetKind: widgetKind,
      interactiveTimeout: null
    });
  }), onLoadMore && /*#__PURE__*/_react.default.createElement(LoadMoreComponent, {
    onPress: onLoadMoreHandler,
    styles: LoadMoreComponentStyles
  }));
}
const getWidgetsStyles = _ref3 => {
  let {
    theme
  } = _ref3;
  return _reactNative.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