@mapsight/ui 7.0.3 → 7.2.0

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

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

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

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

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

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

@@ -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.jsx

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

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

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

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