@mapsight/ui 7.0.2 → 7.1.0

package/src/js/types.ts

@@ -1,13 +1,26 @@
-import type {Store, StoreEnhancer} from "redux";
+import type {ElementType, HTMLAttributes} from "react";
+
+import type {
+	AnyAction,
+	Reducer,
+	Store,
+	StoreEnhancer,
+	ThunkAction,
+} from "@reduxjs/toolkit";
+import type {BatchAction} from "redux-batched-actions";
 
 import type {BaseController} from "@mapsight/core/lib/base/controller";
+import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
 import type {EnhancedStore, Feature, State} from "@mapsight/core/types";
 
 import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
 
-import type {MapsightUiPlacesData} from "./components/feature-list-sorting/feature-list-sorting.tsx";
-import type {View} from "./config/constants/app.ts";
+import type {MapsightUiPlacesData} from "./components/feature-list-sorting/feature-list-sorting";
+import type {View} from "./config/constants/app";
+import type {TAG_FILTER, TIME_FILTER} from "./config/constants/controllers";
 import type {MapsightUiComponents} from "./helpers/components";
+import type {FETCH_JSON_STATUS, FETCH_TEXT_STATUS} from "./store/actions";
+import type {RootStateSlice} from "./store/selectors";
 
 // helper type https://stackoverflow.com/a/61132308
 export type DeepPartial<T> = T extends object
@@ -16,7 +29,7 @@ export type DeepPartial<T> = T extends object
 		}
 	: T;
 
-export type MapsightUiStore = EnhancedStore<{app: UiState}>;
+export type MapsightUiStore = EnhancedStore<RootStateSlice>;
 
 /**
  * We keep a context object for each mapsight ui instance holding all the information
@@ -138,16 +151,39 @@ export type MapsightUiAsyncRenderFunction<R> = (
 
 export type MapsightUiView = View;
 
+export type LayerSwitcherConfigState = {
+	setFeatureSourceId: string[] | true | undefined;
+	grouped: boolean;
+	layerIdsSelector: (state: object) => string[];
+};
+
+export type FetchTextState = {
+	url: string | null;
+	status: FETCH_TEXT_STATUS;
+	data: string | null;
+	error: string | null;
+	lastUpdate: number | null;
+};
+
+export type FetchJsonState<TData = unknown> = {
+	url: string | null;
+	status: FETCH_JSON_STATUS;
+	data: TData | null;
+	error: string | null;
+	lastUpdate: number | null;
+};
+
+export type RegionState = {
+	label: string;
+	bounds: [number, number, number, number];
+};
+
+export type RegionsState = Record<string, RegionState>;
+
 export type FullUiState = {
 	isFullscreen: boolean;
 
-	regions: Record<
-		string,
-		{
-			label: string;
-			bounds: [number, number, number, number];
-		}
-	>;
+	regions: RegionsState;
 	selectedRegion: string;
 
 	places: MapsightUiPlacesData;
@@ -164,12 +200,8 @@ export type FullUiState = {
 
 	searchInMap: boolean;
 	searchQuery: string;
-	searchResult: {
-		url: string;
+	searchResult: FeatureSourceState & {
 		status: "error" | "loading" | "success" | null;
-		data: unknown;
-		error: unknown;
-		lastUpdate: number | null;
 	};
 	searchResultSelectionFeatures: MapsightUiFeature[];
 
@@ -227,14 +259,8 @@ export type FullUiState = {
 			internal: boolean;
 			external: boolean;
 		};
-		internal: {
-			grouped: boolean;
-			layerIdsSelector: (state: object) => string[];
-		};
-		external: {
-			grouped: boolean;
-			layerIdsSelector: (state: object) => string[];
-		};
+		internal: LayerSwitcherConfigState;
+		external: LayerSwitcherConfigState;
 	};
 	tagSwitcher: {
 		show: boolean;
@@ -246,10 +272,10 @@ export type FullUiState = {
 	map: {
 		show: boolean;
 	};
-	timeFilter: {
+	[TIME_FILTER]: {
 		show: boolean;
 	};
-	tagFilter: {
+	[TAG_FILTER]: {
 		show: boolean;
 		featureSourceId: string;
 	};
@@ -275,10 +301,11 @@ export type MapsightUiReHydrationState = {
 };
 
 // TODO: Move these to @mapsight/core types
-export type MapsightCoreAction = import("redux").AnyAction &
+export type MapsightCoreAction = AnyAction &
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	import("redux-thunk").ThunkAction<any, any, any, any> &
-	import("redux-batched-actions").BatchAction;
+	ThunkAction<any, any, any, any> &
+	BatchAction;
+
 export type MapsightCoreState =
 	| string
 	| number
@@ -287,13 +314,13 @@ export type MapsightCoreState =
 export type MapsightCoreReducer<
 	T extends MapsightCoreState = MapsightCoreState,
 	U extends MapsightCoreAction = MapsightCoreAction,
-> = import("redux").Reducer<T, U>;
+> = Reducer<T, U>;
 
 export type MapsightUiAppReducer = MapsightCoreReducer<UiState>;
 
 export type CreateOptions = {
 	// store
-	storeEnhancer?: import("redux").StoreEnhancer;
+	storeEnhancer?: StoreEnhancer;
 	reducers?: {
 		[x: string]: undefined | MapsightCoreReducer;
 		app?: MapsightUiAppReducer;
@@ -302,10 +329,7 @@ export type CreateOptions = {
 
 	// functionality
 	plugins?: PluginDefinition[];
-	controllers?: Record<
-		string,
-		import("@mapsight/core/lib/base/controller").BaseController
-	>;
+	controllers?: Record<string, BaseController>;
 
 	// rendering
 	components?: MapsightUiComponents;
@@ -364,14 +388,14 @@ export type MainPanelContextState = {
 export type MainPanelContextValue = MainPanelContextOptions &
 	MainPanelContextState;
 
-export type FeatureListProps<T extends import("react").ElementType = "div"> = {
+export type FeatureListProps<T extends ElementType = "div"> = {
 	additionalClasses?: string | null;
 	as?: T;
-	attributes?: import("react").HTMLAttributes<T>;
-	headerAs?: null | import("react").ElementType;
-	contentAs?: null | import("react").ElementType;
-	footerAs?: null | import("react").ElementType;
-	itemAs?: import("react").ElementType;
+	attributes?: HTMLAttributes<T>;
+	headerAs?: null | ElementType;
+	contentAs?: null | ElementType;
+	footerAs?: null | ElementType;
+	itemAs?: ElementType;
 	enableKeyboardControl?: boolean;
 	autoloadFeatureSource?: boolean;
 };

package/dist/components/layer-switcher/LayerSwticherContainer.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("react").MemoExoticComponent<typeof LayerSwitcherContainer>;
-export default _default;
-declare function LayerSwitcherContainer(props: any): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LayerSwticherContainer.d.ts.map

package/dist/components/layer-switcher/LayerSwticherContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayerSwticherContainer.d.ts","sourceRoot":"","sources":["../../../src/js/components/layer-switcher/LayerSwticherContainer.jsx"],"names":[],"mappings":";;AAoBA,6FAyDC"}

package/dist/components/layer-switcher/LayerSwticherContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayerSwticherContainer.js","sourceRoot":"","sources":["../../../src/js/components/layer-switcher/LayerSwticherContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,EACN,kCAAkC,EAClC,oCAAoC,EACpC,sCAAsC,EACtC,sCAAsC,EACtC,sBAAsB,EACtB,wBAAwB,GACxB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AAExC,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAE7C,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,0GAA0G;AAC1G,yEAAyE;AACzE,6FAA6F;AAE7F,SAAS,sBAAsB,CAAC,KAAK;IACpC,MAAM,EACL,EAAE,EAAE,CAAC,GAAG,KAAK,EACb,aAAa,GAAG,8BAA8B,EAAE,+BAA+B;IAC/E,OAAO,EACP,gBAAgB,GAAG,kCAAkC,EACrD,sBAAsB,EACtB,OAAO,GAAG,KAAK,EACf,GAAG,UAAU,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,WAAW,CACnC,CAAC,EAAE,EAAE,EAAE,CAAC,CAEP,KAAC,kBAAkB,IAElB,OAAO,EAAE,EAAE,EACX,aAAa,EAAE,sBAAsB,CAAC,EAAE,CAAC,EACzC,cAAc,EAAE,sCAAsC,CAAC,EAAE,CAAC,EAC1D,uBAAuB,EAAE,wBAAwB,CAAC,EAAE,CAAC,EACrD,qBAAqB,EAAE,oCAAoC,CAAC,EAAE,CAAC,EAC/D,uBAAuB,EAAE,sCAAsC,CAC9D,EAAE,CACF,EACD,sBAAsB,EAAE,sBAAsB,IATzC,EAAE,CAUN,CACF,EACD,CAAC,sBAAsB,CAAC,CACxB,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC;IAEhE,OAAO,CACN,MAAC,CAAC,IACD,SAAS,EAAE,GAAG,aAAa,IAAI,aAAa,KAC3C,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WACvB,EAAE,aAEF,KAAC,QAAQ,IACR,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,gBAAgB,KACzB,UAAU,GACb,EAED,OAAO,IAAI,CACX,iBACC,SAAS,EAAC,8DAA8D,EACxE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,YAEhB,eAAM,SAAS,EAAC,oBAAoB,YAClC,SAAS,CAAC,2CAA2C,CAAC,GACjD,GACC,CACT,IACE,CACJ,CAAC;AACH,CAAC;AAED,eAAe,IAAI,CAAC,sBAAsB,CAAC,CAAC"}

package/src/js/components/layer-switcher/LayerSwitcherEntry.js

@@ -1,132 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {set as makeSetAction} from "@mapsight/core/lib/base/actions";
-import {getFeatureSourceStatus} from "@mapsight/core/lib/feature-sources/selectors";
-import {setLayerVisibility} from "@mapsight/core/lib/map/actions";
-
-import getPath from "@mapsight/lib-js/object/getPath";
-
-import {MAP} from "../../config/constants/controllers";
-import SwitcherEntry from "../switcher/SwitcherEntry";
-
-function getActiveProps({
-	setFeatureSourceIdPath,
-	currentlySetFeatureSourceId,
-	featureSourceId,
-	dispatch,
-	layerId,
-	visibility,
-	locked,
-}) {
-	if (setFeatureSourceIdPath) {
-		const isCurrentFeatureSource =
-			currentlySetFeatureSourceId === featureSourceId;
-
-		// this will match in intermediate state; use batching?
-		//if (!visibility && isFeatureSourceCurrent) {
-		//	throw new Error('illegal state');
-		//}
-
-		return {
-			activeCheckbox: !!visibility,
-			activeText: isCurrentFeatureSource,
-			toggleActiveCheckbox: function toggleActiveCheckbox() {
-				dispatch(setLayerVisibility(MAP, layerId, !visibility));
-				if (isCurrentFeatureSource) {
-					dispatch(makeSetAction(setFeatureSourceIdPath, undefined));
-				}
-			},
-			toggleActiveText: function toggleActiveText() {
-				dispatch(
-					makeSetAction(setFeatureSourceIdPath, featureSourceId),
-				);
-				dispatch(setLayerVisibility(MAP, layerId, true));
-			},
-		};
-	}
-
-	return {
-		active: !!visibility,
-		toggleActive: function toggleActive() {
-			if (!locked) {
-				dispatch(setLayerVisibility(MAP, layerId, !visibility));
-			}
-		},
-	};
-}
-
-const LayerSwitcherEntry = connect(
-	// mapStateToProps:
-	(
-		state,
-		{
-			titleSelector,
-			lockedSelector,
-			layerVisibilitySelector,
-			featureSourceSelector,
-			featureSourceIdSelector,
-			setFeatureSourceIdPath,
-		},
-	) =>
-		createStructuredSelector({
-			title: (myState) => titleSelector(myState[MAP]),
-			locked: (myState) => lockedSelector(myState[MAP]),
-			visibility: (myState) => layerVisibilitySelector(myState[MAP]),
-			featureSource: (myState) =>
-				featureSourceSelector(myState[MAP], myState),
-			featureSourceId: (myState) =>
-				featureSourceIdSelector(myState[MAP], myState),
-			currentlySetFeatureSourceId: (myState) =>
-				Array.isArray(setFeatureSourceIdPath) &&
-				getPath(myState, setFeatureSourceIdPath),
-		}),
-	// mapDispatchToProps:
-	null,
-	// mergeProps:
-	(
-		// state props
-		{
-			visibility,
-			title,
-			locked,
-			featureSource,
-			featureSourceId,
-			currentlySetFeatureSourceId,
-		},
-		// dispatch props
-		{dispatch},
-		// own props
-		{
-			// used for active props:
-			layerId,
-			setFeatureSourceIdPath,
-
-			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
-			lockedSelector: _lockedSelector,
-			titleSelector: _titleSelector,
-			layerVisibilitySelector: _layerVisibilitySelector,
-			featureSourceSelector: _featureSourceSelector,
-			featureSourceIdSelector: _featureSourceIdSelector,
-
-			...attributes
-		},
-	) => ({
-		title: title,
-		status: getFeatureSourceStatus(featureSource),
-		locked: locked,
-		...getActiveProps({
-			visibility: visibility,
-			featureSourceId: featureSourceId,
-			currentlySetFeatureSourceId: currentlySetFeatureSourceId,
-			locked: locked,
-			dispatch: dispatch,
-			layerId: layerId,
-			setFeatureSourceIdPath: setFeatureSourceIdPath,
-		}),
-		...attributes,
-	}),
-)(SwitcherEntry);
-
-export default LayerSwitcherEntry;

package/src/js/components/layer-switcher/index.js

@@ -1,47 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {FEATURE_LIST} from "../../config/constants/controllers";
-import {layerSwitcherConfigInternalSelector} from "../../store/selectors.ts";
-import LayerSwitcherContainer from "./LayerSwticherContainer";
-
-const TRUE_SET_FEATURE_SOURCE_PATH = [FEATURE_LIST, "featureSource"];
-
-/**
- * @param {object} props properties
- * @param {Function} props.onClose callback when closed
- * @param {(state: object) => object} [props.configSelector] config selector, default = layerSwitcherConfigInternalSelector
- */
-export default connect(
-	createStructuredSelector({
-		layerIdsSelector: (
-			state,
-			{configSelector = layerSwitcherConfigInternalSelector},
-		) => configSelector(state).layerIdsSelector,
-		grouped: (
-			state,
-			{configSelector = layerSwitcherConfigInternalSelector},
-		) => configSelector(state).grouped,
-		setFeatureSourceIdPath: function setFeatureSourceIdPath(
-			state,
-			{configSelector = layerSwitcherConfigInternalSelector},
-		) {
-			const config = configSelector(state);
-			if (config.setFeatureSourceId === true) {
-				return TRUE_SET_FEATURE_SOURCE_PATH;
-			} else {
-				return config.setFeatureSourceId;
-			}
-		},
-	}),
-	null,
-	(
-		stateProps,
-		dispatchProps,
-		{configSelector: _configSelector, ...ownProps},
-	) => ({
-		...ownProps,
-		...stateProps,
-	}),
-)(LayerSwitcherContainer);

package/src/js/components/main-panel/context.jsx

@@ -1,62 +0,0 @@
-import {createContext, useContext, useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import {createMainPanelContentTypeSelector} from "../../store/selectors.ts";
-
-/** @type {import('react').Context<import('../../types').MainPanelContextValue>} */
-const MainPanelContext = createContext(
-	/** @type {import('../../types').MainPanelContextValue} */ {
-		showSelectionInfo: false,
-		showList: false,
-		collapsible: false,
-		panelPosition: "left",
-
-		feature: null,
-		contentType: null,
-		collapsed: false,
-	},
-);
-MainPanelContext.displayName = "MainPanelContext";
-
-/** @returns {import('../../types').MainPanelContextValue} main panel context */
-export function useMainPanelContext() {
-	return useContext(MainPanelContext);
-}
-
-/**
- * @param {Pick<import('../../types').MainPanelContextOptions, 'showSelectionInfo'| 'showList' | 'collapsible'>} options main panel options
- * @returns {import('../../types').MainPanelContextState} main panel state
- */
-function useMainPanelState({showSelectionInfo, showList, collapsible}) {
-	const selector = useMemo(
-		() =>
-			createMainPanelContentTypeSelector({
-				showSelectionInfo: showSelectionInfo,
-				showList: showList,
-				collapsible: collapsible,
-			}),
-		[showSelectionInfo, showList, collapsible],
-	);
-	return useSelector(selector);
-}
-
-export function MainPanelContextProvider(
-	/** @type {import('../../types').MainPanelContextOptions & {children: import('react').ReactChildren}} */ {
-		showSelectionInfo = false,
-		showList = false,
-		collapsible = false,
-		panelPosition = "left",
-		children,
-	},
-) {
-	const options = {
-		showSelectionInfo: showSelectionInfo,
-		showList: showList,
-		collapsible: collapsible,
-		panelPosition: panelPosition,
-	};
-	const state = useMainPanelState(options);
-	const value = {...options, ...state};
-
-	return <MainPanelContext.Provider value={value}>{children}</MainPanelContext.Provider>;
-}

package/src/js/components/map-synced-interlay/index.js

@@ -1,17 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {mapSizeSelector} from "@mapsight/core/lib/map/selectors";
-
-import {MAP} from "../../config/constants/controllers";
-import {viewSelector} from "../../store/selectors.ts";
-import MapSyncedInterlay from "./map-synced-interlay";
-
-export default connect(
-	createStructuredSelector({
-		view: viewSelector,
-		size: (state) => mapSizeSelector(state[MAP]),
-		//pendingUpdateSize: state => state[MAP].pendingUpdateSize || false,
-	}),
-)(MapSyncedInterlay);

package/src/js/components/map.jsx

@@ -1,37 +0,0 @@
-import {memo, useEffect, useRef} from "react";
-import {useStore} from "react-redux";
-import {MAP} from "../config/constants/controllers";
-
-import {translate} from "../helpers/i18n";
-import useMountable from "../hooks/useMountable";
-
-function MapsightMap({
-	controllerName = MAP,
-	enableKeyboardControl = true,
-	...attributes
-}) {
-	const store = useStore();
-	const ref = useRef();
-
-	const handleMount = useMountable(store.getController(controllerName));
-	useEffect(() => {
-		handleMount(ref.current);
-	}, [ref, handleMount]);
-
-	if (enableKeyboardControl) {
-		attributes.tabIndex = 0;
-	}
-
-	return (
-		<div className="ms3-map-target" ref={ref} {...attributes}>
-			<span className="ms3-visuallyhidden">
-				{translate("ui.map.visuallyhidden")}
-			</span>
-			<div className="ol-viewport">
-				<canvas className="ol-unselectable" />
-			</div>
-		</div>
-	);
-}
-
-export default memo(MapsightMap);

package/src/js/components/tag-switcher/createTagSwitcherHeader.js

@@ -1,34 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {setTagGroupVisible} from "../../store/actions.ts";
-import {createTagGroupVisibleSelector} from "../../store/selectors.ts";
-import SwitcherHeader from "../switcher/SwitcherHeader";
-
-export default function createTagSwitcherHeader(featureSourceId, tagGroup) {
-	return connect(
-		createStructuredSelector({
-			visibility: createTagGroupVisibleSelector(
-				featureSourceId,
-				tagGroup,
-			),
-		}),
-		null,
-		({visibility}, {dispatch}, {toggleable = false, ...ownProps}) => ({
-			label: tagGroup,
-			active: !toggleable || visibility,
-			toggleActive: toggleable
-				? () =>
-						dispatch(
-							setTagGroupVisible(
-								featureSourceId,
-								tagGroup,
-								!visibility,
-							),
-						)
-				: undefined,
-			...ownProps,
-		}),
-	)(SwitcherHeader);
-}

package/src/js/components/tag-switcher/index.js

@@ -1,20 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {
-	tagSwitcherFeatureSourceIdSelector,
-	tagSwitcherSortTags,
-	tagSwitcherTagsSelector,
-	tagSwitcherToggleableGroups,
-} from "../../store/selectors.ts";
-import TagSwitcher from "./TagSwitcher";
-
-export default connect(
-	createStructuredSelector({
-		featureSourceId: tagSwitcherFeatureSourceIdSelector,
-		groupedTagData: tagSwitcherTagsSelector,
-		toggleableGroups: tagSwitcherToggleableGroups,
-		sortTags: tagSwitcherSortTags,
-	}),
-)(TagSwitcher);

package/src/js/global.d.ts

@@ -1,7 +0,0 @@
-type Process = {
-	env: {
-		NN_JS_LOG_LEVEL?: string;
-	};
-};
-
-declare const process: Process;