<commit_before>import React, { PureComponent, CSSProperties } from 'react';
import {
  StyleSheet,
  View,
  ViewStyle,
  UIManager,
  Animated,
  Easing,
} from 'react-native';
import PropsType from './PropsType';
import popupStyle from './style/index.native';
// import Mask from '../Mask';

export interface PopupProps extends PropsType {
  style?: CSSProperties;
  styles?: typeof popupStyle;
}

const popupStyles = StyleSheet.create<any>(popupStyle);

export default class Popup extends PureComponent<PopupProps, any> {
  static defaultProps = {
    visible: false,
    mask: true,
    direction: 'bottom',
    stayTime: 3000,
    animationDuration: 200,
    styles: popupStyles,
  };

  private timer: number;

  constructor(props) {
    super(props);
    this.state = {
      // isMaskShow: props.visible || false,
      isPending: false,
      // isShow: false,
      animationState: 'enter',
      directionStyle: {},
      transfromStyle: {},
      translateValue: new Animated.Value(0),
    };
  }

  componentDidMount() {
    const { translateValue } = this.state;
    // const { visible } = this.props;
    translateValue.addListener((value) => {
      this.animationEnd(value);
    });
    // if (visible) {
    //   this.enter(this.props);
    //   this.setState({
    //     isShow: true,
    //   });
    // }
  }

  componentWillReceiveProps(nextProps) {
    clearTimeout(this.timer);
    if (nextProps.visible) {
      this.enter(nextProps);
    } else {
      this.leave(nextProps);
    }
  }

  componentWillUnmount() {
    const { translateValue } = this.state;
    translateValue.removeAllListeners();
  }

  enter = ({ stayTime, onMaskClick, direction, animationDuration }) => {
    let transfromStyle = {};
    let newValue;
    if (direction === 'bottom') {
      transfromStyle = { transform: [{ translateY: this.state.translateValue }] };
      newValue = this.state.directionStyle[direction];
    } else if (direction === 'top') {
      transfromStyle = { transform: [{ translateY: this.state.translateValue }] };
      newValue = -this.state.directionStyle[direction];
    } else if (direction === 'left') {
      transfromStyle = { transform: [{ translateX: this.state.translateValue }] };
      newValue = -this.state.directionStyle[direction];
    } else {
      transfromStyle = { transform: [{ translateX: this.state.translateValue }] };
      newValue = this.state.directionStyle[direction];
    }
    this.setState({
      // isMaskShow: true,
      isPending: true,
      animationState: 'enter',
      transfromStyle,
    });

    Animated.timing(
      this.state.translateValue,
      {
        toValue: newValue,
        duration: animationDuration,
        easing: Easing.linear,
      },<commit_msg>chore: remove useless code<commit_after>import React, { PureComponent, CSSProperties } from 'react';
import {
  StyleSheet,
  View,
  ViewStyle,
  UIManager,
  Animated,
  Easing,
} from 'react-native';
import PropsType from './PropsType';
import popupStyle from './style/index.native';
// import Mask from '../Mask';

export interface PopupProps extends PropsType {
  style?: CSSProperties;
  styles?: typeof popupStyle;
}

const popupStyles = StyleSheet.create<any>(popupStyle);

export default class Popup extends PureComponent<PopupProps, any> {
  static defaultProps = {
    visible: false,
    mask: true,
    direction: 'bottom',
    stayTime: 3000,
    animationDuration: 200,
    styles: popupStyles,
  };

  private timer: number;

  constructor(props) {
    super(props);
    this.state = {
      // isMaskShow: props.visible || false,
      isPending: false,
      // isShow: false,
      animationState: 'enter',
      directionStyle: {},
      transfromStyle: {},
      translateValue: new Animated.Value(0),
    };
  }

  componentDidMount() {
    const { translateValue } = this.state;
    // const { visible } = this.props;
    translateValue.addListener((value) => {
      this.animationEnd(value);
    });
    // if (visible) {
    //   this.enter(this.props);
    //   this.setState({
    //     isShow: true,
    //   });
    // }
  }

  componentWillReceiveProps(nextProps) {
    clearTimeout(this.timer);
    if (nextProps.visible) {
      this.enter(nextProps);
    } else {
      this.leave(nextProps);
    }
  }

  componentWillUnmount() {
    const { translateValue } = this.state;
    translateValue.removeAllListeners();
  }

  enter = ({ direction, animationDuration }) => {
    let transfromStyle = {};
    let newValue;
    if (direction === 'bottom') {
      transfromStyle = { transform: [{ translateY: this.state.translateValue }] };
      newValue = this.state.directionStyle[direction];
    } else if (direction === 'top') {
      transfromStyle = { transform: [{ translateY: this.state.translateValue }] };
      newValue = -this.state.directionStyle[direction];
    } else if (direction === 'left') {
      transfromStyle = { transform: [{ translateX: this.state.translateValue }] };
      newValue = -this.state.directionStyle[direction];
    } else {
      transfromStyle = { transform: [{ translateX: this.state.translateValue }] };
      newValue = this.state.directionStyle[direction];
    }
    this.setState({
      // isMaskShow: true,
      isPending: true,
      animationState: 'enter',
      transfromStyle,
    });

    Animated.timing(
      this.state.translateValue,
      {
        toValue: newValue,
        duration: animationDuration,
        easing: Easing.linear,
      },
{'fraction_non_alphanumeric': 0.1345872899926954, 'fraction_numerical': 0.0029218407596785976, 'mean_word_length': 2.83006993006993, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4802588', 'n_tokens_mistral': 1645, 'n_tokens_neox': 1622, 'n_words': 339}