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

Improve typings of exising components and migrated a few more

Browse Source
This commit is contained in:
HarelM
2023-12-22 09:37:40 +02:00
parent 1318dd279e
commit 6af3eeefb6
12 changed files with 180 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 {

8
src/components/InputDynamicArray.tsx
View File

@@ -11,10 +11,10 @@ import InputUrl from './InputUrl'
export type FieldDynamicArrayProps = {
value?: (string | number)[]
value?: (string | number | undefined)[]
type?: 'url' | 'number' | 'enum' | 'string'
default?: (string | number)[]
onChange?(...args: unknown[]): unknown
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)

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
};

18
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
onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
fieldName?: string
fieldSpec: {
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}

4
src/components/InputString.tsx
View File

@@ -5,8 +5,8 @@ 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

2
src/components/ModalSources.tsx
View File

@@ -233,7 +233,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
['image', 'Image'],
['video', 'Video'],
]}
onChange={(mode: EditorMode) => this.setState({mode: mode, source: this.defaultSource(mode)})}
onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
value={this.state.mode as string}
/>
<ModalSourcesTypeEditor

4
src/components/SpecField.tsx
View File

@@ -21,9 +21,9 @@ type SpecFieldProps = InputFieldSpecProps & {
export default class SpecField extends React.Component<SpecFieldProps> {
render() {
const fieldType = this.props.fieldSpec.type;
const fieldType = this.props.fieldSpec?.type;
const typeBlockFn = typeMap[fieldType];
const typeBlockFn = typeMap[fieldType!];
let TypeBlock;
if (typeBlockFn) {

143
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: Stops
}
type Stops = [{
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: Stops) {
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,8 +315,7 @@ export default class DataProperty extends React.Component {
>
<div className="maputnik-data-spec-property-input">
<InputString
value={this.props.value.property}
title={"Input a data property to base styles off of."}
value={this.props.value?.property}
onChange={propVal => this.changeDataProperty("property", propVal)}
/>
</div>
@@ -331,7 +328,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 +341,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 +354,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 +363,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} />

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);
})

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/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;
}