@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
126 lines • 10.7 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React, { useContext, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { useUniqueId, warnOnce } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import InternalBox from '../box/internal';
import { InternalButton } from '../button/internal';
import { useInternalI18n } from '../i18n/context';
import { getBaseProps } from '../internal/base-component';
import { CollectionPreferencesMetadata } from '../internal/context/collection-preferences-metadata-context';
import { useTableComponentsContext } from '../internal/context/table-component-context';
import { fireNonCancelableEvent } from '../internal/events';
import checkControlled from '../internal/hooks/check-controlled';
import useBaseComponent from '../internal/hooks/use-base-component';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import InternalModal from '../modal/internal';
import InternalSpaceBetween from '../space-between/internal';
import { getComponentAnalyticsMetadata } from './analytics-metadata/utils';
import ContentDisplayPreference from './content-display';
import { ContentDensityPreference, copyPreferences, CustomPreference, mergePreferences, ModalContentLayout, PageSizePreference, StickyColumnsPreference, StripedRowsPreference, WrapLinesPreference, } from './utils';
import VisibleContentPreference from './visible-content';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
const componentName = 'CollectionPreferences';
export default function CollectionPreferences({ title, confirmLabel, cancelLabel, closeAriaLabel, disabled = false, onConfirm, onCancel, visibleContentPreference, contentDisplayPreference, pageSizePreference, wrapLinesPreference, stripedRowsPreference, contentDensityPreference, stickyColumnsPreference, preferences, customPreference, getModalRoot, removeModalRoot, contentBefore, ...rest }) {
var _a;
const parentMetadata = useContext(CollectionPreferencesMetadata);
const { __internalRootRef } = useBaseComponent('CollectionPreferences', {
props: {},
metadata: {
...parentMetadata,
hasStripedRowsPreference: !!stripedRowsPreference,
hasVisibleContentPreference: !!visibleContentPreference,
hasContentDisplayPreference: !!contentDisplayPreference,
hasContentDensityPreference: !!contentDensityPreference,
hasStickyColumnsPreference: !!stickyColumnsPreference,
hasContentDisplayColumnFiltering: !!(contentDisplayPreference === null || contentDisplayPreference === void 0 ? void 0 : contentDisplayPreference.enableColumnFiltering),
visibleContentOptionsCount: (_a = visibleContentPreference === null || visibleContentPreference === void 0 ? void 0 : visibleContentPreference.options) === null || _a === void 0 ? void 0 : _a.length,
},
});
checkControlled('CollectionPreferences', 'preferences', preferences, 'onConfirm', onConfirm);
const i18n = useInternalI18n('collection-preferences');
const baseProps = getBaseProps(rest);
const [modalVisible, setModalVisible] = useState(false);
const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));
const triggerRef = useRef(null);
const dialogPreviouslyOpen = useRef(false);
useEffect(() => {
var _a;
if (!modalVisible) {
if (dialogPreviouslyOpen.current) {
(_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
}
else {
dialogPreviouslyOpen.current = true;
}
}, [modalVisible]);
const onConfirmListener = () => {
setModalVisible(false);
fireNonCancelableEvent(onConfirm, temporaryPreferences);
};
const onCancelListener = () => {
fireNonCancelableEvent(onCancel, {});
setModalVisible(false);
setTemporaryPreferences(copyPreferences(preferences || {}));
};
const hasContentOnTheLeft = !!(pageSizePreference ||
wrapLinesPreference ||
stripedRowsPreference ||
contentDensityPreference ||
stickyColumnsPreference ||
customPreference);
const hasContentOnTheRight = !!(visibleContentPreference || contentDisplayPreference);
const onChange = (changedPreferences) => setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));
if (visibleContentPreference && contentDisplayPreference) {
warnOnce(componentName, 'You provided both `visibleContentPreference` and `contentDisplayPreference` props. `visibleContentPreference` will be ignored and only `contentDisplayPreference` will be rendered.');
}
const referrerId = useUniqueId();
const tableComponentContext = useTableComponentsContext();
useEffect(() => {
var _a;
if ((_a = tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.preferencesRef) === null || _a === void 0 ? void 0 : _a.current) {
tableComponentContext.preferencesRef.current.pageSize = preferences === null || preferences === void 0 ? void 0 : preferences.pageSize;
// When both are used contentDisplayPreference takes preference and so we always prefer to use this as our visible columns if available
if (preferences === null || preferences === void 0 ? void 0 : preferences.contentDisplay) {
tableComponentContext.preferencesRef.current.visibleColumns = preferences === null || preferences === void 0 ? void 0 : preferences.contentDisplay.filter(column => column.visible).map(column => column.id);
}
else if (preferences === null || preferences === void 0 ? void 0 : preferences.visibleContent) {
tableComponentContext.preferencesRef.current.visibleColumns = [...preferences.visibleContent];
}
return () => {
var _a, _b;
(_a = tableComponentContext.preferencesRef.current) === null || _a === void 0 ? true : delete _a.pageSize;
(_b = tableComponentContext.preferencesRef.current) === null || _b === void 0 ? true : delete _b.visibleColumns;
};
}
}, [
tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.preferencesRef,
preferences === null || preferences === void 0 ? void 0 : preferences.contentDisplay,
preferences === null || preferences === void 0 ? void 0 : preferences.visibleContent,
preferences === null || preferences === void 0 ? void 0 : preferences.pageSize,
]);
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
React.createElement("div", { id: referrerId, ...getAnalyticsMetadataAttribute({ component: getComponentAnalyticsMetadata(disabled, preferences) }) },
React.createElement(InternalButton, { ref: triggerRef, className: clsx(styles['trigger-button'], analyticsSelectors['trigger-button']), disabled: disabled, ariaLabel: i18n('title', title), onClick: () => {
setTemporaryPreferences(copyPreferences(preferences || {}));
setModalVisible(true);
}, variant: "icon", iconName: "settings", formAction: "none", analyticsAction: "open" }),
!disabled && modalVisible && (React.createElement(InternalModal, { className: styles['modal-root'], visible: true, getModalRoot: getModalRoot, removeModalRoot: removeModalRoot, header: i18n('title', title), referrerId: referrerId, footer: React.createElement(InternalBox, { float: "right" },
React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs" },
React.createElement(InternalButton, { className: styles['cancel-button'], variant: "link", formAction: "none", onClick: onCancelListener, analyticsAction: "cancel" }, i18n('cancelLabel', cancelLabel)),
React.createElement(InternalButton, { className: styles['confirm-button'], variant: "primary", formAction: "none", onClick: onConfirmListener, analyticsAction: "confirm" }, i18n('confirmLabel', confirmLabel)))), closeAriaLabel: closeAriaLabel || cancelLabel, size: hasContentOnTheLeft && hasContentOnTheRight ? 'large' : 'medium', onDismiss: onCancelListener },
React.createElement("div", { className: styles['content-before'] }, contentBefore),
React.createElement(ModalContentLayout, { left: hasContentOnTheLeft && (React.createElement(InternalSpaceBetween, { size: "l" },
pageSizePreference && (React.createElement(PageSizePreference, { value: temporaryPreferences.pageSize, ...pageSizePreference, onChange: pageSize => onChange({ pageSize }) })),
wrapLinesPreference && (React.createElement(WrapLinesPreference, { value: temporaryPreferences.wrapLines, ...wrapLinesPreference, onChange: wrapLines => onChange({ wrapLines }) })),
stripedRowsPreference && (React.createElement(StripedRowsPreference, { value: temporaryPreferences.stripedRows, ...stripedRowsPreference, onChange: stripedRows => onChange({ stripedRows }) })),
contentDensityPreference && (React.createElement(ContentDensityPreference, { value: temporaryPreferences.contentDensity, ...contentDensityPreference, onChange: contentDensity => onChange({ contentDensity }) })),
stickyColumnsPreference && (React.createElement(StickyColumnsPreference, { value: temporaryPreferences.stickyColumns, ...stickyColumnsPreference, onChange: stickyColumns => onChange({ stickyColumns }) })),
customPreference && (React.createElement(CustomPreference, { value: temporaryPreferences.custom, customPreference: customPreference, onChange: custom => onChange({ custom }) })))), right: contentDisplayPreference ? (React.createElement(ContentDisplayPreference, { ...contentDisplayPreference, value: temporaryPreferences.contentDisplay, onChange: contentDisplay => onChange({ contentDisplay }) })) : (visibleContentPreference && (React.createElement(VisibleContentPreference, { value: temporaryPreferences.visibleContent, ...visibleContentPreference, onChange: visibleItems => onChange({ visibleContent: visibleItems }) }))) }))))));
}
applyDisplayName(CollectionPreferences, componentName);
//# sourceMappingURL=index.js.map