@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 168 lines 5.15 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10 import * as React from 'react';
11 import {use, useState, useEffect} from 'react';
12
13 import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
14 import type Store from 'react-devtools-shared/src/devtools/store';
15
16 import styles from './SettingsShared.css';
17
18 type Props = {
19 hookSettings: Promise<$ReadOnly<DevToolsHookSettings>>,
20 store: Store,
21 };
22
23 export default function DebuggingSettings({
24 hookSettings,
25 store,
26 }: Props): React.Node {
27 const usedHookSettings = use(hookSettings);
28
29 const [appendComponentStack, setAppendComponentStack] = useState(
30 usedHookSettings.appendComponentStack,
31 );
32 const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(
33 usedHookSettings.breakOnConsoleErrors,
34 );
35 const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
36 useState(usedHookSettings.hideConsoleLogsInStrictMode);
37 const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
38 useState(usedHookSettings.showInlineWarningsAndErrors);
39 const [
40 disableSecondConsoleLogDimmingInStrictMode,
41 setDisableSecondConsoleLogDimmingInStrictMode,
42 ] = useState(usedHookSettings.disableSecondConsoleLogDimmingInStrictMode);
43
44 useEffect(() => {
45 store.setShouldShowWarningsAndErrors(showInlineWarningsAndErrors);
46 }, [showInlineWarningsAndErrors]);
47
48 useEffect(() => {
49 store.updateHookSettings({
50 appendComponentStack,
51 breakOnConsoleErrors,
52 showInlineWarningsAndErrors,
53 hideConsoleLogsInStrictMode,
54 disableSecondConsoleLogDimmingInStrictMode,
55 });
56 }, [
57 store,
58 appendComponentStack,
59 breakOnConsoleErrors,
60 showInlineWarningsAndErrors,
61 hideConsoleLogsInStrictMode,
62 disableSecondConsoleLogDimmingInStrictMode,
63 ]);
64
65 return (
66 <div className={styles.SettingList}>
67 <div className={styles.SettingWrapper}>
68 <label className={styles.SettingRow}>
69 <input
70 type="checkbox"
71 checked={appendComponentStack}
72 onChange={({currentTarget}) =>
73 setAppendComponentStack(currentTarget.checked)
74 }
75 className={styles.SettingRowCheckbox}
76 />
77 Append component stacks to console warnings and errors
78 </label>
79 </div>
80
81 <div className={styles.SettingWrapper}>
82 <label className={styles.SettingRow}>
83 <input
84 type="checkbox"
85 checked={showInlineWarningsAndErrors}
86 onChange={({currentTarget}) =>
87 setShowInlineWarningsAndErrors(currentTarget.checked)
88 }
89 className={styles.SettingRowCheckbox}
90 />
91 Show inline warnings and errors
92 </label>
93 </div>
94
95 <div className={styles.SettingWrapper}>
96 <label className={styles.SettingRow}>
97 <input
98 type="checkbox"
99 checked={breakOnConsoleErrors}
100 onChange={({currentTarget}) =>
101 setBreakOnConsoleErrors(currentTarget.checked)
102 }
103 className={styles.SettingRowCheckbox}
104 />
105 Break on warnings
106 </label>
107 </div>
108
109 <div className={styles.SettingWrapper}>
110 <label className={styles.SettingRow}>
111 <input
112 type="checkbox"
113 checked={hideConsoleLogsInStrictMode}
114 onChange={({currentTarget}) => {
115 setHideConsoleLogsInStrictMode(currentTarget.checked);
116 if (currentTarget.checked) {
117 setDisableSecondConsoleLogDimmingInStrictMode(false);
118 }
119 }}
120 className={styles.SettingRowCheckbox}
121 />
122 Hide logs during additional invocations in&nbsp;
123 <a
124 className={styles.StrictModeLink}
125 target="_blank"
126 rel="noopener noreferrer"
127 href="https://react.dev/reference/react/StrictMode">
128 Strict Mode
129 </a>
130 </label>
131 </div>
132
133 <div
134 className={
135 hideConsoleLogsInStrictMode
136 ? `${styles.SettingDisabled} ${styles.SettingWrapper}`
137 : styles.SettingWrapper
138 }>
139 <label
140 className={
141 hideConsoleLogsInStrictMode
142 ? `${styles.SettingDisabled} ${styles.SettingRow}`
143 : styles.SettingRow
144 }>
145 <input
146 type="checkbox"
147 checked={disableSecondConsoleLogDimmingInStrictMode}
148 disabled={hideConsoleLogsInStrictMode}
149 onChange={({currentTarget}) =>
150 setDisableSecondConsoleLogDimmingInStrictMode(
151 currentTarget.checked,
152 )
153 }
154 className={styles.SettingRowCheckbox}
155 />
156 Disable log dimming during additional invocations in&nbsp;
157 <a
158 className={styles.StrictModeLink}
159 target="_blank"
160 rel="noopener noreferrer"
161 href="https://react.dev/reference/react/StrictMode">
162 Strict Mode
163 </a>
164 </label>
165 </div>
166 </div>
167 );
168 }