@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
42 lines (41 loc) • 2.88 kB
JavaScript
import { __assign, __spreadArrays } from "tslib";
import React from 'react';
import SpaceBetween from '../space-between';
import Toggle from '../toggle';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import styles from './styles.css.js';
var isVisible = function (id, visibleIds) { return visibleIds.indexOf(id) !== -1; };
var className = function (suffix) { return ({
className: styles["visible-content-" + suffix]
}); };
export default function VisibleContentPreference(_a) {
var title = _a.title, options = _a.options, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange;
var idPrefix = useUniqueId('visible-content');
var flatOptionsIds = options.reduce(function (ids, group) { return __spreadArrays(ids, group.options.reduce(function (groupIds, option) { return __spreadArrays(groupIds, [option.id]); }, [])); }, []);
var onToggle = function (id) {
if (!isVisible(id, value)) {
onChange(__spreadArrays(value, [id]).sort(function (firstId, secondId) { return flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId); }));
}
else {
onChange(value.filter(function (currentId) { return currentId !== id; }));
}
};
var selectionOption = function (option, optionGroupIndex, optionIndex) {
var labelId = idPrefix + "-" + optionGroupIndex + "-" + optionIndex;
return (React.createElement("div", __assign({ key: optionIndex }, className('option')),
React.createElement("div", __assign({}, className('option-label'), { id: labelId }), option.label),
React.createElement("div", __assign({}, className('toggle')),
React.createElement(Toggle, { checked: isVisible(option.id, value), ariaLabelledby: labelId, onChange: function () { return onToggle(option.id); }, disabled: option.editable === false }))));
};
var outerGroupLabelId = idPrefix + "-outer";
return (React.createElement("div", { className: styles['visible-content'] },
React.createElement("div", __assign({}, className('title'), { id: outerGroupLabelId }), title),
React.createElement(SpaceBetween, __assign({}, className('groups'), { size: "xs" }), options.map(function (optionGroup, optionGroupIndex) {
var groupLabelId = idPrefix + "-" + optionGroupIndex;
return (React.createElement("div", __assign({ key: optionGroupIndex }, className('group'), { role: "group", "aria-labelledby": outerGroupLabelId + " " + groupLabelId }),
React.createElement("div", __assign({}, className('group-label'), { id: groupLabelId }), optionGroup.label),
React.createElement("div", null, optionGroup.options.map(function (option, optionIndex) {
return selectionOption(option, optionGroupIndex, optionIndex);
}))));
}))));
}