maisonsport-common-ui/dist/commonjs/molecules/MessageBubble/index.js

Suite of styled-components to be consumed by the React-Native App and by the Web (via React-Native for Web)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.messageTimeSentTestID = exports.messageBubbleContentTestID = exports.messageBubbleTestID = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _native = require("styled-components/native");

var _theme = _interopRequireDefault(require("../../theme"));

var _functions = require("../../util/functions");

var _Box = _interopRequireDefault(require("../../atoms/Box"));

var _Touchable = _interopRequireDefault(require("../../atoms/Touchable"));

var _Text = _interopRequireDefault(require("../../atoms/Text"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const messageBubbleTestID = 'message-bubble';
exports.messageBubbleTestID = messageBubbleTestID;
const messageBubbleContentTestID = 'message-content';
exports.messageBubbleContentTestID = messageBubbleContentTestID;
const messageTimeSentTestID = 'message-time-sent';
exports.messageTimeSentTestID = messageTimeSentTestID;
const STATE_TO_STYLE_MAP = {
  PRIMARY: {
    backgroundColor: _theme.default.colors.primary,
    textColor: _theme.default.colors.white
  },
  SECONDARY: {
    backgroundColor: _theme.default.colors.white,
    textColor: _theme.default.colors.black
  },
  TERTIARY: {
    backgroundColor: _theme.default.colors.darkGrey,
    textColor: _theme.default.colors.white
  },
  ATTENTION: {
    backgroundColor: _theme.default.colors.red,
    textColor: _theme.default.colors.white
  }
};

function MessageBubble({
  left,
  right,
  timeSent,
  onPress,
  children,
  showTimeSentByDefault,
  state
}) {
  const [showTimeSent, setShowTimeSent] = (0, _react.useState)(showTimeSentByDefault);
  let color = 'convoBlue';
  let maxWidth = 1;
  let width = 1;
  let alignSelf = 'flex-start';
  let textAlign = 'center';
  let textColor = 'black';
  let fontWeight = 4;

  if (left) {
    color = 'convoGrey';
    maxWidth = '75%';
    width = 'auto';
    textAlign = 'left';
    fontWeight = 3;
  }

  if (right) {
    color = 'primary';
    maxWidth = '75%';
    width = 'auto';
    alignSelf = 'flex-end';
    textAlign = 'left';
    textColor = 'white';
    fontWeight = 3;
  }

  if (state) {
    color = STATE_TO_STYLE_MAP[state].backgroundColor;
    textColor = STATE_TO_STYLE_MAP[state].textColor;
  }

  return /*#__PURE__*/_react.default.createElement(_native.ThemeProvider, {
    theme: _theme.default
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    noWrapTheme: true,
    padding: 2,
    width: 1
  }, /*#__PURE__*/_react.default.createElement(_Touchable.default, {
    testID: messageBubbleTestID,
    noWrapTheme: true,
    width: width,
    maxWidth: maxWidth,
    padding: 3,
    backgroundColor: color,
    borderRadius: 10,
    alignSelf: alignSelf,
    onPress: () => {
      if (left || right) {
        setShowTimeSent(!showTimeSent);
      }

      if (onPress) {
        onPress();
      }
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    testID: messageBubbleContentTestID,
    touchable: true,
    noWrapTheme: true,
    color: textColor,
    fontSize: (0, _functions.isSingleEmoji)(children) ? 5 : 1,
    textAlign: textAlign,
    fontWeight: fontWeight
  }, children)), showTimeSent && /*#__PURE__*/_react.default.createElement(_Text.default, {
    testID: messageTimeSentTestID,
    noWrapTheme: true,
    fontSize: "10px",
    fontWeight: 3,
    alignSelf: alignSelf,
    marginTop: 1,
    marginX: 2
  }, timeSent)));
}

MessageBubble.defaultProps = {
  left: undefined,
  right: undefined,
  timeSent: '',
  showTimeSentByDefault: false,
  onPress: () => {},
  state: undefined
};
MessageBubble.propTypes = {
  left: _propTypes.default.bool,
  right: _propTypes.default.bool,
  timeSent: _propTypes.default.string,
  showTimeSentByDefault: _propTypes.default.bool,
  onPress: _propTypes.default.func,
  state: _propTypes.default.string
};
var _default = MessageBubble;
exports.default = _default;
//# sourceMappingURL=index.js.map