@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/components/widgets/LayerSelectWidget.jsx

@@ -1,463 +0,0 @@
-import React from 'react';
-import { Icon } from '@plone/volto/components';
-import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
-
-import { flattenToAppURL } from '@plone/volto/helpers';
-import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { getContent } from '@plone/volto/actions';
-
-import checkSVG from '@plone/volto/icons/check.svg';
-import closeSVG from '@plone/volto/icons/clear.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import resetSVG from '@plone/volto/icons/reset.svg';
-
-import { fetchArcGISData } from '../../utils';
-
-import loadable from '@loadable/component';
-
-const QueryBuilder = loadable(() => import('react-querybuilder'), {
-  resolveComponent: (components) => components.QueryBuilder,
-});
-
-const LayerSelectWidget = (props) => {
-  const { onChange, id, data_query } = props;
-
-  const value = React.useMemo(() => props.value || {}, [props.value]);
-
-  const {
-    available_layers,
-    map_data,
-    map_service_url,
-    layer,
-    fields = [],
-    query = '',
-    description = '',
-    hide = false,
-  } = value;
-
-  const [mapData, setMapData] = React.useState(map_data);
-  const [checkColor, setCheckColor] = React.useState('');
-  const [serviceUrlError, setServiceUrlError] = React.useState('');
-  const [serviceUrl, setServiceUrl] = React.useState(map_service_url);
-  const [selectedLayer, setSelectedLayer] = React.useState(layer);
-
-  const [availableLayers, setAvailableLayers] =
-    React.useState(available_layers);
-
-  const [builtQuery, setBuiltQuery] = React.useState(query);
-
-  const handleServiceUrlCheck = async () => {
-    // fetch url, save it, populate layers options
-    try {
-      let mapData = await fetchArcGISData(serviceUrl);
-      setCheckColor('green');
-      setMapData(mapData);
-      setServiceUrlError('');
-      if (mapData.layers && mapData.layers.length > 0) {
-        const mappedLayers = mapData.layers
-          .filter(
-            (layer) => layer && layer.type && layer.type !== 'Group Layer',
-          )
-          .map((layer, i) => {
-            return {
-              key: layer.id,
-              value: layer,
-              text: `${layer.name} (${layer.type})`,
-            };
-          });
-        setAvailableLayers(mappedLayers);
-      }
-      onChange(id, {
-        ...value,
-        layer: selectedLayer,
-        map_service_url: serviceUrl,
-        available_layers: availableLayers,
-        map_data: mapData,
-        description,
-        hide,
-      });
-    } catch (e) {
-      setCheckColor('youtube');
-      setServiceUrlError({ error: e.message, status: e.status });
-    }
-  };
-
-  React.useEffect(() => {
-    import(
-      /* webpackChunkName: "react-querybuilder-css" */ 'react-querybuilder/dist/query-builder.css'
-    );
-    props.getContent('', null, id);
-    //    eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    if (query && !builtQuery) {
-      setBuiltQuery(query);
-    }
-  }, [query, builtQuery]);
-
-  React.useEffect(() => {
-    //detect existing queries in block content. If it exists. Apply matching queries to layer on fresh layer load
-    if (
-      map_service_url &&
-      layer &&
-      !query &&
-      data_query &&
-      data_query.length > 0
-    ) {
-      let autoQuery = {
-        combinator: 'or',
-        rules: [],
-      };
-      data_query.forEach((param, i) => {
-        if (
-          fields &&
-          fields.length > 0 &&
-          fields.filter(
-            (field, j) => field.name === param.alias || field.name === param.i,
-          ).length > 0
-        ) {
-          autoQuery.rules = [
-            ...autoQuery.rules,
-            { field: param.alias || param.i, operator: '=', value: param.v[0] },
-          ];
-        }
-      });
-      if (autoQuery.rules.length > 0) {
-        onChange(id, {
-          ...value,
-          query: autoQuery,
-        });
-        setBuiltQuery(autoQuery);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map_service_url, layer, query, data_query, fields]);
-
-  const handleLayerFetch = async (service_url, id) => {
-    try {
-      let fullLayer = await fetchArcGISData(`${service_url}/${id}`);
-      return fullLayer;
-    } catch (e) {}
-  };
-
-  const handleSelectLayer = async (layer) => {
-    const fullLayer = await handleLayerFetch(serviceUrl, layer.id);
-    setSelectedLayer(layer);
-    onChange(id, {
-      ...value,
-      layer,
-      fullLayer,
-      fields: fullLayer.fields,
-      map_service_url: serviceUrl,
-      available_layers: availableLayers,
-      map_data: mapData,
-      query: '',
-    });
-    setBuiltQuery('');
-  };
-
-  const handleQueryLayer = () => {
-    if (builtQuery) {
-      onChange(id, {
-        ...value,
-        query: builtQuery,
-      });
-    }
-  };
-
-  const handleChangeDescription = (val) => {
-    if (val) {
-      onChange(id, {
-        ...value,
-        description: val,
-      });
-    }
-  };
-
-  const handleOpacityChange = (val) => {
-    onChange(id, {
-      ...value,
-      opacity: val,
-    });
-  };
-
-  const handleChangeServiceUrl = (value) => {
-    setServiceUrlError('');
-    setCheckColor('');
-    setAvailableLayers('');
-    setBuiltQuery('');
-    setSelectedLayer('');
-    setMapData('');
-
-    setServiceUrl(value);
-  };
-
-  const handleMinScaleChange = (minScaleOverride) => {
-    onChange(id, {
-      ...value,
-      minScaleOverride,
-    });
-  };
-
-  const handleMaxScaleChange = (maxScaleOverride) => {
-    onChange(id, {
-      ...value,
-      maxScaleOverride,
-    });
-  };
-
-  const handleReset = () => {
-    setServiceUrlError('');
-    setServiceUrl(map_service_url);
-    setCheckColor('');
-    setAvailableLayers(available_layers);
-    setBuiltQuery('');
-    setSelectedLayer(layer);
-    setMapData(map_data);
-  };
-
-  const handleHideInLegend = (v) => {
-    onChange(id, {
-      ...value,
-      hide: v,
-    });
-  };
-
-  return (
-    <div
-      style={{
-        padding: '0 5px',
-      }}
-    >
-      <Grid>
-        <div className="spaced-row">
-          <Grid.Row stretched>
-            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-              Service URL
-            </h5>
-          </Grid.Row>
-
-          <Grid.Row>
-            <Input
-              type="text"
-              onChange={(e, { value }) => handleChangeServiceUrl(value)}
-              style={{ width: '100%' }}
-              error={serviceUrlError}
-              value={serviceUrl}
-            ></Input>
-
-            <span style={{ fontSize: '12px', color: 'darkred' }}>
-              {serviceUrlError.error}
-            </span>
-          </Grid.Row>
-          {serviceUrl && (
-            <Grid.Row style={{ display: 'flex' }}>
-              {serviceUrl !== map_service_url && (
-                <Button
-                  size="small"
-                  compact
-                  className="layer-reset-button"
-                  onClick={handleReset}
-                >
-                  <Icon name={resetSVG} title="Reset" size="20px" />
-                </Button>
-              )}
-              <Button
-                size="small"
-                color={checkColor}
-                compact
-                className="layer-check-button"
-                onClick={handleServiceUrlCheck}
-              >
-                <Icon
-                  name={serviceUrlError ? closeSVG : checkSVG}
-                  title="Submit"
-                  size="20px"
-                />
-              </Button>
-            </Grid.Row>
-          )}
-        </div>
-        {mapData && mapData.mapName && (
-          <div className="spaced-row">
-            <Grid.Row>
-              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-                Map name:
-              </h5>
-              <p>{mapData.mapName}</p>
-            </Grid.Row>
-          </div>
-        )}
-        {availableLayers && availableLayers.length > 0 && (
-          <div className="spaced-row">
-            <Grid.Row>
-              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-                Layer
-              </h5>
-            </Grid.Row>
-            <Grid.Row>
-              <Select
-                onChange={(e, { value }) => handleSelectLayer(value)}
-                options={availableLayers}
-                style={{ width: '100%' }}
-                placeholder="Select layer"
-                value={selectedLayer}
-              />
-            </Grid.Row>
-          </div>
-        )}
-        {availableLayers && availableLayers.length > 0 && selectedLayer && (
-          <div className="spaced-row">
-            <Grid.Row stretched>
-              <h5>Opacity:</h5>
-              <input
-                className="map-number-input"
-                type="number"
-                min={0}
-                max={1}
-                step={0.1}
-                value={value?.opacity ? value?.opacity : 1}
-                onChange={(e) => handleOpacityChange(e.target.value)}
-              />
-              <input
-                className="map-range-input"
-                type="range"
-                min={0}
-                max={1}
-                step={0.1}
-                value={value?.opacity ? value?.opacity : 1}
-                onChange={(e) => handleOpacityChange(e.target.value)}
-              />
-            </Grid.Row>
-            <Grid.Row stretched>
-              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-                Min scale:
-              </h5>
-              <input
-                className="map-number-input"
-                type="number"
-                min={0}
-                step={1}
-                value={
-                  value?.minScaleOverride
-                    ? value?.minScaleOverride
-                    : value?.layer?.minScale
-                }
-                onChange={(e) => handleMinScaleChange(e.target.value)}
-              />
-            </Grid.Row>
-            <Grid.Row stretched>
-              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-                Max scale:
-              </h5>
-              <input
-                className="map-number-input"
-                type="number"
-                min={0}
-                step={1}
-                value={
-                  value?.maxScaleOverride
-                    ? value?.maxScaleOverride
-                    : value?.layer?.maxScale
-                }
-                onChange={(e) => handleMaxScaleChange(e.target.value)}
-              />
-            </Grid.Row>
-            <Grid.Row stretched>
-              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-                Description
-              </h5>
-            </Grid.Row>
-            <Grid.Row stretched>
-              <div className="map-layer-description-field">
-                <RichTextWidget
-                  title="description"
-                  onChange={(name, value) => {
-                    handleChangeDescription(value);
-                  }}
-                  value={value.description}
-                  placeholder="Set Description"
-                />
-              </div>
-            </Grid.Row>
-            <Grid.Row stretched>
-              <h5>Hide in legend:</h5>{' '}
-              <Checkbox
-                label="Layer will be hidden in legend"
-                checked={hide}
-                onChange={(e, { checked }) => handleHideInLegend(checked)}
-              />
-            </Grid.Row>
-          </div>
-        )}
-        {availableLayers && fields && fields.length > 0 && (
-          <div className="spaced-row">
-            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-              Query Layer
-            </h5>
-            <Grid.Row>
-              <QueryBuilder
-                fields={fields.map((fi, i) => {
-                  return { name: fi.name, label: fi.name };
-                })}
-                query={builtQuery}
-                onQueryChange={(q) => setBuiltQuery(q)}
-                enableDragAndDrop={false}
-              />
-            </Grid.Row>
-            {builtQuery && (
-              <Grid.Row style={{ display: 'flex' }}>
-                <Button
-                  type="submit"
-                  size="tiny"
-                  compact
-                  className="layer-submit-button "
-                  color={'green'}
-                  onClick={handleQueryLayer}
-                >
-                  <Icon name={aheadSVG} title="Check Url" size="20px" />
-                </Button>
-              </Grid.Row>
-            )}
-            <Grid.Row>
-              <p
-                style={{
-                  fontSize: '13px',
-                  fontWeight: 'bold',
-                  color: 'darkgray',
-                }}
-              >
-                Available Fields:
-              </p>
-            </Grid.Row>
-            {fields.map((field, id) => (
-              <p style={{ fontSize: '12px', padding: '0 5px' }}>
-                <strong>{field.alias}</strong> ({field.type})
-              </p>
-            ))}
-          </div>
-        )}
-      </Grid>
-    </div>
-  );
-};
-
-export default compose(
-  connect(
-    (state) => {
-      const pathname = flattenToAppURL(state.content.data['@id']);
-      return {
-        content: state.content.data,
-        data_query: state.connected_data_parameters.byContextPath[pathname],
-      };
-    },
-    {
-      getContent,
-    },
-  ),
-)(LayerSelectWidget);

package/src/components/widgets/LayersPanelWidget.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-import LayerSelectWidget from './LayerSelectWidget';
-
-const LayersPanelWidget = ({ data, onChange, block }) => {
-  const map_layers = React.useMemo(
-    () => data.map_layers || [],
-    [data.map_layers],
-  );
-
-  React.useEffect(() => {
-    if (!data.map_layers) {
-      onChange('map_data', {
-        ...data,
-        map_layers: [
-          {
-            map_service_url: '',
-            layer: '',
-            available_layers: [],
-            map_data: {},
-          },
-        ],
-      });
-    }
-  }, [data, block, onChange]);
-
-  const handleAddLayer = () => {
-    onChange('map_data', {
-      ...data,
-      map_layers: [
-        ...data.map_layers,
-        { map_service_url: '', layer: '', available_layers: [], map_data: {} },
-      ],
-    });
-  };
-
-  return (
-    <div>
-      {map_layers &&
-        map_layers.length > 0 &&
-        map_layers.map((layer, i) => (
-          <LayerSelectWidget
-            key={i}
-            index={i}
-            layer={layer}
-            onChange={onChange}
-            block={block}
-            data={data}
-          />
-        ))}
-
-      <Button size="tiny" onClick={handleAddLayer}>
-        Add Layer
-      </Button>
-    </div>
-  );
-};
-
-export default LayersPanelWidget;

package/src/components/widgets/SimpleColorPickerWidget.jsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
-import { Button } from 'semantic-ui-react';
-import loadable from '@loadable/component';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import checkSVG from '@plone/volto/icons/check.svg';
-
-const ReactColor = loadable.lib(() => import('react-color'));
-
-const SimpleColorPickerWidget = (props) => {
-  const { id, value, onChange, available_colors } = props;
-  const [showPicker, setShowPicker] = React.useState(false);
-
-  const [color, setColor] = React.useState(value);
-
-  const handleChangeColor = (valColor) => {
-    setColor(valColor);
-  };
-
-  const handleConfirmColor = () => {
-    onChange(id, color);
-    setShowPicker(false);
-  };
-
-  const handleAbortColor = () => {
-    setColor(value);
-    setShowPicker(false);
-  };
-
-  return (
-    <FormFieldWrapper
-      {...props}
-      draggable={false}
-      className="simple-color-picker-widget"
-    >
-      <div style={{ position: 'relative' }}>
-        <Button.Group fluid>
-          <Button
-            color={value?.hex ? value?.hex : 'black'}
-            style={{ backgroundColor: value?.hex ? value?.hex : 'black' }}
-            onClick={() => setShowPicker(true)}
-            size="small"
-            fluid
-            title="Pick color"
-          >
-            {''}
-          </Button>
-          <Button
-            compact
-            style={{ paddingLeft: '8px', paddingRight: '0px' }}
-            onClick={() => onChange(id, null)}
-          >
-            <Icon name={clearSVG} size="18px" color="red" />
-          </Button>
-          {showPicker ? (
-            <div
-              style={{
-                position: 'absolute',
-                top: '0',
-                zIndex: '77',
-                background: 'lightgrey',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: '5px',
-                borderRadius: '2px',
-              }}
-            >
-              <ReactColor>
-                {({ SketchPicker }) => {
-                  return (
-                    <SketchPicker
-                      width="180px"
-                      colors={available_colors}
-                      color={
-                        color?.rgb
-                          ? color.rgb
-                          : {
-                              r: 0,
-                              g: 0,
-                              b: 0,
-                              a: 1,
-                            }
-                      }
-                      onChangeComplete={(value) => {
-                        handleChangeColor(value);
-                      }}
-                    ></SketchPicker>
-                  );
-                }}
-              </ReactColor>
-              <Button.Group>
-                <Button
-                  size="tiny"
-                  compact
-                  title="Reset color"
-                  style={{ paddingLeft: '8px', paddingRight: '0px' }}
-                  onClick={() => handleAbortColor()}
-                >
-                  <Icon name={clearSVG} size="18px" />
-                </Button>
-                <Button
-                  onClick={() => handleConfirmColor()}
-                  color="green"
-                  compact
-                  size="tiny"
-                  title="Confirm color"
-                >
-                  <Icon name={checkSVG} size="18px" />
-                </Button>
-              </Button.Group>
-            </div>
-          ) : (
-            ''
-          )}
-        </Button.Group>
-      </div>
-    </FormFieldWrapper>
-  );
-};
-
-export default SimpleColorPickerWidget;

package/src/hocs/index.js

@@ -1,3 +0,0 @@
-import withDeviceSize from './withDeviceSize';
-
-export { withDeviceSize };

package/src/hocs/withDeviceSize.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-export default function withDeviceSize(WrappedComponent) {
-  return (props) => {
-    const [device, setDevice] = React.useState(null);
-
-    const updateScreenSize = () => {
-      if (__CLIENT__) {
-        const screenWidth =
-          window.innerWidth ||
-          document.documentElement.clientWidth ||
-          document.body.clientWidth ||
-          0;
-
-        setDevice(getDeviceConfig(screenWidth));
-      }
-    };
-
-    const getDeviceConfig = (width) => {
-      // semantic ui breakpoints
-      if (width < 320) {
-        return 'mobile';
-      } else if (width >= 320 && width < 768) {
-        return 'tablet';
-      } else if (width >= 768 && width < 992) {
-        return 'computer';
-      } else if (width >= 992 && width < 1280) {
-        return 'large';
-      } else if (width >= 1280) {
-        return 'widescreen';
-      }
-    };
-
-    React.useEffect(() => {
-      updateScreenSize();
-      window.addEventListener('resize', updateScreenSize);
-      return () => {
-        window.removeEventListener('resize', updateScreenSize);
-      };
-      /* eslint-disable-next-line */
-    }, []);
-
-    return <WrappedComponent {...props} device={device} />;
-  };
-}