@mapsight/ui 7.1.0 → 7.2.0

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

@@ -1,152 +0,0 @@
-import {connect} from "react-redux";
-
-import type {Dispatch} from "@reduxjs/toolkit";
-
-import type {ActionPath} from "@mapsight/core/lib/base/actions";
-import {set as makeSetAction} from "@mapsight/core/lib/base/actions";
-import {getFeatureSourceStatus} from "@mapsight/core/lib/feature-sources/selectors";
-import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
-import {setLayerVisibility} from "@mapsight/core/lib/map/actions";
-import type {MapState} from "@mapsight/core/lib/map/types";
-import type {State} from "@mapsight/core/types";
-
-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,
-}: {
-	locked: boolean;
-	visibility: boolean;
-	featureSourceId: string | undefined;
-	currentlySetFeatureSourceId: string | undefined;
-	dispatch: Dispatch;
-	layerId: string;
-	setFeatureSourceIdPath?: ActionPath | null;
-}) {
-	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() {
-				if (featureSourceId) {
-					dispatch(
-						makeSetAction(setFeatureSourceIdPath, featureSourceId),
-					);
-				}
-				dispatch(setLayerVisibility(MAP, layerId, true));
-			},
-		};
-	}
-
-	return {
-		active: visibility,
-		toggleActive: function toggleActive() {
-			if (!locked) {
-				dispatch(setLayerVisibility(MAP, layerId, !visibility));
-			}
-		},
-	};
-}
-
-export type LayerSwitcherEntryProps = {
-	layerId: string;
-	titleSelector: (state: MapState) => string;
-	lockedSelector: (state: MapState) => boolean;
-	layerVisibilitySelector: (state: MapState) => boolean;
-	featureSourceSelector: (
-		mapState: MapState,
-		state: State,
-	) => FeatureSourceState | null;
-	featureSourceIdSelector: (state: MapState) => string | undefined;
-	setFeatureSourceIdPath?: ActionPath | null;
-};
-
-const mapStateToProps = (
-	state: State,
-	{
-		titleSelector,
-		lockedSelector,
-		layerVisibilitySelector,
-		featureSourceSelector,
-		featureSourceIdSelector,
-		setFeatureSourceIdPath,
-	}: LayerSwitcherEntryProps,
-) => {
-	const mapState = state[MAP] as MapState;
-
-	return {
-		title: titleSelector(mapState),
-		locked: lockedSelector(mapState),
-		visibility: layerVisibilitySelector(mapState),
-		featureSource: featureSourceSelector(mapState, state),
-		featureSourceId: featureSourceIdSelector(mapState),
-		currentlySetFeatureSourceId: Array.isArray(setFeatureSourceIdPath)
-			? (getPath(state, setFeatureSourceIdPath) as string | undefined)
-			: undefined,
-	};
-};
-
-const LayerSwitcherEntry = connect(
-	mapStateToProps,
-	null,
-	// mergeProps:
-	(
-		stateProps,
-		{dispatch},
-		{
-			// 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: _1,
-			titleSelector: _2,
-			layerVisibilitySelector: _3,
-			featureSourceSelector: _4,
-			featureSourceIdSelector: _5,
-
-			...attributes
-		},
-	) => ({
-		title: stateProps.title,
-		status: stateProps.featureSource
-			? getFeatureSourceStatus(stateProps.featureSource)
-			: undefined,
-		locked: stateProps.locked,
-		...getActiveProps({
-			visibility: stateProps.visibility,
-			featureSourceId: stateProps.featureSourceId ?? "",
-			currentlySetFeatureSourceId: stateProps.currentlySetFeatureSourceId,
-			locked: stateProps.locked,
-			dispatch,
-			layerId,
-			setFeatureSourceIdPath,
-		}),
-		...attributes,
-	}),
-)(SwitcherEntry);
-
-export default LayerSwitcherEntry;

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

@@ -1,42 +0,0 @@
-import {connect} from "react-redux";
-
-import type {Selector} from "@mapsight/core/types";
-
-import {FEATURE_LIST} from "../../config/constants/controllers";
-import type {RootStateSlice} from "../../store/selectors";
-import {layerSwitcherConfigInternalSelector} from "../../store/selectors";
-import type {LayerSwitcherConfigState} from "../../types";
-import LayerSwitcherContainer from "./LayerSwitcherContainer";
-
-const TRUE_SET_FEATURE_SOURCE_PATH = [FEATURE_LIST, "featureSource"] as const;
-
-type Props = {
-	configSelector?: Selector<LayerSwitcherConfigState | undefined>;
-};
-
-export default connect(
-	(
-		state: RootStateSlice,
-		{configSelector = layerSwitcherConfigInternalSelector}: Props,
-	) => {
-		const setFeatureSourceId = configSelector(state)?.setFeatureSourceId;
-
-		return {
-			layerIdsSelector: configSelector(state)?.layerIdsSelector,
-			grouped: configSelector(state)?.grouped,
-			setFeatureSourceIdPath:
-				setFeatureSourceId === true
-					? TRUE_SET_FEATURE_SOURCE_PATH
-					: 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";
-
-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.tsx

@@ -1,71 +0,0 @@
-import type {PropsWithChildren} from "react";
-import {createContext, useContext, useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import {createMainPanelContentTypeSelector} from "../../store/selectors";
-import type {MainPanelContextOptions, MainPanelContextValue} from "../../types";
-
-const MainPanelContext = createContext<MainPanelContextValue>({
-	showSelectionInfo: false,
-	showList: false,
-	collapsible: false,
-	panelPosition: "left",
-
-	feature: null,
-	contentType: null,
-	collapsed: false,
-});
-MainPanelContext.displayName = "MainPanelContext";
-
-export function useMainPanelContext() {
-	return useContext(MainPanelContext);
-}
-
-type MainPanelStateProps = Pick<
-	MainPanelContextOptions,
-	"showSelectionInfo" | "showList" | "collapsible"
->;
-
-function useMainPanelState({
-	showSelectionInfo,
-	showList,
-	collapsible,
-}: MainPanelStateProps) {
-	const selector = useMemo(
-		() =>
-			createMainPanelContentTypeSelector({
-				showSelectionInfo: showSelectionInfo,
-				showList: showList,
-				collapsible: collapsible,
-			}),
-		[showSelectionInfo, showList, collapsible],
-	);
-	return useSelector(selector);
-}
-
-type MainPanelContextProps = PropsWithChildren<
-	Partial<MainPanelContextOptions>
->;
-
-export function MainPanelContextProvider({
-	showSelectionInfo = false,
-	showList = false,
-	collapsible = false,
-	panelPosition = "left",
-	children,
-}: MainPanelContextProps) {
-	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";
-
-import {userPreferenceListVisibleSelector} from "../../store/selectors";
-
-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 ?? undefined}>
-			{children}
-		</AttributionEntries>
-	);
-}
-
-export default Attribution;

package/src/js/components/map-overlay/combined-buttons.jsx

@@ -1,5 +0,0 @@
-function CombinedButtons({children}) {
-	return <div className="ms3-map-overlay-combined-buttons">{children}</div>;
-}
-
-export default CombinedButtons;

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

@@ -1,5 +0,0 @@
-function MapOverlay({children}) {
-	return <div className="ms3-map-overlay">{children}</div>;
-}
-
-export default MapOverlay;