-
Notifications
You must be signed in to change notification settings - Fork 480
/
BeeCellEditor.jsx
83 lines (71 loc) · 2.65 KB
/
BeeCellEditor.jsx
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
* @overview React component to allow for easy editing and creation of BeeCells
* @see @code-dot-org/maze/src/beeCell
*/
import React from 'react';
import CellEditor from './CellEditor';
import { cells } from '@code-dot-org/maze';
const BeeCell = cells.BeeCell;
export default class BeeCellEditor extends CellEditor {
/**
* @override
*/
getSelectFieldNames() {
return super.getSelectFieldNames().concat([
'featureType', 'cloudType', 'flowerColor'
]);
}
/**
* @override
*/
getSanitizedValues() {
const values = super.getSanitizedValues();
// If the cell is a variable cloud, its feature MUST be variable
if (this.props.cell.isVariableCloud()) {
values.featureType = BeeCell.FeatureType.VARIABLE;
}
// If the cell has no features, it should have neither value nor
// range
if (values.featureType === 'undefined') {
values.value = '';
values.range = '';
}
// FlowerColor only makes sense if the cell is a flower
if (!this.props.cell.isFlower()) {
values.flowerColor = '';
}
return values;
}
/**
* @override
*/
renderFields(values) {
return (
<div>
{super.renderFields(values)}
<label htmlFor="featureType">Feature Type:</label>
<select name="featureType" value={values.featureType} disabled={this.props.cell.isVariableCloud()} onChange={this.handleChange}>
<option value="undefined">none</option>
<option value={BeeCell.FeatureType.HIVE}>hive</option>
<option value={BeeCell.FeatureType.FLOWER}>flower</option>
<option value={BeeCell.FeatureType.VARIABLE}>variable</option>
</select>
<label htmlFor="cloudType">Cloud Type:</label>
<select name="cloudType" value={values.cloudType} onChange={this.handleChange}>
<option value="undefined">none</option>
<option value={BeeCell.CloudType.STATIC}>classic</option>
<option value={BeeCell.CloudType.HIVE_OR_FLOWER}>hive or flower</option>
<option value={BeeCell.CloudType.FLOWER_OR_NOTHING}>flower or nothing</option>
<option value={BeeCell.CloudType.HIVE_OR_NOTHING}>hive or nothing</option>
<option value={BeeCell.CloudType.ANY}>any</option>
</select>
<label htmlFor="flowerColor">Flower Color:</label>
<select name="flowerColor" value={values.flowerColor} disabled={!this.props.cell.isFlower()} onChange={this.handleChange}>
<option value="undefined">default</option>
<option value={BeeCell.FlowerColor.RED}>red</option>
<option value={BeeCell.FlowerColor.PURPLE}>purple</option>
</select>
</div>
);
}
}