FilesExpand file tree

develop

/

TreeDoc.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

105 lines (97 loc) · 4.45 KB

develop

/

TreeDoc.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

105 lines (97 loc) · 4.45 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

import React, { useState } from "react";

import { Doc, Indent } from "./Doc";

import { Id } from "./Data";

import { Pre, Tag, Tooltip } from "@blueprintjs/core";

/** Render a {@link Doc} as a "tree" of nested levels. */

export const TreeDocComponent: React.FC<{ doc: Doc }> = ({doc}) => {

const [highlightedBreakTag, setHighlightedBreakTag] = useState<Id>();

function renderConstIndent(indent: Indent) {

switch (indent.type) {

case "const":

return <Tag intent={"success"}>+{indent.amount}</Tag>;

case "if":

throw Error(`Expected const indent but got ${indent}`)

}

}

/** Render an indent differently, depending on whether it was conditional or not. */

function renderIndentTag(indent: Indent, evaluatedIndent: number) {

switch (indent.type) {

case "const":

if (indent.amount === 0) {

return;

}

return <Tag intent={"success"}>+{indent.amount}</Tag>;

case "if":

return <Tooltip position={"bottom-right"} content={

<span>

thenIndent={renderConstIndent(indent.thenIndent)}{" "}

elseIndent={renderConstIndent(indent.elseIndent)}

</span>}>

<Tag intent={"warning"}

onMouseEnter={() => setHighlightedBreakTag(indent.condition.id)}

onMouseLeave={() => setHighlightedBreakTag(undefined)}>

+{evaluatedIndent}

</Tag>

</Tooltip>

}

}

function classForBreakTagId(id: Id) {

return `break-tag-${id}`;

}

function renderDoc(doc: Doc) {

switch (doc.type) {

case "break":

const clazz = doc.optTag !== null

? (`conditional ${classForBreakTagId(doc.optTag.id)}`

+ (highlightedBreakTag === doc.optTag.id ? ' referenced' : ''))

: '';

if (doc.breakState.broken) {

return <span key={doc.id}>

<Tooltip content={`New indent: ${doc.breakState.newIndent}`}>

<span className={clazz + " doc doc-break taken"}>⏎</span>

</Tooltip>

<br/>

</span>;

} else {

return <span key={doc.id} className={clazz + " doc doc-break"}>

⏎{doc.flat ? `(${doc.flat})` : ''}

</span>

}

case "level":

// Skip levels without any contents

if (doc.flat === '') {

return null;

}

const plusIndent = doc.openOp.plusIndent;

const indent = renderIndentTag(plusIndent, doc.evalPlusIndent);

const debugName = (doc.openOp.debugName !== null)

? <span>"{doc.openOp.debugName}"</span> : null;

const breakBehaviour = (doc.openOp.breakBehaviour.type !== "breakThisLevel")

? <Tag intent={"primary"}>{doc.openOp.breakBehaviour.type}</Tag> : null;

const breakabilityIfLastLevel = (doc.openOp.breakabilityIfLastLevel !== "ABORT")

? <Tag intent={"none"}>{doc.openOp.breakabilityIfLastLevel}</Tag> : null;

// TODO other information about the doc

return <div className={"doc doc-level"} key={doc.id}>

<div className={"banner"}>

{indent}

{debugName}

{breakBehaviour}

{breakabilityIfLastLevel}

</div>

{doc.docs.map(renderDoc)}

</div>;

case "comment":

// Displaying original comment on hover (before formatting / reflowing)

return <Tooltip key={doc.id} content={<div>Original: <Pre>{doc.flat}</Pre></div>}>

<span className={"doc doc-comment highlight"}>{doc.text}</span>

</Tooltip>;

case "space":

return <span key={doc.id} className={"doc doc-space highlight"}>&nbsp;</span>;

case "token":

return <span key={doc.id} className={"doc-token highlight"}>{doc.flat}</span>;

}

}

return (

<Pre className="TreeDoc">{renderDoc(doc)}</Pre>

);

};