@itwin/quantity-formatting-react
Version:
React components and utilities for quantity formatting
47 lines • 3.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import { Flex, Input, List, ListItem, Text } from "@itwin/itwinui-react";
import { useTranslation } from "../../useTranslation.js";
/**
* A React component that renders a format selector with searchable list for choosing quantity formats.
* @beta
*/
export const FormatSelector = ({ activeFormatSet, activeFormatDefinitionKey, onListItemChange, }) => {
const { translate } = useTranslation();
const [searchTerm, setSearchTerm] = React.useState("");
// Prepare format entries
const formatEntries = React.useMemo(() => {
if (!activeFormatSet?.formats) {
return [];
}
return Object.entries(activeFormatSet.formats).map(([key, formatDef]) => ({
key,
formatDef,
label: formatDef.label || key,
description: formatDef.description || "",
}));
}, [activeFormatSet?.formats]);
// Filter formats based on search term
const filteredFormats = React.useMemo(() => {
if (!searchTerm.trim()) {
return formatEntries;
}
const lowerSearchTerm = searchTerm.toLowerCase();
return formatEntries.filter(({ label }) => label.toLowerCase().includes(lowerSearchTerm));
}, [formatEntries, searchTerm]);
const handleFormatSelect = React.useCallback((key) => {
if (activeFormatSet?.formats) {
const formatDef = activeFormatSet.formats[key];
onListItemChange(formatDef, key);
}
}, [onListItemChange, activeFormatSet]);
const handleSearchChange = React.useCallback((event) => {
setSearchTerm(event.target.value);
}, []);
return (_jsx(Flex, { flexDirection: "column", alignItems: "flex-start", gap: "none", className: "quantityFormat--formatSelector-container", children: activeFormatSet && (_jsxs(_Fragment, { children: [_jsx(Input, { value: searchTerm, onChange: handleSearchChange, placeholder: translate("QuantityFormat:labels.searchFormats") }), _jsxs(List, { className: "quantityFormat--formatSelector-list", children: [filteredFormats.map(({ key, label, description }) => (_jsx(ListItem, { onClick: () => handleFormatSelect(key), active: activeFormatDefinitionKey === key, className: `quantityFormat--formatSelector-listItem`, children: _jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", children: [_jsx(Text, { variant: "body", children: label }), description && (_jsx(Text, { variant: "small", isMuted: true, children: description }))] }) }, key))), filteredFormats.length === 0 && searchTerm.trim() && (_jsx(ListItem, { disabled: true, children: _jsxs(Text, { variant: "body", isMuted: true, children: ["No formats found matching \"", searchTerm, "\""] }) }))] })] })) }));
};
//# sourceMappingURL=FormatSelector.js.map