mirror of
https://github.com/maputnik/editor.git
synced 2026-01-06 05:20:01 +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:
49
src/components/InputEnum.jsx
Normal file
49
src/components/InputEnum.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import InputSelect from './InputSelect'
|
||||
import InputMultiInput from './InputMultiInput'
|
||||
|
||||
|
||||
function optionsLabelLength(options) {
|
||||
let sum = 0;
|
||||
options.forEach(([_, label]) => {
|
||||
sum += label.length
|
||||
})
|
||||
return sum
|
||||
}
|
||||
|
||||
|
||||
export default class InputEnum extends React.Component {
|
||||
static propTypes = {
|
||||
"data-wd-key": PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
default: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
options: PropTypes.array,
|
||||
'aria-label': PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
const {options, value, onChange, name} = this.props;
|
||||
|
||||
if(options.length <= 3 && optionsLabelLength(options) <= 20) {
|
||||
return <InputMultiInput
|
||||
name={name}
|
||||
options={options}
|
||||
value={value || this.props.default}
|
||||
onChange={onChange}
|
||||
aria-label={this.props['aria-label']}
|
||||
/>
|
||||
} else {
|
||||
return <InputSelect
|
||||
options={options}
|
||||
value={value || this.props.default}
|
||||
onChange={onChange}
|
||||
aria-label={this.props['aria-label']}
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user