mirror of
https://github.com/maputnik/editor.git
synced 2025-12-25 23:50:02 +00:00
Fixed more input accessibility issues, also
- Added searchParams based router for easier testing - Added more stories to the storybook
This commit is contained in:
42
src/components/InputMultiInput.jsx
Normal file
42
src/components/InputMultiInput.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
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>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user