mirror of
https://github.com/maputnik/editor.git
synced 2026-02-17 10:00:01 +00:00
Improve typings of exising components and migrated a few more
This commit is contained in:
HarelM
377
src/components/_DataProperty.tsx
Normal file
377
src/components/_DataProperty.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import React from 'react'
|
||||
import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
|
||||
import {latest} from '@maplibre/maplibre-gl-style-spec'
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import InputSpec from './InputSpec'
|
||||
import InputNumber from './InputNumber'
|
||||
import InputString from './InputString'
|
||||
import InputSelect from './InputSelect'
|
||||
import Block from './Block'
|
||||
import docUid from '../libs/document-uid'
|
||||
import sortNumerically from '../libs/sort-numerically'
|
||||
import {findDefaultFromSpec} from '../util/spec-helper';
|
||||
|
||||
import labelFromFieldName from './_labelFromFieldName'
|
||||
import DeleteStopButton from './_DeleteStopButton'
|
||||
|
||||
|
||||
|
||||
function setStopRefs(props: DataPropertyProps, state: DataPropertyState) {
|
||||
// This is initialsed below only if required to improved performance.
|
||||
let newRefs: {[key: number]: string} | undefined;
|
||||
|
||||
if(props.value && props.value.stops) {
|
||||
props.value.stops.forEach((_val, idx) => {
|
||||
if(!state.refs.hasOwnProperty(idx)) {
|
||||
if(!newRefs) {
|
||||
newRefs = {...state};
|
||||
}
|
||||
newRefs[idx] = docUid("stop-");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return newRefs;
|
||||
}
|
||||
|
||||
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: {} as {[key: number]: string}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const newRefs = setStopRefs(this.props, this.state);
|
||||
|
||||
if(newRefs) {
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: DataPropertyProps, state: DataPropertyState) {
|
||||
const newRefs = setStopRefs(props, state);
|
||||
if(newRefs) {
|
||||
return {
|
||||
refs: newRefs
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getFieldFunctionType(fieldSpec: any) {
|
||||
if (fieldSpec.expression.interpolated) {
|
||||
return "exponential"
|
||||
}
|
||||
if (fieldSpec.type === "number") {
|
||||
return "interval"
|
||||
}
|
||||
return "categorical"
|
||||
}
|
||||
|
||||
getDataFunctionTypes(fieldSpec: any) {
|
||||
if (fieldSpec.expression.interpolated) {
|
||||
return ["interpolate", "categorical", "interval", "exponential", "identity"]
|
||||
}
|
||||
else {
|
||||
return ["categorical", "interval", "identity"]
|
||||
}
|
||||
}
|
||||
|
||||
// Order the stops altering the refs to reflect their new position.
|
||||
orderStopsByZoom(stops: Stops) {
|
||||
const mappedWithRef = stops
|
||||
.map((stop, idx) => {
|
||||
return {
|
||||
ref: this.state.refs[idx],
|
||||
data: stop
|
||||
}
|
||||
})
|
||||
// Sort by zoom
|
||||
.sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
|
||||
|
||||
// Fetch the new position of the stops
|
||||
const newRefs = {} as {[key: number]: string};
|
||||
mappedWithRef
|
||||
.forEach((stop, idx) =>{
|
||||
newRefs[idx] = stop.ref;
|
||||
})
|
||||
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
});
|
||||
|
||||
return mappedWithRef.map((item) => item.data);
|
||||
}
|
||||
|
||||
onChange = (fieldName: string, value: any) => {
|
||||
if (value.type === "identity") {
|
||||
value = {
|
||||
type: value.type,
|
||||
property: value.property,
|
||||
};
|
||||
}
|
||||
else {
|
||||
const stopValue = value.type === 'categorical' ? '' : 0;
|
||||
value = {
|
||||
property: "",
|
||||
type: value.type,
|
||||
// Default props if they don't already exist.
|
||||
stops: [
|
||||
[{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);
|
||||
}
|
||||
|
||||
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] = [
|
||||
{
|
||||
value: stopData.value,
|
||||
zoom: (stopData.zoom === undefined) ? 0 : stopData.zoom,
|
||||
},
|
||||
value
|
||||
];
|
||||
|
||||
const orderedStops = this.orderStopsByZoom(stops);
|
||||
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
stops: orderedStops,
|
||||
}
|
||||
this.onChange(this.props.fieldName, changedValue)
|
||||
}
|
||||
|
||||
changeBase(newValue: number | undefined) {
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
base: newValue
|
||||
}
|
||||
|
||||
if (changedValue.base === undefined) {
|
||||
delete changedValue["base"];
|
||||
}
|
||||
this.props.onChange!(this.props.fieldName, changedValue)
|
||||
}
|
||||
|
||||
changeDataType(propVal: string) {
|
||||
if (propVal === "interpolate" && this.props.onChangeToZoomFunction) {
|
||||
this.props.onChangeToZoomFunction();
|
||||
}
|
||||
else {
|
||||
this.onChange(this.props.fieldName, {
|
||||
...this.props.value,
|
||||
type: propVal,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
changeDataProperty(propName: "property" | "default", propVal: any) {
|
||||
if (propVal) {
|
||||
this.props.value![propName] = propVal
|
||||
}
|
||||
else {
|
||||
delete this.props.value![propName]
|
||||
}
|
||||
this.onChange(this.props.fieldName, this.props.value)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (typeof this.props.value?.type === "undefined") {
|
||||
this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec)
|
||||
}
|
||||
|
||||
let dataFields;
|
||||
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 dataProps = {
|
||||
'aria-label': "Input value",
|
||||
label: "Data 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") {
|
||||
dataInput = <InputString {...dataProps} />
|
||||
}
|
||||
else {
|
||||
dataInput = <InputNumber {...dataProps} />
|
||||
}
|
||||
|
||||
let zoomInput = null;
|
||||
if(zoomLevel !== undefined) {
|
||||
zoomInput = <div>
|
||||
<InputNumber
|
||||
aria-label="Zoom"
|
||||
value={zoomLevel}
|
||||
onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
|
||||
min={0}
|
||||
max={22}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
return <tr key={key}>
|
||||
<td>
|
||||
{zoomInput}
|
||||
</td>
|
||||
<td>
|
||||
{dataInput}
|
||||
</td>
|
||||
<td>
|
||||
<InputSpec
|
||||
aria-label="Output value"
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={value}
|
||||
onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue as number)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{deleteStopBtn}
|
||||
</td>
|
||||
</tr>
|
||||
})
|
||||
}
|
||||
|
||||
return <div className="maputnik-data-spec-block">
|
||||
<fieldset className="maputnik-data-spec-property">
|
||||
<legend>{labelFromFieldName(this.props.fieldName)}</legend>
|
||||
<div className="maputnik-data-fieldset-inner">
|
||||
<Block
|
||||
label={"Function"}
|
||||
key="function"
|
||||
>
|
||||
<div className="maputnik-data-spec-property-input">
|
||||
<InputSelect
|
||||
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" &&
|
||||
<Block
|
||||
label={"Base"}
|
||||
key="base"
|
||||
>
|
||||
<div className="maputnik-data-spec-property-input">
|
||||
<InputSpec
|
||||
fieldName={"base"}
|
||||
fieldSpec={latest.function.base}
|
||||
value={this.props.value?.base}
|
||||
onChange={(_, newValue) => this.changeBase(newValue as number)}
|
||||
/>
|
||||
</div>
|
||||
</Block>
|
||||
}
|
||||
<Block
|
||||
label={"Property"}
|
||||
key="property"
|
||||
>
|
||||
<div className="maputnik-data-spec-property-input">
|
||||
<InputString
|
||||
value={this.props.value?.property}
|
||||
onChange={propVal => this.changeDataProperty("property", propVal)}
|
||||
/>
|
||||
</div>
|
||||
</Block>
|
||||
{dataFields &&
|
||||
<Block
|
||||
label={"Default"}
|
||||
key="default"
|
||||
>
|
||||
<InputSpec
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={this.props.value?.default}
|
||||
onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
{dataFields &&
|
||||
<div className="maputnik-function-stop">
|
||||
<table className="maputnik-function-stop-table">
|
||||
<caption>Stops</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zoom</th>
|
||||
<th>Input value</th>
|
||||
<th rowSpan={2}>Output value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataFields}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
<div className="maputnik-toolbox">
|
||||
{dataFields &&
|
||||
<InputButton
|
||||
className="maputnik-add-stop"
|
||||
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} />
|
||||
</svg> Add stop
|
||||
</InputButton>
|
||||
}
|
||||
<InputButton
|
||||
className="maputnik-add-stop"
|
||||
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} />
|
||||
</svg> Convert to expression
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user