respond-framework/dist/modules/replayTools/widgets/Event.js

create as fast you think

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var React = _react;
var _reactNative = require("react-native");
var _styles = require("../styles.js");
var _Chevron = require("../icons/Chevron.js");
var _HoverButtons = require("./HoverButtons.js");
var _Pressable = require("./Pressable.js");
var _Remove = require("../icons/Remove.js");
var _useDragAndDrop = require("../hooks/useDragAndDrop.js");
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(({
  event,
  changeIndex,
  skipEvent,
  deleteEvent,
  index,
  type,
  arg,
  dispatched,
  divergent,
  skipped,
  setIndex,
  openSlot,
  toggleScroll
}) => {
  const [hover, set] = (0, _react.useState)(false);
  const [longPressing, setLongPress] = (0, _react.useState)(false);
  const dndProps = (0, _useDragAndDrop.default)(index, height, changeIndex, setIndex, openSlot, toggleScroll, longPressing);
  const a = arg && Object.keys(arg).length > 0 && JSON.stringify(arg, (k, v) => v === undefined ? 'undefined' : v).replace(/"undefined"/g, 'undefined');
  const color = skipped ? _styles.colors.white : divergent ? _styles.colors.pink : dispatched ? _styles.colors.money : _styles.colors.white;
  const styles = [s.c, skipped && s.skipped];
  const stylesText = [s.text, {
    color
  }, a && {
    marginTop: -10
  }];
  const stylesIcon = [s.iconContainer, a && {
    marginTop: -5
  }];
  const buttons = [{
    label: 'JUMP',
    event,
    arg: {
      index,
      delay: true
    }
  }, {
    label: skipped ? 'UNSKIP' : 'SKIP',
    event: skipEvent,
    arg: {
      index
    }
  }];
  const top = a ? 9 : 7;
  const onLongPress = (0, _react.useCallback)(() => setLongPress(true));
  const onPressOut = (0, _react.useCallback)(() => setLongPress(false));
  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, dndProps, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles,
    onMouseEnter: () => set(true),
    onMouseLeave: () => set(false)
  }, /*#__PURE__*/React.createElement(_Pressable.default, {
    style: s.press,
    event: event,
    arg: {
      index
    },
    onLongPress: onLongPress,
    onPressOut: onPressOut
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: s.line1
  }, hover ? /*#__PURE__*/React.createElement(_Pressable.default, {
    style: stylesIcon,
    event: deleteEvent,
    arg: {
      index
    }
  }, /*#__PURE__*/React.createElement(_Remove.default, {
    style: s.remove,
    color: color,
    strokeWidth: 2
  })) : /*#__PURE__*/React.createElement(_reactNative.View, {
    style: stylesIcon
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: {
      color,
      marginTop: 1
    }
  }, index, ".")), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: stylesText,
    numberOfLines: 1
  }, type)), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: s.subtext,
    numberOfLines: 1
  }, a || undefined)), /*#__PURE__*/React.createElement(_Chevron.default, null), /*#__PURE__*/React.createElement(_HoverButtons.default, {
    buttons: buttons,
    show: hover,
    style: {
      height: 30,
      top
    }
  })));
});
const height = 50;
const s = _reactNative.StyleSheet.create({
  c: {
    height,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
    borderBottomColor: _styles.colors.grey,
    paddingRight: 5
  },
  skipped: {
    backgroundColor: 'rgba(108, 110, 117, .6)',
    borderBottomColor: 'rgb(130, 130, 130)'
  },
  press: {
    width: '96%',
    height: '100%',
    paddingLeft: 10,
    justifyContent: 'center',
    cursor: 'pointer'
  },
  line1: {
    height: '100%',
    justifyContent: 'center'
  },
  text: {
    fontSize: 14,
    lineHeight: 14,
    color: _styles.colors.white,
    maxWidth: 300,
    paddingLeft: 21
  },
  subtext: {
    position: 'absolute',
    bottom: 4,
    left: 30,
    fontSize: 13,
    color: _styles.colors.tan,
    maxWidth: 302
  },
  chevron: {
    opacity: .6
  },
  iconContainer: {
    position: 'absolute',
    left: 0,
    top: -1,
    height: '100%',
    justifyContent: 'center',
    zIndex: 2
  },
  remove: {
    width: 24,
    height: 24,
    marginTop: 2,
    marginLeft: -4
  }
});