respond-framework/dist/modules/replayTools/App/Events.js

create as fast you think

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react2 = require("react");
var React = _react2;
var _respond = require("respond-framework/modules/replayTools/respond.js");
var _reactNative = require("react-native");
var _styles = require("../styles.js");
var _Event = require("../widgets/Event.js");
var _Button = require("../widgets/Button.js");
const Events = (0, _react2.memo)(function Events(props) {
  return ((props, {
    events,
    evs,
    evsIndex,
    divergentIndex,
    playing,
    selectedTestId
  }) => {
    const [scrollEnabled, toggleScroll] = (0, _react2.useState)(true);
    const [potentialNewIndex, setIndex] = (0, _react2.useState)(null);
    const rows = evs.map((e, i) => /*#__PURE__*/(0, _react2.createElement)(_Event.default, {
      event: events.replayEventsToIndex,
      changeIndex: events.changeIndex,
      skipEvent: events.skipEvent,
      deleteEvent: events.deleteEvent,
      setIndex,
      index: i,
      type: e.event.type,
      arg: e.arg,
      dispatched: i <= evsIndex,
      divergent: selectedTestId && i >= divergentIndex && i <= evsIndex,
      openSlot: potentialNewIndex === i,
      skipped: e.meta?.skipped,
      toggleScroll,
      key: i + '_' + (e.dragId ?? '')
    }));
    const ref = (0, _react2.useRef)();
    (0, _react2.useEffect)(() => {
      if (evsIndex === 0) ref?.current?.scrollTo({
        y: 0,
        animated: false
      });else if (evsIndex === evs.length - 1) ref?.current?.scrollTo({
        y: 100000000,
        animated: false
      }); // scrolls to bottom after each new event, so you can see it
    }, [evsIndex, evs.length]);
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      style: s.c
    }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
      ref: ref,
      showsVerticalScrollIndicator: false,
      scrollEnabled: scrollEnabled
    }, rows), playing ? /*#__PURE__*/React.createElement(_Button.default, {
      text: "STOP REPLAY",
      event: events.stopReplay,
      style: {
        backgroundColor: _styles.colors.red
      }
    }) : /*#__PURE__*/React.createElement(_reactNative.View, {
      style: s.buttons
    }, /*#__PURE__*/React.createElement(_Button.default, {
      text: "CLEAR",
      event: events.clearEvents,
      style: {
        backgroundColor: _styles.colors.purple,
        flex: 1,
        marginRight: 0
      }
    }), /*#__PURE__*/React.createElement(_Button.default, {
      text: "SAVE TEST",
      event: events.saveTest,
      style: {
        backgroundColor: _styles.colors.greenBright,
        flex: 1
      }
    })));
  })(props, (0, _respond.useRespond)());
});
var _default = exports.default = Events;
const s = _reactNative.StyleSheet.create({
  c: {
    flex: 1
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});