respond-framework/dist/modules/replayTools/App/Layout.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 _Tabs = require("../widgets/Tabs.js");
var _LoadingSpinner = require("../widgets/LoadingSpinner.js");
var _Settings = require("./Settings.js");
var _Tests = require("./Tests.js");
var _Events = require("./Events.js");
var _SpliceModeButton = require("../components/SpliceModeButton.js");
var _styles = require("../styles.js");
var _useSlide = require("../hooks/useSlide.js");
const Layout = (0, _react2.memo)(function Layout(props) {
  return (({
    open
  }, {
    events,
    tab,
    loading,
    config
  }) => {
    const p = config.position;
    const x = p?.left ? 'left' : 'right';
    const y = p?.top ? 'top' : 'bottom';
    const d = (0, _useSlide.default)(open, width + margin);
    const translateX = p?.left ? d : _reactNative.Animated.multiply(d, -1);
    const backgroundColor = tab === 'events' ? _styles.colors.navy : _styles.colors.greyDark;
    const style = {
      backgroundColor,
      [y]: 45,
      [x]: -width,
      transform: [{
        translateX
      }]
    };
    const tabs = [{
      text: 'Settings',
      event: events.settings
    }, {
      text: 'Tests',
      event: events.tests
    }, {
      text: 'Events',
      event: events.events
    }];
    const Component = components[tab];
    return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
      style: [s.c, style]
    }, /*#__PURE__*/React.createElement(_Tabs.default, {
      tabs: tabs,
      value: tab
    }), /*#__PURE__*/React.createElement(_SpliceModeButton.default, null), /*#__PURE__*/React.createElement(Component, null), loading && /*#__PURE__*/React.createElement(_LoadingSpinner.default, {
      style: s.spinner
    }));
  })(props, (0, _respond.useRespond)());
});
var _default = exports.default = Layout;
const width = 355;
const margin = 10;
const components = {
  settings: _Settings.default,
  tests: _Tests.default,
  events: _Events.default
};
const s = _reactNative.StyleSheet.create({
  c: {
    position: 'absolute',
    width: width,
    height: 600,
    backgroundColor: _styles.colors.greyDark,
    borderRadius: 5,
    overflow: 'hidden',
    opacity: .985
  },
  spinner: {
    position: 'absolute',
    top: '40%',
    left: width / 2 - 17,
    width: 34,
    height: 34
  }
});