phx-react
Version:
PHX REACT
48 lines • 3.7 kB
JavaScript
import * as React from 'react';
import { useMemo, useState } from 'react';
import { useSettings } from '../context/SettingsContext';
import Switch from '../ui/Switch';
import { isDevPlayground } from './appSettings';
export default function Settings() {
const windowLocation = window.location;
const { setOption, settings: { disableBeforeInput, isAutocomplete, isCharLimit, isCharLimitUtf8, isMaxLength, isRichText, measureTypingPerf, shouldUseLexicalContextMenu, showNestedEditorTreeView, showTableOfContents, showTreeView, }, } = useSettings();
const [showSettings, setShowSettings] = useState(false);
const [isSplitScreen, search] = useMemo(() => {
const parentWindow = window.parent;
const _search = windowLocation.search;
const _isSplitScreen = parentWindow && parentWindow.location.pathname === '/split/';
return [_isSplitScreen, _search];
}, [windowLocation]);
return (React.createElement(React.Fragment, null,
React.createElement("button", { className: `editor-dev-button ${showSettings ? 'active' : ''}`, id: 'options-button', onClick: () => setShowSettings(!showSettings), type: 'button' }),
showSettings ? (React.createElement("div", { className: 'switches' },
isDevPlayground && (React.createElement(Switch, { checked: isSplitScreen, onClick: () => {
if (isSplitScreen) {
window.parent.location.href = `/${search}`;
}
else {
window.location.href = `/split/${search}`;
}
}, text: 'Split Screen' })),
React.createElement(Switch, { checked: measureTypingPerf, onClick: () => setOption('measureTypingPerf', !measureTypingPerf), text: 'Measure Perf' }),
React.createElement(Switch, { checked: showTreeView, onClick: () => setOption('showTreeView', !showTreeView), text: 'Debug View' }),
React.createElement(Switch, { checked: showNestedEditorTreeView, onClick: () => setOption('showNestedEditorTreeView', !showNestedEditorTreeView), text: 'Nested Editors Debug View' }),
React.createElement(Switch, { checked: isRichText, onClick: () => {
setOption('isRichText', !isRichText);
}, text: 'Rich Text' }),
React.createElement(Switch, { checked: isCharLimit, onClick: () => setOption('isCharLimit', !isCharLimit), text: 'Char Limit' }),
React.createElement(Switch, { checked: isCharLimitUtf8, onClick: () => setOption('isCharLimitUtf8', !isCharLimitUtf8), text: 'Char Limit (UTF-8)' }),
React.createElement(Switch, { checked: isMaxLength, onClick: () => setOption('isMaxLength', !isMaxLength), text: 'Max Length' }),
React.createElement(Switch, { checked: isAutocomplete, onClick: () => setOption('isAutocomplete', !isAutocomplete), text: 'Autocomplete' }),
React.createElement(Switch, { checked: disableBeforeInput, onClick: () => {
setOption('disableBeforeInput', !disableBeforeInput);
setTimeout(() => window.location.reload(), 500);
}, text: 'Legacy Events' }),
React.createElement(Switch, { checked: showTableOfContents, onClick: () => {
setOption('showTableOfContents', !showTableOfContents);
}, text: 'Table Of Contents' }),
React.createElement(Switch, { checked: shouldUseLexicalContextMenu, onClick: () => {
setOption('shouldUseLexicalContextMenu', !shouldUseLexicalContextMenu);
}, text: 'Use Lexical Context Menu' }))) : null));
}
//# sourceMappingURL=Settings.js.map