@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
81 lines • 4.23 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useLayoutEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { getBaseProps } from '../internal/base-component';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import icons from './generated/icons';
import styles from './styles.css.js';
function iconSizeMap(height) {
if (height === null) {
// This is the best guess for the contextual height while server rendering.
return 'normal';
}
if (height >= 50) {
return 'large';
}
else if (height >= 36) {
return 'big';
}
else if (height >= 24) {
return 'medium';
}
else if (height <= 16) {
return 'small';
}
else {
return 'normal';
}
}
const InternalIcon = (_a) => {
var { name, size = 'normal', variant = 'normal', url, alt, ariaLabel, svg, badge, __internalRootRef = null } = _a, props = __rest(_a, ["name", "size", "variant", "url", "alt", "ariaLabel", "svg", "badge", "__internalRootRef"]);
const iconRef = useRef(null);
// To ensure a re-render is triggered on visual mode changes
useVisualRefresh();
const [parentHeight, setParentHeight] = useState(null);
const contextualSize = size === 'inherit';
const iconSize = contextualSize ? iconSizeMap(parentHeight) : size;
const inlineStyles = contextualSize && parentHeight !== null ? { height: `${parentHeight}px` } : {};
const baseProps = getBaseProps(props);
baseProps.className = clsx(baseProps.className, styles.icon, contextualSize && styles['icon-flex-height'], badge && styles.badge, !contextualSize && styles[`size-${iconSize}-mapped-height`], styles[`size-${iconSize}`], styles[`variant-${variant}`], styles[`name-${name}`]);
// Possible infinite loop is not a concern here because line
// height should not change without an external state update.
// eslint-disable-next-line react-hooks/exhaustive-deps
useLayoutEffect(() => {
if (!contextualSize || !iconRef.current) {
return;
}
const { lineHeight } = getComputedStyle(iconRef.current);
const newParentHeight = parseInt(lineHeight, 10);
setParentHeight(newParentHeight);
});
const mergedRef = useMergeRefs(iconRef, __internalRootRef);
const hasAriaLabel = typeof ariaLabel === 'string';
const labelAttributes = hasAriaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};
if (svg) {
if (url) {
warnOnce('Icon', 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.');
}
return (React.createElement("span", Object.assign({}, baseProps, labelAttributes, { ref: mergedRef, "aria-hidden": !hasAriaLabel, style: inlineStyles }), svg));
}
if (url) {
return (React.createElement("span", Object.assign({}, baseProps, { ref: mergedRef, style: inlineStyles }),
React.createElement("img", { src: url, alt: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : alt })));
}
const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);
function iconMap(name) {
if (name === 'gen-ai' && iconSize === 'small') {
return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true", "data-testid": "gen-ai-filled" },
React.createElement("path", { d: "m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z", className: "filled" })));
}
else {
return icons[name];
}
}
return (React.createElement("span", Object.assign({}, baseProps, labelAttributes, { ref: mergedRef, style: inlineStyles }), validIcon ? iconMap(name) : undefined));
};
export default InternalIcon;
//# sourceMappingURL=internal.js.map