@mapsight/ui 7.0.0

package/src/js/components/search/result.jsx

@@ -0,0 +1,71 @@
+import {memo} from "react";
+import {useSelector} from "react-redux";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {translate} from "../../helpers/i18n";
+
+import {
+	SEARCH_STATUS_EMPTY,
+	SEARCH_STATUS_ERROR,
+	SEARCH_STATUS_FOUND,
+	SEARCH_STATUS_LOADING,
+	searchResultFeaturesSelector,
+	searchStatusSelector,
+} from "../../store/selectors.ts";
+
+import SearchResultEntry from "./result-entry";
+
+const defaultGroup = "__default__";
+
+function SearchResult({closeSearch, onReturnFocus}) {
+	const status = useSelector(searchStatusSelector);
+	const features = useSelector(searchResultFeaturesSelector);
+
+	const groupedEntries = {};
+	features.forEach((feature, i) => {
+		const group = getFeatureProperty(feature, "group") || defaultGroup;
+		groupedEntries[group] = groupedEntries[group] || [];
+		groupedEntries[group].push(
+			<SearchResultEntry
+				key={feature.id || i}
+				feature={feature}
+				closeSearch={closeSearch}
+				onReturnFocus={onReturnFocus}
+			/>,
+		);
+	});
+
+	return (
+		<div className={`ms3-search-result ms3-search-result--${status}`}>
+			{status === SEARCH_STATUS_ERROR && (
+				<p className="ms3-search-result__error">
+					{translate("ui.search.result.error")}
+				</p>
+			)}
+
+			{status === SEARCH_STATUS_EMPTY && (
+				<p className="ms3-search-result__empty-message">
+					{translate("ui.search.result.empty")}
+				</p>
+			)}
+
+			{(status === SEARCH_STATUS_FOUND ||
+				status === SEARCH_STATUS_LOADING) &&
+				features &&
+				Object.keys(groupedEntries).map((group) => (
+					<div className="ms3-search-result__group" key={group}>
+						{group && group !== defaultGroup ? (
+							<h4 className="ms3-search-result__group-head">
+								{group}
+							</h4>
+						) : null}
+
+						<ul className="ms3-search-result__list">
+							{groupedEntries[group]}
+						</ul>
+					</div>
+				))}
+		</div>
+	);
+}
+
+export default memo(SearchResult);

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

@@ -0,0 +1,42 @@
+import {Fragment, memo} from "react";
+
+import Switcher from "./Switcher";
+
+function GroupedSwitcher(props) {
+	const {
+		as: T = "div",
+		className = "ms3-grouped-switcher",
+		renderEntry,
+		renderHeader = undefined,
+		ungroupedIds = [],
+		groupedIds = {},
+		...attributes
+	} = props;
+
+	const children = Object.entries(groupedIds).map(([key, group]) => (
+		<Switcher
+			key={key}
+			ids={group}
+			group={key}
+			as={Fragment}
+			renderEntry={renderEntry}
+			renderHeader={renderHeader}
+		/>
+	));
+
+	return (
+		<T className={className} {...attributes}>
+			{ungroupedIds.length !== 0 && (
+				<Switcher
+					ids={ungroupedIds}
+					as={Fragment}
+					renderEntry={renderEntry}
+					renderHeader={renderHeader}
+				/>
+			)}
+			{children}
+		</T>
+	);
+}
+
+export default memo(GroupedSwitcher);

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

@@ -0,0 +1,54 @@
+import {Fragment, memo} from "react";
+
+import SwitcherHeader from "./SwitcherHeader";
+
+const defaultRenderHeader = (label, props) => (
+	<SwitcherHeader label={label} {...props} />
+);
+
+function Switcher(props) {
+	const {
+		as: T = "div",
+		headlineAs = "h3",
+		entriesAs: V = "ul",
+		baseClass = "ms3-layer-switcher", // TODO: Move to generic class name
+		renderEntry,
+		renderHeader = defaultRenderHeader,
+		ids = [],
+		group = null,
+		headerAttributes: headerAttributes_ = {},
+		entriesAttributes: entriesAttributes_ = {},
+		...attributes
+	} = props;
+
+	const headerAttributes = {...headerAttributes_};
+	const entriesAttributes = {...entriesAttributes_};
+
+	attributes.className = `${baseClass} ${attributes.className || ""}`;
+	headerAttributes.className = `${baseClass}__header ${
+		headerAttributes.className || ""
+	}`;
+	entriesAttributes.className = `${baseClass}__entries ${
+		entriesAttributes.className || ""
+	}`;
+
+	if (group) {
+		attributes["data-ms3-switcher-group"] = group;
+		headerAttributes["data-ms3-switcher-header-group"] = group;
+		entriesAttributes["data-ms3-switcher-entries-group"] = group;
+	}
+
+	return (
+		<T {...(T === Fragment ? {} : attributes)}>
+			{group
+				? renderHeader(group, {as: headlineAs, ...headerAttributes})
+				: null}
+
+			<V {...entriesAttributes}>
+				{ids.map((id) => renderEntry(id, group))}
+			</V>
+		</T>
+	);
+}
+
+export default memo(Switcher);

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

@@ -0,0 +1,23 @@
+function SwitcherButton(props) {
+	const {
+		baseClass = "ms3-layer-switcher__button", // TODO: Use generic class name
+		children,
+		toggleActive,
+		status,
+		active,
+	} = props;
+
+	return (
+		<button
+			type="button"
+			role="checkbox"
+			aria-checked={active ? "true" : "false"}
+			className={`${baseClass} ${baseClass}--${status}`}
+			onClick={toggleActive}
+		>
+			{children}
+		</button>
+	);
+}
+
+export default SwitcherButton;

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

@@ -0,0 +1,143 @@
+import {
+	STATUS_ERROR,
+	STATUS_LOADING,
+	STATUS_OK,
+} from "@mapsight/core/lib/feature-sources/selectors";
+import  {Fragment, memo} from "react";
+
+import {translate} from "../../helpers/i18n";
+
+import SwitcherButton from "./SwitcherButton";
+import SwitcherStatusIcon from "./SwitcherStatusIcon";
+
+export const STATUS_ACTIVE = "active";
+export const STATUS_INACTIVE = "inactive";
+
+const mapStatusClassName = (status) =>
+	({
+		[STATUS_ERROR]: "error",
+		[STATUS_LOADING]: "loading",
+		[STATUS_ACTIVE]: "active",
+		[STATUS_INACTIVE]: "inactive",
+	})[status];
+
+const mapStatusLabel = (status) =>
+	translate("ui.switcher.entry.label" + status);
+
+const determineDisplayStatus = (status, active) => {
+	if (!status || status === STATUS_OK) {
+		return active ? STATUS_ACTIVE : STATUS_INACTIVE;
+	}
+
+	return status;
+};
+
+function SwitcherEntry(props) {
+	const {
+		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
+	} = props;
+
+	// `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 : active;
+	const activeText = isSplit ? _activeText : active;
+	const toggleActiveCheckbox = isSplit ? _toggleActiveCheckbox : undefined;
+	const toggleActiveText = isSplit ? _toggleActiveText : undefined;
+
+	const checkboxDisplayStatus = determineDisplayStatus(
+		status,
+		activeCheckbox,
+	);
+	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,
+					);
+					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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,36 @@
+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.jsx

@@ -0,0 +1,57 @@
+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.js

@@ -0,0 +1,41 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {setTagVisible} from "../../store/actions.ts";
+import {createTagVisibleSelector} from "../../store/selectors.ts";
+import SwitcherEntry from "../switcher/SwitcherEntry";
+
+export default function createTagSwitcherEntry(
+	featureSourceId,
+	tagGroup,
+	tagName,
+) {
+	return connect(
+		// mapStateToProps:
+		createStructuredSelector({
+			visibility: createTagVisibleSelector(
+				featureSourceId,
+				tagGroup,
+				tagName,
+			),
+		}),
+		// mapDispatchToProps:
+		null,
+		// mergeProps:
+		({visibility}, {dispatch}, {...ownProps}) => ({
+			title: tagName,
+			active: visibility,
+			toggleActive: () =>
+				dispatch(
+					setTagVisible(
+						featureSourceId,
+						tagGroup,
+						tagName,
+						!visibility,
+					),
+				),
+			...ownProps,
+		}),
+	)(SwitcherEntry);
+}

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,20 @@
+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);