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

Official repo for Hack Oregon React component library

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; }

import React, { useState } from "react";
import { arrayOf, bool, func, number, string, shape, oneOfType } from "prop-types";
import { css } from "emotion";
import BaseMap from "../BaseMap/BaseMap";
import CivicSandboxMap from "../CivicSandboxMap/CivicSandboxMap";
import CivicSandboxTooltip from "../CivicSandboxMap/CivicSandboxTooltip";
import SandboxDrawer from "./SandboxDrawer";
var baseMapWrapper = 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 = 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.createElement("div", {
    className: styles
  }, React.createElement("div", {
    className: 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.createElement(SandboxDrawer, {
    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.createElement("div", {
    className: baseMapWrapper
  }, React.createElement(BaseMap, {
    civicMapStyle: baseMapStyle,
    initialZoom: 10.5,
    initialLatitude: 45.5431,
    initialLongitude: -122.5765,
    useContainerHeight: true,
    updateViewport: false
  }, React.createElement(CivicSandboxMap, {
    mapLayers: layerData,
    onClick: onFoundationClick,
    onHoverSlide: onSlideHover,
    selectedFoundationDatum: selectedFoundationDatum
  }, tooltipInfo && React.createElement(CivicSandboxTooltip, {
    tooltipData: tooltipInfo
  })))));
};

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