@mapsight/ui 7.1.0 → 7.2.1

package/src/js/components/feature-details-content/feature-details-content-inner.tsx

@@ -1,116 +0,0 @@
-import type {PropsWithChildren, ReactNode} from "react";
-import {memo, useCallback, useContext, useEffect, useRef} from "react";
-
-import {ComponentsContext} from "../../helpers/components";
-import getFeatureProperty from "../../helpers/get-feature-property";
-import {translate} from "../../helpers/i18n";
-import type {MapsightUiFeature} from "../../types";
-
-export type Props = PropsWithChildren<{
-	feature: MapsightUiFeature;
-	url?: string;
-	hasError: boolean;
-	html?: string;
-	handleContentChange?: (element: HTMLElement | null) => void;
-}>;
-
-function FeatureDetailsContentInner({
-	feature,
-	url,
-	hasError,
-	html,
-	handleContentChange,
-}: Props) {
-	const comps = useContext(ComponentsContext);
-
-	// NOTE(PG): using useCallback in addition to useRef alone so we actually get called when node changes
-	const containerRef = useRef<HTMLElement | null>(null);
-	const containerRefSetter = useCallback(
-		(element: HTMLElement | null) => {
-			containerRef.current = element;
-			if (element && handleContentChange) {
-				handleContentChange(element);
-			}
-		},
-		[handleContentChange],
-	);
-
-	const desc = getFeatureProperty(feature, "description");
-
-	// NOTE(PG): Using useEffect to detect content changes (here: props), maybe we could move this up into the parent comp?
-	useEffect(() => {
-		handleContentChange?.(containerRef.current);
-	}, [handleContentChange, html, hasError, desc]);
-
-	let content: ReactNode = null;
-	if (url) {
-		if (html) {
-			// success
-			content = (
-				<div
-					className="ms3-feature-details-content ms3-feature-details-content--html"
-					dangerouslySetInnerHTML={{__html: html}}
-					ref={containerRefSetter}
-				/>
-			);
-		} else if (hasError) {
-			// error
-			content = (
-				<div
-					className="ms3-feature-details-content ms3-feature-details-content--error"
-					ref={containerRefSetter}
-				>
-					{translate("ui.feature-details.content-inner.error")}
-					<br />
-
-					<a href={url}>
-						{translate("ui.feature-details.content-inner.gotoPage")}
-					</a>
-				</div>
-			);
-		} else {
-			// loading
-			content = (
-				<div
-					className="ms3-feature-details-content ms3-feature-details-content--loading"
-					ref={containerRefSetter}
-				>
-					{translate("ui.feature-details.content-inner.loading")}
-				</div>
-			);
-		}
-	} else {
-		if (desc) {
-			content = (
-				<div
-					className="ms3-feature-details-content ms3-feature-details-content--description"
-					dangerouslySetInnerHTML={{__html: desc}}
-					ref={containerRefSetter}
-				/>
-			);
-		}
-	}
-
-	if (comps.FeatureDetailsContent) {
-		content = (
-			<comps.FeatureDetailsContent
-				feature={feature}
-				url={url}
-				hasError={hasError}
-				html={html}
-			>
-				{content}
-			</comps.FeatureDetailsContent>
-		);
-	}
-
-	return content;
-}
-
-export default memo(FeatureDetailsContentInner);
-
-declare module "../../helpers/components" {
-	interface ComponentProps {
-		FeatureDetailsContent: Props;
-	}
-}

package/src/js/components/feature-details-content/feature-details-content.jsx

@@ -1,185 +0,0 @@
-import {selectExclusively} from "@mapsight/core/lib/feature-selections/actions";
-import {
-	memo,
-	useCallback,
-	useEffect,
-	useReducer,
-	useRef,
-	useState,
-} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {VIEW_MAP_ONLY, VIEW_MOBILE} from "../../config/constants/app";
-import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-
-import getFeatureProperty from "../../helpers/get-feature-property";
-
-import {setView} from "../../store/actions";
-import {viewSelector} from "../../store/selectors";
-
-import {
-	APP_EVENT_PARTIAL_CONTENT_CHANGED,
-	useAppChannelDispatchEvent,
-} from "../helping/app-channel";
-
-import FeatureDetailsContentInner from "./feature-details-content-inner";
-
-import ShareFeatureLinkModal from "./share-feature-link-modal";
-
-function FeatureDetailsContent({feature, html, hasError, isEmbeddedMap}) {
-	const dispatch = useDispatch();
-	const view = useSelector(viewSelector);
-
-	/** @type {React.Ref<Element>} containerElemRef */
-	const contentContainerElemRef = useRef();
-	const [partialContentCounter, dispatchPartialContentCounter] = useReducer(
-		(i) => i + 1,
-		0,
-	);
-
-	const [showShareLinkDialog, setShowShareLinkDialog] = useState(false);
-
-	/** @param {MouseEvent} e event */
-	const onShareButtonClick = useCallback((e) => {
-		e.preventDefault();
-
-		if (e.target.getAttribute("href")) {
-			setShowShareLinkDialog(true);
-		}
-	}, []);
-
-	/** @param {MouseEvent} e event */
-	const onMapButtonClick = useCallback(
-		(e) => {
-			e.preventDefault();
-
-			if (view === VIEW_MOBILE && !isEmbeddedMap) {
-				dispatch(setView(VIEW_MAP_ONLY));
-			}
-
-			const featureId = e.target.getAttribute("data-ms3-feature");
-			if (featureId) {
-				dispatch(
-					selectExclusively(
-						FEATURE_SELECTIONS,
-						FEATURE_SELECTION_SELECT,
-						featureId,
-					),
-				);
-			}
-		},
-		[dispatch, isEmbeddedMap, view],
-	);
-
-	/**  @param {MouseEvent} _e event */
-	const onPrintButtonClick = useCallback((_e) => {
-		const doc = window.document.documentElement;
-		doc.classList.add("ms3--print-feature-selection-info-only");
-		window.addEventListener(
-			"afterprint",
-			() => {
-				doc.classList.remove("ms3--print-feature-selection-info-only");
-			},
-			{once: true},
-		);
-	}, []);
-
-	// binds click handlers to links in containerElem by querying the Dom
-	// NOTE(PG): We cannot use React JSX event listeners as we need to support external HTML
-	useEffect(
-		function handlePartialContentChange() {
-			const contentContainerElem = contentContainerElemRef.current;
-			if (!contentContainerElem) {
-				return undefined;
-			}
-
-			// links/buttons
-			const shareLinks = contentContainerElem.querySelectorAll(
-				".js-ms3-feature-link--share",
-			);
-			shareLinks.forEach((buttonElement) => {
-				buttonElement.addEventListener("click", onShareButtonClick);
-			});
-			const showOnMapLinks = contentContainerElem.querySelectorAll(
-				".js-ms3-feature-link--map",
-			);
-			showOnMapLinks.forEach((buttonElement) => {
-				buttonElement.addEventListener("click", onMapButtonClick);
-			});
-			const printLinks = contentContainerElem.querySelectorAll(
-				".js-ms3-feature-link--print",
-			);
-			printLinks.forEach((buttonElement) => {
-				buttonElement.addEventListener("click", onPrintButtonClick);
-			});
-
-			return () => {
-				shareLinks.forEach((buttonElement) => {
-					buttonElement.removeEventListener(
-						"click",
-						onShareButtonClick,
-					);
-				});
-				showOnMapLinks.forEach((buttonElement) => {
-					buttonElement.removeEventListener(
-						"click",
-						onMapButtonClick,
-					);
-				});
-				printLinks.forEach((buttonElement) => {
-					buttonElement.removeEventListener(
-						"click",
-						onPrintButtonClick,
-					);
-				});
-			};
-		},
-		[
-			partialContentCounter,
-			onShareButtonClick,
-			onMapButtonClick,
-			onPrintButtonClick,
-		],
-	);
-
-	const dispatchAppChannelEvent = useAppChannelDispatchEvent();
-
-	/**
-	 * @param {Element} nextContentContainerElem container
-	 */
-	const handleContentChange = useCallback(
-		(nextContentContainerElem) => {
-			dispatchAppChannelEvent(
-				new CustomEvent(APP_EVENT_PARTIAL_CONTENT_CHANGED),
-			);
-			contentContainerElemRef.current = nextContentContainerElem;
-			dispatchPartialContentCounter({});
-		},
-		[dispatchAppChannelEvent],
-	);
-
-	const closeShareLinkDialog = useCallback(() => {
-		setShowShareLinkDialog(false);
-	}, [setShowShareLinkDialog]);
-
-	return (
-		<div>
-			<FeatureDetailsContentInner
-				feature={feature}
-				url={getFeatureProperty(feature, "detailsUrl")}
-				html={html}
-				hasError={hasError}
-				handleContentChange={handleContentChange}
-			/>
-
-			<ShareFeatureLinkModal
-				feature={feature}
-				isOpen={showShareLinkDialog}
-				onRequestClose={closeShareLinkDialog}
-			/>
-		</div>
-	);
-}
-
-export default memo(FeatureDetailsContent);

package/src/js/components/feature-details-content/index.js

@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-
-import {
-	featureDetailsHasErrorSelector,
-	featureDetailsHtmlSelector,
-	isEmbeddedMapSelector,
-	viewSelector,
-} from "../../store/selectors";
-import FeatureDetailsContent from "./feature-details-content";
-
-export default connect((state) => ({
-	view: viewSelector(state),
-	isEmbeddedMap: isEmbeddedMapSelector(state),
-	hasError: featureDetailsHasErrorSelector(state),
-	html: featureDetailsHtmlSelector(state),
-}))(FeatureDetailsContent);

package/src/js/components/feature-details-content/share-feature-link-modal.jsx

@@ -1,56 +0,0 @@
-import {memo} from "react";
-import ReactModal from "react-modal";
-
-import getFeatureProperty from "../../helpers/get-feature-property";
-import {translate} from "../../helpers/i18n";
-
-const selectInputContent = (e) =>
-	e.target.setSelectionRange(0, e.target.value.length);
-
- 
-
-/* NOTE: we use a wrapping label around the input element which is fine a11y as well. */
-function ShareFeatureLinkModal({isOpen, onRequestClose, feature}) {
-	return (
-		<ReactModal
-			isOpen={isOpen}
-			// contentLabel="onRequestClose Example" // aria-label="" on .ms3-modal
-			onRequestClose={onRequestClose}
-			className="ms3-modal"
-			overlayClassName="ms3-app-overlay"
-			shouldCloseOnOverlayClick={true}
-		>
-			<div className="ms3-modal__inner">
-				<div className="ms3-share-link">
-					<h3 className="ms3-share-link__head">
-						{translate("ui.feature-details.share-link.head")}
-					</h3>
-
-					<label className="ms3-share-link__label">
-						{translate("ui.feature-details.share-link.place")}
-						<br />
-
-						<input
-							className="ms3-share-link__input"
-							value={getFeatureProperty(feature, "permanentLink")}
-							onClick={selectInputContent}
-							readOnly={true}
-						/>
-					</label>
-				</div>
-
-				<button
-					className="ms3-dialog-close-button"
-					type="button"
-					onClick={onRequestClose}
-				>
-					<span className="ms3-visuallyhidden">
-						{translate("ui.feature-details.share-link.close")}
-					</span>
-				</button>
-			</div>
-		</ReactModal>
-	);
-}
-
-export default memo(ShareFeatureLinkModal);

package/src/js/components/feature-list/content.jsx

@@ -1,42 +0,0 @@
-import {forwardRef, memo} from "react";
-
-import FeatureListEmptyMessage from "./empty-message";
-
-const FeatureListContent = memo(
-	forwardRef(function FeatureListContent(props, ref) {
-		const {
-			status,
-			children,
-			showFeatureListInfo: _showFeatureListInfo,
-			as: T = "div",
-			emptyAs,
-			featureSourceId,
-			...attributes
-		} = props;
-		let content = children;
-		if (!content) {
-			const hasSource =
-				featureSourceId !== null &&
-				featureSourceId !== undefined &&
-				featureSourceId !== "";
-			content = (
-				<FeatureListEmptyMessage as={emptyAs} hasSource={hasSource} />
-			);
-		}
-
-		const statusClass = status ? " ms3-list--status-" + status : "";
-		return (
-			<T
-				ref={ref}
-				className={`[ ms3-list ms3-list--features ${statusClass} ] ${
-					attributes.className || ""
-				}`}
-				{...attributes}
-			>
-				{content}
-			</T>
-		);
-	}),
-);
-
-export default FeatureListContent;

package/src/js/components/feature-list/context.tsx

@@ -1,47 +0,0 @@
-import type {PropsWithChildren} from "react";
-import {createContext, useContext} from "react";
-
-import type {
-	FullUiState,
-	MapsightUiFeatureId,
-	SelectFeatureActionOptions,
-} from "../../types";
-import type {FeatureListStateProps} from "./hooks/useFeatureListState";
-
-export type FeatureListContextValue = {
-	state: Omit<FeatureListStateProps, "listUiOptions">;
-	listUiOptions: Partial<FullUiState["list"]>;
-	enableKeyboardControl: boolean;
-	showFeatureListInfo: boolean;
-	selectFeature: (
-		featureId: MapsightUiFeatureId,
-		options: SelectFeatureActionOptions,
-	) => void;
-	deselectFeature: (
-		featureId: MapsightUiFeatureId,
-		options: SelectFeatureActionOptions,
-	) => void;
-};
-
-const FeatureListContext = createContext<FeatureListContextValue | null>(null);
-FeatureListContext.displayName = "FeatureListContext";
-
-export const FeatureListContextProvider = ({
-	value,
-	children,
-}: PropsWithChildren<{
-	value: FeatureListContextValue;
-}>) => (
-	<FeatureListContext.Provider value={value}>
-		{children}
-	</FeatureListContext.Provider>
-);
-
-export const useFeatureListContext = () => {
-	const value = useContext(FeatureListContext);
-	if (value === null) {
-		throw new Error("FeatureListContext is not provided");
-	}
-
-	return value;
-};

package/src/js/components/feature-list/empty-message.jsx

@@ -1,15 +0,0 @@
-import {translate} from "../../helpers/i18n";
-
-function FeatureListEmptyMessage({hasSource, as: T = "div", ...attributes}) {
-	const emptyMessage = hasSource
-		? translate("ui.feature-list.content.noEntries")
-		: translate("ui.feature-list.content.noListSelected");
-
-	return (
-		<T className="ms3-list__empty" {...attributes}>
-			{emptyMessage}
-		</T>
-	);
-}
-
-export default FeatureListEmptyMessage;

package/src/js/components/feature-list/filter.jsx

@@ -1,35 +0,0 @@
-import {memo, useEffect, useState} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import useDebounce from "../../hooks/useDebounce";
-
-import {filterListQuery} from "../../store/actions";
-import {listQuerySelector} from "../../store/selectors";
-
-import FeaturesQueryInput from "./query-input";
-
-function FeatureFilter() {
-	const dispatch = useDispatch();
-
-	const [input, setInput] = useState(useSelector(listQuerySelector));
-	const debouncedInput = useDebounce(input, 200);
-	useEffect(() => {
-		if (debouncedInput !== "") {
-			dispatch(filterListQuery(debouncedInput));
-		}
-	}, [dispatch, debouncedInput]);
-
-	// needed to "override" debounce if the value is ""
-	useEffect(() => {
-		if (input === "") {
-			dispatch(filterListQuery(""));
-		}
-	}, [dispatch, input]);
-
-	return (
-		<div className="ms3-list__filter-box">
-			<FeaturesQueryInput query={input} onChange={setInput} />
-		</div>
-	);
-}
-
-export default memo(FeatureFilter);

package/src/js/components/feature-list/footer.jsx

@@ -1,5 +0,0 @@
-function FeatureListFooter({as: T = "div", ...attributes}) {
-	return <T className="ms3-list-footer" {...attributes} />;
-}
-
-export default FeatureListFooter;

package/src/js/components/feature-list/grouped-content.jsx

@@ -1,74 +0,0 @@
-import {forwardRef, Fragment, memo, useRef} from "react";
-
-import FeatureListContent from "./content";
-import {useFeatureListContext} from "./context";
-import useFeatureListItemGroups from "./hooks/useFeatureListItemGroups";
-import useKeyboardNavigation from "./hooks/useKeyboardNavigation";
-
-function FeatureListGroupedContent(
-	{as: T = "div", groupAs = null, itemAs, ...listProps},
-	forwardedRef,
-) {
-	const ownRef = useRef();
-	const ref = forwardedRef || ownRef;
-
-	const {
-		state: {filteredFeatures: features = []},
-		itemProps,
-		enableKeyboardControl,
-	} = useFeatureListContext();
-	const rootProps = {
-		...useKeyboardNavigation(enableKeyboardControl, ref),
-		ref: ref,
-	};
-
-	listProps.emptyAs = itemProps.as;
-
-	// we have to separate calculation of items from wrapping them,
-	// as the outer tags depend on restProps, and we do not want to recreate list items on changes to restProps.
-	const itemGroups = useFeatureListItemGroups(
-		groupAs,
-		features,
-		itemAs,
-		itemProps,
-	);
-
-	if (!features.length) {
-		return <FeatureListContent {...listProps} {...rootProps} />;
-	}
-
-	if (itemGroups.groups) {
-		const GroupNameT = groupAs;
-
-		return (
-			<T className="ms3-list-groups ms3-scroll-target" {...rootProps}>
-				{itemGroups.groups.map(function composeGroup(group, index) {
-					return (
-						<Fragment key={group.name}>
-							{group.name ? (
-								<GroupNameT className="ms3-list__group ms3-list__group--name">
-									{group.name}
-								</GroupNameT>
-							) : null}
-
-							<FeatureListContent
-								data-ms3-group-name={group.name}
-								{...listProps}
-							>
-								{itemGroups.items[index]}
-							</FeatureListContent>
-						</Fragment>
-					);
-				})}
-			</T>
-		);
-	}
-
-	return (
-		<FeatureListContent {...listProps} {...rootProps}>
-			{itemGroups.items[0]}
-		</FeatureListContent>
-	);
-}
-
-export default memo(forwardRef(FeatureListGroupedContent));

package/src/js/components/feature-list/header.jsx

@@ -1,7 +0,0 @@
-import  {forwardRef} from "react";
-
-function FeatureListHeader({as: T = "div", ...attributes}, ref) {
-	return <T className="ms3-list-header" ref={ref} {...attributes} />;
-}
-
-export default forwardRef(FeatureListHeader);

package/src/js/components/feature-list/hooks/useAutoloadFeatureSource.ts

@@ -1,25 +0,0 @@
-import {useEffect} from "react";
-import {useDispatch} from "react-redux";
-
-import type {AnyAction} from "@reduxjs/toolkit";
-
-import {async} from "@mapsight/core/lib/base/actions";
-import {load} from "@mapsight/core/lib/feature-sources/actions";
-
-import {FEATURE_SOURCES} from "../../../config/constants/controllers";
-
-export default function useAutoloadFeatureSource(
-	enabled = false,
-	featureSourceId?: string,
-) {
-	const dispatch = useDispatch();
-	useEffect(() => {
-		if (enabled && featureSourceId) {
-			dispatch(
-				async(
-					load(FEATURE_SOURCES, featureSourceId),
-				) as unknown as AnyAction,
-			);
-		}
-	}, [enabled, featureSourceId, dispatch]);
-}

package/src/js/components/feature-list/hooks/useFeatureListFeatureSource.ts

@@ -1,22 +0,0 @@
-import {useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
-
-import {FEATURE_LIST} from "../../../config/constants/controllers";
-import {createFeatureSourceSelector} from "../../../store/selectors";
-
-// TODO: type out feature source state (probably in @mapsight/core)
-/**
- * @param {string} listControllerName listControllerName
- * @returns {{featureSource: object, featureSourceId: string}} featureSource
- */
-export default function useFeatureListFeatureSource(
-	listControllerName = FEATURE_LIST,
-): {featureSourceId?: string; featureSource?: FeatureSourceState} {
-	const selector = useMemo(
-		() => createFeatureSourceSelector(listControllerName),
-		[listControllerName],
-	);
-	return useSelector(selector);
-}