@@ -7,6 +7,15 @@ import { EditorFrameProps } from "./editor-frame"
77
88export { MiniEditor , MiniEditorProps }
99
10+ type SpringConfig = Parameters < typeof useSpring > [ 1 ]
11+
12+ const defaultSpring = {
13+ stiffness : 120 ,
14+ damping : 24 ,
15+ mass : 0.2 ,
16+ decimals : 3 ,
17+ }
18+
1019type SingleFileEditorProps = {
1120 code : string
1221 lang : string
@@ -15,17 +24,20 @@ type SingleFileEditorProps = {
1524 terminal ?: string
1625 frameProps ?: Partial < EditorFrameProps >
1726 codeProps ?: Partial < CodeProps >
27+ springConfig ?: SpringConfig
1828}
1929type SinglePanelEditorProps = {
2030 files : StepFile [ ]
2131 active : string
2232 terminal ?: string
2333 frameProps ?: Partial < EditorFrameProps >
2434 codeProps ?: Partial < CodeProps >
35+ springConfig ?: SpringConfig
2536}
2637type TwoPanelEditorProps = EditorStep & {
2738 frameProps ?: Partial < EditorFrameProps >
2839 codeProps ?: Partial < CodeProps >
40+ springConfig ?: SpringConfig
2941}
3042type MiniEditorProps =
3143 | SingleFileEditorProps
@@ -48,8 +60,8 @@ function SingleFileEditor({
4860 focus,
4961 filename = "" ,
5062 terminal,
51- frameProps ,
52- codeProps ,
63+ springConfig ,
64+ ... props
5365} : SingleFileEditorProps ) {
5466 const step = React . useMemo ( ( ) => {
5567 const step : EditorStep = {
@@ -64,24 +76,26 @@ function SingleFileEditor({
6476 return step
6577 } , [ code , lang , focus , filename , terminal ] )
6678
67- const { prev, next, t } = useStepSpring ( step )
79+ const { prev, next, t } = useStepSpring (
80+ step ,
81+ springConfig
82+ )
6883 return (
6984 < MiniEditorTween
70- frameProps = { frameProps }
7185 t = { t }
7286 backward = { false }
7387 prev = { prev }
7488 next = { next }
75- codeProps = { codeProps }
89+ { ... props }
7690 />
7791 )
7892}
7993function SinglePanelEditor ( {
8094 files,
8195 active,
8296 terminal,
83- frameProps ,
84- codeProps ,
97+ springConfig ,
98+ ... props
8599} : SinglePanelEditorProps ) {
86100 const step = React . useMemo ( ( ) => {
87101 const tabs = files . map ( file => file . name )
@@ -97,25 +111,27 @@ function SinglePanelEditor({
97111 return step
98112 } , [ files , active , terminal ] )
99113
100- const { prev, next, t } = useStepSpring ( step )
114+ const { prev, next, t } = useStepSpring (
115+ step ,
116+ springConfig
117+ )
101118 return (
102119 < MiniEditorTween
103- frameProps = { frameProps }
104120 t = { t }
105121 backward = { false }
106122 prev = { prev }
107123 next = { next }
108- codeProps = { codeProps }
124+ { ... props }
109125 />
110126 )
111127}
112128function TwoPanelEditor ( {
113- frameProps,
114- codeProps,
115129 northPanel,
116130 southPanel,
117131 files,
118132 terminal,
133+ springConfig,
134+ ...props
119135} : TwoPanelEditorProps ) {
120136 const step = React . useMemo ( ( ) => {
121137 return {
@@ -126,20 +142,25 @@ function TwoPanelEditor({
126142 }
127143 } , [ northPanel , southPanel , files , terminal ] )
128144
129- const { prev, next, t } = useStepSpring ( step )
145+ const { prev, next, t } = useStepSpring (
146+ step ,
147+ springConfig
148+ )
130149 return (
131150 < MiniEditorTween
132- frameProps = { frameProps }
133151 t = { t }
134152 backward = { false }
135153 prev = { prev }
136154 next = { next }
137- codeProps = { codeProps }
155+ { ... props }
138156 />
139157 )
140158}
141159
142- function useStepSpring ( step : EditorStep ) {
160+ function useStepSpring (
161+ step : EditorStep ,
162+ springConfig : SpringConfig = defaultSpring
163+ ) {
143164 const [ { target, prev, next } , setState ] = React . useState (
144165 {
145166 target : 0 ,
@@ -158,12 +179,7 @@ function useStepSpring(step: EditorStep) {
158179 }
159180 } , [ step ] )
160181
161- const [ progress ] = useSpring ( target , {
162- stiffness : 256 ,
163- damping : 24 ,
164- mass : 0.2 ,
165- decimals : 3 ,
166- } )
182+ const [ progress ] = useSpring ( target , springConfig )
167183
168184 const t = progress % 1
169185
0 commit comments