@hackoregon/component-library
Version:
Official repo for Hack Oregon React component library
146 lines (132 loc) • 9.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _emotion = require("emotion");
var _Dropdown = _interopRequireDefault(require("../Dropdown/Dropdown"));
var _SandboxDateSelector = _interopRequireDefault(require("./SandboxDateSelector"));
var _SandboxToggleSwitch = _interopRequireDefault(require("./SandboxToggleSwitch"));
var _SandboxMapLegend = _interopRequireDefault(require("./SandboxMapLegend"));
var _SandboxBaseMapSelector = _interopRequireDefault(require("./SandboxBaseMapSelector"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var menuOpen = (0, _emotion.css)("\n position: absolute;\n top: 0;\n right: 0;\n width: 35%;\n z-index: 5;\n transition: 0.5s;\n @media (max-width: 850px) {\n width: 90%;\n }\n @media (max-width: 500px) {\n width: 100%;\n }\n");
var menuClosed = (0, _emotion.css)("\n position: absolute;\n top: 0;\n right: 0;\n width: 7%;\n z-index: 5;\n transition: 0.5s;\n @media (max-width: 850px) {\n width: 15%;\n }\n @media (max-width: 500px) {\n width: 25%;\n }\n");
var SandboxDrawer = function SandboxDrawer(_ref) {
var data = _ref.data,
onChange = _ref.onChange,
selectedPackage = _ref.selectedPackage,
toggleDrawer = _ref.toggleDrawer,
drawerVisible = _ref.drawerVisible,
slideData = _ref.slideData,
fetchSlideByDate = _ref.fetchSlideByDate,
foundationData = _ref.foundationData,
defaultFoundation = _ref.defaultFoundation,
allSlides = _ref.allSlides,
updatePackage = _ref.updatePackage,
selectedFoundation = _ref.selectedFoundation,
updateFoundation = _ref.updateFoundation,
foundationMapProps = _ref.foundationMapProps,
onBaseMapStyleChange = _ref.onBaseMapStyleChange,
baseMapStyle = _ref.baseMapStyle;
return _react["default"].createElement("div", {
className: drawerVisible ? menuOpen : menuClosed
}, _react["default"].createElement("div", {
onClick: toggleDrawer
}, _react["default"].createElement("div", {
className: (0, _emotion.css)("\n text-transform: uppercase;\n font-size: 1rem;\n cursor: pointer;\n background: #EE495C;\n color: #F3F2F3;\n ")
}, _react["default"].createElement("div", {
className: (0, _emotion.css)("\n font-size: 1.4rem;\n color: #F3F2F3;\n line-height: 1.5;\n padding-left: 5px;\n @media (max-width: 850px) {\n font-size: 1.3rem;\n }\n ")
}, drawerVisible ? "Close Menu" : "Open Menu"))), drawerVisible && _react["default"].createElement("div", {
className: (0, _emotion.css)("\n background: rgba(243,242,243,0.9);\n overflow-y: auto;\n min-height: 550px;\n height: 74vh;\n border: 1px solid #ddd;\n border-radius: 2px;\n box-shadow: -10px 5px 15px -3px rgba(0, 0, 0, 0.2);\n @media (max-width: 850px) {\n height: 60vh;\n }\n ")
}, _react["default"].createElement("div", {
className: (0, _emotion.css)("\n position: relative;\n z-index: 900;\n ")
}, _react["default"].createElement("h2", {
className: (0, _emotion.css)("\n color: #555;\n text-transform: uppercase;\n margin: 0 10px;\n ")
}, "Data Collections"), _react["default"].createElement(_Dropdown["default"], {
value: selectedPackage,
options: Object.keys(data.packages).map(function (p) {
return {
value: p,
label: p
};
}),
onChange: updatePackage,
simpleValue: true
})), _react["default"].createElement("div", {
className: (0, _emotion.css)("\n position: relative;\n z-index: 400;\n ")
}, _react["default"].createElement("h2", {
className: (0, _emotion.css)("\n color: #555;\n text-transform: uppercase;\n margin: 0 10px;\n ")
}, "Base Layers"), _react["default"].createElement(_Dropdown["default"], {
value: selectedFoundation,
options: data.packages[selectedPackage].foundations.map(function (foundation) {
return {
value: foundation,
label: data.foundations[foundation].name
};
}),
onChange: updateFoundation,
simpleValue: true
})), foundationData && _react["default"].createElement("div", null, _react["default"].createElement("div", {
className: (0, _emotion.css)("\n position: relative;\n font-size: .75rem;\n color: #333;\n z-index: 300;\n ")
}, foundationData.slide_meta && foundationData.slide_meta.dates.date_granularity ? _react["default"].createElement(_SandboxDateSelector["default"], {
slide: defaultFoundation,
selectedSlideData: foundationData,
fetchSlideByDate: fetchSlideByDate,
type: "foundation"
}) : foundationData.slide_meta && foundationData.slide_meta.dates.default_date_filter ? _react["default"].createElement("span", {
className: (0, _emotion.css)("\n font-size: 22px;\n font-weight: 400;\n padding: 0 0 0 16px;\n margin: 0;\n ")
}, foundationData.slide_meta.dates.default_date_filter) : null), foundationData.slide_data && foundationMapProps.scaleType && _react["default"].createElement(_SandboxMapLegend["default"], {
data: foundationData,
mapProps: foundationMapProps
}), _react["default"].createElement("h2", {
className: (0, _emotion.css)("\n color: #555;\n text-transform: uppercase;\n margin: 0 10px;\n ")
}, "Base map style"), onBaseMapStyleChange && baseMapStyle && _react["default"].createElement(_SandboxBaseMapSelector["default"], {
onBaseMapStyleChange: onBaseMapStyleChange,
baseMapStyle: baseMapStyle
})), _react["default"].createElement("div", {
className: (0, _emotion.css)("\n position: relative;\n z-index: 200;\n ")
}, _react["default"].createElement("h2", {
className: (0, _emotion.css)("\n color: #555;\n text-transform: uppercase;\n margin: 0 10px;\n ")
}, "Slide Layers")), allSlides.map(function (slide, index) {
var selectedSlideData = !!slideData.find(function (slideDatum) {
return slideDatum[slide.label];
}) ? slideData.find(function (slideDatum) {
return slideDatum[slide.label];
})[slide.label] : {};
var defaultGray = [238, 238, 238, 255];
var backgroundSlideColor = slide.color;
var formatBackgroundColor = function formatBackgroundColor(arr) {
return arr.reduce(function (acc, cur, i) {
return i < 3 ? acc + cur + "," : acc + "0.9)";
}, "rgba(");
};
var slideBackGroundColor = formatBackgroundColor(backgroundSlideColor);
var blackTextColor = "rgba(0,0,0,1)";
var whiteTextColor = "rgba(255,255,255,1)";
var textColor = slideBackGroundColor === defaultGray ? blackTextColor : whiteTextColor;
return _react["default"].createElement("div", {
key: "slide-selector" + index
}, _react["default"].createElement("div", {
className: (0, _emotion.css)("\n border-top: 1px solid #ddd;\n padding: .3rem .5rem;\n text-transform: capitalize;\n font-weight: bold;\n background: ".concat(slideBackGroundColor, ";\n color:").concat(textColor, "\n "))
}, _react["default"].createElement(_SandboxToggleSwitch["default"], {
name: slide.slideId,
checked: slide.checked,
onChange: onChange,
label: slide.label,
mapType: slide.mapType
})), _react["default"].createElement("div", {
className: (0, _emotion.css)("\n padding: .5rem 0 .5rem 0;\n font-size: .75rem;\n color: #333;\n position: relative;\n z-index: ".concat(10 - index, ";\n "))
}, slide.checked && selectedSlideData.slide_meta && selectedSlideData.slide_meta.dates.date_granularity ? _react["default"].createElement(_SandboxDateSelector["default"], {
selectedSlideData: selectedSlideData,
slide: slide,
fetchSlideByDate: fetchSlideByDate,
type: "slide"
}) : slide.checked && selectedSlideData.slide_meta && selectedSlideData.slide_meta.dates.default_date_filter ? _react["default"].createElement("span", {
className: (0, _emotion.css)("\n font-size: 18px;\n padding: 0 0 0 17px;\n margin: 0;\n ")
}, selectedSlideData.slide_meta.dates.default_date_filter) : null));
})));
};
var _default = SandboxDrawer;
exports["default"] = _default;