@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.82 kB
JavaScript
import { __rest } from "tslib";
// 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 InternalIcon from '../../../icon/internal';
import { getBaseProps } from '../../base-component';
import useForwardFocus from '../../hooks/forward-focus';
import { ResizeIcon } from './resize-icon';
import styles from './styles.css.js';
const InternalDragHandle = forwardRef((_a, ref) => {
var { variant = 'drag-indicator', size = 'normal', ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaDescribedby", "ariaValue", "disabled", "onPointerDown", "onKeyDown"]);
const baseProps = getBaseProps(rest);
const dragHandleRefObject = useRef(null);
useForwardFocus(ref, dragHandleRefObject);
const iconProps = (() => {
const shared = { variant: disabled ? 'disabled' : undefined, size };
switch (variant) {
case 'drag-indicator':
return Object.assign(Object.assign({}, shared), { name: 'drag-indicator' });
case 'resize-area':
return Object.assign(Object.assign({}, shared), { name: 'resize-area' });
case 'resize-horizontal':
return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "horizontal" }) });
case 'resize-vertical':
return Object.assign(Object.assign({}, 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", Object.assign({}, baseProps, { ref: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(baseProps.className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "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, onKeyDown: onKeyDown }),
React.createElement(InternalIcon, Object.assign({}, iconProps))));
});
export default InternalDragHandle;
//# sourceMappingURL=index.js.map