ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-02 03:20:01 +00:00
Code Issues Projects Releases Wiki Activity

Fixed more input accessibility issues, also

Browse Source 
- Added searchParams based router for easier testing
 - Added more stories to the storybook
This commit is contained in:
orangemug
2020-06-09 19:11:07 +01:00
parent d6f31ec82e
commit 2cc179acc1
127 changed files with 3858 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/ModalSources.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@mapbox/mapbox-gl-style-spec'
import Modal from './Modal'
import Button from './Button'
import InputButton from './InputButton'
import Block from './Block'
import FieldString from './FieldString'
import FieldSelect from './FieldSelect'
@@ -24,7 +24,7 @@ class PublicSource extends React.Component {
render() {
return <div className="maputnik-public-source">
<Button
<InputButton
className="maputnik-public-source-select"
onClick={() => this.props.onSelect(this.props.id)}
>
@@ -34,7 +34,7 @@ class PublicSource extends React.Component {
</div>
<span className="maputnik-space" />
<MdAddCircleOutline />
</Button>
</InputButton>
</div>
}
}
@@ -83,13 +83,13 @@ class ActiveModalSourcesTypeEditor extends React.Component {
<div className="maputnik-active-source-type-editor-header">
<span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
<span className="maputnik-space" />
<Button
<InputButton
className="maputnik-active-source-type-editor-header-delete"
onClick={()=> this.props.onDelete(this.props.sourceId)}
style={{backgroundColor: 'transparent'}}
>
<MdDelete />
</Button>
</InputButton>
</div>
<div className="maputnik-active-source-type-editor-content">
<ModalSourcesTypeEditor
@@ -207,41 +207,41 @@ class AddSource extends React.Component {
};
return <div className="maputnik-add-source">
<Block label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
<FieldString
value={this.state.sourceId}
onChange={v => this.setState({ sourceId: v})}
/>
</Block>
<Block label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
<FieldSelect
options={[
['geojson_json', 'GeoJSON (JSON)'],
['geojson_url', 'GeoJSON (URL)'],
['tilejson_vector', 'Vector (TileJSON URL)'],
['tilexyz_vector', 'Vector (XYZ URLs)'],
['tilejson_raster', 'Raster (TileJSON URL)'],
['tilexyz_raster', 'Raster (XYZ URL)'],
['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
['image', 'Image'],
['video', 'Video'],
]}
onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
value={this.state.mode}
/>
</Block>
<FieldString
label={"Source ID"}
fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
value={this.state.sourceId}
onChange={v => this.setState({ sourceId: v})}
/>
<FieldSelect
label={"Source Type"}
fieldSpec={sourceTypeFieldSpec}
options={[
['geojson_json', 'GeoJSON (JSON)'],
['geojson_url', 'GeoJSON (URL)'],
['tilejson_vector', 'Vector (TileJSON URL)'],
['tilexyz_vector', 'Vector (XYZ URLs)'],
['tilejson_raster', 'Raster (TileJSON URL)'],
['tilexyz_raster', 'Raster (XYZ URL)'],
['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
['image', 'Image'],
['video', 'Video'],
]}
onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
value={this.state.mode}
/>
<ModalSourcesTypeEditor
onChange={this.onChangeSource}
mode={this.state.mode}
source={this.state.source}
/>
<Button
<InputButton
className="maputnik-add-source-button"
onClick={this.onAdd}
>
Add Source
</Button>
</InputButton>
</div>
}
}