mirror of
https://github.com/maputnik/editor.git
synced 2025-12-27 00:20:00 +00:00
Introduce custom input elems for modals
This commit is contained in:
26
src/components/inputs/InputBlock.jsx
Normal file
26
src/components/inputs/InputBlock.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react'
|
||||
import input from '../../config/input'
|
||||
|
||||
/** Wrap a component with a label */
|
||||
class InputBlock extends React.Component {
|
||||
static propTypes = {
|
||||
label: React.PropTypes.string.isRequired,
|
||||
children: React.PropTypes.element.isRequired,
|
||||
}
|
||||
|
||||
onChange(e) {
|
||||
const value = e.target.value
|
||||
return this.props.onChange(value === "" ? null: value)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div style={{
|
||||
display: 'block'
|
||||
}}>
|
||||
<label style={input.label}>{this.props.label}</label>
|
||||
{this.props.children}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export default InputBlock
|
||||
31
src/components/inputs/SelectInput.jsx
Normal file
31
src/components/inputs/SelectInput.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react'
|
||||
import input from '../../config/input.js'
|
||||
|
||||
class SelectInput extends React.Component {
|
||||
static propTypes = {
|
||||
value: React.PropTypes.string.isRequired,
|
||||
options: React.PropTypes.array.isRequired,
|
||||
style: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const options = this.props.options.map(([val, label])=> {
|
||||
return <option key={val} value={val}>{label}</option>
|
||||
})
|
||||
|
||||
return <select
|
||||
style={{
|
||||
...input.select,
|
||||
...this.props.style
|
||||
}}
|
||||
value={this.props.value}
|
||||
onChange={e => this.props.onChange(e.target.value)}
|
||||
>
|
||||
{options}
|
||||
</select>
|
||||
}
|
||||
}
|
||||
|
||||
export default SelectInput
|
||||
23
src/components/inputs/StringInput.jsx
Normal file
23
src/components/inputs/StringInput.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import input from '../../config/input.js'
|
||||
|
||||
class StringInput extends React.Component {
|
||||
static propTypes = {
|
||||
value: React.PropTypes.string.isRequired,
|
||||
style: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <input
|
||||
style={{
|
||||
...input.input,
|
||||
...this.props.style
|
||||
}}
|
||||
value={this.props.value}
|
||||
onChange={e => this.props.onChange(e.target.value)}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export default StringInput
|
||||
Reference in New Issue
Block a user