@awsui/components-react/internal/components/drag-handle-wrapper/direction-button.js

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

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import InternalIcon from '../../../icon/internal';
import { Transition } from '../transition';
import styles from './styles.css.js';
import testUtilsStyles from './test-classes/styles.css.js';
// Mapping from CSS logical property direction to icon name. The icon component
// already flips the left/right icons automatically based on RTL, so we don't
// need to do anything special.
const ICON_LOGICAL_PROPERTY_MAP = {
    'block-start': 'arrow-up',
    'block-end': 'arrow-down',
    'inline-start': 'arrow-left',
    'inline-end': 'arrow-right',
};
export default function DirectionButton({ direction, state, show, onClick }) {
    return (React.createElement(Transition, { in: show }, (transitionState, ref) => (
    // The wrapper exists to provide a padding around each direction button that
    // prevents any accidental presses around the button from propagating to any
    // interactive elements behind the button.
    React.createElement("span", { ref: ref, className: clsx(styles['direction-button-wrapper'], styles[`direction-button-wrapper-${direction}`], transitionState === 'exited' && styles['direction-button-wrapper-hidden'], styles[`direction-button-wrapper-motion-${transitionState}`]) },
        React.createElement("span", { className: clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled'], testUtilsStyles[`direction-button-${direction}`], !['exiting', 'exited'].includes(transitionState) && testUtilsStyles['direction-button-visible']), onClick: state !== 'disabled' ? onClick : undefined, 
            // This prevents focus from being lost to `document.body` on
            // mouse/pointer press. This allows us to listen to onClick while
            // keeping this button pointer-accessible only.
            onPointerDown: event => event.preventDefault() },
            React.createElement(InternalIcon, { name: ICON_LOGICAL_PROPERTY_MAP[direction], size: "small" }))))));
}
//# sourceMappingURL=direction-button.js.map