From 6c9f0fefc9d49095dc39958fdf782eaae72f2ebf Mon Sep 17 00:00:00 2001 From: HarelM Date: Fri, 22 Dec 2023 09:55:14 +0200 Subject: [PATCH] More migrated components --- .../{FieldFunction.jsx => FieldFunction.tsx} | 71 +++++++++---------- .../{PropertyGroup.jsx => PropertyGroup.tsx} | 30 ++++---- src/components/SpecField.tsx | 2 +- src/components/_DataProperty.tsx | 8 +-- src/components/_SpecProperty.tsx | 4 +- 5 files changed, 57 insertions(+), 58 deletions(-) rename src/components/{FieldFunction.jsx => FieldFunction.tsx} (88%) rename src/components/{PropertyGroup.jsx => PropertyGroup.tsx} (68%) diff --git a/src/components/FieldFunction.jsx b/src/components/FieldFunction.tsx similarity index 88% rename from src/components/FieldFunction.jsx rename to src/components/FieldFunction.tsx index 28c23d6cb..fea91f74c 100644 --- a/src/components/FieldFunction.jsx +++ b/src/components/FieldFunction.tsx @@ -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 { 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 { + 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)]; }) } diff --git a/src/components/PropertyGroup.jsx b/src/components/PropertyGroup.tsx similarity index 68% rename from src/components/PropertyGroup.jsx rename to src/components/PropertyGroup.tsx index e317561bb..1a328c775 100644 --- a/src/components/PropertyGroup.jsx +++ b/src/components/PropertyGroup.tsx @@ -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 { + 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 Block, }; -type SpecFieldProps = InputFieldSpecProps & { +export type SpecFieldProps = InputFieldSpecProps & { name?: string }; diff --git a/src/components/_DataProperty.tsx b/src/components/_DataProperty.tsx index 948a28aeb..c2657869f 100644 --- a/src/components/_DataProperty.tsx +++ b/src/components/_DataProperty.tsx @@ -57,13 +57,13 @@ type DataPropertyValue = { property?: string base?: number type?: string - stops: Stops + stops: Stop[] } -type Stops = [{ +export type Stop = [{ zoom: number value: number -}, number][] +}, number] export default class DataProperty extends React.Component { state = { @@ -110,7 +110,7 @@ export default class DataProperty extends React.Component { return { diff --git a/src/components/_SpecProperty.tsx b/src/components/_SpecProperty.tsx index f27b4d904..bb7574b31 100644 --- a/src/components/_SpecProperty.tsx +++ b/src/components/_SpecProperty.tsx @@ -1,12 +1,12 @@ import React from 'react' -import SpecField from './SpecField' +import SpecField, {SpecFieldProps} from './SpecField' import FunctionButtons from './_FunctionButtons' import labelFromFieldName from './_labelFromFieldName' -type SpecPropertyProps = { +type SpecPropertyProps = SpecFieldProps & { onZoomClick(...args: unknown[]): unknown onDataClick(...args: unknown[]): unknown fieldName?: string