forked from storybookjs/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PropForm.js
56 lines (48 loc) 路 1.24 KB
/
PropForm.js
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
import PropTypes from 'prop-types';
import React from 'react';
import PropField from './PropField';
const stylesheet = {
propForm: {
fontFamily: `
-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
"Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
`,
display: 'table',
boxSizing: 'border-box',
width: '100%',
borderCollapse: 'separate',
borderSpacing: '5px',
},
};
export default class propForm extends React.Component {
constructor() {
super();
this._onFieldChange = this.onFieldChange.bind(this);
}
onFieldChange(name, type, value) {
const change = { name, type, value };
this.props.onFieldChange(change);
}
render() {
const knobs = this.props.knobs;
return (
<form style={stylesheet.propForm}>
{knobs.map(knob => (
<PropField
key={knob.name}
name={knob.name}
type={knob.type}
value={knob.value}
knob={knob}
onChange={this._onFieldChange.bind(null, knob.name, knob.type)}
/>
))}
</form>
);
}
}
propForm.displayName = 'propForm';
propForm.propTypes = {
knobs: PropTypes.array.isRequired,
onFieldChange: PropTypes.func.isRequired,
};