@livelike/react-native/lib/module/components/LLTextAskWidget/LLTextAskWidgetBody.js

LiveLike React Native package

import React, { useCallback, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useDebounce, useIsWidgetDisabled, useStyles, useWidget, useWidgetActions, useWidgetInteractedAnalytics, useWidgetInteractions } from '../../hooks';
import { LLTextAskWidgetInput } from './LLTextAskWidgetInput';
import { LLText } from '../LLText';
export function LLTextAskWidgetBody(_ref) {
  let {
    widgetId,
    InputComponent = LLTextAskWidgetInput,
    InputComponentStyles,
    styles: stylesProp
  } = _ref;
  const styles = useStyles({
    componentStylesFn: getTextAskWidgetBodyStyles,
    stylesProp
  });
  const widget = useWidget({
    widgetId
  });
  const [inputText, setInputText] = useState(undefined);
  const widgetInteractions = useWidgetInteractions({
    widgetId
  });
  const isWidgetDisabled = useIsWidgetDisabled({
    widgetId
  });
  const {
    updateTextAskInputTextAction
  } = useWidgetActions({
    widgetId
  });
  const {
    trackWidgetInteractedAction
  } = useWidgetInteractedAnalytics({
    widgetId
  });
  const debouncedTrackInteraction = useDebounce({
    callback: trackWidgetInteractedAction,
    timer: 1000
  });
  const onTextAskInputHandler = useCallback(updatedText => {
    setInputText(updatedText);
    updateTextAskInputTextAction({
      widgetId,
      inputText: updatedText
    });
    debouncedTrackInteraction({
      interactionItem: {
        text: updatedText
      }
    });
  }, [updateTextAskInputTextAction, widgetId, debouncedTrackInteraction]);
  if (!widget) {
    return undefined;
  }
  const {
    prompt
  } = widget;
  const widgetInteraction = widgetInteractions === null || widgetInteractions === void 0 ? void 0 : widgetInteractions[0];
  const inputDisabled = isWidgetDisabled || !!widgetInteraction;
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(LLText, {
    style: styles.askText
  }, prompt), /*#__PURE__*/React.createElement(InputComponent, {
    value: (widgetInteraction === null || widgetInteraction === void 0 ? void 0 : widgetInteraction.text) ?? inputText,
    disabled: inputDisabled,
    onChange: onTextAskInputHandler,
    styles: InputComponentStyles
  }));
}
const getTextAskWidgetBodyStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'column',
      marginBottom: 16,
      paddingHorizontal: 16
    },
    askText: {
      color: theme.text,
      fontSize: 12,
      marginBottom: 16
    }
  });
};
//# sourceMappingURL=LLTextAskWidgetBody.js.map