@@ -3,45 +3,94 @@ import * as React from "react";
3
3
import { NumericTextInput } from "./numeric_text_input" ;
4
4
5
5
export interface InputState {
6
- star_mass : number ,
7
- planet_mass : number ,
8
- planet_perihelion : number ,
9
- planet_aphelion : number ,
10
- day_duration : number ,
11
- moon_mass : number ,
12
- moon_perigee : number ,
13
- moon_apogee : number
6
+ star_mass : number ;
7
+ planet_mass : number ;
8
+ planet_perihelion : number ;
9
+ planet_aphelion : number ;
10
+ day_duration : number ;
11
+ moon_mass : number ;
12
+ moon_perigee : number ;
13
+ moon_apogee : number ;
14
14
}
15
15
16
- export type GeneratorInputProps = InputState & { onClick : ( ) => void , onChange : ( id , value ) => void }
16
+ export type GeneratorInputProps = InputState & {
17
+ onClick : ( ) => void ;
18
+ onChange : ( id , value ) => void ;
19
+ } ;
17
20
18
21
export class GeneratorInput extends React . Component < GeneratorInputProps , { } > {
22
+ constructor ( props : GeneratorInputProps ) {
23
+ super ( props ) ;
24
+ }
19
25
20
- constructor ( props : GeneratorInputProps ) {
21
- super ( props ) ;
22
- this . props = props ;
23
- }
26
+ handleOnChange ( id : string , new_value : number ) {
27
+ console . log ( `Update input value for ${ id } with value ${ new_value } ` ) ;
28
+ this . props . onChange ( id , new_value ) ;
29
+ }
24
30
25
- handleOnChange ( id : string , new_value : number ) {
26
- console . log ( `Update input value for ${ id } with value ${ new_value } ` ) ;
27
- this . props . onChange ( id , new_value ) ;
28
- }
29
-
30
- render ( ) {
31
- return (
32
- < div id = "input" >
33
- < form id = "formInputs" >
34
- < NumericTextInput id = "star_mass" label = "Star Mass (Kg)" defaultValue = { this . props . star_mass } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
35
- < NumericTextInput id = "planet_mass" label = "Planet Mass (Kg)" defaultValue = { this . props . planet_mass } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
36
- < NumericTextInput id = "planet_perihelion" label = "Planet Perihelion (Km)" defaultValue = { this . props . planet_perihelion } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
37
- < NumericTextInput id = "planet_aphelion" label = "Planet Aphelion (Km)" defaultValue = { this . props . planet_aphelion } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
38
- < NumericTextInput id = "day_duration" label = "Planet's Day Duration in Seconds" defaultValue = { this . props . day_duration } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
39
- < NumericTextInput id = "moon_mass" label = "Moon Mass (Kg)" defaultValue = { this . props . moon_mass } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
40
- < NumericTextInput id = "moon_perigee" label = "Moon Perigee (Km)" defaultValue = { this . props . moon_perigee } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
41
- < NumericTextInput id = "moon_apogee" label = "Moon Apogee (Kg)" defaultValue = { this . props . moon_apogee } onChange = { ( s , n ) => this . handleOnChange ( s , n ) } />
42
- < p > < button id = "generateButton" type = "button" onClick = { ( ) => this . props . onClick ( ) } > Generate</ button > </ p >
43
- </ form >
44
- </ div >
45
- ) ;
46
- }
47
- }
31
+ render ( ) {
32
+ return (
33
+ < div id = "input" >
34
+ < form id = "formInputs" >
35
+ < NumericTextInput
36
+ id = "star_mass"
37
+ label = "Star Mass (Kg)"
38
+ defaultValue = { this . props . star_mass }
39
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
40
+ />
41
+ < NumericTextInput
42
+ id = "planet_mass"
43
+ label = "Planet Mass (Kg)"
44
+ defaultValue = { this . props . planet_mass }
45
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
46
+ />
47
+ < NumericTextInput
48
+ id = "planet_perihelion"
49
+ label = "Planet Perihelion (Km)"
50
+ defaultValue = { this . props . planet_perihelion }
51
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
52
+ />
53
+ < NumericTextInput
54
+ id = "planet_aphelion"
55
+ label = "Planet Aphelion (Km)"
56
+ defaultValue = { this . props . planet_aphelion }
57
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
58
+ />
59
+ < NumericTextInput
60
+ id = "day_duration"
61
+ label = "Planet's Day Duration in Seconds"
62
+ defaultValue = { this . props . day_duration }
63
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
64
+ />
65
+ < NumericTextInput
66
+ id = "moon_mass"
67
+ label = "Moon Mass (Kg)"
68
+ defaultValue = { this . props . moon_mass }
69
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
70
+ />
71
+ < NumericTextInput
72
+ id = "moon_perigee"
73
+ label = "Moon Perigee (Km)"
74
+ defaultValue = { this . props . moon_perigee }
75
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
76
+ />
77
+ < NumericTextInput
78
+ id = "moon_apogee"
79
+ label = "Moon Apogee (Kg)"
80
+ defaultValue = { this . props . moon_apogee }
81
+ onChange = { ( s , n ) => this . handleOnChange ( s , n ) }
82
+ />
83
+ < p >
84
+ < button
85
+ id = "generateButton"
86
+ type = "button"
87
+ onClick = { ( ) => this . props . onClick ( ) }
88
+ >
89
+ Generate
90
+ </ button >
91
+ </ p >
92
+ </ form >
93
+ </ div >
94
+ ) ;
95
+ }
96
+ }
0 commit comments