-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
layer-controls.js
153 lines (139 loc) · 4.13 KB
/
layer-controls.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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import React, {PureComponent} from 'react';
import ColorPicker from './color-picker';
import ColorPalettePicker from './color-palette-picker';
export default class LayerControls extends PureComponent {
_onValueChange(settingName, newValue) {
const {settings, propTypes = {}} = this.props;
// Only update if we have a confirmed change
if (settings[settingName] !== newValue) {
// Create a new object so that shallow-equal detects a change
const newSettings = {...this.props.settings};
if (propTypes[settingName] && propTypes[settingName].onUpdate) {
propTypes[settingName].onUpdate(newValue, newSettings, (name, value) =>
this._onValueChange(name, value)
);
return;
} else if (settingName.indexOf('get') === 0) {
newSettings[settingName] = d => newValue;
newSettings.updateTriggers = {
...newSettings.updateTriggers,
[settingName]: {value: newValue.toString()}
};
} else {
newSettings[settingName] = newValue;
}
this.props.onChange(newSettings);
}
}
_renderColorPicker(settingName, value) {
const props = {value, onChange: this._onValueChange.bind(this, settingName)};
return (
<div key={settingName}>
<div className="input-group">
<label>{settingName}</label>
{settingName === 'colorRange' ? (
<ColorPalettePicker {...props} />
) : (
<ColorPicker {...props} />
)}
</div>
</div>
);
}
_renderSlider(settingName, value, propType) {
let max;
if (propType && Number.isFinite(propType.max)) {
max = propType.max;
} else if (
/radius|scale|width|height|pixel|size|miter/i.test(settingName) &&
/^((?!scale).)*$/.test(settingName)
) {
max = 100;
} else {
max = 1;
}
return (
<div key={settingName}>
<div className="input-group">
<label className="label" htmlFor={settingName}>
{settingName}
</label>
<div>
<input
type="range"
id={settingName}
min={0}
max={max}
step={max / 100}
value={value}
onChange={e => this._onValueChange(settingName, Number(e.target.value))}
/>
</div>
</div>
</div>
);
}
_renderCheckbox(settingName, value) {
return (
<div key={settingName}>
<div className="input-group">
<label htmlFor={settingName}>
<span>{settingName}</span>
</label>
<input
type="checkbox"
id={settingName}
checked={value}
onChange={e => this._onValueChange(settingName, e.target.checked)}
/>
</div>
</div>
);
}
_renderSetting(settingName, value, propType) {
// first test if proptype is already defined
if (propType && propType.type) {
switch (propType.type) {
case 'number':
return this._renderSlider(settingName, value, propType);
case 'compound':
const {settings, propTypes = {}} = this.props;
return propType.elements.map(name =>
this._renderSetting(name, settings[name], propTypes[name])
);
default:
break;
}
}
switch (typeof value) {
case 'boolean':
return this._renderCheckbox(settingName, value, propType);
case 'number':
return this._renderSlider(settingName, value, propType);
default:
if (/color/i.test(settingName)) {
return this._renderColorPicker(settingName, value, propType);
}
}
return null;
}
// Get all inherited property keys
_getAllKeys(object) {
const keys = [];
for (const key in object) {
keys.push(key);
}
return keys;
}
render() {
const {title, settings, propTypes = {}} = this.props;
return (
<div className="layer-controls">
{title && <h4>{title}</h4>}
{this._getAllKeys(settings).map(key =>
this._renderSetting(key, settings[key], propTypes[key])
)}
</div>
);
}
}