@awsui/components-react/collection-preferences/content-display/content-display-option.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, { forwardRef } from 'react';
import DragHandle from '../../internal/components/drag-handle';
import { useUniqueId } from '../../internal/hooks/use-unique-id';
import InternalToggle from '../../toggle/internal';
import styles from '../styles.css.js';
const componentPrefix = 'content-display-option';
export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
const ContentDisplayOption = forwardRef(({ dragHandleProps, onToggle, option }, ref) => {
    const idPrefix = useUniqueId(componentPrefix);
    const controlId = `${idPrefix}-control-${option.id}`;
    return (React.createElement("div", { ref: ref, className: getClassName('content') },
        React.createElement("div", { className: styles['drag-handle-wrapper'] },
            React.createElement(DragHandle, Object.assign({}, dragHandleProps))),
        React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
        React.createElement("div", { className: getClassName('toggle') },
            React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle && onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId }))));
});
export default ContentDisplayOption;
//# sourceMappingURL=content-display-option.js.map