60ca4cd · rowtype-yoga/psfp

28import Yoga.Compiler.Types (Compiler)

29import Yoga.Editor (getValue, mkEditor, setValue)

30

31−type Props

31+type Props =

32− = { initialCode ∷ String, height ∷ String, language ∷ String }

32+ { initialCode ∷ String, height ∷ String, language ∷ String }

33

34mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)

35mkCompileEditor { compileAndRun } = do

47 compileResult /\ modifyCompileResult <- useState Nothing

48 let

49 showEditor = updateActiveIndex 0

50−

51 showResult = updateActiveIndex 1

50 showResult = updateActiveIndex 1

52−

53 reset = resetCompileResult *> showEditor

51 reset = resetCompileResult *> showEditor

54−

55 run = compile *> showResult

52 run = compile *> showResult

56−

57 resetCompileResult = do

53 resetCompileResult = do

58 setCompileResult Nothing

54 setCompileResult Nothing

59 for_ maybeEditor (setValue initialCode)

55 for_ maybeEditor (setValue initialCode)

60−

61 compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String

56 compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String

62 compileResultToString = case _ of

57 compileResultToString = case _ of

63 Nothing -> ""

58 Nothing -> ""

64 Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"

59 Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"

65 Just (Right (Right r)) -> r.stdout

60 Just (Right (Right r)) -> r.stdout

66 Just (Left e) -> message e

61 Just (Left e) -> message e

67−

68 setCompileResult = modifyCompileResult <<< const

62 setCompileResult = modifyCompileResult <<< const

69−

70 compile = do

63 compile = do

71 for_ maybeEditor \ed -> do

64 for_ maybeEditor \ed -> do

72 setCompileResult Nothing

65 setCompileResult Nothing

74 launchAff_ do

67 launchAff_ do

75 res <- try $ compileAndRun { code }

68 res <- try $ compileAndRun { code }

76 setCompileResult (Just res) # liftEffect

69 setCompileResult (Just res) # liftEffect

77−

78 tabs ∷ JSX

70 tabs ∷ JSX

79 tabs =

71 tabs =

80 Block.segmented

72 Block.segmented

81 </> { activeIndex

73 </> { activeIndex

82 , updateActiveIndex

74 , updateActiveIndex

83 , buttonContents:

75 , buttonContents:

84− twoOrMore

76+ twoOrMore

85− { id: "editor", value: "Editor" }

77+ { id: "editor", value: "Editor" }

86− { id: "Result", value: "Result" }

78+ { id: "Result", value: "Result" }

87− []

79+ []

88 }

80 }

89−

90 editorView ∷ JSX

81 editorView ∷ JSX

91 editorView = editor </> { onLoad, height, language }

82 editorView = editor </> { onLoad, height, language }

92−

93 buttons ∷ Array JSX -> JSX

83 buttons ∷ Array JSX -> JSX

94 buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }

84 buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }

95−

96 button =

85 button =

97 Y.el motionButton

86 Y.el motionButton

98 <<< M.motion

87 <<< M.motion

99 { transition: M.transition $ { duration: 0.2 }

88 { transition: M.transition $ { duration: 0.2 }

100 }

89 }

101−

102 resetButton ∷ JSX

90 resetButton ∷ JSX

103 resetButton =

91 resetButton =

104 button

92 button

105 { buttonType: BT.Generic, onClick: handler_ reset }

93 { buttonType: BT.Generic, onClick: handler_ reset }

106 [ R.text "Reset" ]

94 [ R.text "Reset" ]

107−

108 runButton ∷ JSX

95 runButton ∷ JSX

109 runButton =

96 runButton =

110 button

97 button

111 { buttonType: BT.Primary, onClick: handler_ run }

98 { buttonType: BT.Primary, onClick: handler_ run }

112 [ R.text "Run" ]

99 [ R.text "Run" ]

113−

114 buttonControls ∷ Array JSX -> JSX

100 buttonControls ∷ Array JSX -> JSX

115 buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}

101 buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}

116−

117 tabContainer ∷ Array JSX -> JSX

102 tabContainer ∷ Array JSX -> JSX

118 tabContainer children =

103 tabContainer children =

119 Y.styled R.div'

104 Y.styled R.div'

120 { className: "tabby"

105 { className: "tabby"

121 , css:

106 , css:

122− E.css

107+ E.css

123− { background: E.str colour.backgroundLayer4

108+ { background: E.str colour.backgroundLayer3

124− , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight

109+ , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight

125− , borderRadius: E.str "14px 14px 0 0"

110+ , borderRadius: E.str "14px 14px 0 0"

126− , paddingLeft: E.var "--s-1"

111+ , paddingLeft: E.var "--s-1"

127− , paddingRight: E.var "--s-1"

112+ , paddingRight: E.var "--s-1"

128− , paddingTop: E.str "0"

113+ , paddingTop: E.str "0"

129− , paddingBottom: E.str "0"

114+ , paddingBottom: E.str "0"

130− , marginBottom: E.str "0"

115+ , marginBottom: E.str "0"

131− , zIndex: E.str "0"

116+ , zIndex: E.str "0"

132− }

117+ }

133 }

118 }

134 [ Y.el Block.centre { andText: true } children

119 [ Y.el Block.centre { andText: true } children

135 ]

120 ]

136−

137 terminal ∷ Array JSX -> JSX

121 terminal ∷ Array JSX -> JSX

138 terminal =

122 terminal =

139 Y.el motionBox1

123 Y.el motionBox1

141 { layout: M.layout true

125 { layout: M.layout true

142 }

126 }

143 { css:

127 { css:

144− E.css

128+ E.css

145− { background: E.str "rgb(42,42,59)"

129+ { background: E.str "rgb(42,42,59)"

146− , boxSizing: E.str "content-box"

130+ , boxSizing: E.str "content-box"

147− , margin: E.str "0"

131+ , margin: E.str "0"

148− , minHeight: E.str "8em"

132+ , minHeight: E.str "8em"

149− , padding: E.str "0"

133+ , padding: E.str "0"

150− , display: E.str "flex"

134+ , display: E.str "flex"

151− }

135+ }

152 }

136 }

153−

154 container =

137 container =

155 Y.el motionBox1

138 Y.el motionBox1

156 $ M.motion { layout: M.layout true }

139 $ M.motion { layout: M.layout true }

157 { css:

140 { css:

158− E.css

141+ E.css

159− { background: E.str colour.backgroundLayer4

142+ { background: E.str colour.backgroundLayer3

160− , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow

143+ , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow

161− , borderRadius: E.str "0 0 14px 14px"

144+ , borderRadius: E.str "0 0 14px 14px"

162− , paddingLeft: E.str "0"

145+ , padding: E.str "0"

163− , paddingRight: E.str "0"

164− , paddingTop: E.str "0"

165− , paddingBottom: E.var "--s-1"

166− , zIndex: E.str "0"

146+ , zIndex: E.str "0"

167− }

147+ }

168 }

148 }

169 pure

149 pure

170 $ Y.el Block.stack { space: E.str "0" }

150 $ Y.el Block.stack { space: E.str "0" }