@theia/memory-inspector 1.53.0-next.55 → 1.53.0-next.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +71 -71
  2. package/package.json +4 -4
  3. package/src/browser/diff-widget/memory-diff-options-widget.tsx +152 -152
  4. package/src/browser/diff-widget/memory-diff-select-widget.tsx +163 -163
  5. package/src/browser/diff-widget/memory-diff-table-widget.tsx +366 -366
  6. package/src/browser/diff-widget/memory-diff-widget-types.ts +45 -45
  7. package/src/browser/editable-widget/memory-editable-table-widget.tsx +359 -359
  8. package/src/browser/memory-inspector-frontend-contribution.ts +301 -301
  9. package/src/browser/memory-inspector-frontend-module.ts +118 -118
  10. package/src/browser/memory-provider/cdt-gdb-memory-provider.ts +132 -132
  11. package/src/browser/memory-provider/memory-provider-service.ts +86 -86
  12. package/src/browser/memory-provider/memory-provider.spec.ts +23 -23
  13. package/src/browser/memory-provider/memory-provider.ts +119 -119
  14. package/src/browser/memory-widget/memory-options-widget.tsx +738 -738
  15. package/src/browser/memory-widget/memory-table-widget.tsx +625 -625
  16. package/src/browser/memory-widget/memory-widget.ts +114 -114
  17. package/src/browser/register-widget/register-filter-service.ts +76 -76
  18. package/src/browser/register-widget/register-options-widget.tsx +393 -393
  19. package/src/browser/register-widget/register-table-widget.tsx +276 -276
  20. package/src/browser/register-widget/register-widget-types.ts +45 -45
  21. package/src/browser/register-widget/register-widget.css +34 -34
  22. package/src/browser/style/index.css +746 -746
  23. package/src/browser/style/memory-lock.svg +21 -21
  24. package/src/browser/style/memory-view.svg +20 -20
  25. package/src/browser/style/register-lock.svg +29 -29
  26. package/src/browser/style/register-view.svg +28 -28
  27. package/src/browser/utils/memory-commands.ts +76 -76
  28. package/src/browser/utils/memory-hover-renderer.ts +113 -113
  29. package/src/browser/utils/memory-recents.ts +58 -58
  30. package/src/browser/utils/memory-widget-components.tsx +193 -193
  31. package/src/browser/utils/memory-widget-manager.ts +179 -179
  32. package/src/browser/utils/memory-widget-utils.tsx +132 -132
  33. package/src/browser/utils/memory-widget-variable-utils.ts +170 -170
  34. package/src/browser/utils/multi-select-bar.css +61 -61
  35. package/src/browser/utils/multi-select-bar.tsx +75 -75
  36. package/src/browser/wrapper-widgets/memory-dock-panel.ts +51 -51
  37. package/src/browser/wrapper-widgets/memory-dockpanel-placeholder-widget.tsx +38 -38
  38. package/src/browser/wrapper-widgets/memory-layout-widget.tsx +167 -167
  39. package/src/common/util.ts +28 -28
  40. package/src/common/utils.spec.ts +52 -52
@@ -1,170 +1,170 @@
1
- /********************************************************************************
2
- * Copyright (C) 2021 Ericsson and others.
3
- *
4
- * This program and the accompanying materials are made available under the
5
- * terms of the Eclipse Public License v. 2.0 which is available at
6
- * http://www.eclipse.org/legal/epl-2.0.
7
- *
8
- * This Source Code may also be made available under the following Secondary
9
- * Licenses when the conditions for such availability set forth in the Eclipse
10
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
- * with the GNU Classpath Exception which is available at
12
- * https://www.gnu.org/software/classpath/license.html.
13
- *
14
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
- ********************************************************************************/
16
-
17
- import { DebugScope, DebugVariable } from '@theia/debug/lib/browser/console/debug-console-items';
18
- import { DebugSession } from '@theia/debug/lib/browser/debug-session';
19
- import * as Long from 'long';
20
-
21
- export interface VariableRange {
22
- name: string;
23
- address: Long;
24
- pastTheEndAddress: Long;
25
- type?: string;
26
- value?: string;
27
- }
28
-
29
- export interface VariableDecoration {
30
- name: string;
31
- color: string;
32
- firstAppearance?: boolean;
33
- }
34
-
35
- export interface RegisterReadResult {
36
- threadId: string | undefined;
37
- registers: DebugVariable[];
38
- }
39
-
40
- export class VariableFinder {
41
- protected readonly HIGH_CONTRAST_COLORS = [
42
- 'var(--theia-contrastActiveBorder)',
43
- 'var(--theia-contrastBorder)',
44
- ];
45
-
46
- protected readonly NON_HC_COLORS = [
47
- 'var(--theia-terminal-ansiBlue)',
48
- 'var(--theia-terminal-ansiGreen)',
49
- 'var(--theia-terminal-ansiRed)',
50
- 'var(--theia-terminal-ansiYellow)',
51
- 'var(--theia-terminal-ansiMagenta)',
52
- ];
53
-
54
- protected readonly variables: VariableRange[];
55
- protected currentIndex = -1;
56
- protected currentVariable: VariableRange | undefined = undefined;
57
- protected handledVariables = new Map<string, Long>();
58
- protected workingColors: string[];
59
- protected lastCall = Long.MAX_UNSIGNED_VALUE;
60
-
61
- constructor(variables: VariableRange[], highContrast = false) {
62
- this.variables = variables.sort((a, b) => a.address.lessThan(b.address) ? -1 : 1);
63
- this.workingColors = highContrast ? this.HIGH_CONTRAST_COLORS : this.NON_HC_COLORS;
64
- }
65
-
66
- /**
67
- * @param address the address of interest.
68
- *
69
- * This function should be called with a sequence of addresses in increasing order
70
- */
71
- getVariableForAddress(address: Long): VariableDecoration | undefined {
72
- if (address.lessThan(this.lastCall)) {
73
- this.initialize(address);
74
- }
75
- this.lastCall = address;
76
- if (this.currentVariable && address.greaterThanOrEqual(this.currentVariable.pastTheEndAddress)) {
77
- this.currentIndex += 1;
78
- this.currentVariable = this.variables[this.currentIndex];
79
- }
80
- if (!this.currentVariable) {
81
- return undefined;
82
- }
83
- const { name } = this.currentVariable;
84
- // const color = `hsl(${HSL_BASIS * this.currentIndex / this.variables.length}, 60%, 60%)`;
85
- const color = this.workingColors[this.currentIndex % this.workingColors.length];
86
- const decoration: VariableDecoration = {
87
- name,
88
- color,
89
- firstAppearance: this.handledVariables.get(name) === address || !this.handledVariables.has(name),
90
- };
91
- if (address.greaterThanOrEqual(this.currentVariable.address) && address.lessThan(this.currentVariable.pastTheEndAddress)) {
92
- this.handledVariables.set(name, address);
93
- return decoration;
94
- }
95
- return undefined;
96
- }
97
-
98
- protected initialize(address: Long): void {
99
- this.handledVariables.clear();
100
- const firstCandidateIndex = this.variables.findIndex(variable => address.lessThan(variable.pastTheEndAddress));
101
- if (firstCandidateIndex === -1) {
102
- this.currentIndex = this.variables.length;
103
- } else {
104
- this.currentVariable = this.variables[firstCandidateIndex];
105
- this.currentIndex = firstCandidateIndex;
106
- }
107
- }
108
-
109
- searchForVariable(addressOrName: Long | string): VariableRange | undefined {
110
- if (typeof addressOrName === 'string') {
111
- return this.variables.find(variable => variable.name === addressOrName);
112
- }
113
- let upperLimit = this.variables.length - 1;
114
- let lowerLimit = 0;
115
- while (upperLimit >= lowerLimit) {
116
- const target = Math.floor((lowerLimit + upperLimit) / 2);
117
- const candidate = this.variables[target];
118
- if (addressOrName >= candidate.address && addressOrName < candidate.pastTheEndAddress) {
119
- return candidate;
120
- }
121
- if (addressOrName < candidate.address) {
122
- upperLimit = target - 1;
123
- }
124
- if (addressOrName >= candidate.pastTheEndAddress) {
125
- lowerLimit = target + 1;
126
- }
127
- }
128
- return undefined;
129
- }
130
- }
131
-
132
- /**
133
- * Get the Registers of the currently selected frame.
134
- */
135
- export async function getRegisters(session: DebugSession | undefined): Promise<DebugVariable[]> {
136
- if (session === undefined) {
137
- console.warn('No active debug session.');
138
- return [];
139
- }
140
-
141
- const frame = session.currentFrame;
142
- if (frame === undefined) {
143
- throw new Error('No active stack frame.');
144
- }
145
-
146
- const registers: DebugVariable[] = [];
147
-
148
- const scopes = await frame.getScopes();
149
- const regScope = scopes.find(x => x.render() === 'Registers');
150
- if (regScope !== undefined) {
151
- const handleRegisterScope = async (scope: DebugVariable | DebugScope) => {
152
- const variables = await scope.getElements();
153
- for (const v of variables) {
154
- if (v instanceof DebugVariable) {
155
- try {
156
- BigInt(v.value); // Make sure the value looks like a numerical value
157
- registers.push(v);
158
- } catch {
159
- handleRegisterScope(v);
160
- }
161
- }
162
- }
163
- };
164
- handleRegisterScope(regScope);
165
- } else {
166
- throw new Error('No Register scope in active stack frame.');
167
- }
168
- return registers;
169
- }
170
-
1
+ /********************************************************************************
2
+ * Copyright (C) 2021 Ericsson and others.
3
+ *
4
+ * This program and the accompanying materials are made available under the
5
+ * terms of the Eclipse Public License v. 2.0 which is available at
6
+ * http://www.eclipse.org/legal/epl-2.0.
7
+ *
8
+ * This Source Code may also be made available under the following Secondary
9
+ * Licenses when the conditions for such availability set forth in the Eclipse
10
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
+ * with the GNU Classpath Exception which is available at
12
+ * https://www.gnu.org/software/classpath/license.html.
13
+ *
14
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
+ ********************************************************************************/
16
+
17
+ import { DebugScope, DebugVariable } from '@theia/debug/lib/browser/console/debug-console-items';
18
+ import { DebugSession } from '@theia/debug/lib/browser/debug-session';
19
+ import * as Long from 'long';
20
+
21
+ export interface VariableRange {
22
+ name: string;
23
+ address: Long;
24
+ pastTheEndAddress: Long;
25
+ type?: string;
26
+ value?: string;
27
+ }
28
+
29
+ export interface VariableDecoration {
30
+ name: string;
31
+ color: string;
32
+ firstAppearance?: boolean;
33
+ }
34
+
35
+ export interface RegisterReadResult {
36
+ threadId: string | undefined;
37
+ registers: DebugVariable[];
38
+ }
39
+
40
+ export class VariableFinder {
41
+ protected readonly HIGH_CONTRAST_COLORS = [
42
+ 'var(--theia-contrastActiveBorder)',
43
+ 'var(--theia-contrastBorder)',
44
+ ];
45
+
46
+ protected readonly NON_HC_COLORS = [
47
+ 'var(--theia-terminal-ansiBlue)',
48
+ 'var(--theia-terminal-ansiGreen)',
49
+ 'var(--theia-terminal-ansiRed)',
50
+ 'var(--theia-terminal-ansiYellow)',
51
+ 'var(--theia-terminal-ansiMagenta)',
52
+ ];
53
+
54
+ protected readonly variables: VariableRange[];
55
+ protected currentIndex = -1;
56
+ protected currentVariable: VariableRange | undefined = undefined;
57
+ protected handledVariables = new Map<string, Long>();
58
+ protected workingColors: string[];
59
+ protected lastCall = Long.MAX_UNSIGNED_VALUE;
60
+
61
+ constructor(variables: VariableRange[], highContrast = false) {
62
+ this.variables = variables.sort((a, b) => a.address.lessThan(b.address) ? -1 : 1);
63
+ this.workingColors = highContrast ? this.HIGH_CONTRAST_COLORS : this.NON_HC_COLORS;
64
+ }
65
+
66
+ /**
67
+ * @param address the address of interest.
68
+ *
69
+ * This function should be called with a sequence of addresses in increasing order
70
+ */
71
+ getVariableForAddress(address: Long): VariableDecoration | undefined {
72
+ if (address.lessThan(this.lastCall)) {
73
+ this.initialize(address);
74
+ }
75
+ this.lastCall = address;
76
+ if (this.currentVariable && address.greaterThanOrEqual(this.currentVariable.pastTheEndAddress)) {
77
+ this.currentIndex += 1;
78
+ this.currentVariable = this.variables[this.currentIndex];
79
+ }
80
+ if (!this.currentVariable) {
81
+ return undefined;
82
+ }
83
+ const { name } = this.currentVariable;
84
+ // const color = `hsl(${HSL_BASIS * this.currentIndex / this.variables.length}, 60%, 60%)`;
85
+ const color = this.workingColors[this.currentIndex % this.workingColors.length];
86
+ const decoration: VariableDecoration = {
87
+ name,
88
+ color,
89
+ firstAppearance: this.handledVariables.get(name) === address || !this.handledVariables.has(name),
90
+ };
91
+ if (address.greaterThanOrEqual(this.currentVariable.address) && address.lessThan(this.currentVariable.pastTheEndAddress)) {
92
+ this.handledVariables.set(name, address);
93
+ return decoration;
94
+ }
95
+ return undefined;
96
+ }
97
+
98
+ protected initialize(address: Long): void {
99
+ this.handledVariables.clear();
100
+ const firstCandidateIndex = this.variables.findIndex(variable => address.lessThan(variable.pastTheEndAddress));
101
+ if (firstCandidateIndex === -1) {
102
+ this.currentIndex = this.variables.length;
103
+ } else {
104
+ this.currentVariable = this.variables[firstCandidateIndex];
105
+ this.currentIndex = firstCandidateIndex;
106
+ }
107
+ }
108
+
109
+ searchForVariable(addressOrName: Long | string): VariableRange | undefined {
110
+ if (typeof addressOrName === 'string') {
111
+ return this.variables.find(variable => variable.name === addressOrName);
112
+ }
113
+ let upperLimit = this.variables.length - 1;
114
+ let lowerLimit = 0;
115
+ while (upperLimit >= lowerLimit) {
116
+ const target = Math.floor((lowerLimit + upperLimit) / 2);
117
+ const candidate = this.variables[target];
118
+ if (addressOrName >= candidate.address && addressOrName < candidate.pastTheEndAddress) {
119
+ return candidate;
120
+ }
121
+ if (addressOrName < candidate.address) {
122
+ upperLimit = target - 1;
123
+ }
124
+ if (addressOrName >= candidate.pastTheEndAddress) {
125
+ lowerLimit = target + 1;
126
+ }
127
+ }
128
+ return undefined;
129
+ }
130
+ }
131
+
132
+ /**
133
+ * Get the Registers of the currently selected frame.
134
+ */
135
+ export async function getRegisters(session: DebugSession | undefined): Promise<DebugVariable[]> {
136
+ if (session === undefined) {
137
+ console.warn('No active debug session.');
138
+ return [];
139
+ }
140
+
141
+ const frame = session.currentFrame;
142
+ if (frame === undefined) {
143
+ throw new Error('No active stack frame.');
144
+ }
145
+
146
+ const registers: DebugVariable[] = [];
147
+
148
+ const scopes = await frame.getScopes();
149
+ const regScope = scopes.find(x => x.render() === 'Registers');
150
+ if (regScope !== undefined) {
151
+ const handleRegisterScope = async (scope: DebugVariable | DebugScope) => {
152
+ const variables = await scope.getElements();
153
+ for (const v of variables) {
154
+ if (v instanceof DebugVariable) {
155
+ try {
156
+ BigInt(v.value); // Make sure the value looks like a numerical value
157
+ registers.push(v);
158
+ } catch {
159
+ handleRegisterScope(v);
160
+ }
161
+ }
162
+ }
163
+ };
164
+ handleRegisterScope(regScope);
165
+ } else {
166
+ throw new Error('No Register scope in active stack frame.');
167
+ }
168
+ return registers;
169
+ }
170
+
@@ -1,61 +1,61 @@
1
- /********************************************************************************
2
- * Copyright (C) 2021 Ericsson and others.
3
- *
4
- * This program and the accompanying materials are made available under the
5
- * terms of the Eclipse Public License v. 2.0 which is available at
6
- * http://www.eclipse.org/legal/epl-2.0.
7
- *
8
- * This Source Code may also be made available under the following Secondary
9
- * Licenses when the conditions for such availability set forth in the Eclipse
10
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
- * with the GNU Classpath Exception which is available at
12
- * https://www.gnu.org/software/classpath/license.html.
13
- *
14
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
- ********************************************************************************/
16
-
17
- .multi-select-bar {
18
- display: flex;
19
- flex-flow: row nowrap;
20
- user-select: none;
21
- box-sizing: border-box;
22
- }
23
-
24
- .multi-select-checkbox-wrapper {
25
- display: flex;
26
- position: relative;
27
- flex: auto;
28
- text-align: center;
29
- }
30
-
31
- .multi-select-label {
32
- height: 100%;
33
- flex: auto;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- border: 1px solid;
38
- padding: 0 var(--theia-ui-padding);
39
- background-color: var(--theia-editor-background);
40
- border-color: var(--theia-dropdown-border);
41
- box-sizing: border-box;
42
- }
43
-
44
- .multi-select-checkbox-wrapper input:checked ~ .multi-select-label {
45
- background-color: var(--theia-input-background);
46
- border-color: var(--theia-sideBar-foreground);
47
- text-decoration: underline;
48
- font-weight: bolder;
49
- }
50
-
51
- .multi-select-checkbox {
52
- appearance: none;
53
- -webkit-appearance: none;
54
- position: absolute;
55
- left: 0;
56
- top: 0;
57
- margin: 0;
58
- height: 100%;
59
- width: 100%;
60
- cursor: pointer;
61
- }
1
+ /********************************************************************************
2
+ * Copyright (C) 2021 Ericsson and others.
3
+ *
4
+ * This program and the accompanying materials are made available under the
5
+ * terms of the Eclipse Public License v. 2.0 which is available at
6
+ * http://www.eclipse.org/legal/epl-2.0.
7
+ *
8
+ * This Source Code may also be made available under the following Secondary
9
+ * Licenses when the conditions for such availability set forth in the Eclipse
10
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
+ * with the GNU Classpath Exception which is available at
12
+ * https://www.gnu.org/software/classpath/license.html.
13
+ *
14
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
+ ********************************************************************************/
16
+
17
+ .multi-select-bar {
18
+ display: flex;
19
+ flex-flow: row nowrap;
20
+ user-select: none;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .multi-select-checkbox-wrapper {
25
+ display: flex;
26
+ position: relative;
27
+ flex: auto;
28
+ text-align: center;
29
+ }
30
+
31
+ .multi-select-label {
32
+ height: 100%;
33
+ flex: auto;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ border: 1px solid;
38
+ padding: 0 var(--theia-ui-padding);
39
+ background-color: var(--theia-editor-background);
40
+ border-color: var(--theia-dropdown-border);
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .multi-select-checkbox-wrapper input:checked ~ .multi-select-label {
45
+ background-color: var(--theia-input-background);
46
+ border-color: var(--theia-sideBar-foreground);
47
+ text-decoration: underline;
48
+ font-weight: bolder;
49
+ }
50
+
51
+ .multi-select-checkbox {
52
+ appearance: none;
53
+ -webkit-appearance: none;
54
+ position: absolute;
55
+ left: 0;
56
+ top: 0;
57
+ margin: 0;
58
+ height: 100%;
59
+ width: 100%;
60
+ cursor: pointer;
61
+ }
@@ -1,75 +1,75 @@
1
- /********************************************************************************
2
- * Copyright (C) 2021 Ericsson and others.
3
- *
4
- * This program and the accompanying materials are made available under the
5
- * terms of the Eclipse Public License v. 2.0 which is available at
6
- * http://www.eclipse.org/legal/epl-2.0.
7
- *
8
- * This Source Code may also be made available under the following Secondary
9
- * Licenses when the conditions for such availability set forth in the Eclipse
10
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
- * with the GNU Classpath Exception which is available at
12
- * https://www.gnu.org/software/classpath/license.html.
13
- *
14
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
- ********************************************************************************/
16
-
17
- import * as React from '@theia/core/shared/react';
18
- import { MWLabel, MWLabelProps } from './memory-widget-components';
19
-
20
- export interface SingleSelectItemProps {
21
- id: string;
22
- label: string;
23
- defaultChecked?: boolean;
24
- }
25
- interface MultiSelectBarProps {
26
- items: SingleSelectItemProps[];
27
- id?: string;
28
- onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown;
29
- }
30
-
31
- export const MultiSelectBar: React.FC<MultiSelectBarProps> = ({ items, onSelectionChanged, id }) => {
32
- const changeHandler: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(e => {
33
- onSelectionChanged(e.target.id, e.target.checked);
34
- }, [onSelectionChanged]);
35
-
36
- return (
37
- <div className='multi-select-bar' id={id}>
38
- {items.map(({ label, id: itemId, defaultChecked }) => (<LabeledCheckbox
39
- label={label}
40
- onChange={changeHandler}
41
- defaultChecked={!!defaultChecked}
42
- id={itemId}
43
- key={`${label}-${id}-checkbox`}
44
- />))}
45
- </div>
46
- );
47
- };
48
-
49
- interface LabeledCheckboxProps {
50
- label: string;
51
- id: string;
52
- onChange: React.ChangeEventHandler;
53
- defaultChecked: boolean;
54
- }
55
-
56
- const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({ defaultChecked, label, onChange, id }) => (
57
- <div className='multi-select-checkbox-wrapper'>
58
- <input
59
- tabIndex={0}
60
- type='checkbox'
61
- id={id}
62
- className='multi-select-checkbox'
63
- defaultChecked={defaultChecked}
64
- onChange={onChange}
65
- />
66
- <MWLabel id={id} label={label} classNames={['multi-select-label']} />
67
- </div>
68
- );
69
-
70
- export const MWMultiSelect: React.FC<MWLabelProps & MultiSelectBarProps> = ({ id, label, disabled, items, onSelectionChanged }) => (
71
- <>
72
- <MWLabel id={id} label={label} disabled={disabled} />
73
- <MultiSelectBar id={id} items={items} onSelectionChanged={onSelectionChanged} />
74
- </>
75
- );
1
+ /********************************************************************************
2
+ * Copyright (C) 2021 Ericsson and others.
3
+ *
4
+ * This program and the accompanying materials are made available under the
5
+ * terms of the Eclipse Public License v. 2.0 which is available at
6
+ * http://www.eclipse.org/legal/epl-2.0.
7
+ *
8
+ * This Source Code may also be made available under the following Secondary
9
+ * Licenses when the conditions for such availability set forth in the Eclipse
10
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
11
+ * with the GNU Classpath Exception which is available at
12
+ * https://www.gnu.org/software/classpath/license.html.
13
+ *
14
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
15
+ ********************************************************************************/
16
+
17
+ import * as React from '@theia/core/shared/react';
18
+ import { MWLabel, MWLabelProps } from './memory-widget-components';
19
+
20
+ export interface SingleSelectItemProps {
21
+ id: string;
22
+ label: string;
23
+ defaultChecked?: boolean;
24
+ }
25
+ interface MultiSelectBarProps {
26
+ items: SingleSelectItemProps[];
27
+ id?: string;
28
+ onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown;
29
+ }
30
+
31
+ export const MultiSelectBar: React.FC<MultiSelectBarProps> = ({ items, onSelectionChanged, id }) => {
32
+ const changeHandler: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(e => {
33
+ onSelectionChanged(e.target.id, e.target.checked);
34
+ }, [onSelectionChanged]);
35
+
36
+ return (
37
+ <div className='multi-select-bar' id={id}>
38
+ {items.map(({ label, id: itemId, defaultChecked }) => (<LabeledCheckbox
39
+ label={label}
40
+ onChange={changeHandler}
41
+ defaultChecked={!!defaultChecked}
42
+ id={itemId}
43
+ key={`${label}-${id}-checkbox`}
44
+ />))}
45
+ </div>
46
+ );
47
+ };
48
+
49
+ interface LabeledCheckboxProps {
50
+ label: string;
51
+ id: string;
52
+ onChange: React.ChangeEventHandler;
53
+ defaultChecked: boolean;
54
+ }
55
+
56
+ const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({ defaultChecked, label, onChange, id }) => (
57
+ <div className='multi-select-checkbox-wrapper'>
58
+ <input
59
+ tabIndex={0}
60
+ type='checkbox'
61
+ id={id}
62
+ className='multi-select-checkbox'
63
+ defaultChecked={defaultChecked}
64
+ onChange={onChange}
65
+ />
66
+ <MWLabel id={id} label={label} classNames={['multi-select-label']} />
67
+ </div>
68
+ );
69
+
70
+ export const MWMultiSelect: React.FC<MWLabelProps & MultiSelectBarProps> = ({ id, label, disabled, items, onSelectionChanged }) => (
71
+ <>
72
+ <MWLabel id={id} label={label} disabled={disabled} />
73
+ <MultiSelectBar id={id} items={items} onSelectionChanged={onSelectionChanged} />
74
+ </>
75
+ );