@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
70 lines • 7.12 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useMemo, useState } from 'react';
import clsx from 'clsx';
import InternalBox from '../../box/internal';
import InternalButton from '../../button/internal';
import { useInternalI18n } from '../../i18n/context';
import SortableArea from '../../internal/components/sortable-area';
import { useUniqueId } from '../../internal/hooks/use-unique-id';
import InternalSpaceBetween from '../../space-between/internal';
import InternalTextFilter from '../../text-filter/internal';
import { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';
import ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';
import { getFilteredOptions, getSortedOptions } from './utils';
import styles from '../styles.css.js';
const componentPrefix = 'content-display';
const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
id,
visible: true,
})), onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, enableColumnFiltering = false, i18nStrings, }) {
const idPrefix = useUniqueId(componentPrefix);
const i18n = useInternalI18n('collection-preferences');
const [columnFilteringText, setColumnFilteringText] = useState('');
const titleId = `${idPrefix}-title`;
const descriptionId = `${idPrefix}-description`;
const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {
const sorted = getSortedOptions({ options, contentDisplay: value });
const filtered = getFilteredOptions(sorted, columnFilteringText);
return [sorted, filtered];
}, [columnFilteringText, options, value]);
const onToggle = (option) => {
// We use sortedOptions as base and not value because there might be options that
// are not in the value yet, so they're added as non-visible after the known ones.
onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));
};
return (React.createElement("div", Object.assign({ className: styles[componentPrefix] }, getAnalyticsInnerContextAttribute('contentDisplay')),
React.createElement("h3", { className: getClassName('title'), id: titleId }, i18n('contentDisplayPreference.title', title)),
React.createElement("p", { className: getClassName('description'), id: descriptionId }, i18n('contentDisplayPreference.description', description)),
enableColumnFiltering && (React.createElement("div", { className: getClassName('text-filter') },
React.createElement(InternalTextFilter, { filteringText: columnFilteringText, filteringPlaceholder: i18n('contentDisplayPreference.i18nStrings.columnFilteringPlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringPlaceholder), filteringAriaLabel: i18n('contentDisplayPreference.i18nStrings.columnFilteringAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringAriaLabel), filteringClearAriaLabel: i18n('contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringClearFilterText), onChange: ({ detail }) => setColumnFilteringText(detail.filteringText), countText: i18n('contentDisplayPreference.i18nStrings.columnFilteringCountText', (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringCountText)
? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringCountText(sortedAndFilteredOptions.length)
: undefined, format => format({ count: sortedAndFilteredOptions.length })) }))),
sortedAndFilteredOptions.length === 0 && (React.createElement("div", { className: getClassName('no-match') },
React.createElement(InternalSpaceBetween, { size: "s", alignItems: "center" },
React.createElement(InternalBox, { margin: { top: 'm' } }, i18n('contentDisplayPreference.i18nStrings.columnFilteringNoMatchText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringNoMatchText)),
React.createElement(InternalButton, { onClick: () => setColumnFilteringText('') }, i18n('contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringClearFilterText))))),
React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
React.createElement(SortableArea, { items: sortedAndFilteredOptions, itemDefinition: { id: item => item.id, label: item => item.label }, onItemsChange: ({ detail }) => onChange(detail.items), disableReorder: columnFilteringText.trim().length > 0, renderItem: ({ ref, item, style, className, dragHandleProps, isDragGhost }) => {
className = clsx(className, getOptionClassName());
const content = (React.createElement(ContentDisplayOption, { ref: ref, option: item, onToggle: onToggle, dragHandleProps: dragHandleProps }));
if (isDragGhost) {
return content;
}
return (React.createElement("li", { className: className, style: style }, content));
}, i18nStrings: {
liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),
liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({
initialPosition,
finalPosition,
total,
isInitialPosition: `${initialPosition === finalPosition}`,
})),
liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),
dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription),
} }))));
}
//# sourceMappingURL=index.js.map