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

Added more webdriver tests testing against a real browser.

Browse Source
This commit is contained in:
orangemug
2018-01-05 17:45:55 +00:00
parent 6e86c60f89
commit 942b2240a7
47 changed files with 2244 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layers/CommentBlock.jsx
View File

@@ -11,7 +11,11 @@ class MetadataBlock extends React.Component {
}
render() {
return <InputBlock label={"Comments"} doc={"Comments for the current layer. This is non-standard and not in the spec."}>
return <InputBlock
label={"Comments"}
doc={"Comments for the current layer. This is non-standard and not in the spec."}
data-wd-key="layer-comment"
>
<StringInput
multi={true}
value={this.props.value}

1
src/components/layers/JSONEditor.jsx
View File

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import {Controlled as CodeMirror} from 'react-codemirror2'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'

8
src/components/layers/LayerEditor.jsx
View File

@@ -19,11 +19,6 @@ import MultiButtonInput from '../inputs/MultiButtonInput'
import { changeType, changeProperty } from '../../libs/layer'
import layout from '../../config/layout.json'
class UnsupportedLayer extends React.Component {
render() {
return <div></div>
}
}
function layoutGroups(layerType) {
const layerGroup = {
@@ -121,6 +116,7 @@ export default class LayerEditor extends React.Component {
case 'layer': return <div>
<LayerIdBlock
value={this.props.layer.id}
wdKey="layer-editor.layer-id"
onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
/>
<LayerTypeBlock
@@ -171,7 +167,6 @@ export default class LayerEditor extends React.Component {
layer={this.props.layer}
onChange={this.props.onLayerChanged}
/>
default: return null
}
}
@@ -181,6 +176,7 @@ export default class LayerEditor extends React.Component {
return !(layerType === 'background' && group.type === 'source')
}).map(group => {
return <LayerEditorGroup
data-wd-key={group.title}
key={group.title}
title={group.title}
isActive={this.state.editorGroups[group.title]}

2
src/components/layers/LayerEditorGroup.jsx
View File

@@ -5,6 +5,7 @@ import Collapser from './Collapser'
export default class LayerEditorGroup extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
title: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
children: PropTypes.element.isRequired,
@@ -14,6 +15,7 @@ export default class LayerEditorGroup extends React.Component {
render() {
return <div>
<div className="maputnik-layer-editor-group"
data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}
>
<span>{this.props.title}</span>

5
src/components/layers/LayerIdBlock.jsx
View File

@@ -8,11 +8,14 @@ import StringInput from '../inputs/StringInput'
class LayerIdBlock extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}>
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
data-wd-key={this.props.wdKey}
>
<StringInput
value={this.props.value}
onChange={this.props.onChange}

2
src/components/layers/LayerList.jsx
View File

@@ -162,6 +162,7 @@ class LayerListContainer extends React.Component {
const groupPrefix = layerPrefix(layers[0].id)
if(layers.length > 1) {
const grp = <LayerListGroup
data-wd-key={[groupPrefix, idx].join('-')}
key={[groupPrefix, idx].join('-')}
title={groupPrefix}
isActive={!this.isCollapsed(groupPrefix, idx)}
@@ -217,6 +218,7 @@ class LayerListContainer extends React.Component {
<div className="maputnik-multibutton">
<a
onClick={this.toggleModal.bind(this, 'add')}
data-wd-key="layer-list:add-layer"
className="maputnik-button maputnik-button-selected">
Add Layer
</a>

2
src/components/layers/LayerListGroup.jsx
View File

@@ -5,6 +5,7 @@ import Collapser from './Collapser'
export default class LayerListGroup extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
"data-wd-key": PropTypes.string,
isActive: PropTypes.bool.isRequired,
onActiveToggle: PropTypes.func.isRequired
}
@@ -12,6 +13,7 @@ export default class LayerListGroup extends React.Component {
render() {
return <li className="maputnik-layer-list-group">
<div className="maputnik-layer-list-group-header"
data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}
>
<span className="maputnik-layer-list-group-title">{this.props.title}</span>

7
src/components/layers/LayerListItem.jsx
View File

@@ -33,6 +33,7 @@ class IconAction extends React.Component {
static propTypes = {
action: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string
}
renderIcon() {
@@ -41,13 +42,13 @@ class IconAction extends React.Component {
case 'show': return <VisibilityIcon />
case 'hide': return <VisibilityOffIcon />
case 'delete': return <DeleteIcon />
default: return null
}
}
render() {
return <a
className="maputnik-layer-list-icon-action"
data-wd-key={this.props.wdKey}
onClick={this.props.onClick}
>
{this.renderIcon()}
@@ -92,6 +93,7 @@ class LayerListItem extends React.Component {
return <li
key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)}
data-wd-key={"layer-list-item:"+this.props.layerId}
className={classnames({
"maputnik-layer-list-item": true,
"maputnik-layer-list-item-selected": this.props.isSelected,
@@ -101,14 +103,17 @@ class LayerListItem extends React.Component {
<span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
<span style={{flexGrow: 1}} />
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
action={'delete'}
onClick={e => this.props.onLayerDestroy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
action={'copy'}
onClick={e => this.props.onLayerCopy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'hide' : 'show'}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>

6
src/components/layers/LayerSourceBlock.jsx
View File

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types'
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import AutocompleteInput from '../inputs/AutocompleteInput'
class LayerSourceBlock extends React.Component {
static propTypes = {
value: PropTypes.string,
wdKey: PropTypes.string,
onChange: PropTypes.func,
sourceIds: PropTypes.array,
}
@@ -20,7 +20,9 @@ class LayerSourceBlock extends React.Component {
}
render() {
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
data-wd-key={this.props.wdKey}
>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

5
src/components/layers/LayerSourceLayerBlock.jsx
View File

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import AutocompleteInput from '../inputs/AutocompleteInput'
class LayerSourceLayer extends React.Component {
@@ -22,7 +21,9 @@ class LayerSourceLayer extends React.Component {
}
render() {
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
data-wd-key="layer-source-layer"
>
<AutocompleteInput
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}

5
src/components/layers/LayerTypeBlock.jsx
View File

@@ -8,11 +8,14 @@ import SelectInput from '../inputs/SelectInput'
class LayerTypeBlock extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}>
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
data-wd-key={this.props.wdKey}
>
<SelectInput
options={[
['background', 'Background'],

4
src/components/layers/MaxZoomBlock.jsx
View File

@@ -12,7 +12,9 @@ class MaxZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
data-wd-key="max-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}

4
src/components/layers/MinZoomBlock.jsx
View File

@@ -12,7 +12,9 @@ class MinZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
data-wd-key="min-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}