discord-decomp/components_native/common/UnreadBars.tsx

// Metro module 15013 (f15014).
import { PureComponent, Fragment } from "react";
import { Animated, TouchableWithoutFeedback, View } from "react-native";
import AccessibilityStore from "../../modules/a11y/AccessibilityStore";
import { Fonts } from "../../Constants";
import { createLegacyClassComponentStyles } from "../../design/components/Styles/native/createStyles";
import TextStyles from "../../modules/rebrand/native/TextStyles";
import Module712 from "../../_bundle/Module712";
import { hexWithOpacity } from "../../utils/ColorUtils";
import { ThemeContext } from "../../_bundle/Module3901";
import { triggerHapticFeedback } from "../../modules/haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../modules/haptics/HapticFeedbackTypes";
import { LegacyText } from "../../design/void/native";
import { intl, t } from "../../intl/index.native";
import { useStateFromStores } from "../../_bundle/Module589";
import { TransitionGroup } from "../../_bundle/Module10391";
const styles = createLegacyClassComponentStyles({
  unreadText: {
    ...TextStyles(Fonts.DISPLAY_SEMIBOLD, Module712.unsafe_rawColors.WHITE, 12, {
      uppercase: true
    })
  },
  unread: {
    margin: 8,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: Module712.radii.md,
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_400, 0.9)
  },
  mention: {
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.RED_400, 0.9)
  }
});
class UnreadBar extends PureComponent {
  static defaultProps = {
    bottom: false
  };
  static contextType = ThemeContext;
  state = {
    active: false
  };
  animation = new Animated.Value(0);
  handlePress = () => {
    const props = this.props;
    const { item, onPress } = props;
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
    this.hide();
    onPress(item);
  };
  handlePressIn = () => {
    this.setState({
      active: true
    });
  };
  handlePressOut = () => {
    this.setState({
      active: false
    });
  };
  componentWillEnter(a0) {
    this.show(a0);
  }
  componentWillLeave(a0) {
    this.hide(a0);
  }
  show(a0) {
    Animated.spring(this.animation, {
      toValue: 1,
      friction: 15,
      tension: 250,
      useNativeDriver: true
    }).start(a0);
  }
  hide(a0) {
    Animated.spring(this.animation, {
      toValue: 0,
      friction: 15,
      tension: 250,
      useNativeDriver: true
    }).start(a0);
  }
  getAnimatedStyle() {
    let r16, r30;
    const props = this.props;
    const { bottom, contentInset, useReducedMotion } = props;
    const active = this.state.active;
    let left = contentInset.left;
    if (left == null) {
      left = 0;
    }
    let right = contentInset.right;
    if (right == null) {
      right = 0;
    }
    const r7 = {
      position: "absolute",
      left,
      right
    };
    const r9 = bottom ? "bottom" : "top";
    if (bottom) {
      let bottom2 = contentInset.bottom;
      if (bottom2 == null) {
        bottom2 = 0;
      }
      r16 = bottom2;
    } else {
      r16 = contentInset.top;
      if (r16 == null) {
        r16 = 0;
      }
    }
    r7[r9] = r16;
    const r18 = {
      ...r7,
      opacity: this.animation
    };
    if (useReducedMotion) {
      r30 = r18;
    } else {
      r18.transform = [{
        translateY: this.animation.interpolate({
          inputRange: [0, 1],
          outputRange: [bottom ? 72 : -72, active ? 1 : 0]
        })
      }];
      r30 = r18;
    }
    return r30;
  }
  render() {
    const r12 = styles(this.context);
    const props = this.props;
    const { compact, item } = props;
    const { mention, section } = item;
    const View2 = Animated.View;
    return <TouchableWithoutFeedback accessibilityRole="button" onPress={this.handlePress} onPressIn={this.handlePressIn} onPressOut={this.handlePressOut} testID={`unread-bar-touchable-${mention}-${section}`}>
      <View2 style={this.getAnimatedStyle()} nativeID={`unread-bar-animated-view-${mention}-${section}`}>
        <View style={[r12.unread, mention ? r12.mention : void 0]} nativeID={`unread-bar-view-${mention}-${section}`}>
          <LegacyText style={r12.unreadText} maxFontSizeMultiplier={1.5}>
            {compact ? intl.string(t.y2b7CA) : mention ? intl.string(t["8zH0LJ"]) : intl.string(t.FCRiT3)}
          </LegacyText>
        </View>
      </View2>
    </TouchableWithoutFeedback>;
  }
}
export default function UnreadBars(props) {
  const { scrollToLocation, beforeItem, afterItem, compact = false, contentInset = {
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
} } = props;
  const handlePress2 = function handlePress(a0) {
    scrollToLocation({
      section: a0.section,
      item: a0.row,
      animated: true
    });
  };
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  return <TransitionGroup component={Fragment}>
    {beforeItem != null ? <UnreadBar key="BEFORE" compact={compact} item={beforeItem} onPress={handlePress2} contentInset={contentInset} useReducedMotion={stateFromStores} /> : null}
    {afterItem != null ? <UnreadBar key="AFTER" compact={compact} item={afterItem} onPress={handlePress2} contentInset={contentInset} bottom useReducedMotion={stateFromStores} /> : null}
  </TransitionGroup>;
};