improve support for custom config;

update formik-mui Select usage

modules.js

@@ -42,6 +42,7 @@ import {
  FormHelperText,
  FormLabel,
  Grid,
+ Icon,
  IconButton,
  InputLabel,
  LinearProgress,
@@ -82,74 +83,8 @@ import react, * as reactExports from "@wq/react";
 import map, * as mapExports from "@wq/map";
 import mapgl, * as mapglExports from "@wq/map-gl";
 
-const muiMaterial = {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Alert,
- AlertTitle,
- AppBar,
- Autocomplete,
- Badge,
- Box,
- Breadcrumbs,
- Button,
- ButtonBase,
- Card,
- CardContent,
- Checkbox,
- Chip,
- CircularProgress,
- Collapse,
- CssBaseline,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Divider,
- Drawer,
- Fab,
- FormControl,
- FormControlLabel,
- FormHelperText,
- FormLabel,
- Grid,
- IconButton,
- InputLabel,
- LinearProgress,
- Link,
- List,
- ListItem,
- ListItemIcon,
- ListItemSecondaryAction,
- ListItemText,
- ListSubheader,
- Menu,
- MenuItem,
- Modal,
- Paper,
- Radio,
- Select,
- SvgIcon,
- Switch,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TablePagination,
- TableRow,
- TextField,
- ThemeProvider,
- ToggleButton,
- Toolbar,
- Typography,
- createTheme,
- useMediaQuery,
-};
-
 // For use with @wq/rollup-plugin
-export default {
+const modules = {
  react: React,
  "react/jsx-runtime": jsxRuntime,
  "react-dom": ReactDOM,
@@ -164,19 +99,72 @@ export default {
  ...reactMapGlExports,
  },
  "@mapbox/mapbox-gl-draw": MapboxDraw,
- "@mui/material": new Proxy(muiMaterial, {
- get: function (target, prop) {
- if (!(prop in target)) {
- console.error(
- `${prop} is not included in wq.js's copy of @mui/material.` +
- ` Try importing @mui/material/${prop} directly,` +
- " or file an issue at https:/wq/wq/issues"
- );
- return () => null;
- }
- return Reflect.get(...arguments);
- },
- }),
+ "@mui/material": {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Alert,
+ AlertTitle,
+ AppBar,
+ Autocomplete,
+ Badge,
+ Box,
+ Breadcrumbs,
+ Button,
+ ButtonBase,
+ Card,
+ CardContent,
+ Checkbox,
+ Chip,
+ CircularProgress,
+ Collapse,
+ CssBaseline,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Divider,
+ Drawer,
+ Fab,
+ FormControl,
+ FormControlLabel,
+ FormHelperText,
+ FormLabel,
+ Grid,
+ Icon,
+ IconButton,
+ InputLabel,
+ LinearProgress,
+ Link,
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemSecondaryAction,
+ ListItemText,
+ ListSubheader,
+ Menu,
+ MenuItem,
+ Modal,
+ Paper,
+ Radio,
+ Select,
+ SvgIcon,
+ Switch,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TablePagination,
+ TableRow,
+ TextField,
+ ThemeProvider,
+ ToggleButton,
+ Toolbar,
+ Typography,
+ createTheme,
+ useMediaQuery,
+ },
  "@wq/app": app,
  "@wq/react": {
  default: react,
@@ -195,3 +183,29 @@ export default {
  ...mapglExports,
  },
 };
+
+function notFound(moduleName, prop) {
+ if (moduleName === "@mui/material") {
+ return (
+ `${prop} is not included in wq.js's copy of ${moduleName}.` +
+ ` Try importing ${moduleName}/${prop} directly,` +
+ " or file an issue at https:/wq/wq/issues"
+ );
+ } else {
+ return `${prop} not found in wq.js's copy of ${moduleName}!`;
+ }
+}
+
+for (const [moduleName, value] of Object.entries(modules)) {
+ modules[moduleName] = new Proxy(value, {
+ get(target, prop) {
+ if (!(prop in target)) {
+ console.error(notFound(moduleName, prop));
+ return () => null;
+ }
+ return Reflect.get(...arguments);
+ },
+ });
+}
+
+export default modules;

packages/map-gl-web/src/hooks.js

@@ -1,6 +1,13 @@
 import { useMap } from "react-map-gl";
+import { usePluginState } from "@wq/react";
 
 export function useMapInstance(mapId) {
- const maps = useMap();
+ const maps = useMap(),
+ mapState = usePluginState("map");
+
+ if (mapState && !mapId) {
+ mapId = mapState.mapId;
+ }
+
  return mapId ? maps[mapId] : maps.current;
 }

packages/map-gl-web/src/index.js

@@ -62,6 +62,8 @@ export {
  MapInteraction,
  MapAutoZoom,
  MapIdentify,
+ MapProvider,
+ useMapInstance,
  VectorTile,
  Tile,
  Geojson,

packages/map-gl-web/src/overlays/GeoJSONLayer.js

@@ -53,7 +53,7 @@ export default function GeoJSONLayer({ id, before, data, ...rest }) {
  ]);
 
  return (
- <Source {...source}>
+ <Source key={id} {...source}>
  {layers.map((layer) => (
  <Layer key={layer.id} {...layer} />
  ))}

packages/map-gl-web/src/overlays/Tile.js

@@ -2,7 +2,14 @@ import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { Source, Layer } from "react-map-gl";
 
-export default function Tile({ name, active, url, tileSize, layout, paint }) {
+export default function Tile({
+ name,
+ active,
+ url,
+ tileSize,
+ layout = {},
+ paint = {},
+}) {
  const source = useMemo(() => {
  return {
  id: name,

packages/map-gl-web/src/overlays/VectorTile.js

@@ -2,16 +2,15 @@ import React, { useMemo, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Source, Layer } from "react-map-gl";
 
-function AutoLayer({ id, active, before, layout, ...rest }) {
+function AutoLayer({ id, active, before, layout = {}, paint = {}, ...rest }) {
  const layer = useMemo(() => {
  return {
  id,
  layout:
- active === false
- ? { ...(layout || {}), visibility: "none" }
- : layout,
+ active === false ? { ...layout, visibility: "none" } : layout,
+ paint,
  };
- }, [id, active, layout]);
+ }, [id, active, layout, paint]);
 
  return <Layer beforeId={before} {...layer} {...rest} />;
 }

packages/map/src/components/AutoMap.js

@@ -40,20 +40,26 @@ export default function AutoMap({
 
  const identify = overlays.some((overlay) => !!overlay.popup);
 
+ if (toolbar === true) {
+ toolbar = (
+ <MapToolbar
+ name={name}
+ mapId={mapId}
+ basemaps={basemaps}
+ overlays={overlays}
+ showOverlay={showOverlay}
+ hideOverlay={hideOverlay}
+ setBasemap={setBasemap}
+ context={context}
+ />
+ );
+ } else if (!toolbar) {
+ toolbar = false;
+ }
+
  return (
  <MapContainer name={name} mapId={mapId}>
- {toolbar && (
- <MapToolbar
- name={name}
- mapId={mapId}
- basemaps={basemaps}
- overlays={overlays}
- showOverlay={showOverlay}
- hideOverlay={hideOverlay}
- setBasemap={setBasemap}
- context={context}
- />
- )}
+ {toolbar}
  <Map
  name={name}
  mapId={mapId}

packages/material-web/src/index.js

@@ -30,7 +30,11 @@ export default {
  return;
  }
  if (config.theme) {
- Object.assign(this.config.theme, config.theme);
+ if (config.theme.palette) {
+ this.config.theme = config.theme;
+ } else {
+ Object.assign(this.config.theme, config.theme);
+ }
  }
  if (config.inputFormat) {
  Object.assign(this.config.inputFormat, config.inputFormat);

packages/material-web/src/inputs/Select.js

@@ -6,12 +6,9 @@ import {
  Checkbox,
  ListItemText,
  ListSubheader,
- InputLabel,
- FormControl,
 } from "@mui/material";
 import PropTypes from "prop-types";
 import { useFormikContext } from "formik";
-import HelperText from "./HelperText.js";
 
 function ContextCheckbox({ value, field }) {
  const { values } = useFormikContext();
@@ -111,33 +108,29 @@ export default function Select({
  };
 
  return (
- <FormControl fullWidth margin="dense">
- <InputLabel
- htmlFor={fieldName}
- required={required}
- error={showError}
- {...InputLabelProps}
- >
- {label}
- </InputLabel>
- <Field
- component={FMuiSelect}
- multiple={multiple}
- required={required}
- native={native}
- renderValue={renderValue}
- displayEmpty={!!placeholder}
- {...rest}
- >
- {!multiple && (
- <Option value={""} disabled={!!required}>
- {required ? "Select one..." : "(No Selection)"}
- </Option>
- )}
- {renderGroups(choiceGroups)}
- </Field>
- <HelperText name={fieldName} hint={hint} />
- </FormControl>
+ <Field
+ component={FMuiSelect}
+ formControl={{ fullWidth: true, margin: "dense" }}
+ inputLabel={{ required, error: showError, ...InputLabelProps }}
+ formHelperText={{ children: hint }}
+ multiple={multiple}
+ required={required}
+ native={native}
+ label={label}
+ renderValue={renderValue}
+ displayEmpty={!!placeholder}
+ {...(InputLabelProps && InputLabelProps.shrink
+ ? { notched: true }
+ : {})}
+ {...rest}
+ >
+ {!multiple && (
+ <Option value={""} disabled={!!required}>
+ {required ? "Select one..." : "(No Selection)"}
+ </Option>
+ )}
+ {renderGroups(choiceGroups)}
+ </Field>
  );
 }