@mapsight/ui 7.0.3 → 7.2.0

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/LayerSwticherContainer.jsx

@@ -1,80 +0,0 @@
-import {
-	layerIdsIntegratedSwitcherSelector,
-	makeFeatureSourceFromLayerIdSelector,
-	makeFeatureSourceIdFromLayerIdSelector,
-	makeLayerLockedInLayerSwitcherSelector,
-	makeLayerTitleSelector,
-	makeLayerVisibleSelector,
-} from "@mapsight/core/lib/map/selectors";
-import {memo, useCallback} from "react";
-
-import {translate} from "../../helpers/i18n";
-
-import GroupedLayerSwitcher from "./GroupedLayerSwitcher";
-import LayerSwitcher from "./LayerSwitcher";
-import LayerSwitcherEntry from "./LayerSwitcherEntry";
-
-// TODO das berechnen der LayerListen (abhängig von grouped und layerIdSelector) in einen Selector packen,
-//  damit diese Berechnung nur bei Änderungen am store berechnet neu wird
-// TODO für das visible eine eigenes connect, damit der Tree nicht dauernd neu berechnet wird
-
-function LayerSwitcherContainer(props) {
-	const {
-		as: T = "div",
-		baseClassName = "ms3-layer-switcher-container", // TODO: Use generic class name
-		onClose,
-		layerIdsSelector = layerIdsIntegratedSwitcherSelector,
-		setFeatureSourceIdPath,
-		grouped = false,
-		...attributes
-	} = props;
-
-	const renderLayerEntry = useCallback(
-		(id) => (
-			// TODO: memo comp instance & selectors
-			<LayerSwitcherEntry
-				key={id}
-				layerId={id}
-				titleSelector={makeLayerTitleSelector(id)}
-				lockedSelector={makeLayerLockedInLayerSwitcherSelector(id)}
-				layerVisibilitySelector={makeLayerVisibleSelector(id)}
-				featureSourceSelector={makeFeatureSourceFromLayerIdSelector(id)}
-				featureSourceIdSelector={makeFeatureSourceIdFromLayerIdSelector(
-					id,
-				)}
-				setFeatureSourceIdPath={setFeatureSourceIdPath}
-			/>
-		),
-		[setFeatureSourceIdPath],
-	);
-
-	const Switcher = grouped ? GroupedLayerSwitcher : LayerSwitcher;
-
-	return (
-		<T
-			className={`${baseClassName} ${baseClassName}--${
-				grouped ? "grouped" : "ungrouped"
-			}`}
-		>
-			<Switcher
-				layerIdsSelector={layerIdsSelector}
-				renderEntry={renderLayerEntry}
-				{...attributes}
-			/>
-
-			{onClose && (
-				<button
-					className="ms3-layer-switcher__close-button [ ms3-dialog-close-button ]"
-					type="button"
-					onClick={onClose}
-				>
-					<span className="ms3-visuallyhidden">
-						{translate("ui.map-overlay.layer-switcher.closeLayers")}
-					</span>
-				</button>
-			)}
-		</T>
-	);
-}
-
-export default memo(LayerSwitcherContainer);

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/layout/additional-container/content.jsx

@@ -1,10 +0,0 @@
-function AdditionalContent({as: T = "div", className = "", ...attrs}) {
-	return (
-		<T
-			className={`ms3-additional-container__content ${className}`}
-			{...attrs}
-		/>
-	);
-}
-
-export default AdditionalContent;

package/src/js/components/layout/additional-container/index.jsx

@@ -1,5 +0,0 @@
-function AdditionalContainer({as: T = "div", className = "", ...attrs}) {
-	return <T className={`ms3-additional-container ${className}`} {...attrs} />;
-}
-
-export default AdditionalContainer;

package/src/js/components/layout/additional-container/marginal.jsx

@@ -1,10 +0,0 @@
-function Marginal({as: T = "div", position, className = "", ...attrs}) {
-	return (
-		<T
-			className={`ms3-marginal ms3-marginal--${position} ${className}`}
-			{...attrs}
-		/>
-	);
-}
-
-export default Marginal;

package/src/js/components/layout/main-container.jsx

@@ -1,5 +0,0 @@
-function MainContainer({as: T = "div", ...props}) {
-	return <T className="ms3-main-container" {...props} />;
-}
-
-export default MainContainer;

package/src/js/components/layout/map-row.jsx

@@ -1,5 +0,0 @@
-function MapRow({as: T = "div", ...props}) {
-	return <T className="ms3-map-row" {...props} />;
-}
-
-export default MapRow;

package/src/js/components/layout/title-bar.tsx

@@ -1,25 +0,0 @@
-import {useSelector} from "react-redux";
-
-import {makeReplaceableComponent} from "../../helpers/components";
-import {titleSelector} from "../../store/selectors";
-
-function TitleBar() {
-	const title = useSelector(titleSelector);
-
-	return (
-		<div className="ms3-flex ms3-flex--row ms3-flex-no-shrink">
-			<div className="ms3-page-title ms3-flex-grow">
-				<h2>{title || ""}</h2>
-			</div>
-		</div>
-	);
-}
-
-export default makeReplaceableComponent("TitleBar", TitleBar);
-export {TitleBar as NonReplaceableTitleBar};
-
-declare module "../../helpers/components" {
-	interface ComponentProps {
-		TitleBar: unknown;
-	}
-}

package/src/js/components/layout/wrapper.jsx

@@ -1,28 +0,0 @@
-import  {memo} from "react";
-import {useSelector} from "react-redux";
-
-import {
-	isEmbeddedMapSelector,
-	mapVisible,
-	viewSelector,
-} from "../../store/selectors.ts";
-
-function AppWrapper({children, ...attributes}) {
-	const view = useSelector(viewSelector);
-	const isEmbeddedMap = useSelector(isEmbeddedMapSelector);
-	const isMapVisible = useSelector(mapVisible);
-
-	const className = `ms3-wrapper ms3-wrapper--${view} ${
-		isEmbeddedMap ? "ms3-wrapper--embedded" : ""
-	} ${isMapVisible ? "" : "ms3-wrapper--withoutmap"} ${
-		attributes.className || ""
-	}`;
-
-	return (
-		<div className={className} {...attributes}>
-			{children}
-		</div>
-	);
-}
-
-export default memo(AppWrapper);

package/src/js/components/link-share.jsx

@@ -1,78 +0,0 @@
-/* eslint-disable n/no-unsupported-features/node-builtins */
-import {useCallback} from "react";
-
-import {translate} from "../helpers/i18n";
-
-const selectInputContent = (e) =>
-	e.target.setSelectionRange(0, e.target.value.length);
-
-function LinkShare({
-	buttonLabel = translate("shareLink"),
-	title = translate("shareLink"),
-	url,
-	onFinished,
-	onError,
-}) {
-	const share = useCallback(
-		function () {
-			if (navigator?.share) {
-				navigator
-					.share({
-						title: title,
-						url: url,
-					})
-					.then(() => {
-						if (onFinished) {
-							onFinished();
-						}
-					})
-					.catch((err) => {
-						console.error(err);
-						if (onError) {
-							onError();
-						}
-					});
-			}
-		},
-		[onError, onFinished, title, url],
-	);
-
-	return (
-		<div className="ms3-link-share">
-			{navigator?.share ? (
-				<button
-					className="ms3-link-share__button"
-					type="button"
-					onClick={share}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="20"
-						height="22"
-						viewBox="0 0 20 22"
-					>
-						<path
-							fill="#000"
-							d="M10.86.91l4.42 4.42-1.33 1.32L11 3v10H9V3L6.06 6.6 4.7 5.37 9.15.9 9.13.87l.84-.84.03.03.03-.03.85.86z"
-						/>
-						<path
-							stroke="#000"
-							strokeLinecap="square"
-							strokeWidth="2"
-							d="M1 21h18M1 21V9M19 21V9M14 9h5M1 9h5"
-						/>
-					</svg>
-					<span className="ms3-visuallyhidden">{buttonLabel}</span>
-				</button>
-			) : null}
-			<input
-				className="ms3-link-share__input"
-				value={url}
-				onClick={selectInputContent}
-				readOnly={true}
-			/>
-		</div>
-	);
-}
-
-export default LinkShare;

package/src/js/components/main-panel/container.tsx

@@ -1,23 +0,0 @@
-import {useRef} from "react";
-
-import useMapsightPanel from "../../hooks/useMapsightPanel";
-import {useMainPanelContext} from "./context";
-
-function MainPanelContainer({children}) {
-	const {panelPosition, collapsed} = useMainPanelContext();
-
-	const containerRef = useRef<HTMLDivElement>(null);
-	useMapsightPanel(containerRef, panelPosition, collapsed);
-
-	const containerClasses = `ms3-panel-container ms3-panel-container--docked-${panelPosition} ${
-		collapsed ? "ms3-panel-container--empty" : ""
-	}`;
-
-	return (
-		<div className={containerClasses} ref={containerRef}>
-			{children}
-		</div>
-	);
-}
-
-export default MainPanelContainer;

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/main-panel/index.tsx

@@ -1,46 +0,0 @@
-import type {ReactNode} from "react";
-import {useRef} from "react";
-
-import FeatureList from "../feature-list";
-import FeatureSelectionInfo from "../feature-selection-info";
-import {useMainPanelContext} from "./context";
-
-function MainPanel() {
-	const {contentType, panelPosition, collapsed, feature} =
-		useMainPanelContext();
-
-	// we keep using the old content stored in contentRef.current if we do not have any new content
-	// to allow for a smooth transition when collapsing the container
-	const contentRef = useRef<ReactNode>(null);
-	const isShowingSelectionInfoRef = useRef(false);
-
-	if (contentType) {
-		isShowingSelectionInfoRef.current = contentType === "selectionInfo";
-		contentRef.current = (
-			<>
-				<FeatureList enableKeyboardControl={!collapsed} />
-
-				{isShowingSelectionInfoRef.current && (
-					<FeatureSelectionInfo
-						feature={feature}
-						enableKeyboardControl={!collapsed}
-					/>
-				)}
-			</>
-		);
-	}
-
-	return (
-		<div
-			className={`ms3-panel ms3-panel--docked-${panelPosition} ${
-				collapsed ? "ms3-panel--empty" : ""
-			} ${
-				isShowingSelectionInfoRef.current ? "ms3-panel--hide-list" : ""
-			}`}
-		>
-			<div className="ms3-panel__inner">{contentRef.current}</div>
-		</div>
-	);
-}
-
-export default MainPanel;

package/src/js/components/main-panel/list-toggle-button.jsx

@@ -1,43 +0,0 @@
-import {useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {translate} from "../../helpers/i18n";
-import {toggleUserPreferenceListVisible} from "../../store/actions.ts";
-
-import {userPreferenceListVisibleSelector} from "../../store/selectors.ts";
-
-import {useMainPanelContext} from "./context";
-
-function MainPanelListToggleButton() {
-	const {collapsible, contentType} = useMainPanelContext();
-	const dispatch = useDispatch();
-	const active = useSelector(userPreferenceListVisibleSelector);
-	const handleClick = useCallback(() => {
-		dispatch(toggleUserPreferenceListVisible());
-	}, [dispatch]);
-
-	if (collapsible && contentType === "list") {
-		return (
-			<button
-				className={`ms3-button [ ms3-list-toggle-button ${
-					active ? "ms3-list-toggle-button--active" : ""
-				} ]`}
-				type="button"
-				role="switch"
-				aria-checked={active}
-				onClick={handleClick}
-			>
-				<span className="ms3-visuallyhidden">
-					{translate(
-						active
-							? "ui.main-panel.list-toggle.close"
-							: "ui.main-panel.list-toggle.open",
-					)}
-				</span>
-			</button>
-		);
-	}
-
-	return null;
-}
-
-export default MainPanelListToggleButton;

package/src/js/components/map-overlay/area.jsx

@@ -1,17 +0,0 @@
-/**
- * @param {object} props props
- * @param {"top-left" | "top-right" | "bottom-right" | "bottom-left"} props.position position
- * @param {React.ReactChildren} props.children children
- * @returns {React.ReactElement} element
- */
-function MapOverlayArea({position, children}) {
-	return (
-		<div
-			className={`ms3-map-overlay__area ms3-map-overlay__area--${position}`}
-		>
-			{children}
-		</div>
-	);
-}
-
-export default MapOverlayArea;

package/src/js/components/map-overlay/attribution-entries.tsx

@@ -1,33 +0,0 @@
-import {memo} from "react";
-
-import type {LayerAttributions} from "@mapsight/core/lib/map/selectors";
-
-function AttributionEntries({
-	children,
-	attributions,
-}: {
-	children?: React.ReactNode;
-	attributions?: LayerAttributions;
-}) {
-	return (
-		<div className="ms3-attribution">
-			<ul className="ms3-attribution__entries">
-				{attributions &&
-					Object.entries(attributions).map(([key, attr]) => (
-						<li
-							className="ms3-attribution__entry"
-							key={key}
-							dangerouslySetInnerHTML={{__html: attr}}
-						/>
-					))}
-				{children && (
-					<li className="ms3-attribution__entry ms3-attribution__entry--additional">
-						{children}
-					</li>
-				)}
-			</ul>
-		</div>
-	);
-}
-
-export default memo(AttributionEntries);

package/src/js/components/map-overlay/attribution.tsx

@@ -1,25 +0,0 @@
-import type {PropsWithChildren} from "react";
-import {useSelector} from "react-redux";
-
-import {visibleLayerAttributionsSelector} from "@mapsight/core/lib/map/selectors";
-import type {MapState} from "@mapsight/core/lib/map/types";
-import type {State} from "@mapsight/core/types";
-
-import {MAP} from "../../config/constants/controllers";
-import AttributionEntries from "./attribution-entries";
-
-function selectVisibleLayerAttributions(state: State) {
-	return visibleLayerAttributionsSelector(state[MAP] as MapState);
-}
-
-function Attribution({children}: PropsWithChildren) {
-	const attributions = useSelector(selectVisibleLayerAttributions);
-
-	return (
-		<AttributionEntries attributions={attributions}>
-			{children}
-		</AttributionEntries>
-	);
-}
-
-export default Attribution;