@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
39 lines • 2.69 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useRef } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import InternalIcon from '../../../icon/internal';
import { ResizeIcon } from './resize-icon';
import styles from './styles.css.js';
import testUtilsStyles from './test-classes/styles.css.js';
const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'normal', active = false, className, ariaLabel, ariaLabelledBy, ariaDescribedby, ariaValue, disabled, onPointerDown, onClick, onKeyDown, }, ref) => {
const dragHandleRefObject = useRef(null);
const iconProps = (() => {
const shared = {
variant: disabled ? 'disabled' : undefined,
size,
};
switch (variant) {
case 'drag-indicator':
return { ...shared, name: 'drag-indicator' };
case 'resize-area':
return { ...shared, name: 'resize-area' };
case 'resize-horizontal':
return { ...shared, svg: React.createElement(ResizeIcon, { variant: "horizontal" }) };
case 'resize-vertical':
return { ...shared, svg: React.createElement(ResizeIcon, { variant: "vertical" }) };
}
})();
return (
// We need to use a div with button role instead of a button
// so that Safari will focus on it when clicking it.
// (See https://bugs.webkit.org/show_bug.cgi?id=22261)
// Otherwise, we can't reliably catch keyboard events coming from the handle
// when it is being dragged.
React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
React.createElement("div", { className: styles['prevent-pointer'] },
React.createElement(InternalIcon, { ...iconProps }))));
});
export default DragHandleButton;
//# sourceMappingURL=button.js.map