stream-chat-react-native-core/lib/module/components/Poll/CreatePollContent.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CreatePollContent = exports.CreatePoll = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _streamChat = require("stream-chat");
var _components = require("./components");
var _CreatePollHeader = require("./components/CreatePollHeader");
var _MultipleAnswersField = require("./components/MultipleAnswersField");
var _NameField = require("./components/NameField");
var _contexts = require("../../contexts");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _useMessageComposer = require("../../contexts/messageInputContext/hooks/useMessageComposer");
var _useStateStore2 = require("../../hooks/useStateStore");
var _theme = require("../../theme");
var _rtlMirrorSwitchStyle = require("../../utils/rtlMirrorSwitchStyle");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Poll/CreatePollContent.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var pollComposerStateSelector = state => ({
  options: state.data.options
});
var CreatePollContent = () => {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isAnonymousPoll = _useState2[0],
    setIsAnonymousPoll = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    allowUserSuggestedOptions = _useState4[0],
    setAllowUserSuggestedOptions = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    allowAnswers = _useState6[0],
    setAllowAnswers = _useState6[1];
  var _useTranslationContex = (0, _contexts.useTranslationContext)(),
    t = _useTranslationContex.t;
  var messageComposer = (0, _useMessageComposer.useMessageComposer)();
  var pollComposer = messageComposer.pollComposer;
  var _useStateStore = (0, _useStateStore2.useStateStore)(pollComposer.state, pollComposerStateSelector),
    options = _useStateStore.options;
  var _useCreatePollContent = (0, _contexts.useCreatePollContentContext)(),
    _useCreatePollContent2 = _useCreatePollContent.createPollOptionGap,
    createPollOptionGap = _useCreatePollContent2 === void 0 ? 8 : _useCreatePollContent2,
    closePollCreationDialog = _useCreatePollContent.closePollCreationDialog,
    createAndSendPoll = _useCreatePollContent.createAndSendPoll;
  var normalizedCreatePollOptionGap = Number.isFinite(createPollOptionGap) && createPollOptionGap > 0 ? createPollOptionGap : 0;
  var optionIdsKey = (0, _react.useMemo)(() => options.map(option => option.id).join('|'), [options]);
  var optionsRef = (0, _react.useRef)(options);
  optionsRef.current = options;
  var currentOptionPositions = (0, _reactNativeReanimated.useSharedValue)({
    inverseIndexCache: {},
    positionCache: {},
    totalHeight: 0
  });
  var _useTheme = (0, _contexts.useTheme)(),
    _useTheme$theme$poll$ = _useTheme.theme.poll.createContent,
    addComment = _useTheme$theme$poll$.addComment,
    anonymousPoll = _useTheme$theme$poll$.anonymousPoll,
    optionCardWrapper = _useTheme$theme$poll$.optionCardWrapper,
    scrollView = _useTheme$theme$poll$.scrollView,
    suggestOption = _useTheme$theme$poll$.suggestOption;
  var styles = useStyles();
  (0, _react.useEffect)(() => {
    var latestOptions = optionsRef.current;
    var currentPositions = currentOptionPositions.value;
    var isCacheAlignedWithOptions = latestOptions.length === Object.keys(currentPositions.inverseIndexCache).length && latestOptions.every((option, index) => currentPositions.inverseIndexCache[index] === option.id && currentPositions.positionCache[option.id] !== undefined);
    if (isCacheAlignedWithOptions) {
      return;
    }
    var previousPositionCache = currentOptionPositions.value.positionCache;
    var newCurrentOptionPositions = {
      inverseIndexCache: {},
      positionCache: {},
      totalHeight: 0
    };
    var runningTop = 0;
    latestOptions.forEach((option, index) => {
      var preservedHeight = previousPositionCache[option.id]?.updatedHeight ?? 0;
      newCurrentOptionPositions.inverseIndexCache[index] = option.id;
      newCurrentOptionPositions.positionCache[option.id] = {
        updatedHeight: preservedHeight,
        updatedIndex: index,
        updatedTop: runningTop
      };
      var gap = index === latestOptions.length - 1 ? 0 : normalizedCreatePollOptionGap;
      runningTop += preservedHeight + gap;
      newCurrentOptionPositions.totalHeight = runningTop;
    });
    currentOptionPositions.value = newCurrentOptionPositions;
  }, [currentOptionPositions, normalizedCreatePollOptionGap, optionIdsKey]);
  var onBackPressHandler = (0, _react.useCallback)(() => {
    closePollCreationDialog?.();
  }, [closePollCreationDialog]);
  var onCreatePollPressHandler = (0, _react.useCallback)((0, _asyncToGenerator2.default)(function* () {
    yield createAndSendPoll();
  }), [createAndSendPoll]);
  var onAnonymousPollChangeHandler = (0, _react.useCallback)(function () {
    var _ref2 = (0, _asyncToGenerator2.default)(function* (value) {
      setIsAnonymousPoll(value);
      yield pollComposer.updateFields({
        voting_visibility: value ? _streamChat.VotingVisibility.anonymous : _streamChat.VotingVisibility.public
      });
    });
    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), [pollComposer]);
  var onAllowUserSuggestedOptionsChangeHandler = (0, _react.useCallback)(function () {
    var _ref3 = (0, _asyncToGenerator2.default)(function* (value) {
      setAllowUserSuggestedOptions(value);
      yield pollComposer.updateFields({
        allow_user_suggested_options: value
      });
    });
    return function (_x2) {
      return _ref3.apply(this, arguments);
    };
  }(), [pollComposer]);
  var onAllowAnswersChangeHandler = (0, _react.useCallback)(function () {
    var _ref4 = (0, _asyncToGenerator2.default)(function* (value) {
      setAllowAnswers(value);
      yield pollComposer.updateFields({
        allow_answers: value
      });
    });
    return function (_x3) {
      return _ref4.apply(this, arguments);
    };
  }(), [pollComposer]);
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_CreatePollHeader.CreatePollHeader, {
      onBackPressHandler: onBackPressHandler,
      onCreatePollPressHandler: onCreatePollPressHandler
    }), (0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.ScrollView, {
      contentContainerStyle: styles.contentContainerStyle,
      style: [styles.scrollView, scrollView],
      children: [(0, _jsxRuntime.jsx)(_NameField.NameField, {}), (0, _jsxRuntime.jsx)(_components.CreatePollOptions, {
        currentOptionPositions: currentOptionPositions
      }), (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
        layout: _reactNativeReanimated.LinearTransition.duration(200),
        style: [styles.optionCardWrapper, optionCardWrapper],
        children: [(0, _jsxRuntime.jsx)(_MultipleAnswersField.MultipleAnswersField, {}), (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
          layout: _reactNativeReanimated.LinearTransition.duration(200),
          style: [styles.optionCardWrapper, optionCardWrapper],
          children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: [styles.optionCard, anonymousPoll.wrapper],
            children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
              style: [styles.optionCardContent, anonymousPoll.optionCardContent],
              children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.title, anonymousPoll.title],
                children: t('Anonymous voting')
              }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.description, anonymousPoll.description],
                children: t('Hide who voted')
              })]
            }), (0, _jsxRuntime.jsx)(_reactNative.Switch, {
              onValueChange: onAnonymousPollChangeHandler,
              value: isAnonymousPoll,
              style: [styles.optionCardSwitch, anonymousPoll.optionCardSwitch]
            })]
          }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: [styles.optionCard, suggestOption.wrapper],
            children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
              style: [styles.optionCardContent, suggestOption.optionCardContent],
              children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.title, suggestOption.title],
                children: t('Suggest an option')
              }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.description, suggestOption.description],
                children: t('Let others add options')
              })]
            }), (0, _jsxRuntime.jsx)(_reactNative.Switch, {
              onValueChange: onAllowUserSuggestedOptionsChangeHandler,
              value: allowUserSuggestedOptions,
              style: [styles.optionCardSwitch, suggestOption.optionCardSwitch]
            })]
          }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: [styles.optionCard, addComment.wrapper],
            children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
              style: [styles.optionCardContent, addComment.optionCardContent],
              children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.title, addComment.title],
                children: t('Add a comment')
              }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
                style: [styles.description, addComment.description],
                children: t('Add a comment to the poll')
              })]
            }), (0, _jsxRuntime.jsx)(_reactNative.Switch, {
              onValueChange: onAllowAnswersChangeHandler,
              value: allowAnswers,
              style: [styles.optionCardSwitch, addComment.optionCardSwitch]
            })]
          })]
        })]
      })]
    })]
  });
};
exports.CreatePollContent = CreatePollContent;
var CreatePoll = ({
  closePollCreationDialog,
  createPollOptionGap = 8,
  sendMessage
}) => {
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    CreatePollContentOverride = _useComponentsContext.CreatePollContent;
  var messageComposer = (0, _useMessageComposer.useMessageComposer)();
  var _useState7 = (0, _react.useState)(() => new _streamChat.StateStore({
      isClosing: false
    })),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
    modalStateStore = _useState8[0];
  var closeFrameRef = (0, _react.useRef)(null);
  var closeCreatePollDialog = (0, _react.useCallback)(() => {
    if (closeFrameRef.current !== null || modalStateStore.getLatestValue().isClosing) {
      return;
    }
    modalStateStore.partialNext({
      isClosing: true
    });
    closeFrameRef.current = requestAnimationFrame(() => {
      closeFrameRef.current = null;
      closePollCreationDialog?.();
    });
  }, [closePollCreationDialog, modalStateStore]);
  (0, _react.useEffect)(() => {
    return () => {
      if (closeFrameRef.current !== null) {
        cancelAnimationFrame(closeFrameRef.current);
      }
      messageComposer.pollComposer.initState();
    };
  }, [messageComposer]);
  var createAndSendPoll = (0, _react.useCallback)((0, _asyncToGenerator2.default)(function* () {
    try {
      yield messageComposer.createPoll();
      yield sendMessage();
      closeCreatePollDialog();
    } catch (error) {
      console.log('Error creating a poll and sending a message:', error);
    }
  }), [closeCreatePollDialog, messageComposer, sendMessage]);
  return (0, _jsxRuntime.jsx)(_contexts.CreatePollContentProvider, {
    value: {
      closePollCreationDialog: closeCreatePollDialog,
      createAndSendPoll,
      createPollOptionGap,
      modalStateStore,
      sendMessage
    },
    children: CreatePollContentOverride ? (0, _jsxRuntime.jsx)(CreatePollContentOverride, {}) : (0, _jsxRuntime.jsx)(CreatePollContent, {})
  });
};
exports.CreatePoll = CreatePoll;
var useStyles = () => {
  var _useTheme2 = (0, _contexts.useTheme)(),
    semantics = _useTheme2.theme.semantics;
  var rtlMirrorSwitchStyle = (0, _rtlMirrorSwitchStyle.useRtlMirrorSwitchStyle)();
  return (0, _react.useMemo)(() => {
    return _reactNative.StyleSheet.create({
      scrollView: {
        flex: 1,
        backgroundColor: semantics.backgroundCoreElevation1
      },
      contentContainerStyle: {
        alignItems: 'stretch',
        padding: _theme.primitives.spacingMd,
        paddingBottom: 70,
        width: '100%'
      },
      title: {
        color: semantics.textPrimary,
        fontSize: _theme.primitives.typographyFontSizeMd,
        fontWeight: _theme.primitives.typographyFontWeightSemiBold,
        lineHeight: _theme.primitives.typographyLineHeightNormal,
        textAlign: 'left'
      },
      description: {
        color: semantics.textTertiary,
        fontSize: _theme.primitives.typographyFontSizeSm,
        fontWeight: _theme.primitives.typographyFontWeightRegular,
        lineHeight: _theme.primitives.typographyLineHeightNormal,
        textAlign: 'left'
      },
      optionCardContent: {
        gap: _theme.primitives.spacingXxs,
        flex: 1,
        alignItems: 'flex-start'
      },
      optionCard: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row',
        backgroundColor: semantics.backgroundCoreSurfaceCard,
        padding: _theme.primitives.spacingMd,
        borderRadius: _theme.primitives.radiusLg
      },
      optionCardWrapper: {
        gap: _theme.primitives.spacingMd
      },
      optionCardSwitch: {
        width: 64,
        ...rtlMirrorSwitchStyle
      }
    });
  }, [rtlMirrorSwitchStyle, semantics]);
};
//# sourceMappingURL=CreatePollContent.js.map