@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
27 lines • 2.22 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useContext } from 'react';
import clsx from 'clsx';
import { CollectionLabelContext } from '../internal/context/collection-label-context';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import styles from './styles.css.js';
export default function ToolsHeader({ header, filter, pagination, preferences, setLastUserAction }) {
const [breakpoint, ref] = useContainerBreakpoints(['xs']);
const isHeaderString = typeof header === 'string';
const assignHeaderId = useContext(CollectionLabelContext).assignId;
const headingId = useUniqueId('heading');
if (assignHeaderId !== undefined && isHeaderString) {
assignHeaderId(headingId);
}
const isSmall = breakpoint === 'default';
const hasTools = filter || pagination || preferences;
return (React.createElement(React.Fragment, null,
isHeaderString ? React.createElement("span", { id: headingId }, header) : header,
hasTools && (React.createElement("div", { ref: ref, className: clsx(styles.tools, isSmall && styles['tools-small']) },
filter && (React.createElement("div", { className: styles['tools-filtering'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('filter'), onKeyDownCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('filter') }, filter)),
React.createElement("div", { className: styles['tools-align-right'] },
pagination && (React.createElement("div", { className: styles['tools-pagination'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('pagination') }, pagination)),
preferences && (React.createElement("div", { className: styles['tools-preferences'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('preferences') }, preferences)))))));
}
//# sourceMappingURL=tools-header.js.map