mirror of
https://github.com/maputnik/editor.git
synced 2025-12-25 15:40:00 +00:00
- Added searchParams based router for easier testing - Added more stories to the storybook
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
import InputButton from './InputButton'
|
|
|
|
export default class InputMultiInput extends React.Component {
|
|
static propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
value: PropTypes.string.isRequired,
|
|
options: PropTypes.array.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
}
|
|
|
|
render() {
|
|
let options = this.props.options
|
|
if(options.length > 0 && !Array.isArray(options[0])) {
|
|
options = options.map(v => [v, v])
|
|
}
|
|
|
|
const selectedValue = this.props.value || options[0][0]
|
|
const radios = options.map(([val, label])=> {
|
|
return <label
|
|
key={val}
|
|
className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
|
|
>
|
|
<input type="radio"
|
|
name={this.props.name}
|
|
onChange={e => this.props.onChange(val)}
|
|
value={val}
|
|
checked={val === selectedValue}
|
|
/>
|
|
{label}
|
|
</label>
|
|
})
|
|
|
|
return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
|
|
{radios}
|
|
</fieldset>
|
|
}
|
|
}
|
|
|
|
|