@mapsight/ui 7.1.0 → 7.2.0

package/src/js/components/switcher/SwitcherEntry.tsx

@@ -1,164 +0,0 @@
-import type {ElementType} from "react";
-import {Fragment, memo} from "react";
-
-import {
-	type FeatureSourceStatus,
-	STATUS_ERROR,
-	STATUS_LOADING,
-	STATUS_OK,
-} from "@mapsight/core/lib/feature-sources/selectors";
-
-import {translate} from "../../helpers/i18n";
-import SwitcherButton from "./SwitcherButton";
-import SwitcherStatusIcon from "./SwitcherStatusIcon";
-
-type SwitcherEntryStatus = "active" | "inactive" | "error" | "loading";
-
-export const STATUS_ACTIVE = "active";
-export const STATUS_INACTIVE = "inactive";
-
-const mapStatusClassName = (status: SwitcherEntryStatus) =>
-	({
-		[STATUS_ERROR]: "error",
-		[STATUS_LOADING]: "loading",
-		[STATUS_ACTIVE]: "active",
-		[STATUS_INACTIVE]: "inactive",
-	})[status];
-
-const mapStatusLabel = (status: string) =>
-	translate("ui.switcher.entry.label" + status);
-
-const determineDisplayStatus = (
-	status?: FeatureSourceStatus,
-	active: boolean = false,
-): SwitcherEntryStatus => {
-	if (!status || status === STATUS_OK) {
-		return active ? STATUS_ACTIVE : STATUS_INACTIVE;
-	}
-
-	return status;
-};
-
-export type SwitcherEntryProps = {
-	as?: ElementType;
-	className?: string;
-	baseClassName?: string;
-	title: string;
-	count?: number | null;
-	toggleActive?: () => void;
-	toggleActiveCheckbox?: () => void;
-	toggleActiveText?: () => void;
-	active?: boolean;
-	activeCheckbox?: boolean;
-	activeText?: boolean;
-	status?: FeatureSourceStatus;
-	locked?: boolean;
-};
-
-function SwitcherEntry({
-	as: T = "li",
-	className = "",
-	baseClassName = "ms3-layer-switcher__entry", // TODO: Use generic class name
-	title,
-	count = null,
-	toggleActive,
-	toggleActiveCheckbox: _toggleActiveCheckbox,
-	toggleActiveText: _toggleActiveText,
-	active,
-	activeCheckbox: _activeCheckbox,
-	activeText: _activeText,
-	status,
-	locked = false,
-	...attributes
-}: SwitcherEntryProps) {
-	// `toggleActive` manages the "split" mode. If `toggleActive` isn't set we switch to the
-	// "split" mode, it's enabling split active statuses and toggle handlers for the checkbox and
-	// text.
-	const isSplit = !toggleActive;
-	const activeCheckbox = isSplit ? (_activeCheckbox ?? false) : active;
-	const activeText = isSplit ? (_activeText ?? false) : active;
-	const toggleActiveCheckbox = isSplit ? _toggleActiveCheckbox : undefined;
-	const toggleActiveText = isSplit ? _toggleActiveText : undefined;
-
-	const checkboxDisplayStatus = determineDisplayStatus(
-		status,
-		activeCheckbox ?? false,
-	);
-	const checkboxStatusClass = mapStatusClassName(checkboxDisplayStatus);
-	const checkboxStatusLabel = mapStatusLabel(checkboxDisplayStatus);
-
-	const checkbox = (
-		<SwitcherStatusIcon
-			status={checkboxStatusClass}
-			onClick={!toggleActive && toggleActiveCheckbox}
-			active={activeCheckbox}
-		>
-			{checkboxStatusLabel}
-		</SwitcherStatusIcon>
-	);
-
-	const text = (
-		<Fragment>
-			<span className={`${baseClassName}__label`}>{title}</span>
-			{!!count && (
-				<span
-					className={`${baseClassName}__count`}
-					data-ms3-count={count}
-				>
-					{count}
-				</span>
-			)}
-		</Fragment>
-	);
-
-	return (
-		<T
-			// TODO: remove checkboxStatusClass
-			className={`${className} [ ${baseClassName} ${baseClassName}--${checkboxStatusClass} ${baseClassName}--${
-				isSplit ? "split" : "joint"
-			} ${locked ? `${baseClassName}--locked` : ""} ]`}
-			{...attributes}
-		>
-			{(() => {
-				if (toggleActive) {
-					return (
-						<SwitcherButton
-							status={checkboxStatusClass}
-							toggleActive={toggleActive}
-							active={active}
-						>
-							{checkbox}
-							{text}
-						</SwitcherButton>
-					);
-				} else {
-					const textDisplayStatus = determineDisplayStatus(
-						status,
-						activeText ?? false,
-					);
-					const textStatusClass =
-						mapStatusClassName(textDisplayStatus);
-					const textStatusLabel = mapStatusLabel(textDisplayStatus);
-
-					return (
-						<Fragment>
-							{checkbox}
-							<button
-								type="button"
-								role="checkbox"
-								onClick={toggleActiveText}
-								className={`${baseClassName}__text-button ${baseClassName}__text-button--${textStatusClass}`}
-								aria-checked={activeText ? "true" : "false"}
-								aria-label={textStatusLabel}
-							>
-								{text}
-							</button>
-						</Fragment>
-					);
-				}
-			})()}
-		</T>
-	);
-}
-
-export default memo(SwitcherEntry);

package/src/js/components/switcher/SwitcherHeader.jsx

@@ -1,58 +0,0 @@
-import  {Fragment, memo} from "react";
-
-import SwitcherButton from "./SwitcherButton";
-
-function SwitcherHeader(props) {
-	const {
-		as: T = "h3",
-		baseClass = "ms3-switcher-header",
-		label,
-		toggleActive = null,
-		active = true,
-		count = null,
-		...attributes
-	} = props;
-
-	const activeClassModified = active ? "active" : "inactive";
-	if (T !== Fragment) {
-		attributes.className = `[ ${baseClass} ${baseClass}--${activeClassModified} ] ${
-			attributes.className || ""
-		}`;
-	}
-
-	if (toggleActive) {
-		return (
-			<T {...attributes}>
-				<SwitcherButton
-					status={activeClassModified}
-					toggleActive={toggleActive}
-					active={active}
-				>
-					<span className={`${baseClass}__label`}>{label}</span>
-
-					{!!count && (
-						<span
-							className={`${baseClass}__count`}
-							data-ms3-count={count}
-						>
-							{count}
-						</span>
-					)}
-				</SwitcherButton>
-			</T>
-		);
-	}
-
-	return (
-		<T {...attributes}>
-			<span className={`${baseClass}__label`}>{label}</span>
-			{!!count && (
-				<span className={`${baseClass}__count`} data-ms3-count={count}>
-					{count}
-				</span>
-			)}
-		</T>
-	);
-}
-
-export default memo(SwitcherHeader);

package/src/js/components/switcher/SwitcherStatusIcon.jsx

@@ -1,36 +0,0 @@
-function SwitcherStatusIcon(props) {
-	const {
-		baseClassName = "ms3-layer-switcher__status", // TODO: Use generic class name
-		status,
-		children,
-		onClick,
-		active,
-		...rest
-	} = props;
-
-	if (onClick) {
-		return (
-			<button
-				type="button"
-				role="checkbox"
-				className={`${baseClassName} ${baseClassName}--${status}`}
-				// FIXME: are we putting a ReactNode in a aria-label (which takes strings) O.0
-				aria-label={children}
-				aria-checked={active ? "true" : "false"}
-				onClick={onClick}
-				{...rest}
-			/>
-		);
-	} else {
-		return (
-			<span
-				className={`${baseClassName} ${baseClassName}--${status}`}
-				// FIXME: are we putting a ReactNode in a aria-label (which takes strings) O.0
-				aria-label={children}
-				{...rest}
-			/>
-		);
-	}
-}
-
-export default SwitcherStatusIcon;

package/src/js/components/tag-switcher/TagSwitcher.tsx

@@ -1,56 +0,0 @@
-import {memo, useMemo} from "react";
-
-import {getDocumentLanguage} from "../../helpers/i18n";
-import GroupedSwitcher from "../switcher/GroupedSwitcher";
-import createTagSwitcherEntry from "./createTagSwitcherEntry";
-import createTagSwitcherHeader from "./createTagSwitcherHeader";
-
-function TagSwitcher({
-	groupedTagData,
-	featureSourceId,
-	toggleableGroups = false,
-	sortTags = true,
-}) {
-	function renderEntry(id, group) {
-		const E = createTagSwitcherEntry(featureSourceId, group, id);
-		return <E key={id} count={groupedTagData[group].tags[id]} />;
-	}
-
-	function renderHeader(group, props) {
-		const H = createTagSwitcherHeader(featureSourceId, group);
-		return (
-			<H
-				{...props}
-				count={groupedTagData[group].count}
-				toggleable={toggleableGroups}
-			/>
-		);
-	}
-
-	const locale = getDocumentLanguage();
-
-	const groupedIds = useMemo(() => {
-		// Object.fromEntries needs babel runtime core3
-		const groupedIdsTmp = {};
-		Object.keys(groupedTagData).forEach((group) => {
-			groupedIdsTmp[group] = Object.keys(groupedTagData[group].tags);
-			if (sortTags) {
-				groupedIdsTmp[group].sort((a, b) =>
-					a.localeCompare(b, locale, {numeric: true}),
-				);
-			}
-		});
-		return groupedIdsTmp;
-	}, [groupedTagData, sortTags, locale]);
-
-	return (
-		<GroupedSwitcher
-			className="ms3-tag-switcher"
-			groupedIds={groupedIds}
-			renderEntry={renderEntry}
-			renderHeader={renderHeader}
-		/>
-	);
-}
-
-export default memo(TagSwitcher);

package/src/js/components/tag-switcher/createTagSwitcherEntry.ts

@@ -1,39 +0,0 @@
-import {connect} from "react-redux";
-
-import {setTagVisible} from "../../store/actions";
-import type {RootStateSlice} from "../../store/selectors";
-import {createTagVisibleSelector} from "../../store/selectors";
-import SwitcherEntry from "../switcher/SwitcherEntry";
-
-export default function createTagSwitcherEntry(
-	featureSourceId: string,
-	tagGroup: string,
-	tagName: string,
-) {
-	const visibilitySelector = createTagVisibleSelector(
-		featureSourceId,
-		tagGroup,
-		tagName,
-	);
-
-	return connect(
-		(state: RootStateSlice) => ({
-			visibility: visibilitySelector(state),
-		}),
-		null,
-		({visibility}, {dispatch}, {...ownProps}) => ({
-			title: tagName,
-			active: visibility,
-			toggleActive: () =>
-				dispatch(
-					setTagVisible(
-						featureSourceId,
-						tagGroup,
-						tagName,
-						!visibility,
-					),
-				),
-			...ownProps,
-		}),
-	)(SwitcherEntry);
-}

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

@@ -1,47 +0,0 @@
-import {connect} from "react-redux";
-
-import {setTagGroupVisible} from "../../store/actions";
-import {
-	type RootStateSlice,
-	createTagGroupVisibleSelector,
-} from "../../store/selectors";
-import SwitcherHeader from "../switcher/SwitcherHeader";
-
-type Props = {
-	toggleable?: boolean;
-};
-
-export default function createTagSwitcherHeader(
-	featureSourceId: string,
-	tagGroup: string,
-) {
-	const visibilitySelector = createTagGroupVisibleSelector(
-		featureSourceId,
-		tagGroup,
-	);
-	return connect(
-		(state: RootStateSlice) => ({
-			visibility: visibilitySelector(state),
-		}),
-		null,
-		(
-			{visibility},
-			{dispatch},
-			{toggleable = false, ...ownProps}: Props,
-		) => ({
-			label: tagGroup,
-			active: !toggleable || visibility,
-			toggleActive: toggleable
-				? () =>
-						dispatch(
-							setTagGroupVisible(
-								featureSourceId,
-								tagGroup,
-								!visibility,
-							),
-						)
-				: undefined,
-			...ownProps,
-		}),
-	)(SwitcherHeader);
-}

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

@@ -1,17 +0,0 @@
-import {connect} from "react-redux";
-
-import type {RootStateSlice} from "../../store/selectors";
-import {
-	tagSwitcherFeatureSourceIdSelector,
-	tagSwitcherSortTags,
-	tagSwitcherTagsSelector,
-	tagSwitcherToggleableGroups,
-} from "../../store/selectors";
-import TagSwitcher from "./TagSwitcher";
-
-export default connect((state: RootStateSlice) => ({
-	featureSourceId: tagSwitcherFeatureSourceIdSelector(state),
-	groupedTagData: tagSwitcherTagsSelector(state),
-	toggleableGroups: tagSwitcherToggleableGroups(state),
-	sortTags: tagSwitcherSortTags(state),
-}))(TagSwitcher);

package/src/js/components/time-filter.jsx

@@ -1,187 +0,0 @@
-import {mergeFilterOptions} from "@mapsight/core/lib/filter/actions";
-
-// TODO: Replace with generic tracking solution that does not rely on simplejs to be used globally
-import {trackEvent} from "@mapsight/lib-js/misc/piwik";
-
-// TODO: Make optional to reduce bundle size
-import flatpickr from "flatpickr";
-
-// TODO: Make optional to reduce bundle size
-// TODO: Support other languages
-import {German as flatpickrGermanLocale} from "flatpickr/dist/l10n/de";
-import { memo, useCallback, useEffect, useRef} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {TIME_FILTER} from "../config/constants/controllers";
-
-import {translate} from "../helpers/i18n";
-
-const ID_FROM = "ms3-timefilter__from";
-const ID_TO = "ms3-timefilter__to";
-
-const DATEPICKER_OPTIONS = {
-	// TODO: Support other languages
-	locale: flatpickrGermanLocale,
-	dateFormat: "d.m.Y", // TODO: i18n
-};
-
-const leftPad = (str, padding) => (padding + str).substring(str.length);
-
-const parseDate = (str) => {
-	const parts = str.replace(/\s/, "").match(/(\d+)/g);
-	try {
-		const date = new Date(parts[2], parts[1] - 1, parts[0]);
-
-		return !isNaN(date.getTime()) ? date : null;
-	} catch (_e) {
-		return null;
-	}
-};
-
-// FIXME i18n
-const formatDate = (date) => {
-	if (!date) {
-		return "";
-	}
-
-	const day = date.getDate();
-	const monthIndex = date.getMonth();
-	const year = date.getFullYear();
-
-	return day + "." + leftPad(monthIndex + 1, "00") + "." + year;
-};
-
-function fromDateSelector(state) {
-	return state[TIME_FILTER] && state[TIME_FILTER].fromDate;
-}
-
-function toDateSelector(state) {
-	return state[TIME_FILTER] && state[TIME_FILTER].toDate;
-}
-
-function TimeFilter() {
-	// FIXME: stop using hardcoded ids
-	// TODO: use react input fields
-
-	const dispatch = useDispatch();
-
-	const fromDate = useSelector(fromDateSelector);
-	const toDate = useSelector(toDateSelector);
-
-	const fromInputRef = useRef();
-	const toInputRef = useRef();
-
-	useEffect(() => {
-		// we need to use let because to and from reference each other
-
-		let to;
-
-		const from = flatpickr(fromInputRef.current, {
-			...DATEPICKER_OPTIONS,
-			onChange: function onChange(selectedDates) {
-				if (selectedDates.length) {
-					to.set("minDate", selectedDates[0]);
-					to.redraw();
-				}
-			},
-		});
-
-		to = flatpickr(toInputRef.current, {
-			...DATEPICKER_OPTIONS,
-			onChange: function onChange(selectedDates) {
-				if (selectedDates.length) {
-					from.set("maxDate", selectedDates[0]);
-					from.redraw();
-				}
-			},
-		});
-	}, []);
-
-	const onSubmit = useCallback(
-		/**
-		 * @param {MouseEvent<HTMLButtonElement>} e event
-		 */
-		(e) => {
-			e.preventDefault();
-
-			// get values
-			const myFromDate = parseDate(fromInputRef.current.value);
-			const myToDate = parseDate(toInputRef.current.value);
-
-			dispatch(
-				mergeFilterOptions(TIME_FILTER, {
-					fromDate: myFromDate && myFromDate.toISOString(),
-					toDate: myToDate && myToDate.toISOString(),
-				}),
-			);
-
-			trackEvent("Mapsight", "Filtered");
-		},
-		[dispatch],
-	);
-
-	const onReset = useCallback(
-		/**
-		 * @param {MouseEvent<HTMLButtonElement>} _e event
-		 */
-		(_e) => {
-			[fromInputRef.current, toInputRef.current].forEach((element) => {
-				element._flatpickr.clear();
-				element._flatpickr.set("minDate", undefined);
-				element._flatpickr.set("maxDate", undefined);
-			});
-
-			dispatch(
-				mergeFilterOptions(TIME_FILTER, {
-					fromDate: null,
-					toDate: null,
-				}),
-			);
-
-			trackEvent("Mapsight", "FilterCleared");
-		},
-		[dispatch],
-	);
-
-	return (
-		<form onSubmit={onSubmit} className="ms3-timefilter">
-			<h2>{translate("ui.time-filter.span")}</h2>
-			<p>
-				<label htmlFor={ID_FROM}>
-					<span className="ms3-visuallyhidden">
-						{translate("from")}
-					</span>
-					<input
-						id={ID_FROM}
-						name={ID_FROM}
-						defaultValue={formatDate(fromDate)}
-						ref={fromInputRef}
-					/>
-				</label>
-
-				<label htmlFor={ID_TO}>
-					-
-					<input
-						id={ID_TO}
-						name={ID_TO}
-						defaultValue={formatDate(toDate)}
-						ref={toInputRef}
-					/>
-				</label>
-
-				<button
-					type="button"
-					className="ms3-filter-button ms3-filter-button--secondary"
-					onClick={onReset}
-				>
-					{translate("reset")}
-				</button>
-
-				<button type="submit" className="ms3-filter-button">
-					{translate("show")}
-				</button>
-			</p>
-		</form>
-	);
-}
-
-export default memo(TimeFilter);

package/src/js/components/view-toggle-button/desktop-button.jsx

@@ -1,13 +0,0 @@
-import ViewToggleButton from "./index";
-
-function DesktopViewToggleButton() {
-	return (
-		<ViewToggleButton
-			baseClass="ms3-map-overlay__button"
-			additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--desktop-view-toggle"
-			viewModifierClassPrefix="ms3-map-overlay__button--desktop-view-toggle--"
-		/>
-	);
-}
-
-export default DesktopViewToggleButton;

package/src/js/components/view-toggle-button/index.ts

@@ -1,42 +0,0 @@
-import {connect} from "react-redux";
-
-import {deselectAll} from "@mapsight/core/lib/feature-selections/actions";
-
-import type {View} from "../../config/constants/app";
-import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import {setView} from "../../store/actions";
-import type {RootStateSlice} from "../../store/selectors";
-import {
-	isMapOutOfViewportSelector,
-	isViewMobile,
-	viewSelector,
-	viewToggleOptionsSelector,
-} from "../../store/selectors";
-import ViewToggleButton from "./view-toggle-button";
-
-export default connect(
-	(state: RootStateSlice) => ({
-		view: viewSelector(state),
-		isMapOutOfViewport: isMapOutOfViewportSelector(state),
-		options: viewToggleOptionsSelector(state),
-	}),
-	null,
-	({options, ...stateProps}, {dispatch}, ownProps) => ({
-		...stateProps,
-		dispatch: dispatch,
-		changeView: (currentView: View, nextView: View) => {
-			dispatch(setView(nextView));
-
-			if (
-				options?.deselectFeaturesOnToggle &&
-				isViewMobile(currentView)
-			) {
-				dispatch(
-					deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT),
-				);
-			}
-		},
-		...ownProps,
-	}),
-)(ViewToggleButton);

package/src/js/components/view-toggle-button/mobile-button.tsx

@@ -1,13 +0,0 @@
-import ViewToggleButton from "./index";
-
-function MobileViewToggleButton() {
-	return (
-		<ViewToggleButton
-			baseClass="ms3-map-overlay__button"
-			additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--mobile-view-toggle"
-			viewModifierClassPrefix="ms3-map-overlay__button--mobile-view-toggle--"
-		/>
-	);
-}
-
-export default MobileViewToggleButton;