@awsui/components-react/segmented-control/internal-segmented-control.js

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

import React, { useRef, useState, useEffect } from 'react';
import clsx from 'clsx';
import { KeyCode } from '../internal/keycode';
import { fireNonCancelableEvent } from '../internal/events';
import { Segment } from './segment';
import styles from './styles.css.js';
export default function InternalSegmentedControl(_a) {
    var selectedId = _a.selectedId, options = _a.options, label = _a.label, ariaLabelledby = _a.ariaLabelledby, onChange = _a.onChange;
    var _b = useState(null), focusedSegmentIndex = _b[0], setFocusedSegmentIndex = _b[1];
    var focusedSegmentRef = useRef(null);
    useEffect(function () {
        var _a;
        if (document.activeElement !== focusedSegmentRef.current) {
            (_a = focusedSegmentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }, [focusedSegmentIndex]);
    var selectedOptions = (options || []).filter(function (option) {
        return option.id === selectedId;
    });
    var currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;
    var enabledSegments = (options || []).filter(function (option) { return !option.disabled; });
    var highlightSegment = function (enabledSegmentIndex) {
        var originalSegmentIndex = options.indexOf(enabledSegments[enabledSegmentIndex]);
        setFocusedSegmentIndex(originalSegmentIndex);
    };
    var moveHighlight = function (event, option) {
        if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {
            return;
        }
        var activeIndex = enabledSegments.indexOf(option);
        if (event.keyCode === KeyCode.right) {
            if (activeIndex + 1 === enabledSegments.length) {
                highlightSegment(0);
            }
            else {
                highlightSegment(activeIndex + 1);
            }
        }
        else if (event.keyCode === KeyCode.left) {
            if (activeIndex === 0) {
                highlightSegment(enabledSegments.length - 1);
            }
            else {
                highlightSegment(activeIndex - 1);
            }
        }
    };
    return (React.createElement("div", { className: clsx(styles['segment-part'], styles["segment-count-" + (options === null || options === void 0 ? void 0 : options.length)]), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
        options.map(function (option, index) {
            var isActive = selectedId === option.id;
            var tabIndex = isActive ? 0 : -1;
            if (currentSelectedOption === null && enabledSegments.indexOf(option) === 0) {
                tabIndex = 0;
            }
            return (React.createElement(Segment, { key: index, id: option.id, disabled: !!option.disabled, iconName: option.iconName, iconAlt: option.iconAlt, iconUrl: option.iconUrl, text: option.text, isActive: isActive, tabIndex: tabIndex, ref: index === focusedSegmentIndex ? focusedSegmentRef : null, onClick: function () {
                    if (selectedId !== option.id) {
                        fireNonCancelableEvent(onChange, { selectedId: option.id });
                    }
                }, onKeyDown: function (event) { return moveHighlight(event, option); } }));
        })));
}