@sendbird/uikit-react-native-foundation/lib/commonjs/ui/TypingIndicatorBubble/index.js

A foundational UI kit for building chat-enabled React Native apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Box = _interopRequireDefault(require("../../components/Box"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _Avatar = _interopRequireDefault(require("../Avatar"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 (const 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); }
const TypingIndicatorBubble = ({
  typingUsers,
  containerStyle,
  maxAvatar
}) => {
  const {
    select,
    palette,
    colors
  } = (0, _useUIKitTheme.default)();
  if (typingUsers.length === 0) return null;
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    style: containerStyle
  }, /*#__PURE__*/_react.default.createElement(_Avatar.default.Stack, {
    size: 26,
    maxAvatar: maxAvatar,
    styles: {
      remainsTextColor: colors.onBackground02,
      remainsBackgroundColor: select({
        light: palette.background100,
        dark: palette.background400
      })
    },
    containerStyle: {
      marginEnd: 12
    }
  }, typingUsers.map((user, index) => /*#__PURE__*/_react.default.createElement(_Avatar.default, {
    key: index,
    uri: user.profileUrl
  }))), /*#__PURE__*/_react.default.createElement(TypingDots, {
    dotColor: select({
      light: palette.background100,
      dark: palette.background400
    }),
    backgroundColor: colors.onBackground02
  }));
};
const TypingDots = ({
  dotColor,
  backgroundColor
}) => {
  const animation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const dots = matrix.map(([timeline, scale, opacity]) => [animation.interpolate({
    inputRange: timeline,
    outputRange: scale,
    extrapolate: 'clamp'
  }), animation.interpolate({
    inputRange: timeline,
    outputRange: opacity,
    extrapolate: 'clamp'
  })]);
  (0, _react.useEffect)(() => {
    const animated = _reactNative.Animated.loop(_reactNative.Animated.timing(animation, {
      toValue: 1.4,
      duration: 1400,
      easing: _reactNative.Easing.linear,
      useNativeDriver: true
    }));
    animated.start();
    return () => animated.reset();
  }, []);
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 16,
    paddingHorizontal: 12,
    height: 34,
    backgroundColor: dotColor
  }, dots.map(([scale, opacity], index) => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      key: index,
      style: [styles.dot, {
        marginEnd: index === dots.length - 1 ? 0 : 6,
        opacity: opacity,
        transform: [{
          scale: scale
        }],
        backgroundColor: backgroundColor
      }]
    });
  }));
};
const matrix = [[[0.4, 0.7, 1.0], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.6, 0.9, 1.2], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.8, 1.1, 1.4], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]]];
const styles = (0, _createStyleSheet.default)({
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4
  }
});
var _default = exports.default = TypingIndicatorBubble;
//# sourceMappingURL=index.js.map