Skip to content

Commit d9220c6

Browse files
vincentfretinvincentfretin
authored
Remove unused widgets propTypes, fix clicking on boolean label and add id to other widgets, simplify a bit the logic in PropertyRow that overrides some type and value (#819)
1 parent 0c89bc9 commit d9220c6

10 files changed

Lines changed: 41 additions & 72 deletions

File tree

‎src/components/components/PropertyRow.js‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@ export default class PropertyRow extends React.Component {
3838

3939
getWidget() {
4040
const props = this.props;
41-
const isMap =
42-
props.componentname === 'material' &&
43-
(props.name === 'envMap' || props.name === 'src');
4441
let type = props.schema.type;
42+
43+
if (props.componentname === 'material' && props.name === 'envMap') {
44+
// material envMap has the wrong type string, force it to map
45+
type = 'map';
46+
}
47+
4548
if (
4649
(props.componentname === 'animation' ||
4750
props.componentname.startsWith('animation__')) &&
@@ -54,15 +57,17 @@ export default class PropertyRow extends React.Component {
5457
type = 'boolean';
5558
}
5659

57-
const value =
58-
props.schema.type === 'selector'
60+
let value =
61+
type === 'selector'
5962
? props.entity.getDOMAttribute(props.componentname)?.[props.name]
6063
: props.data;
6164

65+
if (type === 'string' && value && typeof value !== 'string') {
66+
// Allow editing a custom type like event-set component schema
67+
value = props.schema.stringify(value);
68+
}
69+
6270
const widgetProps = {
63-
componentname: props.componentname,
64-
entity: props.entity,
65-
isSingle: props.isSingle,
6671
name: props.name,
6772
onChange: function (name, value) {
6873
updateEntity(
@@ -72,7 +77,8 @@ export default class PropertyRow extends React.Component {
7277
value
7378
);
7479
},
75-
value: value
80+
value: value,
81+
id: this.id
7682
};
7783
const numberWidgetProps = {
7884
min: props.schema.hasOwnProperty('min') ? props.schema.min : -Infinity,
@@ -88,7 +94,7 @@ export default class PropertyRow extends React.Component {
8894
/>
8995
);
9096
}
91-
if (type === 'map' || isMap) {
97+
if (type === 'map') {
9298
return <TextureWidget {...widgetProps} />;
9399
}
94100

@@ -117,14 +123,6 @@ export default class PropertyRow extends React.Component {
117123
return <BooleanWidget {...widgetProps} />;
118124
}
119125
default: {
120-
if (
121-
props.schema.type === 'string' &&
122-
widgetProps.value &&
123-
typeof widgetProps.value !== 'string'
124-
) {
125-
// Allow editing a custom type like event-set component schema
126-
widgetProps.value = props.schema.stringify(widgetProps.value);
127-
}
128126
return <InputWidget {...widgetProps} />;
129127
}
130128
}

‎src/components/widgets/BooleanWidget.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
33

44
export default class BooleanWidget extends React.Component {
55
static propTypes = {
6-
componentname: PropTypes.string.isRequired,
7-
entity: PropTypes.object,
6+
id: PropTypes.string,
87
name: PropTypes.string.isRequired,
98
onChange: PropTypes.func,
109
value: PropTypes.bool
@@ -34,11 +33,9 @@ export default class BooleanWidget extends React.Component {
3433
};
3534

3635
render() {
37-
var id = this.props.componentname + '.' + this.props.name;
38-
3936
return (
4037
<input
41-
id={id}
38+
id={this.props.id}
4239
type="checkbox"
4340
checked={this.state.value}
4441
value={this.state.value}

‎src/components/widgets/ColorWidget.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
33

44
export default class ColorWidget extends React.Component {
55
static propTypes = {
6-
componentname: PropTypes.string.isRequired,
7-
entity: PropTypes.object,
6+
id: PropTypes.string,
87
name: PropTypes.string.isRequired,
98
onChange: PropTypes.func,
109
value: PropTypes.string
@@ -77,6 +76,7 @@ export default class ColorWidget extends React.Component {
7776
onChange={this.onChange}
7877
/>
7978
<input
79+
id={this.props.id}
8080
type="text"
8181
className="color_value"
8282
value={this.state.value}

‎src/components/widgets/InputWidget.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
33

44
export default class InputWidget extends React.Component {
55
static propTypes = {
6-
componentname: PropTypes.string,
7-
entity: PropTypes.object,
6+
id: PropTypes.string,
87
name: PropTypes.string.isRequired,
98
onChange: PropTypes.func,
109
value: PropTypes.any
@@ -25,16 +24,17 @@ export default class InputWidget extends React.Component {
2524

2625
componentDidUpdate(prevProps) {
2726
if (this.props.value !== prevProps.value) {
28-
this.setState({ value: this.props.value });
27+
this.setState({ value: this.props.value || '' });
2928
}
3029
}
3130

3231
render() {
3332
return (
3433
<input
34+
id={this.props.id}
3535
type="text"
3636
className="string"
37-
value={this.state.value || ''}
37+
value={this.state.value}
3838
onChange={this.onChange}
3939
/>
4040
);

‎src/components/widgets/NumberWidget.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
33

44
export default class NumberWidget extends React.Component {
55
static propTypes = {
6-
componentname: PropTypes.string,
7-
entity: PropTypes.object,
6+
id: PropTypes.string,
87
max: PropTypes.number,
98
min: PropTypes.number,
10-
name: PropTypes.string,
9+
name: PropTypes.string.isRequired,
1110
onChange: PropTypes.func,
1211
precision: PropTypes.number,
1312
step: PropTypes.number,
@@ -159,6 +158,7 @@ export default class NumberWidget extends React.Component {
159158
render() {
160159
return (
161160
<input
161+
id={this.props.id}
162162
ref={this.input}
163163
className="number"
164164
type="text"

‎src/components/widgets/SelectWidget.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Select from 'react-select';
44

55
export default class SelectWidget extends React.Component {
66
static propTypes = {
7+
id: PropTypes.string,
78
isMulti: PropTypes.bool,
89
name: PropTypes.string.isRequired,
910
onChange: PropTypes.func,
@@ -65,6 +66,7 @@ export default class SelectWidget extends React.Component {
6566

6667
return (
6768
<Select
69+
id={this.props.id}
6870
className="select-widget"
6971
classNamePrefix="select"
7072
options={options}

‎src/components/widgets/TextureWidget.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,14 @@ function insertOrGetImageAsset(src) {
6464

6565
export default class TextureWidget extends React.Component {
6666
static propTypes = {
67-
componentname: PropTypes.string,
68-
entity: PropTypes.object,
69-
mapName: PropTypes.string,
67+
id: PropTypes.string,
7068
name: PropTypes.string.isRequired,
7169
onChange: PropTypes.func,
7270
value: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
7371
};
7472

7573
static defaultProps = {
76-
value: '',
77-
mapName: 'nomap',
78-
dataURL: ''
74+
value: ''
7975
};
8076

8177
constructor(props) {
@@ -112,7 +108,6 @@ export default class TextureWidget extends React.Component {
112108
image.width * scale,
113109
image.height * scale
114110
);
115-
// self.setState({dataURL: canvas.toDataURL()});
116111
} else {
117112
context.clearRect(0, 0, canvas.width, canvas.height);
118113
}
@@ -232,6 +227,7 @@ export default class TextureWidget extends React.Component {
232227
return (
233228
<span className="texture">
234229
<input
230+
id={this.props.id}
235231
className="map_value string"
236232
type="text"
237233
title={hint}

‎src/components/widgets/Vec2Widget.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { areVectorsEqual } from '../../lib/utils';
66

77
export default class Vec2Widget extends React.Component {
88
static propTypes = {
9-
componentname: PropTypes.string,
10-
entity: PropTypes.object,
119
onChange: PropTypes.func,
1210
value: PropTypes.object.isRequired
1311
};
@@ -39,16 +37,10 @@ export default class Vec2Widget extends React.Component {
3937
}
4038

4139
render() {
42-
const widgetProps = {
43-
componentname: this.props.componentname,
44-
entity: this.props.entity,
45-
onChange: this.onChange
46-
};
47-
4840
return (
4941
<div className="vec2">
50-
<NumberWidget name="x" value={this.state.x} {...widgetProps} />
51-
<NumberWidget name="y" value={this.state.y} {...widgetProps} />
42+
<NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
43+
<NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
5244
</div>
5345
);
5446
}

‎src/components/widgets/Vec3Widget.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { areVectorsEqual } from '../../lib/utils';
66

77
export default class Vec3Widget extends React.Component {
88
static propTypes = {
9-
componentname: PropTypes.string,
10-
entity: PropTypes.object,
119
onChange: PropTypes.func,
1210
value: PropTypes.object.isRequired
1311
};
@@ -41,17 +39,11 @@ export default class Vec3Widget extends React.Component {
4139
}
4240

4341
render() {
44-
const widgetProps = {
45-
componentname: this.props.componentname,
46-
entity: this.props.entity,
47-
onChange: this.onChange
48-
};
49-
5042
return (
5143
<div className="vec3">
52-
<NumberWidget name="x" value={this.state.x} {...widgetProps} />
53-
<NumberWidget name="y" value={this.state.y} {...widgetProps} />
54-
<NumberWidget name="z" value={this.state.z} {...widgetProps} />
44+
<NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
45+
<NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
46+
<NumberWidget name="z" value={this.state.z} onChange={this.onChange} />
5547
</div>
5648
);
5749
}

‎src/components/widgets/Vec4Widget.js‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { areVectorsEqual } from '../../lib/utils';
66

77
export default class Vec4Widget extends React.Component {
88
static propTypes = {
9-
componentname: PropTypes.string,
10-
entity: PropTypes.object,
119
onChange: PropTypes.func,
1210
value: PropTypes.object.isRequired
1311
};
@@ -43,18 +41,12 @@ export default class Vec4Widget extends React.Component {
4341
}
4442

4543
render() {
46-
const widgetProps = {
47-
componentname: this.props.componentname,
48-
entity: this.props.entity,
49-
onChange: this.onChange
50-
};
51-
5244
return (
5345
<div className="vec4">
54-
<NumberWidget name="x" value={this.state.x} {...widgetProps} />
55-
<NumberWidget name="y" value={this.state.y} {...widgetProps} />
56-
<NumberWidget name="z" value={this.state.z} {...widgetProps} />
57-
<NumberWidget name="w" value={this.state.w} {...widgetProps} />
46+
<NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
47+
<NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
48+
<NumberWidget name="z" value={this.state.z} onChange={this.onChange} />
49+
<NumberWidget name="w" value={this.state.w} onChange={this.onChange} />
5850
</div>
5951
);
6052
}

0 commit comments

Comments
 (0)