@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
91 lines • 9.14 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useContext, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { 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 { fireNonCancelableEvent } from '../internal/events';
import checkControlled from '../internal/hooks/check-controlled';
import useBaseComponent from '../internal/hooks/use-base-component';
import { useUniqueId } from '../internal/hooks/use-unique-id';
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(_a) {
var _b;
var { title, confirmLabel, cancelLabel, disabled = false, onConfirm, onCancel, visibleContentPreference, contentDisplayPreference, pageSizePreference, wrapLinesPreference, stripedRowsPreference, contentDensityPreference, stickyColumnsPreference, preferences, customPreference, getModalRoot, removeModalRoot, contentBefore } = _a, rest = __rest(_a, ["title", "confirmLabel", "cancelLabel", "disabled", "onConfirm", "onCancel", "visibleContentPreference", "contentDisplayPreference", "pageSizePreference", "wrapLinesPreference", "stripedRowsPreference", "contentDensityPreference", "stickyColumnsPreference", "preferences", "customPreference", "getModalRoot", "removeModalRoot", "contentBefore"]);
const parentMetadata = useContext(CollectionPreferencesMetadata);
const { __internalRootRef } = useBaseComponent('CollectionPreferences', {
props: {},
metadata: Object.assign(Object.assign({}, parentMetadata), { hasStripedRowsPreference: !!stripedRowsPreference, hasVisibleContentPreference: !!visibleContentPreference, hasContentDisplayPreference: !!contentDisplayPreference, hasContentDensityPreference: !!contentDensityPreference, hasStickyColumnsPreference: !!stickyColumnsPreference, hasContentDisplayColumnFiltering: !!(contentDisplayPreference === null || contentDisplayPreference === void 0 ? void 0 : contentDisplayPreference.enableColumnFiltering), visibleContentOptionsCount: (_b = visibleContentPreference === null || visibleContentPreference === void 0 ? void 0 : visibleContentPreference.options) === null || _b === void 0 ? void 0 : _b.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(() => {
if (!modalVisible) {
dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.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();
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
React.createElement("div", Object.assign({ 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: 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, Object.assign({ value: temporaryPreferences.pageSize }, pageSizePreference, { onChange: pageSize => onChange({ pageSize }) }))),
wrapLinesPreference && (React.createElement(WrapLinesPreference, Object.assign({ value: temporaryPreferences.wrapLines }, wrapLinesPreference, { onChange: wrapLines => onChange({ wrapLines }) }))),
stripedRowsPreference && (React.createElement(StripedRowsPreference, Object.assign({ value: temporaryPreferences.stripedRows }, stripedRowsPreference, { onChange: stripedRows => onChange({ stripedRows }) }))),
contentDensityPreference && (React.createElement(ContentDensityPreference, Object.assign({ value: temporaryPreferences.contentDensity }, contentDensityPreference, { onChange: contentDensity => onChange({ contentDensity }) }))),
stickyColumnsPreference && (React.createElement(StickyColumnsPreference, Object.assign({ 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, Object.assign({}, contentDisplayPreference, { value: temporaryPreferences.contentDisplay, onChange: contentDisplay => onChange({ contentDisplay }) }))) : (visibleContentPreference && (React.createElement(VisibleContentPreference, Object.assign({ value: temporaryPreferences.visibleContent }, visibleContentPreference, { onChange: visibleItems => onChange({ visibleContent: visibleItems }) })))) }))))));
}
applyDisplayName(CollectionPreferences, componentName);
//# sourceMappingURL=index.js.map