@hackoregon/component-library/dist/Sandbox/Sandbox.js

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = require("prop-types");

var _emotion = require("emotion");

var _BaseMap = _interopRequireDefault(require("../BaseMap/BaseMap"));

var _CivicSandboxMap = _interopRequireDefault(require("../CivicSandboxMap/CivicSandboxMap"));

var _CivicSandboxTooltip = _interopRequireDefault(require("../CivicSandboxMap/CivicSandboxTooltip"));

var _SandboxDrawer = _interopRequireDefault(require("./SandboxDrawer"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var baseMapWrapper = (0, _emotion.css)("\n  height: 80vh;\n  min-height: 700px;\n  @media (max-width: 850px) {\n    height: 65vh;\n    min-height: 600px;\n  }\n");

var Sandbox = function Sandbox(_ref) {
  var data = _ref.data,
      layerData = _ref.layerData,
      defaultFoundation = _ref.defaultFoundation,
      defaultSlides = _ref.defaultSlides,
      selectedPackage = _ref.selectedPackage,
      selectedFoundation = _ref.selectedFoundation,
      selectedSlide = _ref.selectedSlide,
      foundationData = _ref.foundationData,
      slideData = _ref.slideData,
      updatePackage = _ref.updatePackage,
      updateFoundation = _ref.updateFoundation,
      updateSlide = _ref.updateSlide,
      fetchSlideDataByDate = _ref.fetchSlideDataByDate,
      drawerVisible = _ref.drawerVisible,
      toggleDrawer = _ref.toggleDrawer,
      mapboxStyle = _ref.mapboxStyle,
      styles = _ref.styles,
      onFoundationClick = _ref.onFoundationClick,
      onSlideHover = _ref.onSlideHover,
      tooltipInfo = _ref.tooltipInfo,
      allSlides = _ref.allSlides,
      foundationMapProps = _ref.foundationMapProps,
      selectedFoundationDatum = _ref.selectedFoundationDatum;

  var _useState = (0, _react.useState)("light"),
      _useState2 = _slicedToArray(_useState, 2),
      baseMapStyle = _useState2[0],
      setBaseMapStyle = _useState2[1];

  var handleBaseMapStyleChange = function handleBaseMapStyleChange(baseMapStyleChangeEvent) {
    baseMapStyleChangeEvent.target.value === "light" ? setBaseMapStyle("light") : setBaseMapStyle("dark");
  };

  return _react["default"].createElement("div", {
    className: styles
  }, _react["default"].createElement("div", {
    className: (0, _emotion.css)("\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 0;\n          margin: 0;\n          width: 100%;\n          height: 80vh;\n          min-height: 600px;\n          @media (max-width: 850px) {\n            height: 65vh;\n            min-height: 500px;\n          }\n      ")
  }, _react["default"].createElement(_SandboxDrawer["default"], {
    data: data,
    selectedSlide: selectedSlide,
    onChange: updateSlide,
    selectedPackage: selectedPackage,
    toggleDrawer: toggleDrawer,
    drawerVisible: drawerVisible,
    defaultSlides: defaultSlides,
    slideData: slideData,
    fetchSlideByDate: fetchSlideDataByDate,
    selectedFoundation: selectedFoundation,
    foundationData: foundationData,
    defaultFoundation: defaultFoundation,
    allSlides: allSlides,
    updatePackage: updatePackage,
    updateFoundation: updateFoundation,
    foundationMapProps: foundationMapProps,
    onBaseMapStyleChange: handleBaseMapStyleChange,
    baseMapStyle: baseMapStyle
  })), _react["default"].createElement("div", {
    className: baseMapWrapper
  }, _react["default"].createElement(_BaseMap["default"], {
    civicMapStyle: baseMapStyle,
    initialZoom: 10.5,
    initialLatitude: 45.5431,
    initialLongitude: -122.5765,
    useContainerHeight: true,
    updateViewport: false
  }, _react["default"].createElement(_CivicSandboxMap["default"], {
    mapLayers: layerData,
    onClick: onFoundationClick,
    onHoverSlide: onSlideHover,
    selectedFoundationDatum: selectedFoundationDatum
  }, tooltipInfo && _react["default"].createElement(_CivicSandboxTooltip["default"], {
    tooltipData: tooltipInfo
  })))));
};

Sandbox.propTypes = {
  data: (0, _propTypes.shape)({
    packages: (0, _propTypes.shape)({}),
    foundations: (0, _propTypes.shape)({}),
    slides: (0, _propTypes.shape)({})
  }).isRequired,
  layerData: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    data: (0, _propTypes.shape)({})
  })).isRequired,
  defaultFoundation: (0, _propTypes.shape)({
    endpoint: _propTypes.string,
    name: _propTypes.string,
    visualization: _propTypes.string
  }).isRequired,
  defaultSlides: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    endpoint: _propTypes.string,
    name: _propTypes.string,
    visualization: _propTypes.string
  })).isRequired,
  selectedPackage: _propTypes.string.isRequired,
  selectedFoundation: _propTypes.string.isRequired,
  selectedSlide: (0, _propTypes.arrayOf)(_propTypes.string).isRequired,
  foundationData: (0, _propTypes.shape)({
    slide_data: (0, _propTypes.shape)({}),
    slide_meta: (0, _propTypes.shape)({})
  }).isRequired,
  slideData: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})).isRequired,
  updatePackage: _propTypes.func.isRequired,
  updateFoundation: _propTypes.func.isRequired,
  updateSlide: _propTypes.func.isRequired,
  fetchSlideDataByDate: _propTypes.func.isRequired,
  drawerVisible: _propTypes.bool.isRequired,
  toggleDrawer: _propTypes.func.isRequired,
  styles: _propTypes.string,
  onFoundationClick: _propTypes.func,
  onSlideHover: _propTypes.func,
  tooltipInfo: (0, _propTypes.shape)({
    content: (0, _propTypes.arrayOf)((0, _propTypes.shape)({})),
    x: _propTypes.number,
    y: _propTypes.number
  }),
  allSlides: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    checked: _propTypes.bool,
    color: (0, _propTypes.arrayOf)(_propTypes.number),
    endpoint: _propTypes.string,
    label: _propTypes.string,
    mapType: _propTypes.string,
    slideId: _propTypes.string
  })).isRequired,
  foundationMapProps: (0, _propTypes.shape)({
    color: (0, _propTypes.arrayOf)((0, _propTypes.arrayOf)(_propTypes.number)),
    getPropValue: _propTypes.func,
    propName: _propTypes.string,
    scaleType: _propTypes.string
  }).isRequired,
  selectedFoundationDatum: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    data: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)((0, _propTypes.shape)({})), _propTypes.number, _propTypes.string]),
    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
    title: _propTypes.string,
    visualizationType: _propTypes.string
  }))
};
var _default = Sandbox;
exports["default"] = _default;