@awsui/components-react/code-editor/preferences-modal.js

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

import { __spreadArrays } from "tslib";
import React, { useState } from 'react';
import { Box, Button, Checkbox, ColumnLayout, FormField, Modal, Select, SpaceBetween } from '../index';
import { LightThemes, DarkThemes } from './ace-themes';
import { getDefaultTheme } from './util';
export default (function (props) {
    var _a, _b;
    var _c = useState(((_a = props.preferences) === null || _a === void 0 ? void 0 : _a.wrapLines) || true), wrapLines = _c[0], setWrapLines = _c[1];
    var _d = useState(((_b = props.preferences) === null || _b === void 0 ? void 0 : _b.theme) || getDefaultTheme()), theme = _d[0], setTheme = _d[1];
    var _e = useState(function () { return __spreadArrays(LightThemes, DarkThemes).filter(function (t) { return t.value === theme; })[0]; }), selectedThemeOption = _e[0], setSelectedThemeOption = _e[1];
    var onThemeSelected = function (e) {
        setTheme(e.detail.selectedOption.value);
        setSelectedThemeOption(e.detail.selectedOption);
    };
    return (React.createElement(Modal, { visible: props.visible, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: React.createElement(Box, { float: "right" },
            React.createElement(SpaceBetween, { direction: "horizontal", size: "xs" },
                React.createElement(Button, { onClick: props.onDismiss }, props.i18nStrings.cancel),
                React.createElement(Button, { onClick: function () { return props.onConfirm({ wrapLines: wrapLines, theme: theme }); }, variant: "primary" }, props.i18nStrings.confirm))) },
        React.createElement(ColumnLayout, { columns: 2, variant: "text-grid" },
            React.createElement("div", null,
                React.createElement(Checkbox, { checked: wrapLines, onChange: function (e) { return setWrapLines(e.detail.checked); } }, props.i18nStrings.wrapLines)),
            React.createElement("div", null,
                React.createElement(FormField, { label: props.i18nStrings.theme },
                    React.createElement(Select, { selectedOption: selectedThemeOption, onChange: onThemeSelected, options: [
                            { label: props.i18nStrings.lightThemes, options: LightThemes },
                            { label: props.i18nStrings.darkThemes, options: DarkThemes }
                        ], filteringType: "auto" }))))));
});