@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
41 lines • 2.74 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import InternalSpaceBetween from '../space-between/internal';
import InternalToggle from '../toggle/internal';
import { getAnalyticsInnerContextAttribute } from './analytics-metadata/utils';
import styles from './styles.css.js';
const isVisible = (id, visibleIds) => visibleIds.indexOf(id) !== -1;
const className = (suffix) => ({
className: styles[`visible-content-${suffix}`],
});
export default function VisibleContentPreference({ title, options, value = [], onChange, }) {
const idPrefix = useUniqueId('visible-content');
const flatOptionsIds = options.flatMap(group => group.options.map(option => option.id));
const onToggle = (id) => {
if (!isVisible(id, value)) {
onChange([...value, id].sort((firstId, secondId) => flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId)));
}
else {
onChange(value.filter(currentId => currentId !== id));
}
};
const selectionOption = (option, optionGroupIndex, optionIndex) => {
const labelId = `${idPrefix}-${optionGroupIndex}-${optionIndex}`;
return (React.createElement("div", { key: optionIndex, ...className('option') },
React.createElement("label", { ...className('option-label'), htmlFor: labelId }, option.label),
React.createElement("div", { ...className('toggle') },
React.createElement(InternalToggle, { checked: isVisible(option.id, value), onChange: () => onToggle(option.id), disabled: option.editable === false, controlId: labelId }))));
};
const outerGroupLabelId = `${idPrefix}-outer`;
return (React.createElement("div", { className: styles['visible-content'], ...getAnalyticsInnerContextAttribute('visibleContent') },
React.createElement("h3", { ...className('title'), id: outerGroupLabelId }, title),
React.createElement(InternalSpaceBetween, { ...className('groups'), size: "xs" }, options.map((optionGroup, optionGroupIndex) => {
const groupLabelId = `${idPrefix}-${optionGroupIndex}`;
return (React.createElement("div", { key: optionGroupIndex, ...className('group'), role: "group", "aria-labelledby": `${outerGroupLabelId} ${groupLabelId}` },
React.createElement("div", { ...className('group-label'), id: groupLabelId }, optionGroup.label),
React.createElement("div", null, optionGroup.options.map((option, optionIndex) => selectionOption(option, optionGroupIndex, optionIndex)))));
}))));
}
//# sourceMappingURL=visible-content.js.map