ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-06 06:10:00 +00:00
Code Issues Projects Releases Wiki Activity

Migration of jsx files to tsx 2 (#850)

Browse Source 
This is to continue the work of migrating all the jsx files into tsx
files.
The MO is basically described here: #848.

About 7 files to go...
This commit is contained in:
Harel M
2023-12-22 23:32:25 +02:00
committed by GitHub
parent fa182e66fa
commit 974dd7bfd9
57 changed files with 827 additions and 827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@@ -70,12 +70,14 @@
"@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
"@types/cors": "^2.8.17",
"@types/file-saver": "^2.0.7",
"@types/lodash.capitalize": "^4.2.9",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",
"@types/react": "^16.14.52",
"@types/react-aria-modal": "^4.0.9",
"@types/react-autocomplete": "^1.8.9",
"@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.10",
"@types/react-dom": "^16.9.24",
"@types/react-file-reader-input": "^2.0.4",
@@ -4711,6 +4713,12 @@
"@types/send": "*"
}
},
"node_modules/@types/file-saver": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
"integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
"dev": true
},
"node_modules/@types/find-cache-dir": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
@@ -4899,6 +4907,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-collapse": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/react-collapse/-/react-collapse-5.0.4.tgz",
"integrity": "sha512-tM5cVB6skGLneNYnRK2E3R56VOHguSeJQHslGPTIMC58ytL3oelT8L/l1onkwHGn5vSEs2BEq2Olzrur+YdliA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-color": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz",

2
package.json
View File

@@ -99,12 +99,14 @@
"@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
"@types/cors": "^2.8.17",
"@types/file-saver": "^2.0.7",
"@types/lodash.capitalize": "^4.2.9",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",
"@types/react": "^16.14.52",
"@types/react-aria-modal": "^4.0.9",
"@types/react-autocomplete": "^1.8.9",
"@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.10",
"@types/react-dom": "^16.9.24",
"@types/react-file-reader-input": "^2.0.4",

18
src/components/AppLayout.jsx → src/components/AppLayout.tsx
View File

@@ -2,16 +2,16 @@ import React from 'react'
import PropTypes from 'prop-types'
import ScrollContainer from './ScrollContainer'
class AppLayout extends React.Component {
static propTypes = {
toolbar: PropTypes.element.isRequired,
layerList: PropTypes.element.isRequired,
layerEditor: PropTypes.element,
map: PropTypes.element.isRequired,
bottom: PropTypes.element,
modals: PropTypes.node,
}
type AppLayoutProps = {
toolbar: React.ReactElement
layerList: React.ReactElement
layerEditor?: React.ReactElement
map: React.ReactElement
bottom?: React.ReactElement
modals?: React.ReactNode
};
class AppLayout extends React.Component<AppLayoutProps> {
static childContextTypes = {
reactIconBase: PropTypes.object
}

29
src/components/AppMessagePanel.jsx → src/components/AppMessagePanel.tsx
View File

@@ -1,29 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
import {formatLayerId} from '../util/format';
import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
export default class AppMessagePanel extends React.Component {
static propTypes = {
errors: PropTypes.array,
infos: PropTypes.array,
mapStyle: PropTypes.object,
onLayerSelect: PropTypes.func,
currentLayer: PropTypes.object,
selectedLayerIndex: PropTypes.number,
}
type AppMessagePanelProps = {
errors?: unknown[]
infos?: unknown[]
mapStyle?: StyleSpecification
onLayerSelect?(...args: unknown[]): unknown
currentLayer?: object
selectedLayerIndex?: number
};
export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
static defaultProps = {
onLayerSelect: () => {},
}
render() {
const {selectedLayerIndex} = this.props;
const errors = this.props.errors.map((error, idx) => {
const errors = this.props.errors?.map((error: any, idx) => {
let content;
if (error.parsed && error.parsed.type === "layer") {
const {parsed} = error;
const {mapStyle, currentLayer} = this.props;
const layerId = mapStyle.layers[parsed.data.index].id;
const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
content = (
<>
Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
@@ -32,7 +31,7 @@ export default class AppMessagePanel extends React.Component {
&nbsp;&mdash;&nbsp;
<button
className="maputnik-message-panel__switch-button"
onClick={() => this.props.onLayerSelect(parsed.data.index)}
onClick={() => this.props.onLayerSelect!(parsed.data.index)}
>
switch to layer
</button>
@@ -49,7 +48,7 @@ export default class AppMessagePanel extends React.Component {
</p>
})
const infos = this.props.infos.map((m, i) => {
const infos = this.props.infos?.map((m, i) => {
return <p key={"info-"+i}>{m}</p>
})

108
src/components/AppToolbar.jsx → src/components/AppToolbar.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import {detect} from 'detect-browser';
@@ -9,27 +8,28 @@ import pkgJson from '../../package.json'
// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
const browser = detect();
const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
class IconText extends React.Component {
static propTypes = {
children: PropTypes.node,
}
type IconTextProps = {
children?: React.ReactNode
};
class IconText extends React.Component<IconTextProps> {
render() {
return <span className="maputnik-icon-text">{this.props.children}</span>
}
}
class ToolbarLink extends React.Component {
static propTypes = {
className: PropTypes.string,
children: PropTypes.node,
href: PropTypes.string,
onToggleModal: PropTypes.func,
}
type ToolbarLinkProps = {
className?: string
children?: React.ReactNode
href?: string
onToggleModal?(...args: unknown[]): unknown
};
class ToolbarLink extends React.Component<ToolbarLinkProps> {
render() {
return <a
className={classnames('maputnik-toolbar-link', this.props.className)}
@@ -42,14 +42,14 @@ class ToolbarLink extends React.Component {
}
}
class ToolbarLinkHighlighted extends React.Component {
static propTypes = {
className: PropTypes.string,
children: PropTypes.node,
href: PropTypes.string,
onToggleModal: PropTypes.func
}
type ToolbarLinkHighlightedProps = {
className?: string
children?: React.ReactNode
href?: string
onToggleModal?(...args: unknown[]): unknown
};
class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps> {
render() {
return <a
className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
@@ -64,12 +64,12 @@ class ToolbarLinkHighlighted extends React.Component {
}
}
class ToolbarSelect extends React.Component {
static propTypes = {
children: PropTypes.node,
wdKey: PropTypes.string
}
type ToolbarSelectProps = {
children?: React.ReactNode
wdKey?: string
};
class ToolbarSelect extends React.Component<ToolbarSelectProps> {
render() {
return <div
className='maputnik-toolbar-select'
@@ -80,13 +80,13 @@ class ToolbarSelect extends React.Component {
}
}
class ToolbarAction extends React.Component {
static propTypes = {
children: PropTypes.node,
onClick: PropTypes.func,
wdKey: PropTypes.string
}
type ToolbarActionProps = {
children?: React.ReactNode
onClick?(...args: unknown[]): unknown
wdKey?: string
};
class ToolbarAction extends React.Component<ToolbarActionProps> {
render() {
return <button
className='maputnik-toolbar-action'
@@ -98,22 +98,22 @@ class ToolbarAction extends React.Component {
}
}
export default class AppToolbar extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
inspectModeEnabled: PropTypes.bool.isRequired,
onStyleChanged: PropTypes.func.isRequired,
// A new style has been uploaded
onStyleOpen: PropTypes.func.isRequired,
// A dict of source id's and the available source layers
sources: PropTypes.object.isRequired,
children: PropTypes.node,
onToggleModal: PropTypes.func,
onSetMapState: PropTypes.func,
mapState: PropTypes.string,
renderer: PropTypes.string,
}
type AppToolbarProps = {
mapStyle: object
inspectModeEnabled: boolean
onStyleChanged(...args: unknown[]): unknown
// A new style has been uploaded
onStyleOpen(...args: unknown[]): unknown
// A dict of source id's and the available source layers
sources: object
children?: React.ReactNode
onToggleModal(...args: unknown[]): unknown
onSetMapState(...args: unknown[]): unknown
mapState?: string
renderer?: string
};
export default class AppToolbar extends React.Component<AppToolbarProps> {
state = {
isOpen: {
settings: false,
@@ -124,16 +124,16 @@ export default class AppToolbar extends React.Component {
}
}
handleSelection(val) {
handleSelection(val: string | undefined) {
this.props.onSetMapState(val);
}
onSkip = (target) => {
onSkip = (target: string) => {
if (target === "map") {
document.querySelector(".maplibregl-canvas").focus();
(document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
}
else {
const el = document.querySelector("#skip-target-"+target);
const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
el.focus();
}
}
@@ -190,21 +190,21 @@ export default class AppToolbar extends React.Component {
<button
data-wd-key="root:skip:layer-list"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("layer-list")}
onClick={_e => this.onSkip("layer-list")}
>
Layers list
</button>
<button
data-wd-key="root:skip:layer-editor"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("layer-editor")}
onClick={_e => this.onSkip("layer-editor")}
>
Layer editor
</button>
<button
data-wd-key="root:skip:map-view"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("map")}
onClick={_e => this.onSkip("map")}
>
Map view
</button>
@@ -246,7 +246,7 @@ export default class AppToolbar extends React.Component {
className="maputnik-select"
data-wd-key="maputnik-select"
onChange={(e) => this.handleSelection(e.target.value)}
value={currentView.id}
value={currentView?.id}
>
{views.filter(v => v.group === "general").map((item) => {
return (

14
src/components/Collapse.jsx → src/components/Collapse.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Collapse as ReactCollapse } from 'react-collapse'
import {reducedMotionEnabled} from '../../libs/accessibility'
import {reducedMotionEnabled} from '../libs/accessibility'
export default class Collapse extends React.Component {
static propTypes = {
isActive: PropTypes.bool.isRequired,
children: PropTypes.element.isRequired
}
type CollapseProps = {
isActive: boolean
children: React.ReactElement
};
export default class Collapse extends React.Component<CollapseProps> {
static defaultProps = {
isActive: true
}

11
src/components/Collapser.jsx → src/components/Collapser.tsx
View File

@@ -1,13 +1,12 @@
import React from 'react'
import PropTypes from 'prop-types'
import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
export default class Collapser extends React.Component {
static propTypes = {
isCollapsed: PropTypes.bool.isRequired,
style: PropTypes.object,
}
type CollapserProps = {
isCollapsed: boolean
style?: object
};
export default class Collapser extends React.Component<CollapserProps> {
render() {
const iconStyle = {
width: 20,

20
src/components/FieldAutocomplete.jsx
View File

@@ -1,20 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputAutocomplete from './InputAutocomplete'
export default class FieldAutocomplete extends React.Component {
static propTypes = {
...InputAutocomplete.propTypes,
}
render() {
const {props} = this;
return <Block label={props.label}>
<InputAutocomplete {...props} />
</Block>
}
}

18
src/components/FieldAutocomplete.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import Block from './Block'
import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
type FieldAutocompleteProps = InputAutocompleteProps & {
label?: string;
};
export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
render() {
return <Block label={this.props.label}>
<InputAutocomplete {...this.props} />
</Block>
}
}

20
src/components/FieldCheckbox.jsx
View File

@@ -1,20 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputCheckbox from './InputCheckbox'
export default class FieldCheckbox extends React.Component {
static propTypes = {
...InputCheckbox.propTypes,
}
render() {
const {props} = this;
return <Block label={this.props.label}>
<InputCheckbox {...props} />
</Block>
}
}

18
src/components/FieldCheckbox.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import Block from './Block'
import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
type FieldCheckboxProps = InputCheckboxProps & {
label?: string;
};
export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
render() {
return <Block label={this.props.label}>
<InputCheckbox {...this.props} />
</Block>
}
}

11
src/components/FieldComment.jsx → src/components/FieldComment.tsx
View File

@@ -1,15 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputString from './InputString'
export default class FieldComment extends React.Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired,
}
type FieldCommentProps = {
value?: string
onChange(...args: unknown[]): unknown
};
export default class FieldComment extends React.Component<FieldCommentProps> {
render() {
const fieldSpec = {
doc: "Comments for the current layer. This is non-standard and not in the spec."

21
src/components/FieldDynamicArray.jsx
View File

@@ -1,21 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputDynamicArray from './InputDynamicArray'
import Fieldset from './Fieldset'
export default class FieldDynamicArray extends React.Component {
static propTypes = {
...InputDynamicArray.propTypes,
name: PropTypes.string,
}
render() {
const {props} = this;
return <Fieldset label={props.label}>
<InputDynamicArray {...props} />
</Fieldset>
}
}

16
src/components/FieldDynamicArray.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
import Fieldset from './Fieldset'
type FieldDynamicArrayProps = InputDynamicArrayProps & {
name?: string
};
export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
render() {
return <Fieldset label={this.props.label}>
<InputDynamicArray {...this.props} />
</Fieldset>
}
}

71
src/components/FieldFunction.jsx → src/components/FieldFunction.tsx
View File

@@ -1,19 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import SpecProperty from './_SpecProperty'
import DataProperty from './_DataProperty'
import DataProperty, { Stop } from './_DataProperty'
import ZoomProperty from './_ZoomProperty'
import ExpressionProperty from './_ExpressionProperty'
import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
import {findDefaultFromSpec} from '../util/spec-helper';
function isLiteralExpression (value) {
function isLiteralExpression(value: any) {
return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
}
function isGetExpression (value) {
function isGetExpression(value: any) {
return (
Array.isArray(value) &&
value.length === 2 &&
@@ -21,14 +20,14 @@ function isGetExpression (value) {
);
}
function isZoomField(value) {
function isZoomField(value: any) {
return (
typeof(value) === 'object' &&
value.stops &&
typeof(value.property) === 'undefined' &&
Array.isArray(value.stops) &&
value.stops.length > 1 &&
value.stops.every(stop => {
value.stops.every((stop: Stop) => {
return (
Array.isArray(stop) &&
stop.length === 2
@@ -37,7 +36,7 @@ function isZoomField(value) {
);
}
function isIdentityProperty (value) {
function isIdentityProperty(value: any) {
return (
typeof(value) === 'object' &&
value.type === "identity" &&
@@ -45,14 +44,14 @@ function isIdentityProperty (value) {
);
}
function isDataStopProperty (value) {
function isDataStopProperty(value: any) {
return (
typeof(value) === 'object' &&
value.stops &&
typeof(value.property) !== 'undefined' &&
value.stops.length > 1 &&
Array.isArray(value.stops) &&
value.stops.every(stop => {
value.stops.every((stop: Stop) => {
return (
Array.isArray(stop) &&
stop.length === 2 &&
@@ -62,26 +61,26 @@ function isDataStopProperty (value) {
);
}
function isDataField(value) {
function isDataField(value: any) {
return (
isIdentityProperty(value) ||
isDataStopProperty(value)
);
}
function isPrimative (value) {
function isPrimative(value: any): value is string | boolean | number {
const valid = ["string", "boolean", "number"];
return valid.includes(typeof(value));
}
function isArrayOfPrimatives (values) {
function isArrayOfPrimatives(values: any): values is Array<string | boolean | number> {
if (Array.isArray(values)) {
return values.every(isPrimative);
}
return false;
}
function getDataType (value, fieldSpec={}) {
function getDataType(value: any, fieldSpec={} as any) {
if (value === undefined) {
return "value";
}
@@ -103,35 +102,33 @@ function getDataType (value, fieldSpec={}) {
}
type FieldFunctionProps = {
onChange(fieldName: string, value: any): unknown
fieldName: string
fieldType: string
fieldSpec: any
errors?: unknown[]
value?: any
};
type FieldFunctionState = {
dataType: string
isEditing: boolean
}
/** Supports displaying spec field for zoom function objects
* https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
*/
export default class FieldFunction extends React.Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
fieldName: PropTypes.string.isRequired,
fieldType: PropTypes.string.isRequired,
fieldSpec: PropTypes.object.isRequired,
errors: PropTypes.object,
value: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.number,
PropTypes.bool,
PropTypes.array
]),
}
constructor (props) {
super();
export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
constructor (props: FieldFunctionProps) {
super(props);
this.state = {
dataType: getDataType(props.value, props.fieldSpec),
isEditing: false,
}
}
static getDerivedStateFromProps(props, state) {
static getDerivedStateFromProps(props: FieldFunctionProps, state: FieldFunctionState) {
// Because otherwise when editing values we end up accidentally changing field type.
if (state.isEditing) {
return {};
@@ -144,7 +141,7 @@ export default class FieldFunction extends React.Component {
}
}
getFieldFunctionType(fieldSpec) {
getFieldFunctionType(fieldSpec: any) {
if (fieldSpec.expression.interpolated) {
return "exponential"
}
@@ -183,7 +180,7 @@ export default class FieldFunction extends React.Component {
});
}
deleteStop = (stopIdx) => {
deleteStop = (stopIdx: number) => {
const stops = this.props.value.stops.slice(0)
stops.splice(stopIdx, 1)
@@ -207,7 +204,7 @@ export default class FieldFunction extends React.Component {
if (value.stops) {
zoomFunc = {
base: value.base,
stops: value.stops.map(stop => {
stops: value.stops.map((stop: Stop) => {
return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
})
}
@@ -292,7 +289,7 @@ export default class FieldFunction extends React.Component {
property: "",
type: functionType,
base: value.base,
stops: value.stops.map(stop => {
stops: value.stops.map((stop: Stop) => {
return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
})
}

6
src/components/FieldMultiInput.tsx
View File

@@ -10,10 +10,8 @@ type FieldMultiInputProps = InputMultiInputProps & {
export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
render() {
const {props} = this;
return <Fieldset label={props.label}>
<InputMultiInput {...props} />
return <Fieldset label={this.props.label}>
<InputMultiInput {...this.props} />
</Fieldset>
}
}

19
src/components/FieldSource.jsx → src/components/FieldSource.tsx
View File

@@ -1,19 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import InputAutocomplete from './InputAutocomplete'
export default class FieldSource extends React.Component {
static propTypes = {
value: PropTypes.string,
wdKey: PropTypes.string,
onChange: PropTypes.func,
sourceIds: PropTypes.array,
error: PropTypes.object,
}
type FieldSourceProps = {
value?: string
wdKey?: string
onChange?(...args: unknown[]): unknown
sourceIds?: unknown[]
error?: unknown[]
};
export default class FieldSource extends React.Component<FieldSourceProps> {
static defaultProps = {
onChange: () => {},
sourceIds: [],
@@ -29,7 +28,7 @@ export default class FieldSource extends React.Component {
<InputAutocomplete
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceIds.map(src => [src, src])}
options={this.props.sourceIds?.map(src => [src, src])}
/>
</Block>
}

17
src/components/FieldSourceLayer.jsx → src/components/FieldSourceLayer.tsx
View File

@@ -1,18 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import InputAutocomplete from './InputAutocomplete'
export default class FieldSourceLayer extends React.Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
sourceLayerIds: PropTypes.array,
isFixed: PropTypes.bool,
}
type FieldSourceLayerProps = {
value?: string
onChange?(...args: unknown[]): unknown
sourceLayerIds?: unknown[]
isFixed?: boolean
};
export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
static defaultProps = {
onChange: () => {},
sourceLayerIds: [],
@@ -27,7 +26,7 @@ export default class FieldSourceLayer extends React.Component {
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceLayerIds.map(l => [l, l])}
options={this.props.sourceLayerIds?.map(l => [l, l])}
/>
</Block>
}

12
src/components/InputArray.tsx
View File

@@ -3,17 +3,17 @@ import InputString from './InputString'
import InputNumber from './InputNumber'
export type FieldArrayProps = {
value: string[] | number[]
value: (string | number | undefined)[]
type?: string
length?: number
default?: string[] | number[]
onChange?(...args: unknown[]): unknown
default?: (string | number | undefined)[]
onChange?(value: (string | number | undefined)[] | undefined): unknown
'aria-label'?: string
label?: string
};
type FieldArrayState = {
value: string[] | number[]
value: (string | number | undefined)[]
initialPropsValue: unknown[]
}
@@ -59,7 +59,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
});
}
changeValue(idx: number, newValue: string) {
changeValue(idx: number, newValue: string | number | undefined) {
const value = this.state.value.slice(0);
value[idx] = newValue;
@@ -93,7 +93,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
value={value[i] as number}
required={containsValues ? true : false}
onChange={this.changeValue.bind(this, i)}
onChange={(v) => this.changeValue(i, v)}
aria-label={this.props['aria-label'] || this.props.label}
/>
} else {

10
src/components/InputDynamicArray.tsx
View File

@@ -11,10 +11,10 @@ import InputUrl from './InputUrl'
export type FieldDynamicArrayProps = {
value?: (string | number)[]
type?: 'url' | 'number' | 'enum'
default?: (string | number)[]
onChange?(...args: unknown[]): unknown
value?: (string | number | undefined)[]
type?: 'url' | 'number' | 'enum' | 'string'
default?: (string | number | undefined)[]
onChange?(values: (string | number | undefined)[] | undefined): unknown
style?: object
fieldSpec?: {
values?: any
@@ -25,7 +25,7 @@ export type FieldDynamicArrayProps = {
export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
changeValue(idx: number, newValue: string | number) {
changeValue(idx: number, newValue: string | number | undefined) {
const values = this.values.slice(0)
values[idx] = newValue
if (this.props.onChange) this.props.onChange(values)

8
src/components/InputJson.tsx
View File

@@ -17,7 +17,7 @@ export type InputJsonProps = {
onChange?(...args: unknown[]): unknown
lineNumbers?: boolean
lineWrapping?: boolean
getValue(data: any): string
getValue?(data: any): string
gutters?: string[]
className?: string
onFocus?(...args: unknown[]): unknown
@@ -58,13 +58,13 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
this.state = {
isEditing: false,
showMessage: false,
prevValue: this.props.getValue(this.props.layer),
prevValue: this.props.getValue!(this.props.layer),
};
}
componentDidMount () {
this._doc = CodeMirror(this._el!, {
value: this.props.getValue(this.props.layer),
value: this.props.getValue!(this.props.layer),
mode: this.props.mode || {
name: "mgl",
},
@@ -117,7 +117,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
this._cancelNextChange = true;
this._doc!.setValue(
this.props.getValue(this.props.layer),
this.props.getValue!(this.props.layer),
)
}
}

2
src/components/InputNumber.tsx
View File

@@ -7,7 +7,7 @@ export type InputNumberProps = {
default?: number
min?: number
max?: number
onChange?(...args: unknown[]): unknown
onChange?(value: number | undefined): unknown
allowRange?: boolean
rangeStep?: number
wdKey?: string

2
src/components/InputSelect.tsx
View File

@@ -5,7 +5,7 @@ export type InputSelectProps = {
"data-wd-key"?: string
options: [string, any][] | string[]
style?: object
onChange(...args: unknown[]): unknown
onChange(value: string): unknown
title?: string
'aria-label'?: string
};

22
src/components/InputSpec.tsx
View File

@@ -14,11 +14,11 @@ import capitalize from 'lodash.capitalize'
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
export type SpecFieldProps = {
onChange(...args: unknown[]): unknown
fieldName: string
fieldSpec: {
onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
fieldName?: string
fieldSpec?: {
default?: unknown
type: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
type?: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
minimum?: number
maximum?: number
values?: unknown[]
@@ -29,9 +29,9 @@ export type SpecFieldProps = {
/** Override the style of the field */
style?: object
'aria-label'?: string
error: unknown[]
label: string
action: ReactElement
error?: unknown[]
label?: string
action?: ReactElement
};
/** Display any field from the Maplibre GL style spec and
@@ -47,12 +47,12 @@ export default class SpecField extends React.Component<SpecFieldProps> {
action: this.props.action,
style: this.props.style,
value: this.props.value,
default: this.props.fieldSpec.default,
default: this.props.fieldSpec?.default,
name: this.props.fieldName,
onChange: (newValue: string) => this.props.onChange(this.props.fieldName, newValue),
onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
'aria-label': this.props['aria-label'],
}
switch(this.props.fieldSpec.type) {
switch(this.props.fieldSpec?.type) {
case 'number': return (
<InputNumber
{...commonProps as InputNumberProps}
@@ -70,7 +70,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
case 'resolvedImage':
case 'formatted':
case 'string':
if (iconProperties.indexOf(this.props.fieldName) >= 0) {
if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
const options = this.props.fieldSpec.values || [];
return <InputAutocomplete
{...commonProps as Omit<InputAutocompleteProps, "options">}

6
src/components/InputString.tsx
View File

@@ -5,13 +5,14 @@ export type InputStringProps = {
value?: string
style?: object
default?: string
onChange?(...args: unknown[]): unknown
onInput?(...args: unknown[]): unknown
onChange?(value: string | undefined): unknown
onInput?(value: string | undefined): unknown
multi?: boolean
required?: boolean
disabled?: boolean
spellCheck?: boolean
'aria-label'?: string
title?: string
};
type InputStringState = {
@@ -72,6 +73,7 @@ export default class InputString extends React.Component<InputStringProps, Input
style: this.props.style,
value: this.state.value === undefined ? "" : this.state.value,
placeholder: this.props.default,
title: this.props.title,
onChange: (e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
this.setState({
editing: true,

22
src/components/LayerEditorGroup.jsx → src/components/LayerEditorGroup.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import Icon from '@mdi/react'
import {
mdiMenuDown,
@@ -13,21 +12,22 @@ import {
} from 'react-accessible-accordion';
export default class LayerEditorGroup extends React.Component {
static propTypes = {
"id": PropTypes.string,
"data-wd-key": PropTypes.string,
title: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
children: PropTypes.element.isRequired,
onActiveToggle: PropTypes.func.isRequired
}
type LayerEditorGroupProps = {
"id"?: string
"data-wd-key"?: string
title: string
isActive: boolean
children: React.ReactElement
onActiveToggle(...args: unknown[]): unknown
};
export default class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
render() {
return <AccordionItem uuid={this.props.id}>
<AccordionItemHeading className="maputnik-layer-editor-group"
data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}
onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
>
<AccordionItemButton className="maputnik-layer-editor-group__button">
<span style={{flexGrow: 1}}>{this.props.title}</span>

19
src/components/LayerListGroup.jsx → src/components/LayerListGroup.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react'
import PropTypes from 'prop-types'
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,
'aria-controls': PropTypes.string,
}
type LayerListGroupProps = {
title: string
"data-wd-key"?: string
isActive: boolean
onActiveToggle(...args: unknown[]): unknown
'aria-controls'?: string
};
export default class LayerListGroup extends React.Component<LayerListGroupProps> {
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)}
onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
>
<button
className="maputnik-layer-list-group-title"

27
src/components/MapMaplibreGlLayerPopup.jsx → src/components/MapMaplibreGlLayerPopup.tsx
View File

@@ -1,18 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import IconLayer from './IconLayer'
import {latest} from '@maplibre/maplibre-gl-style-spec'
function groupFeaturesBySourceLayer(features) {
const sources = {}
function groupFeaturesBySourceLayer(features: any[]) {
const sources = {} as any
let returnedFeatures = {};
let returnedFeatures = {} as any;
features.forEach(feature => {
if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
returnedFeatures[feature.layer.id]++
const featureObject = sources[feature.layer['source-layer']].find(f => f.layer.id === feature.layer.id)
const featureObject = sources[feature.layer['source-layer']].find((f: any) => f.layer.id === feature.layer.id)
featureObject.counter = returnedFeatures[feature.layer.id]
} else {
@@ -26,14 +24,14 @@ function groupFeaturesBySourceLayer(features) {
return sources
}
class FeatureLayerPopup extends React.Component {
static propTypes = {
onLayerSelect: PropTypes.func.isRequired,
features: PropTypes.array,
zoom: PropTypes.number,
}
type FeatureLayerPopupProps = {
onLayerSelect(...args: unknown[]): unknown
features: any[]
zoom?: number
};
_getFeatureColor(feature, zoom) {
class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
_getFeatureColor(feature: any, _zoom?: number) {
// Guard because openlayers won't have this
if (!feature.layer.paint) {
return;
@@ -57,7 +55,6 @@ class FeatureLayerPopup extends React.Component {
}
if(propName) {
const propertySpec = latest["paint_"+feature.layer.type][propName];
let color = feature.layer.paint[propName];
return String(color);
}
@@ -78,7 +75,7 @@ class FeatureLayerPopup extends React.Component {
const sources = groupFeaturesBySourceLayer(this.props.features)
const items = Object.keys(sources).map(vectorLayerId => {
const layers = sources[vectorLayerId].map((feature, idx) => {
const layers = sources[vectorLayerId].map((feature: any, idx: number) => {
const featureColor = this._getFeatureColor(feature, this.props.zoom);
return <div

68
src/components/MapOpenLayers.jsx → src/components/MapOpenLayers.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react'
import {throttle} from 'lodash';
import PropTypes from 'prop-types'
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
@@ -9,10 +8,10 @@ import {apply} from 'ol-mapbox-style';
import {Map, View, Overlay} from 'ol';
import {toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate';
import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
function renderCoords (coords) {
function renderCoords (coords: string[]) {
if (!coords || coords.length < 2) {
return null;
}
@@ -23,36 +22,49 @@ function renderCoords (coords) {
}
}
export default class MapOpenLayers extends React.Component {
static propTypes = {
onDataChange: PropTypes.func,
mapStyle: PropTypes.object.isRequired,
accessToken: PropTypes.string,
style: PropTypes.object,
onLayerSelect: PropTypes.func.isRequired,
debugToolbox: PropTypes.bool.isRequired,
replaceAccessTokens: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
}
type MapOpenLayersProps = {
onDataChange?(...args: unknown[]): unknown
mapStyle: object
accessToken?: string
style?: object
onLayerSelect(...args: unknown[]): unknown
debugToolbox: boolean
replaceAccessTokens(...args: unknown[]): unknown
onChange(...args: unknown[]): unknown
};
type MapOpenLayersState = {
zoom: string
rotation: string
cursor: string[]
center: string[]
selectedFeatures?: any[]
};
export default class MapOpenLayers extends React.Component<MapOpenLayersProps, MapOpenLayersState> {
static defaultProps = {
onMapLoaded: () => {},
onDataChange: () => {},
onLayerSelect: () => {},
}
updateStyle: any;
map: any;
container: HTMLDivElement | null = null;
overlay: Overlay | undefined;
popupContainer: HTMLElement | null = null;
constructor(props) {
constructor(props: MapOpenLayersProps) {
super(props);
this.state = {
zoom: 0,
rotation: 0,
cursor: [],
zoom: "0",
rotation: "0",
cursor: [] as string[],
center: [],
};
this.updateStyle = throttle(this._updateStyle.bind(this), 200);
}
_updateStyle(newMapStyle) {
_updateStyle(newMapStyle: StyleSpecification) {
if(!this.map) return;
// See <https://github.com/openlayers/ol-mapbox-style/issues/215#issuecomment-493198815>
@@ -60,7 +72,7 @@ export default class MapOpenLayers extends React.Component {
apply(this.map, newMapStyle);
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: MapOpenLayersProps) {
if (this.props.mapStyle !== prevProps.mapStyle) {
this.updateStyle(
this.props.replaceAccessTokens(this.props.mapStyle)
@@ -70,7 +82,7 @@ export default class MapOpenLayers extends React.Component {
componentDidMount() {
this.overlay = new Overlay({
element: this.popupContainer,
element: this.popupContainer!,
autoPan: true,
autoPanAnimation: {
duration: 250
@@ -78,7 +90,7 @@ export default class MapOpenLayers extends React.Component {
});
const map = new Map({
target: this.container,
target: this.container!,
overlays: [this.overlay],
view: new View({
zoom: 1,
@@ -98,7 +110,7 @@ export default class MapOpenLayers extends React.Component {
const onMoveEnd = () => {
const zoom = map.getView().getZoom();
const center = toLonLat(map.getView().getCenter());
const center = toLonLat(map.getView().getCenter()!);
this.props.onChange({
zoom,
@@ -112,15 +124,15 @@ export default class MapOpenLayers extends React.Component {
onMoveEnd();
map.on('moveend', onMoveEnd);
map.on('postrender', (evt) => {
const center = toLonLat(map.getView().getCenter());
map.on('postrender', (_e) => {
const center = toLonLat(map.getView().getCenter()!);
this.setState({
center: [
center[0].toFixed(2),
center[1].toFixed(2),
],
rotation: map.getView().getRotation().toFixed(2),
zoom: map.getView().getZoom().toFixed(2)
zoom: map.getView().getZoom()!.toFixed(2)
});
});
@@ -132,9 +144,9 @@ export default class MapOpenLayers extends React.Component {
);
}
closeOverlay = (e) => {
closeOverlay = (e: any) => {
e.target.blur();
this.overlay.setPosition(undefined);
this.overlay!.setPosition(undefined);
}
render() {

65
src/components/ModalAdd.jsx → src/components/ModalAdd.tsx
View File

@@ -1,29 +1,32 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import InputButton from './InputButton'
import Modal from './Modal'
import FieldType from './FieldType'
import FieldId from './FieldId'
import FieldSource from './FieldSource'
import FieldSourceLayer from './FieldSourceLayer'
export default class ModalAdd extends React.Component {
static propTypes = {
layers: PropTypes.array.isRequired,
onLayersChange: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
type ModalAddProps = {
layers: unknown[]
onLayersChange(...args: unknown[]): unknown
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
// A dict of source id's and the available source layers
sources: any
};
// A dict of source id's and the available source layers
sources: PropTypes.object.isRequired,
}
type ModalAddState = {
type: string
id: string
source?: string
'source-layer'?: string
};
export default class ModalAdd extends React.Component<ModalAddProps, ModalAddState> {
addLayer = () => {
const changedLayers = this.props.layers.slice(0)
const layer = {
const layer: ModalAddState = {
id: this.state.id,
type: this.state.type,
}
@@ -41,20 +44,21 @@ export default class ModalAdd extends React.Component {
this.props.onOpenToggle(false)
}
constructor(props) {
constructor(props: ModalAddProps) {
super(props)
this.state = {
const state: ModalAddState = {
type: 'fill',
id: '',
}
if(props.sources.length > 0) {
this.state.source = Object.keys(this.props.sources)[0]
this.state['source-layer'] = this.props.sources[this.state.source][0]
state.source = Object.keys(this.props.sources)[0];
state['source-layer'] = this.props.sources[state.source as keyof ModalAddProps["sources"]][0]
}
this.state = state;
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(_prevProps: ModalAddProps, prevState: ModalAddState) {
// Check if source is valid for new type
const oldType = prevState.type;
const newType = this.state.type;
@@ -67,9 +71,9 @@ export default class ModalAdd extends React.Component {
oldType !== newType
&& prevState.source !== ""
// Was a valid source previously
&& availableSourcesOld.indexOf(prevState.source) > -1
&& availableSourcesOld.indexOf(prevState.source!) > -1
// And is not a valid source now
&& availableSourcesNew.indexOf(this.state.source) < 0
&& availableSourcesNew.indexOf(this.state.source!) < 0
) {
// Clear the source
this.setState({
@@ -78,12 +82,12 @@ export default class ModalAdd extends React.Component {
}
}
getLayersForSource(source) {
getLayersForSource(source: string) {
const sourceObj = this.props.sources[source] || {};
return sourceObj.layers || [];
}
getSources(type) {
getSources(type: string) {
const sources = [];
const types = {
@@ -108,8 +112,9 @@ export default class ModalAdd extends React.Component {
]
}
for(let [key, val] of Object.entries(this.props.sources)) {
if(types[val.type] && types[val.type].indexOf(type) > -1) {
for(let [key, val] of Object.entries(this.props.sources) as any) {
const valType = val.type as keyof typeof types;
if(types[valType] && types[valType].indexOf(type) > -1) {
sources.push(key);
}
}
@@ -120,7 +125,7 @@ export default class ModalAdd extends React.Component {
render() {
const sources = this.getSources(this.state.type);
const layers = this.getLayersForSource(this.state.source);
const layers = this.getLayersForSource(this.state.source!);
return <Modal
isOpen={this.props.isOpen}
@@ -131,25 +136,23 @@ export default class ModalAdd extends React.Component {
>
<div className="maputnik-add-layer">
<FieldId
label="ID"
fieldSpec={latest.layer.id}
value={this.state.id}
wdKey="add-layer.layer-id"
onChange={v => {
onChange={(v: string) => {
this.setState({ id: v })
}}
/>
<FieldType
value={this.state.type}
wdKey="add-layer.layer-type"
onChange={v => this.setState({ type: v })}
onChange={(v: string) => this.setState({ type: v })}
/>
{this.state.type !== 'background' &&
<FieldSource
sourceIds={sources}
wdKey="add-layer.layer-source-block"
value={this.state.source}
onChange={v => this.setState({ source: v })}
onChange={(v: string) => this.setState({ source: v })}
/>
}
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
@@ -157,7 +160,7 @@ export default class ModalAdd extends React.Component {
isFixed={true}
sourceLayerIds={layers}
value={this.state['source-layer']}
onChange={v => this.setState({ 'source-layer': v })}
onChange={(v: string) => this.setState({ 'source-layer': v })}
/>
}
<InputButton

36
src/components/ModalDebug.jsx → src/components/ModalDebug.tsx
View File

@@ -1,21 +1,27 @@
import React from 'react'
import PropTypes from 'prop-types'
import Modal from './Modal'
export default class ModalDebug extends React.Component {
static propTypes = {
isOpen: PropTypes.bool.isRequired,
renderer: PropTypes.string.isRequired,
onChangeMaboxGlDebug: PropTypes.func.isRequired,
onChangeOpenlayersDebug: PropTypes.func.isRequired,
onOpenToggle: PropTypes.func.isRequired,
maplibreGlDebugOptions: PropTypes.object,
openlayersDebugOptions: PropTypes.object,
mapView: PropTypes.object,
type ModalDebugProps = {
isOpen: boolean
renderer: string
onChangeMaboxGlDebug(...args: unknown[]): unknown
onChangeOpenlayersDebug(...args: unknown[]): unknown
onOpenToggle(...args: unknown[]): unknown
maplibreGlDebugOptions?: object
openlayersDebugOptions?: object
mapView: {
zoom: number
center: {
lng: string
lat: string
}
}
};
export default class ModalDebug extends React.Component<ModalDebugProps> {
render() {
const {mapView} = this.props;
@@ -33,10 +39,10 @@ export default class ModalDebug extends React.Component {
<h1>Options</h1>
{this.props.renderer === 'mlgljs' &&
<ul>
{Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => {
{Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
return <li key={key}>
<label>
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
</label>
</li>
})}
@@ -44,10 +50,10 @@ export default class ModalDebug extends React.Component {
}
{this.props.renderer === 'ol' &&
<ul>
{Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
{Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
return <li key={key}>
<label>
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
</label>
</li>
})}

34
src/components/ModalExport.jsx → src/components/ModalExport.tsx
View File

@@ -1,13 +1,13 @@
import React from 'react'
import PropTypes from 'prop-types'
import Slugify from 'slugify'
import {saveAs} from 'file-saver'
import {version} from 'maplibre-gl'
import {format} from '@maplibre/maplibre-gl-style-spec'
import {version} from 'maplibre-gl/package.json'
import {StyleSpecification, format} from '@maplibre/maplibre-gl-style-spec'
import {MdFileDownload} from 'react-icons/md'
import FieldString from './FieldString'
import InputButton from './InputButton'
import Modal from './Modal'
import {MdFileDownload} from 'react-icons/md'
import style from '../libs/style'
import fieldSpecAdditional from '../libs/field-spec-additional'
@@ -15,17 +15,15 @@ import fieldSpecAdditional from '../libs/field-spec-additional'
const MAPLIBRE_GL_VERSION = version;
export default class ModalExport extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
onStyleChanged: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
}
type ModalExportProps = {
mapStyle: StyleSpecification & { id: string }
onStyleChanged(...args: unknown[]): unknown
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
};
constructor(props) {
super(props);
}
export default class ModalExport extends React.Component<ModalExportProps> {
tokenizedStyle () {
return format(
@@ -88,11 +86,11 @@ export default class ModalExport extends React.Component {
saveAs(blob, exportName + ".json");
}
changeMetadataProperty(property, value) {
changeMetadataProperty(property: string, value: any) {
const changedStyle = {
...this.props.mapStyle,
metadata: {
...this.props.mapStyle.metadata,
...this.props.mapStyle.metadata as any,
[property]: value
}
}
@@ -119,13 +117,13 @@ export default class ModalExport extends React.Component {
<FieldString
label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
/>
<FieldString
label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
/>
</div>

148
src/components/ModalSources.jsx → src/components/ModalSources.tsx
View File

@@ -1,12 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification, latest} from '@maplibre/maplibre-gl-style-spec'
import Modal from './Modal'
import InputButton from './InputButton'
import Block from './Block'
import FieldString from './FieldString'
import FieldSelect from './FieldSelect'
import ModalSourcesTypeEditor from './ModalSourcesTypeEditor'
import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
import style from '../libs/style'
import { deleteSource, addSource, changeSource } from '../libs/source'
@@ -14,32 +12,32 @@ import publicSources from '../config/tilesets.json'
import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
class PublicSource extends React.Component {
static propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
onSelect: PropTypes.func.isRequired,
}
type PublicSourceProps = {
id: string
type: string
title: string
onSelect(...args: unknown[]): unknown
};
class PublicSource extends React.Component<PublicSourceProps> {
render() {
return <div className="maputnik-public-source">
<InputButton
<InputButton
className="maputnik-public-source-select"
onClick={() => this.props.onSelect(this.props.id)}
>
<div className="maputnik-public-source-info">
<p className="maputnik-public-source-name">{this.props.title}</p>
<p className="maputnik-public-source-id">#{this.props.id}</p>
</div>
<span className="maputnik-space" />
<MdAddCircleOutline />
</InputButton>
onClick={() => this.props.onSelect(this.props.id)}
>
<div className="maputnik-public-source-info">
<p className="maputnik-public-source-name">{this.props.title}</p>
<p className="maputnik-public-source-id">#{this.props.id}</p>
</div>
<span className="maputnik-space" />
<MdAddCircleOutline />
</InputButton>
</div>
}
}
function editorMode(source) {
function editorMode(source: SourceSpecification) {
if(source.type === 'raster') {
if(source.tiles) return 'tilexyz_raster'
return 'tilejson_raster'
@@ -69,16 +67,15 @@ function editorMode(source) {
return null
}
class ActiveModalSourcesTypeEditor extends React.Component {
static propTypes = {
sourceId: PropTypes.string.isRequired,
source: PropTypes.object.isRequired,
onDelete: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
}
type ActiveModalSourcesTypeEditorProps = {
sourceId: string
source: SourceSpecification
onDelete(...args: unknown[]): unknown
onChange(...args: unknown[]): unknown
};
class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTypeEditorProps> {
render() {
const inputProps = { }
return <div className="maputnik-active-source-type-editor">
<div className="maputnik-active-source-type-editor-header">
<span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
@@ -103,12 +100,18 @@ class ActiveModalSourcesTypeEditor extends React.Component {
}
}
class AddSource extends React.Component {
static propTypes = {
onAdd: PropTypes.func.isRequired,
}
type AddSourceProps = {
onAdd(...args: unknown[]): unknown
};
constructor(props) {
type AddSourceState = {
mode: EditorMode
sourceId: string
source: SourceSpecification
};
class AddSource extends React.Component<AddSourceProps, AddSourceState> {
constructor(props: AddSourceProps) {
super(props)
this.state = {
mode: 'tilejson_vector',
@@ -117,7 +120,7 @@ class AddSource extends React.Component {
}
}
defaultSource(mode) {
defaultSource(mode: EditorMode): SourceSpecification {
const source = (this.state || {}).source || {}
const {protocol} = window.location;
@@ -128,38 +131,38 @@ class AddSource extends React.Component {
}
case 'geojson_json': return {
type: 'geojson',
cluster: source.cluster || false,
cluster: (source as GeoJSONSourceSpecification).cluster || false,
data: {}
}
case 'tilejson_vector': return {
type: 'vector',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_vector': return {
type: 'vector',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minZoom: source.minzoom || 0,
maxZoom: source.maxzoom || 14
tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as VectorSourceSpecification).minzoom || 0,
maxzoom: (source as VectorSourceSpecification).maxzoom || 14
}
case 'tilejson_raster': return {
type: 'raster',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_raster': return {
type: 'raster',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14
tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as RasterSourceSpecification).minzoom || 0,
maxzoom: (source as RasterSourceSpecification).maxzoom || 14
}
case 'tilejson_raster-dem': return {
type: 'raster-dem',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_raster-dem': return {
type: 'raster-dem',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14
tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
}
case 'image': return {
type: 'image',
@@ -183,7 +186,7 @@ class AddSource extends React.Component {
[0,0],
],
}
default: return {}
default: return {} as any
}
}
@@ -192,7 +195,7 @@ class AddSource extends React.Component {
this.props.onAdd(sourceId, source);
}
onChangeSource = (source) => {
onChangeSource = (source: SourceSpecification) => {
this.setState({source});
}
@@ -213,7 +216,7 @@ class AddSource extends React.Component {
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})}
onChange={(v: string) => this.setState({ sourceId: v})}
/>
<FieldSelect
label={"Source Type"}
@@ -230,8 +233,8 @@ class AddSource extends React.Component {
['image', 'Image'],
['video', 'Video'],
]}
onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
value={this.state.mode}
onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
value={this.state.mode as string}
/>
<ModalSourcesTypeEditor
onChange={this.onChangeSource}
@@ -240,7 +243,7 @@ class AddSource extends React.Component {
/>
<InputButton
className="maputnik-add-source-button"
onClick={this.onAdd}
onClick={this.onAdd}
>
Add Source
</InputButton>
@@ -248,15 +251,15 @@ class AddSource extends React.Component {
}
}
export default class ModalSources extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
onStyleChanged: PropTypes.func.isRequired,
}
type ModalSourcesProps = {
mapStyle: StyleSpecification
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
onStyleChanged(...args: unknown[]): unknown
};
stripTitle(source) {
export default class ModalSources extends React.Component<ModalSourcesProps> {
stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
const strippedSource = {...source}
delete strippedSource['title']
return strippedSource
@@ -270,13 +273,13 @@ export default class ModalSources extends React.Component {
key={sourceId}
sourceId={sourceId}
source={source}
onChange={src => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
/>
})
const tilesetOptions = Object.keys(publicSources).filter(sourceId => !(sourceId in mapStyle.sources)).map(sourceId => {
const source = publicSources[sourceId]
const tilesetOptions = Object.keys(publicSources).filter((sourceId: string) => !(sourceId in mapStyle.sources)).map((sourceId: string) => {
const source = publicSources[sourceId as keyof typeof publicSources] as SourceSpecification & {title: string};
return <PublicSource
key={sourceId}
id={sourceId}
@@ -286,7 +289,6 @@ export default class ModalSources extends React.Component {
/>
})
const inputProps = { }
return <Modal
data-wd-key="modal:sources"
isOpen={this.props.isOpen}
@@ -303,17 +305,17 @@ export default class ModalSources extends React.Component {
<p>
Add one of the publicly available sources to your style.
</p>
<div className="maputnik-public-sources" style={{maxwidth: 500}}>
<div className="maputnik-public-sources" style={{maxWidth: 500}}>
{tilesetOptions}
</div>
</section>
<section className="maputnik-modal-section">
<h1>Add New Source</h1>
<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
<AddSource
onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
/>
<h1>Add New Source</h1>
<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
<AddSource
onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
/>
</section>
</Modal>
}

98
src/components/ModalSourcesTypeEditor.jsx → src/components/ModalSourcesTypeEditor.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldUrl from './FieldUrl'
@@ -10,14 +9,18 @@ import FieldArray from './FieldArray'
import FieldJson from './FieldJson'
import FieldCheckbox from './FieldCheckbox'
export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
class TileJSONSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.node,
type TileJSONSourceEditorProps = {
source: {
url: string
}
onChange(...args: unknown[]): unknown
children?: React.ReactNode
};
class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
render() {
return <div>
<FieldUrl
@@ -34,14 +37,18 @@ class TileJSONSourceEditor extends React.Component {
}
}
class TileURLSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.node,
type TileURLSourceEditorProps = {
source: {
tiles: string[]
minzoom: number
maxzoom: number
}
onChange(...args: unknown[]): unknown
children?: React.ReactNode
};
changeTileUrls(tiles) {
class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
changeTileUrls(tiles: string[]) {
this.props.onChange({
...this.props.source,
tiles,
@@ -86,14 +93,17 @@ class TileURLSourceEditor extends React.Component {
}
}
class ImageSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type ImageSourceEditorProps = {
source: {
coordinates: [number, number][]
url: string
}
onChange(...args: unknown[]): unknown
};
class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
render() {
const changeCoord = (idx, val) => {
const changeCoord = (idx: number, val: [number, number]) => {
const coordinates = this.props.source.coordinates.slice(0);
coordinates[idx] = val;
@@ -122,7 +132,7 @@ class ImageSourceEditor extends React.Component {
type="number"
value={this.props.source.coordinates[idx]}
default={[0, 0]}
onChange={(val) => changeCoord(idx, val)}
onChange={(val: [number, number]) => changeCoord(idx, val)}
/>
);
})}
@@ -130,14 +140,17 @@ class ImageSourceEditor extends React.Component {
}
}
class VideoSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type VideoSourceEditorProps = {
source: {
coordinates: [number, number][]
urls: string[]
}
onChange(...args: unknown[]): unknown
};
class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
render() {
const changeCoord = (idx, val) => {
const changeCoord = (idx: number, val: [number, number]) => {
const coordinates = this.props.source.coordinates.slice(0);
coordinates[idx] = val;
@@ -147,7 +160,7 @@ class VideoSourceEditor extends React.Component {
});
}
const changeUrls = (urls) => {
const changeUrls = (urls: string[]) => {
this.props.onChange({
...this.props.source,
urls,
@@ -160,7 +173,7 @@ class VideoSourceEditor extends React.Component {
fieldSpec={latest.source_video.urls}
type="string"
value={this.props.source.urls}
default={""}
default={[]}
onChange={changeUrls}
/>
{["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
@@ -172,7 +185,7 @@ class VideoSourceEditor extends React.Component {
type="number"
value={this.props.source.coordinates[idx]}
default={[0, 0]}
onChange={val => changeCoord(idx, val)}
onChange={(val: [number, number]) => changeCoord(idx, val)}
/>
);
})}
@@ -180,12 +193,14 @@ class VideoSourceEditor extends React.Component {
}
}
class GeoJSONSourceUrlEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type GeoJSONSourceUrlEditorProps = {
source: {
data: string
}
onChange(...args: unknown[]): unknown
};
class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps> {
render() {
return <FieldUrl
label={"GeoJSON URL"}
@@ -199,12 +214,15 @@ class GeoJSONSourceUrlEditor extends React.Component {
}
}
class GeoJSONSourceFieldJsonEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type GeoJSONSourceFieldJsonEditorProps = {
source: {
data: any,
cluster: boolean
}
onChange(...args: unknown[]): unknown
};
class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJsonEditorProps> {
render() {
return <div>
<Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
@@ -238,13 +256,13 @@ class GeoJSONSourceFieldJsonEditor extends React.Component {
}
}
export default class ModalSourcesTypeEditor extends React.Component {
static propTypes = {
mode: PropTypes.string.isRequired,
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
}
type ModalSourcesTypeEditorProps = {
mode: EditorMode
source: any
onChange(...args: unknown[]): unknown
};
export default class ModalSourcesTypeEditor extends React.Component<ModalSourcesTypeEditorProps> {
render() {
const commonProps = {
source: this.props.source,

30
src/components/PropertyGroup.jsx → src/components/PropertyGroup.tsx
View File

@@ -1,12 +1,12 @@
import React from 'react'
import PropTypes from 'prop-types'
import FieldFunction from './FieldFunction'
import { LayerSpecification } from '@maplibre/maplibre-gl-style-spec'
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
/** Extract field spec by {@fieldName} from the {@layerType} in the
* style specification from either the paint or layout group */
function getFieldSpec(spec, layerType, fieldName) {
function getFieldSpec(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
const groupName = getGroupName(spec, layerType, fieldName)
const group = spec[groupName + '_' + layerType]
const fieldSpec = group[fieldName]
@@ -25,7 +25,7 @@ function getFieldSpec(spec, layerType, fieldName) {
return fieldSpec
}
function getGroupName(spec, layerType, fieldName) {
function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
const paint = spec['paint_' + layerType] || {}
if (fieldName in paint) {
return 'paint'
@@ -34,18 +34,18 @@ function getGroupName(spec, layerType, fieldName) {
}
}
export default class PropertyGroup extends React.Component {
static propTypes = {
layer: PropTypes.object.isRequired,
groupFields: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
spec: PropTypes.object.isRequired,
errors: PropTypes.object,
}
type PropertyGroupProps = {
layer: LayerSpecification
groupFields: string[]
onChange(...args: unknown[]): unknown
spec: any
errors?: unknown[]
};
onPropertyChange = (property, newValue) => {
export default class PropertyGroup extends React.Component<PropertyGroupProps> {
onPropertyChange = (property: string, newValue: any) => {
const group = getGroupName(this.props.spec, this.props.layer.type, property)
this.props.onChange(group , property, newValue)
this.props.onChange(group ,property, newValue)
}
render() {
@@ -55,7 +55,9 @@ export default class PropertyGroup extends React.Component {
const paint = this.props.layer.paint || {}
const layout = this.props.layer.layout || {}
const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
const fieldValue = fieldName in paint
? paint[fieldName as keyof typeof paint]
: layout[fieldName as keyof typeof layout]
const fieldType = fieldName in paint ? 'paint' : 'layout';
return <FieldFunction

16
src/components/SpecField.tsx
View File

@@ -15,21 +15,19 @@ const typeMap = {
formatted: () => Block,
};
type SpecFieldProps = InputFieldSpecProps & {
export type SpecFieldProps = InputFieldSpecProps & {
name?: string
};
export default class SpecField extends React.Component<SpecFieldProps> {
render() {
const {props} = this;
const fieldType = this.props.fieldSpec?.type;
const fieldType = props.fieldSpec.type;
const typeBlockFn = typeMap[fieldType];
const typeBlockFn = typeMap[fieldType!];
let TypeBlock;
if (typeBlockFn) {
TypeBlock = typeBlockFn(props);
TypeBlock = typeBlockFn(this.props);
}
else {
console.warn("No such type for '%s'", fieldType);
@@ -37,11 +35,11 @@ export default class SpecField extends React.Component<SpecFieldProps> {
}
return <TypeBlock
label={props.label}
action={props.action}
label={this.props.label}
action={this.props.action}
fieldSpec={this.props.fieldSpec}
>
<InputSpec {...props} />
<InputSpec {...this.props} />
</TypeBlock>
}
}

142
src/components/_DataProperty.jsx → src/components/_DataProperty.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
import {latest} from '@maplibre/maplibre-gl-style-spec'
@@ -8,7 +7,6 @@ import InputSpec from './InputSpec'
import InputNumber from './InputNumber'
import InputString from './InputString'
import InputSelect from './InputSelect'
import FieldDocLabel from './FieldDocLabel'
import Block from './Block'
import docUid from '../libs/document-uid'
import sortNumerically from '../libs/sort-numerically'
@@ -19,12 +17,12 @@ import DeleteStopButton from './_DeleteStopButton'
function setStopRefs(props, state) {
function setStopRefs(props: DataPropertyProps, state: DataPropertyState) {
// This is initialsed below only if required to improved performance.
let newRefs;
let newRefs: {[key: number]: string} | undefined;
if(props.value && props.value.stops) {
props.value.stops.forEach((val, idx) => {
props.value.stops.forEach((_val, idx) => {
if(!state.refs.hasOwnProperty(idx)) {
if(!newRefs) {
newRefs = {...state};
@@ -37,27 +35,39 @@ function setStopRefs(props, state) {
return newRefs;
}
export default class DataProperty extends React.Component {
static propTypes = {
onChange: PropTypes.func,
onDeleteStop: PropTypes.func,
onAddStop: PropTypes.func,
onExpressionClick: PropTypes.func,
fieldName: PropTypes.string,
fieldType: PropTypes.string,
fieldSpec: PropTypes.object,
value: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.number,
PropTypes.bool,
PropTypes.array
]),
errors: PropTypes.object,
}
type DataPropertyProps = {
onChange?(fieldName: string, value: any): unknown
onDeleteStop?(...args: unknown[]): unknown
onAddStop?(...args: unknown[]): unknown
onExpressionClick?(...args: unknown[]): unknown
onChangeToZoomFunction?(...args: unknown[]): unknown
fieldName: string
fieldType?: string
fieldSpec?: object
value?: DataPropertyValue
errors?: object
};
type DataPropertyState = {
refs: {[key: number]: string}
};
type DataPropertyValue = {
default?: any
property?: string
base?: number
type?: string
stops: Stop[]
}
export type Stop = [{
zoom: number
value: number
}, number]
export default class DataProperty extends React.Component<DataPropertyProps, DataPropertyState> {
state = {
refs: {}
refs: {} as {[key: number]: string}
}
componentDidMount() {
@@ -70,7 +80,7 @@ export default class DataProperty extends React.Component {
}
}
static getDerivedStateFromProps(props, state) {
static getDerivedStateFromProps(props: DataPropertyProps, state: DataPropertyState) {
const newRefs = setStopRefs(props, state);
if(newRefs) {
return {
@@ -80,7 +90,7 @@ export default class DataProperty extends React.Component {
return null;
}
getFieldFunctionType(fieldSpec) {
getFieldFunctionType(fieldSpec: any) {
if (fieldSpec.expression.interpolated) {
return "exponential"
}
@@ -90,7 +100,7 @@ export default class DataProperty extends React.Component {
return "categorical"
}
getDataFunctionTypes(fieldSpec) {
getDataFunctionTypes(fieldSpec: any) {
if (fieldSpec.expression.interpolated) {
return ["interpolate", "categorical", "interval", "exponential", "identity"]
}
@@ -100,7 +110,7 @@ export default class DataProperty extends React.Component {
}
// Order the stops altering the refs to reflect their new position.
orderStopsByZoom(stops) {
orderStopsByZoom(stops: Stop[]) {
const mappedWithRef = stops
.map((stop, idx) => {
return {
@@ -112,7 +122,7 @@ export default class DataProperty extends React.Component {
.sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
// Fetch the new position of the stops
const newRefs = {};
const newRefs = {} as {[key: number]: string};
mappedWithRef
.forEach((stop, idx) =>{
newRefs[idx] = stop.ref;
@@ -125,7 +135,7 @@ export default class DataProperty extends React.Component {
return mappedWithRef.map((item) => item.data);
}
onChange = (fieldName, value) => {
onChange = (fieldName: string, value: any) => {
if (value.type === "identity") {
value = {
type: value.type,
@@ -139,21 +149,21 @@ export default class DataProperty extends React.Component {
type: value.type,
// Default props if they don't already exist.
stops: [
[{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
[{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
[{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec as any)],
[{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec as any)]
],
...value,
}
}
this.props.onChange(fieldName, value);
this.props.onChange!(fieldName, value);
}
changeStop(changeIdx, stopData, value) {
const stops = this.props.value.stops.slice(0)
changeStop(changeIdx: number, stopData: { zoom: number | undefined, value: number }, value: number) {
const stops = this.props.value?.stops.slice(0) || []
// const changedStop = stopData.zoom === undefined ? stopData.value : stopData
stops[changeIdx] = [
{
...stopData,
value: stopData.value,
zoom: (stopData.zoom === undefined) ? 0 : stopData.zoom,
},
value
@@ -168,7 +178,7 @@ export default class DataProperty extends React.Component {
this.onChange(this.props.fieldName, changedValue)
}
changeBase(newValue) {
changeBase(newValue: number | undefined) {
const changedValue = {
...this.props.value,
base: newValue
@@ -177,11 +187,11 @@ export default class DataProperty extends React.Component {
if (changedValue.base === undefined) {
delete changedValue["base"];
}
this.props.onChange(this.props.fieldName, changedValue)
this.props.onChange!(this.props.fieldName, changedValue)
}
changeDataType(propVal) {
if (propVal === "interpolate") {
changeDataType(propVal: string) {
if (propVal === "interpolate" && this.props.onChangeToZoomFunction) {
this.props.onChangeToZoomFunction();
}
else {
@@ -192,41 +202,39 @@ export default class DataProperty extends React.Component {
}
}
changeDataProperty(propName, propVal) {
changeDataProperty(propName: "property" | "default", propVal: any) {
if (propVal) {
this.props.value[propName] = propVal
this.props.value![propName] = propVal
}
else {
delete this.props.value[propName]
delete this.props.value![propName]
}
this.onChange(this.props.fieldName, this.props.value)
}
render() {
const {fieldName, fieldType, errors} = this.props;
if (typeof this.props.value.type === "undefined") {
this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
if (typeof this.props.value?.type === "undefined") {
this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec)
}
let dataFields;
if (this.props.value.stops) {
if (this.props.value?.stops) {
dataFields = this.props.value.stops.map((stop, idx) => {
const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
const key = this.state.refs[idx];
const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
const value = stop[1]
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
const dataProps = {
'aria-label': "Input value",
label: "Data value",
value: dataLevel,
onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
value: dataLevel as any,
onChange: (newData: string | number | undefined) => this.changeStop(idx, { zoom: zoomLevel, value: newData as number }, value)
}
let dataInput;
if(this.props.value.type === "categorical") {
if(this.props.value?.type === "categorical") {
dataInput = <InputString {...dataProps} />
}
else {
@@ -246,16 +254,6 @@ export default class DataProperty extends React.Component {
</div>
}
const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
const foundErrors = Object.entries(errors).filter(([key, error]) => {
return key.startsWith(errorKeyStart);
});
const message = foundErrors.map(([key, error]) => {
return error.message;
}).join("");
const error = message ? {message} : undefined;
return <tr key={key}>
<td>
{zoomInput}
@@ -269,7 +267,7 @@ export default class DataProperty extends React.Component {
fieldName={this.props.fieldName}
fieldSpec={this.props.fieldSpec}
value={value}
onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue as number)}
/>
</td>
<td>
@@ -289,14 +287,14 @@ export default class DataProperty extends React.Component {
>
<div className="maputnik-data-spec-property-input">
<InputSelect
value={this.props.value.type}
value={this.props.value!.type}
onChange={propVal => this.changeDataType(propVal)}
title={"Select a type of data scale (default is 'categorical')."}
options={this.getDataFunctionTypes(this.props.fieldSpec)}
/>
</div>
</Block>
{this.props.value.type !== "identity" &&
{this.props.value?.type !== "identity" &&
<Block
label={"Base"}
key="base"
@@ -305,8 +303,8 @@ export default class DataProperty extends React.Component {
<InputSpec
fieldName={"base"}
fieldSpec={latest.function.base}
value={this.props.value.base}
onChange={(_, newValue) => this.changeBase(newValue)}
value={this.props.value?.base}
onChange={(_, newValue) => this.changeBase(newValue as number)}
/>
</div>
</Block>
@@ -317,7 +315,7 @@ export default class DataProperty extends React.Component {
>
<div className="maputnik-data-spec-property-input">
<InputString
value={this.props.value.property}
value={this.props.value?.property}
title={"Input a data property to base styles off of."}
onChange={propVal => this.changeDataProperty("property", propVal)}
/>
@@ -331,7 +329,7 @@ export default class DataProperty extends React.Component {
<InputSpec
fieldName={this.props.fieldName}
fieldSpec={this.props.fieldSpec}
value={this.props.value.default}
value={this.props.value?.default}
onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
/>
</Block>
@@ -344,7 +342,7 @@ export default class DataProperty extends React.Component {
<tr>
<th>Zoom</th>
<th>Input value</th>
<th rowSpan="2">Output value</th>
<th rowSpan={2}>Output value</th>
</tr>
</thead>
<tbody>
@@ -357,7 +355,7 @@ export default class DataProperty extends React.Component {
{dataFields &&
<InputButton
className="maputnik-add-stop"
onClick={this.props.onAddStop.bind(this)}
onClick={this.props.onAddStop?.bind(this)}
>
<svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
<path fill="currentColor" d={mdiTableRowPlusAfter} />
@@ -366,7 +364,7 @@ export default class DataProperty extends React.Component {
}
<InputButton
className="maputnik-add-stop"
onClick={this.props.onExpressionClick.bind(this)}
onClick={this.props.onExpressionClick?.bind(this)}
>
<svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
<path fill="currentColor" d={mdiFunctionVariant} />

10
src/components/_DeleteStopButton.jsx → src/components/_DeleteStopButton.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import PropTypes from 'prop-types'
import InputButton from './InputButton'
import {MdDelete} from 'react-icons/md'
export default class DeleteStopButton extends React.Component {
static propTypes = {
onClick: PropTypes.func,
}
type DeleteStopButtonProps = {
onClick?(...args: unknown[]): unknown
};
export default class DeleteStopButton extends React.Component<DeleteStopButtonProps> {
render() {
return <InputButton
className="maputnik-delete-stop"

55
src/components/_ExpressionProperty.jsx → src/components/_ExpressionProperty.tsx
View File

@@ -1,45 +1,46 @@
import React from 'react'
import PropTypes from 'prop-types'
import {MdDelete, MdUndo} from 'react-icons/md'
import stringifyPretty from 'json-stringify-pretty-compact'
import Block from './Block'
import InputButton from './InputButton'
import {MdDelete, MdUndo} from 'react-icons/md'
import FieldString from './FieldString'
import labelFromFieldName from './_labelFromFieldName'
import stringifyPretty from 'json-stringify-pretty-compact'
import FieldJson from './FieldJson'
export default class ExpressionProperty extends React.Component {
static propTypes = {
onDelete: PropTypes.func,
fieldName: PropTypes.string,
fieldType: PropTypes.string,
fieldSpec: PropTypes.object,
value: PropTypes.any,
errors: PropTypes.object,
onChange: PropTypes.func,
onUndo: PropTypes.func,
canUndo: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
}
type ExpressionPropertyProps = {
onDelete?(...args: unknown[]): unknown
fieldName: string
fieldType?: string
fieldSpec?: object
value?: any
errors?: {[key: string]: any}
onChange?(...args: unknown[]): unknown
onUndo?(...args: unknown[]): unknown
canUndo?(...args: unknown[]): unknown
onFocus?(...args: unknown[]): unknown
onBlur?(...args: unknown[]): unknown
};
type ExpressionPropertyState = {
jsonError: boolean
};
export default class ExpressionProperty extends React.Component<ExpressionPropertyProps, ExpressionPropertyState> {
static defaultProps = {
errors: {},
onFocus: () => {},
onBlur: () => {},
}
constructor (props) {
super();
constructor (props:ExpressionPropertyProps) {
super(props);
this.state = {
jsonError: false,
};
}
onJSONInvalid = (err) => {
onJSONInvalid = (_err: Error) => {
this.setState({
jsonError: true,
})
@@ -82,11 +83,11 @@ export default class ExpressionProperty extends React.Component {
const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
const fieldError = errors[fieldKey];
const fieldError = errors![fieldKey];
const errorKeyStart = `${fieldKey}[`;
const foundErrors = [];
function getValue (data) {
function getValue(data: any) {
return stringifyPretty(data, {indent: 2, maxLength: 38})
}
@@ -94,11 +95,11 @@ export default class ExpressionProperty extends React.Component {
foundErrors.push({message: "Invalid JSON"});
}
else {
Object.entries(errors)
.filter(([key, error]) => {
Object.entries(errors!)
.filter(([key, _error]) => {
return key.startsWith(errorKeyStart);
})
.forEach(([key, error]) => {
.forEach(([_key, error]) => {
return foundErrors.push(error);
})

11
src/components/_FieldComment.jsx → src/components/_FieldComment.tsx
View File

@@ -1,15 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import FieldString from './FieldString'
export default class BlockComment extends React.Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired,
}
type BlockCommentProps = {
value?: string
onChange(...args: unknown[]): unknown
};
export default class BlockComment extends React.Component<BlockCommentProps> {
render() {
const fieldSpec = {
doc: "Comments for the current layer. This is non-standard and not in the spec."

22
src/components/_FieldFont.jsx → src/components/_FieldFont.tsx
View File

@@ -1,17 +1,17 @@
import React from 'react'
import Block from './Block'
import PropTypes from 'prop-types'
import FieldAutocomplete from './FieldAutocomplete'
export default class FieldFont extends React.Component {
static propTypes = {
value: PropTypes.array,
default: PropTypes.array,
fonts: PropTypes.array,
style: PropTypes.object,
onChange: PropTypes.func.isRequired,
}
type FieldFontProps = {
value?: string[]
default?: string[]
fonts?: unknown[]
style?: object
onChange(...args: unknown[]): unknown
label?: string
};
export default class FieldFont extends React.Component<FieldFontProps> {
static defaultProps = {
fonts: []
}
@@ -28,7 +28,7 @@ export default class FieldFont extends React.Component {
}
}
changeFont(idx, newValue) {
changeFont(idx: number, newValue: string) {
const changedValues = this.values.slice(0)
changedValues[idx] = newValue
const filteredValues = changedValues
@@ -45,7 +45,7 @@ export default class FieldFont extends React.Component {
>
<FieldAutocomplete
value={value}
options={this.props.fonts.map(f => [f, f])}
options={this.props.fonts!.map(f => [f, f])}
onChange={this.changeFont.bind(this, i)}
/>
</li>

15
src/components/_FieldId.jsx → src/components/_FieldId.tsx
View File

@@ -1,18 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldString from './FieldString'
export default class BlockId extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
error: PropTypes.object,
}
type BlockIdProps = {
value: string
wdKey: string
onChange(...args: unknown[]): unknown
error?: unknown[]
};
export default class BlockId extends React.Component<BlockIdProps> {
render() {
return <Block label={"ID"} fieldSpec={latest.layer.id}
data-wd-key={this.props.wdKey}

13
src/components/_FieldMaxZoom.jsx → src/components/_FieldMaxZoom.tsx
View File

@@ -1,17 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldNumber from './FieldNumber'
export default class BlockMaxZoom extends React.Component {
static propTypes = {
value: PropTypes.number,
onChange: PropTypes.func.isRequired,
error: PropTypes.object,
}
type BlockMaxZoomProps = {
value?: number
onChange(...args: unknown[]): unknown
error?: unknown[]
};
export default class BlockMaxZoom extends React.Component<BlockMaxZoomProps> {
render() {
return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
error={this.props.error}

13
src/components/_FieldMinZoom.jsx → src/components/_FieldMinZoom.tsx
View File

@@ -1,17 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldNumber from './FieldNumber'
export default class BlockMinZoom extends React.Component {
static propTypes = {
value: PropTypes.number,
onChange: PropTypes.func.isRequired,
error: PropTypes.object,
}
type BlockMinZoomProps = {
value?: number
onChange(...args: unknown[]): unknown
error?: unknown[]
};
export default class BlockMinZoom extends React.Component<BlockMinZoomProps> {
render() {
return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
error={this.props.error}

21
src/components/_FieldSource.jsx → src/components/_FieldSource.tsx
View File

@@ -1,19 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldAutocomplete from './FieldAutocomplete'
export default class BlockSource extends React.Component {
static propTypes = {
value: PropTypes.string,
wdKey: PropTypes.string,
onChange: PropTypes.func,
sourceIds: PropTypes.array,
error: PropTypes.object,
}
type BlockSourceProps = {
value?: string
wdKey?: string
onChange?(...args: unknown[]): unknown
sourceIds?: unknown[]
error?: unknown[]
};
export default class BlockSource extends React.Component<BlockSourceProps> {
static defaultProps = {
onChange: () => {},
sourceIds: [],
@@ -28,8 +27,8 @@ export default class BlockSource extends React.Component {
>
<FieldAutocomplete
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceIds.map(src => [src, src])}
onChange={this.props.onChange!}
options={this.props.sourceIds!.map(src => [src, src])}
/>
</Block>
}

19
src/components/_FieldSourceLayer.jsx → src/components/_FieldSourceLayer.tsx
View File

@@ -1,18 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldAutocomplete from './FieldAutocomplete'
export default class BlockSourceLayer extends React.Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
sourceLayerIds: PropTypes.array,
isFixed: PropTypes.bool,
}
type BlockSourceLayerProps = {
value?: string
onChange?(...args: unknown[]): unknown
sourceLayerIds?: unknown[]
isFixed?: boolean
};
export default class BlockSourceLayer extends React.Component<BlockSourceLayerProps> {
static defaultProps = {
onChange: () => {},
sourceLayerIds: [],
@@ -26,8 +25,8 @@ export default class BlockSourceLayer extends React.Component {
<FieldAutocomplete
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceLayerIds.map(l => [l, l])}
onChange={this.props.onChange!}
options={this.props.sourceLayerIds!.map(l => [l, l])}
/>
</Block>
}

27
src/components/_FieldSymbol.jsx
View File

@@ -1,27 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import FieldAutocomplete from './FieldAutocomplete'
export default class FieldSymbol extends React.Component {
static propTypes = {
value: PropTypes.string,
icons: PropTypes.array,
style: PropTypes.object,
onChange: PropTypes.func.isRequired,
}
static defaultProps = {
icons: []
}
render() {
return <FieldAutocomplete
value={this.props.value}
options={this.props.icons.map(f => [f, f])}
onChange={this.props.onChange}
wrapperStyle={this.props.style}
/>
}
}

25
src/components/_FieldSymbol.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react'
import FieldAutocomplete from './FieldAutocomplete'
type FieldSymbolProps = {
value?: string
icons?: unknown[]
onChange(...args: unknown[]): unknown
};
export default class FieldSymbol extends React.Component<FieldSymbolProps> {
static defaultProps = {
icons: []
}
render() {
return <FieldAutocomplete
value={this.props.value}
options={this.props.icons!.map(f => [f, f])}
onChange={this.props.onChange}
/>
}
}

17
src/components/_FieldType.jsx → src/components/_FieldType.tsx
View File

@@ -1,20 +1,19 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldSelect from './FieldSelect'
import FieldString from './FieldString'
export default class BlockType extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string,
onChange: PropTypes.func.isRequired,
error: PropTypes.object,
disabled: PropTypes.bool,
}
type BlockTypeProps = {
value: string
wdKey?: string
onChange(...args: unknown[]): unknown
error?: unknown[]
disabled?: boolean
};
export default class BlockType extends React.Component<BlockTypeProps> {
static defaultProps = {
disabled: false,
}

34
src/components/_FunctionButtons.jsx → src/components/_FunctionButtons.tsx
View File

@@ -1,37 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import InputButton from './InputButton'
import {MdFunctions, MdInsertChart} from 'react-icons/md'
import {mdiFunctionVariant} from '@mdi/js';
type FunctionInputButtonsProps = {
fieldSpec?: any
onZoomClick?(...args: unknown[]): unknown
onDataClick?(...args: unknown[]): unknown
onExpressionClick?(...args: unknown[]): unknown
};
/**
* So here we can't just check is `Array.isArray(value)` because certain
* properties accept arrays as values, for example `text-font`. So we must try
* and create an expression.
*/
function isExpression(value, fieldSpec={}) {
if (!Array.isArray(value)) {
return false;
}
try {
expression.createExpression(value, fieldSpec);
return true;
}
catch (err) {
return false;
}
}
export default class FunctionInputButtons extends React.Component {
static propTypes = {
fieldSpec: PropTypes.object,
onZoomClick: PropTypes.func,
onDataClick: PropTypes.func,
onExpressionClick: PropTypes.func,
}
export default class FunctionInputButtons extends React.Component<FunctionInputButtonsProps> {
render() {
let makeZoomInputButton, makeDataInputButton, expressionInputButton;

32
src/components/_SpecProperty.jsx → src/components/_SpecProperty.tsx
View File

@@ -1,25 +1,24 @@
import React from 'react'
import PropTypes from 'prop-types'
import SpecField from './SpecField'
import SpecField, {SpecFieldProps} from './SpecField'
import FunctionButtons from './_FunctionButtons'
import Block from './Block'
import labelFromFieldName from './_labelFromFieldName'
export default class SpecProperty extends React.Component {
static propTypes = {
onZoomClick: PropTypes.func.isRequired,
onDataClick: PropTypes.func.isRequired,
fieldName: PropTypes.string,
fieldType: PropTypes.string,
fieldSpec: PropTypes.object,
value: PropTypes.any,
errors: PropTypes.object,
onExpressionClick: PropTypes.func,
}
type SpecPropertyProps = SpecFieldProps & {
onZoomClick(...args: unknown[]): unknown
onDataClick(...args: unknown[]): unknown
fieldName?: string
fieldType?: string
fieldSpec?: any
value?: any
errors?: unknown[]
onExpressionClick?(...args: unknown[]): unknown
};
export default class SpecProperty extends React.Component<SpecPropertyProps> {
static defaultProps = {
errors: {},
}
@@ -31,17 +30,16 @@ export default class SpecProperty extends React.Component {
fieldSpec={this.props.fieldSpec}
onZoomClick={this.props.onZoomClick}
onDataClick={this.props.onDataClick}
value={this.props.value}
onExpressionClick={this.props.onExpressionClick}
/>
const error = errors[fieldType+"."+fieldName];
const error = errors![fieldType+"."+fieldName as any] as any;
return <SpecField
{...this.props}
error={error}
fieldSpec={this.props.fieldSpec}
label={labelFromFieldName(this.props.fieldName)}
label={labelFromFieldName(this.props.fieldName || '')}
action={functionBtn}
/>
}

115
src/components/_ZoomProperty.jsx → src/components/_ZoomProperty.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
import {latest} from '@maplibre/maplibre-gl-style-spec'
@@ -7,7 +6,6 @@ import InputButton from './InputButton'
import InputSpec from './InputSpec'
import InputNumber from './InputNumber'
import InputSelect from './InputSelect'
import FieldDocLabel from './FieldDocLabel'
import Block from './Block'
import DeleteStopButton from './_DeleteStopButton'
@@ -22,12 +20,12 @@ import sortNumerically from '../libs/sort-numerically'
*
* When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
*/
function setStopRefs(props, state) {
function setStopRefs(props: ZoomPropertyProps, state: ZoomPropertyState) {
// This is initialsed below only if required to improved performance.
let newRefs;
let newRefs: {[key: number]: string} = {};
if(props.value && props.value.stops) {
props.value.stops.forEach((val, idx) => {
if(props.value && (props.value as ZoomWithStops).stops) {
(props.value as ZoomWithStops).stops.forEach((_val, idx: number) => {
if(!state.refs.hasOwnProperty(idx)) {
if(!newRefs) {
newRefs = {...state};
@@ -40,32 +38,39 @@ function setStopRefs(props, state) {
return newRefs;
}
type ZoomWithStops = {
stops: [number | undefined, number][]
base?: number
}
export default class ZoomProperty extends React.Component {
static propTypes = {
onChange: PropTypes.func,
onDeleteStop: PropTypes.func,
onAddStop: PropTypes.func,
onExpressionClick: PropTypes.func,
fieldType: PropTypes.string,
fieldName: PropTypes.string,
fieldSpec: PropTypes.object,
errors: PropTypes.object,
value: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.number,
PropTypes.bool,
PropTypes.array
]),
type ZoomPropertyProps = {
onChange?(...args: unknown[]): unknown
onChangeToDataFunction?(...args: unknown[]): unknown
onDeleteStop?(...args: unknown[]): unknown
onAddStop?(...args: unknown[]): unknown
onExpressionClick?(...args: unknown[]): unknown
fieldType?: string
fieldName: string
fieldSpec?: {
"property-type"?: string
"function-type"?: string
}
errors?: object
value?: ZoomWithStops
};
type ZoomPropertyState = {
refs: {[key: number]: string}
}
export default class ZoomProperty extends React.Component<ZoomPropertyProps, ZoomPropertyState> {
static defaultProps = {
errors: {},
}
state = {
refs: {}
refs: {} as {[key: number]: string}
}
componentDidMount() {
@@ -78,7 +83,7 @@ export default class ZoomProperty extends React.Component {
}
}
static getDerivedStateFromProps(props, state) {
static getDerivedStateFromProps(props: ZoomPropertyProps, state: ZoomPropertyState) {
const newRefs = setStopRefs(props, state);
if(newRefs) {
return {
@@ -89,7 +94,7 @@ export default class ZoomProperty extends React.Component {
}
// Order the stops altering the refs to reflect their new position.
orderStopsByZoom(stops) {
orderStopsByZoom(stops: ZoomWithStops["stops"]) {
const mappedWithRef = stops
.map((stop, idx) => {
return {
@@ -98,10 +103,10 @@ export default class ZoomProperty extends React.Component {
}
})
// Sort by zoom
.sort((a, b) => sortNumerically(a.data[0], b.data[0]));
.sort((a, b) => sortNumerically(a.data[0]!, b.data[0]!));
// Fetch the new position of the stops
const newRefs = {};
const newRefs: {[key:number]: string} = {};
mappedWithRef
.forEach((stop, idx) =>{
newRefs[idx] = stop.ref;
@@ -114,20 +119,20 @@ export default class ZoomProperty extends React.Component {
return mappedWithRef.map((item) => item.data);
}
changeZoomStop(changeIdx, stopData, value) {
const stops = this.props.value.stops.slice(0);
changeZoomStop(changeIdx: number, stopData: number | undefined, value: number) {
const stops = (this.props.value as ZoomWithStops).stops.slice(0);
stops[changeIdx] = [stopData, value];
const orderedStops = this.orderStopsByZoom(stops);
const changedValue = {
...this.props.value,
...this.props.value as ZoomWithStops,
stops: orderedStops
}
this.props.onChange(this.props.fieldName, changedValue)
this.props.onChange!(this.props.fieldName, changedValue)
}
changeBase(newValue) {
changeBase(newValue: number | undefined) {
const changedValue = {
...this.props.value,
base: newValue
@@ -136,33 +141,21 @@ export default class ZoomProperty extends React.Component {
if (changedValue.base === undefined) {
delete changedValue["base"];
}
this.props.onChange(this.props.fieldName, changedValue)
this.props.onChange!(this.props.fieldName, changedValue)
}
changeDataType = (type) => {
if (type !== "interpolate") {
changeDataType = (type: string) => {
if (type !== "interpolate" && this.props.onChangeToDataFunction) {
this.props.onChangeToDataFunction(type);
}
}
render() {
const {fieldName, fieldType, errors} = this.props;
const zoomFields = this.props.value.stops.map((stop, idx) => {
const zoomFields = this.props.value?.stops.map((stop, idx) => {
const zoomLevel = stop[0]
const key = this.state.refs[idx];
const value = stop[1]
const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
const foundErrors = Object.entries(errors).filter(([key, error]) => {
return key.startsWith(errorKeyStart);
});
const message = foundErrors.map(([key, error]) => {
return error.message;
}).join("");
const error = message ? {message} : undefined;
const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
return <tr
key={key}
@@ -180,9 +173,9 @@ export default class ZoomProperty extends React.Component {
<InputSpec
aria-label="Output value"
fieldName={this.props.fieldName}
fieldSpec={this.props.fieldSpec}
fieldSpec={this.props.fieldSpec as any}
value={value}
onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue as number)}
/>
</td>
<td>
@@ -204,7 +197,7 @@ export default class ZoomProperty extends React.Component {
value={"interpolate"}
onChange={propVal => this.changeDataType(propVal)}
title={"Select a type of data scale (default is 'categorical')."}
options={this.getDataFunctionTypes(this.props.fieldSpec)}
options={this.getDataFunctionTypes(this.props.fieldSpec!)}
/>
</div>
</Block>
@@ -215,8 +208,8 @@ export default class ZoomProperty extends React.Component {
<InputSpec
fieldName={"base"}
fieldSpec={latest.function.base}
value={this.props.value.base}
onChange={(_, newValue) => this.changeBase(newValue)}
value={this.props.value?.base}
onChange={(_, newValue) => this.changeBase(newValue as number | undefined)}
/>
</div>
</Block>
@@ -226,7 +219,7 @@ export default class ZoomProperty extends React.Component {
<thead>
<tr>
<th>Zoom</th>
<th rowSpan="2">Output value</th>
<th rowSpan={2}>Output value</th>
</tr>
</thead>
<tbody>
@@ -237,7 +230,7 @@ export default class ZoomProperty extends React.Component {
<div className="maputnik-toolbox">
<InputButton
className="maputnik-add-stop"
onClick={this.props.onAddStop.bind(this)}
onClick={this.props.onAddStop?.bind(this)}
>
<svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
<path fill="currentColor" d={mdiTableRowPlusAfter} />
@@ -245,7 +238,7 @@ export default class ZoomProperty extends React.Component {
</InputButton>
<InputButton
className="maputnik-add-stop"
onClick={this.props.onExpressionClick.bind(this)}
onClick={this.props.onExpressionClick?.bind(this)}
>
<svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
<path fill="currentColor" d={mdiFunctionVariant} />
@@ -257,7 +250,10 @@ export default class ZoomProperty extends React.Component {
</div>
}
getDataFunctionTypes(fieldSpec) {
getDataFunctionTypes(fieldSpec: {
"property-type"?: string
"function-type"?: string
}) {
if (fieldSpec['property-type'] === 'data-driven') {
return ["interpolate", "categorical", "interval", "exponential", "identity"];
}
@@ -265,5 +261,4 @@ export default class ZoomProperty extends React.Component {
return ["interpolate"];
}
}
}

2
src/components/_labelFromFieldName.js → src/components/_labelFromFieldName.ts
View File

@@ -1,6 +1,6 @@
import capitalize from 'lodash.capitalize'
export default function labelFromFieldName(fieldName) {
export default function labelFromFieldName(fieldName: string) {
let label;
const parts = fieldName.split('-');
if (parts.length > 1) {

12
src/libs/accessibility.ts
View File

@@ -1,8 +1,8 @@
import throttle from 'lodash.throttle'
export default {
// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
reducedMotionEnabled: throttle(() => {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
}, 3000)
}
// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
const reducedMotionEnabled = throttle(() => {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
}, 3000)
export { reducedMotionEnabled }

3
src/util/format.js
View File

@@ -1,3 +0,0 @@
export function formatLayerId (id) {
return id === "" ? "[empty_string]" : `'${id}'`;
}

3
src/util/format.ts Normal file
View File

@@ -0,0 +1,3 @@
export function formatLayerId (id: string | undefined) {
return id === "" ? "[empty_string]" : `'${id}'`;
}

2
src/util/spec-helper.js → src/util/spec-helper.ts
View File

@@ -1,7 +1,7 @@
/**
* If we don't have a default value just make one up
*/
export function findDefaultFromSpec (spec) {
export function findDefaultFromSpec(spec: { type: 'string' | 'color' | 'boolean' | 'array', default?: any }) {
if (spec.hasOwnProperty('default')) {
return spec.default;
}