-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
ConfigTypeScript.tsx
85 lines (77 loc) · 2.51 KB
/
ConfigTypeScript.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, { useCallback, useEffect, useState } from 'react';
import { shallowEqual } from '../lib/shallowEqual';
import type { ConfigModel, TSConfig } from '../types';
import type { ConfigOptionsType } from './ConfigEditor';
import ConfigEditor from './ConfigEditor';
import { getTypescriptOptions, parseTSConfig, toJson } from './utils';
interface ConfigTypeScriptProps {
readonly isOpen: boolean;
readonly onClose: (config?: Partial<ConfigModel>) => void;
readonly config?: string;
}
function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
const { onClose: onCloseProps, isOpen, config } = props;
const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
const [configObject, updateConfigObject] = useState<TSConfig>();
useEffect(() => {
if (isOpen) {
updateConfigObject(parseTSConfig(config));
}
}, [isOpen, config]);
useEffect(() => {
if (window.ts) {
updateOptions(
Object.values(
getTypescriptOptions().reduce<Record<string, ConfigOptionsType>>(
(group, item) => {
const category = item.category!.message;
group[category] = group[category] ?? {
heading: category,
fields: [],
};
if (item.type === 'boolean') {
group[category].fields.push({
key: item.name,
type: 'boolean',
label: item.description!.message,
});
} else if (item.type instanceof Map) {
group[category].fields.push({
key: item.name,
type: 'string',
label: item.description!.message,
enum: ['', ...Array.from<string>(item.type.keys())],
});
}
return group;
},
{},
),
),
);
}
}, [isOpen]);
const onClose = useCallback(
(newConfig: Record<string, unknown>) => {
const cfg = { ...newConfig };
if (!shallowEqual(cfg, configObject?.compilerOptions)) {
onCloseProps({
tsconfig: toJson({ ...(configObject ?? {}), compilerOptions: cfg }),
});
} else {
onCloseProps();
}
},
[onCloseProps, configObject],
);
return (
<ConfigEditor
header="TypeScript Config"
options={tsConfigOptions}
values={configObject?.compilerOptions ?? {}}
isOpen={isOpen}
onClose={onClose}
/>
);
}
export default ConfigTypeScript;