@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
23 lines (22 loc) • 2.31 kB
JavaScript
import { __assign } from "tslib";
import React, { useRef } from 'react';
import clsx from 'clsx';
import useFocusVisible from '../internal/hooks/focus-visible';
import styles from './styles.css.js';
export default function Segment(_a) {
var _b;
var pieArcDatum = _a.pieArcDatum, arcFactory = _a.arcFactory, highlightedArcFactory = _a.highlightedArcFactory, focusOutlineRef = _a.focusOutlineRef, focusedSegmentRef = _a.focusedSegmentRef, isHighlighted = _a.isHighlighted, isDimmed = _a.isDimmed, tabIndex = _a.tabIndex, ariaRole = _a.ariaRole, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus;
var focusVisible = useFocusVisible();
var arcPath = arcFactory(pieArcDatum) || undefined;
var highlightedPath = highlightedArcFactory(pieArcDatum) || undefined;
var _c = arcFactory.centroid(pieArcDatum), centroidLeft = _c[0], centroidTop = _c[1];
var popoverTriggerRef = useRef(null);
return (React.createElement("g", __assign({}, focusVisible, { onClick: onClick.bind(null, popoverTriggerRef.current), onMouseOver: onMouseOver.bind(null, popoverTriggerRef.current), onMouseOut: onMouseOut, onKeyDown: onKeyDown.bind(null, popoverTriggerRef.current), onFocus: onFocus.bind(null, popoverTriggerRef.current), className: clsx(styles.segment, (_b = {},
_b[styles['segment--highlighted']] = isHighlighted,
_b[styles['segment--dimmed']] = isDimmed,
_b)), tabIndex: tabIndex, ref: isHighlighted ? focusedSegmentRef : undefined, "aria-label": pieArcDatum.data.datum.title + " (" + pieArcDatum.data.datum.value + ")", role: "button", "aria-roledescription": ariaRole, focusable: tabIndex === 0 ? 'true' : 'false' }),
React.createElement("path", { d: arcPath, fill: pieArcDatum.data.color, key: pieArcDatum.data.index, "aria-hidden": "true" }),
React.createElement("path", { d: highlightedPath, fill: pieArcDatum.data.color, className: styles.segment__highlight, "aria-hidden": "true" }),
isHighlighted && React.createElement("rect", { ref: focusOutlineRef, className: styles['focus-outline'], rx: "2" }),
React.createElement("circle", { cx: centroidLeft, cy: centroidTop, r: "1", opacity: "0", ref: popoverTriggerRef, "aria-hidden": "true" })));
}