From 901be16ae42fa0abb1e8d59414b16c3670ec76bb Mon Sep 17 00:00:00 2001 From: HarelM Date: Thu, 21 Dec 2023 20:44:39 +0200 Subject: [PATCH] Migrate more components, fix spec documentation missing information --- src/components/FieldArray.jsx | 21 --------- src/components/FieldArray.tsx | 19 ++++++++ src/components/FieldColor.jsx | 20 -------- src/components/FieldColor.tsx | 21 +++++++++ src/components/FieldEnum.tsx | 13 +++-- src/components/FieldJson.jsx | 16 ------- src/components/FieldJson.tsx | 13 +++++ .../{FieldMaxZoom.jsx => FieldMaxZoom.tsx} | 13 +++-- .../{FieldMinZoom.jsx => FieldMinZoom.tsx} | 13 +++-- src/components/FieldMultiInput.jsx | 21 --------- src/components/FieldMultiInput.tsx | 20 ++++++++ src/components/FieldNumber.jsx | 19 -------- src/components/FieldNumber.tsx | 20 ++++++++ src/components/FieldSelect.jsx | 20 -------- src/components/FieldSelect.tsx | 22 +++++++++ src/components/FieldString.tsx | 9 ++-- src/components/FieldUrl.tsx | 9 ++-- src/components/Fieldset.tsx | 2 +- src/components/InputArray.tsx | 2 +- src/components/InputJson.tsx | 2 +- src/components/InputMultiInput.tsx | 2 +- src/components/InputSelect.tsx | 2 +- src/components/InputUrl.tsx | 4 +- .../{ModalSettings.jsx => ModalSettings.tsx} | 47 ++++++++++--------- ...{ModalShortcuts.jsx => ModalShortcuts.tsx} | 12 ++--- .../{ModalSurvey.jsx => ModalSurvey.tsx} | 12 ++--- 26 files changed, 188 insertions(+), 186 deletions(-) delete mode 100644 src/components/FieldArray.jsx create mode 100644 src/components/FieldArray.tsx delete mode 100644 src/components/FieldColor.jsx create mode 100644 src/components/FieldColor.tsx delete mode 100644 src/components/FieldJson.jsx create mode 100644 src/components/FieldJson.tsx rename src/components/{FieldMaxZoom.jsx => FieldMaxZoom.tsx} (72%) rename src/components/{FieldMinZoom.jsx => FieldMinZoom.tsx} (72%) delete mode 100644 src/components/FieldMultiInput.jsx create mode 100644 src/components/FieldMultiInput.tsx delete mode 100644 src/components/FieldNumber.jsx create mode 100644 src/components/FieldNumber.tsx delete mode 100644 src/components/FieldSelect.jsx create mode 100644 src/components/FieldSelect.tsx rename src/components/{ModalSettings.jsx => ModalSettings.tsx} (85%) rename src/components/{ModalShortcuts.jsx => ModalShortcuts.tsx} (93%) rename src/components/{ModalSurvey.jsx => ModalSurvey.tsx} (85%) diff --git a/src/components/FieldArray.jsx b/src/components/FieldArray.jsx deleted file mode 100644 index 00103fc35..000000000 --- a/src/components/FieldArray.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Block from './Block' -import InputArray from './InputArray' -import Fieldset from './Fieldset' - -export default class FieldArray extends React.Component { - static propTypes = { - ...InputArray.propTypes, - name: PropTypes.string, - } - - render() { - const {props} = this; - - return
- -
- } -} - diff --git a/src/components/FieldArray.tsx b/src/components/FieldArray.tsx new file mode 100644 index 000000000..1de04ee96 --- /dev/null +++ b/src/components/FieldArray.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray' +import Fieldset from './Fieldset' + +type FieldArrayProps = InputArrayProps & { + name?: string + fieldSpec?: { + doc: string + } +}; + +export default class FieldArray extends React.Component { + render() { + return
+ +
+ } +} + diff --git a/src/components/FieldColor.jsx b/src/components/FieldColor.jsx deleted file mode 100644 index 2e9067bee..000000000 --- a/src/components/FieldColor.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Block from './Block' -import InputColor from './InputColor' - - -export default class FieldColor extends React.Component { - static propTypes = { - ...InputColor.propTypes, - } - - render() { - const {props} = this; - - return - - - } -} - diff --git a/src/components/FieldColor.tsx b/src/components/FieldColor.tsx new file mode 100644 index 000000000..37d11b1ad --- /dev/null +++ b/src/components/FieldColor.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import Block from './Block' +import InputColor, {InputColorProps} from './InputColor' + + +type FieldColorProps = InputColorProps & { + label?: string + fieldSpec?: { + doc: string + } +}; + + +export default class FieldColor extends React.Component { + render() { + return + + + } +} + diff --git a/src/components/FieldEnum.tsx b/src/components/FieldEnum.tsx index 054d3d3c7..25a466892 100644 --- a/src/components/FieldEnum.tsx +++ b/src/components/FieldEnum.tsx @@ -3,15 +3,18 @@ import InputEnum, {InputEnumProps} from './InputEnum' import Fieldset from './Fieldset'; -type FieldEnumProps = InputEnumProps & { label : string }; +type FieldEnumProps = InputEnumProps & { + label?: string; + fieldSpec?: { + doc: string + } +}; export default class FieldEnum extends React.Component { render() { - const {props} = this; - - return
- + return
+
} } \ No newline at end of file diff --git a/src/components/FieldJson.jsx b/src/components/FieldJson.jsx deleted file mode 100644 index 1f6cceab3..000000000 --- a/src/components/FieldJson.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import InputJson from './InputJson' - - -export default class FieldJson extends React.Component { - static propTypes = { - ...InputJson.propTypes, - } - - render() { - const {props} = this; - return - } -} - diff --git a/src/components/FieldJson.tsx b/src/components/FieldJson.tsx new file mode 100644 index 000000000..ceb4d663c --- /dev/null +++ b/src/components/FieldJson.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import InputJson, {InputJsonProps} from './InputJson' + + +type FieldJsonProps = InputJsonProps & {}; + + +export default class FieldJson extends React.Component { + render() { + return + } +} + diff --git a/src/components/FieldMaxZoom.jsx b/src/components/FieldMaxZoom.tsx similarity index 72% rename from src/components/FieldMaxZoom.jsx rename to src/components/FieldMaxZoom.tsx index e256a69f8..1ebefc8cd 100644 --- a/src/components/FieldMaxZoom.jsx +++ b/src/components/FieldMaxZoom.tsx @@ -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 InputNumber from './InputNumber' -export default class FieldMaxZoom extends React.Component { - static propTypes = { - value: PropTypes.number, - onChange: PropTypes.func.isRequired, - error: PropTypes.object, - } +type FieldMaxZoomProps = { + value?: number + onChange(...args: unknown[]): unknown + error?: unknown[] +}; +export default class FieldMaxZoom extends React.Component { render() { return { render() { return - -
- } -} - diff --git a/src/components/FieldMultiInput.tsx b/src/components/FieldMultiInput.tsx new file mode 100644 index 000000000..994480d9e --- /dev/null +++ b/src/components/FieldMultiInput.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import InputMultiInput, {InputMultiInputProps} from './InputMultiInput' +import Fieldset from './Fieldset' + + +type FieldMultiInputProps = InputMultiInputProps & { + label?: string +}; + + +export default class FieldMultiInput extends React.Component { + render() { + const {props} = this; + + return
+ +
+ } +} + diff --git a/src/components/FieldNumber.jsx b/src/components/FieldNumber.jsx deleted file mode 100644 index 0d42ddf83..000000000 --- a/src/components/FieldNumber.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import InputNumber from './InputNumber' -import Block from './Block' - - -export default class FieldNumber extends React.Component { - static propTypes = { - ...InputNumber.propTypes, - } - - render() { - const {props} = this; - return - - - } -} - diff --git a/src/components/FieldNumber.tsx b/src/components/FieldNumber.tsx new file mode 100644 index 000000000..4c8ede98c --- /dev/null +++ b/src/components/FieldNumber.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import InputNumber, {InputNumberProps} from './InputNumber' +import Block from './Block' + + +type FieldNumberProps = InputNumberProps & { + label?: string + fieldSpec?: { + doc: string + } +}; + + +export default class FieldNumber extends React.Component { + render() { + return + + + } +} diff --git a/src/components/FieldSelect.jsx b/src/components/FieldSelect.jsx deleted file mode 100644 index 1d279c6fc..000000000 --- a/src/components/FieldSelect.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Block from './Block' -import InputSelect from './InputSelect' - - -export default class FieldSelect extends React.Component { - static propTypes = { - ...InputSelect.propTypes, - } - - render() { - const {props} = this; - - return - - - } -} - diff --git a/src/components/FieldSelect.tsx b/src/components/FieldSelect.tsx new file mode 100644 index 000000000..2e0a7be68 --- /dev/null +++ b/src/components/FieldSelect.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import Block from './Block' +import InputSelect, {InputSelectProps} from './InputSelect' + + +type FieldSelectProps = InputSelectProps & { + label?: string + fieldSpec?: { + doc: string + } +}; + + +export default class FieldSelect extends React.Component { + render() { + return + + + } +} + + diff --git a/src/components/FieldString.tsx b/src/components/FieldString.tsx index bc5a137e5..833d83ea4 100644 --- a/src/components/FieldString.tsx +++ b/src/components/FieldString.tsx @@ -5,14 +5,15 @@ import InputString, {InputStringProps} from './InputString' type FieldStringProps = InputStringProps & { name?: string label?: string + fieldSpec?: { + doc: string + } }; export default class FieldString extends React.Component { render() { - const {props} = this; - - return - + return + } } diff --git a/src/components/FieldUrl.tsx b/src/components/FieldUrl.tsx index 9e7c23b0d..2c4661fd3 100644 --- a/src/components/FieldUrl.tsx +++ b/src/components/FieldUrl.tsx @@ -5,16 +5,17 @@ import Block from './Block' type FieldUrlProps = InputUrlProps & { label: string; + fieldSpec?: { + doc: string + } }; export default class FieldUrl extends React.Component { render () { - const {props} = this; - return ( - - + + ); } diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx index ab095064f..db4b4a38e 100644 --- a/src/components/Fieldset.tsx +++ b/src/components/Fieldset.tsx @@ -3,7 +3,7 @@ import FieldDocLabel from './FieldDocLabel' import Doc from './Doc' type FieldsetProps = { - label: string, + label?: string, fieldSpec?: { doc?: string }, action?: ReactElement, }; diff --git a/src/components/InputArray.tsx b/src/components/InputArray.tsx index ae4aa2da3..0d2a79c3a 100644 --- a/src/components/InputArray.tsx +++ b/src/components/InputArray.tsx @@ -3,7 +3,7 @@ import InputString from './InputString' import InputNumber from './InputNumber' export type FieldArrayProps = { - value: string[] + value: string[] | number[] type?: string length?: number default?: string[] | number[] diff --git a/src/components/InputJson.tsx b/src/components/InputJson.tsx index 21d49bc8c..cf1d35297 100644 --- a/src/components/InputJson.tsx +++ b/src/components/InputJson.tsx @@ -11,7 +11,7 @@ import stringifyPretty from 'json-stringify-pretty-compact' import '../util/codemirror-mgl'; -type InputJsonProps = { +export type InputJsonProps = { layer: any maxHeight?: number onChange?(...args: unknown[]): unknown diff --git a/src/components/InputMultiInput.tsx b/src/components/InputMultiInput.tsx index f58bbcc6c..64529c48e 100644 --- a/src/components/InputMultiInput.tsx +++ b/src/components/InputMultiInput.tsx @@ -1,7 +1,7 @@ import React from 'react' import classnames from 'classnames' -type InputMultiInputProps = { +export type InputMultiInputProps = { name?: string value: string options: any[] diff --git a/src/components/InputSelect.tsx b/src/components/InputSelect.tsx index e4b70930a..9a8f94856 100644 --- a/src/components/InputSelect.tsx +++ b/src/components/InputSelect.tsx @@ -1,6 +1,6 @@ import React from 'react' -type InputSelectProps = { +export type InputSelectProps = { value: string "data-wd-key"?: string options: [string, any][] | string[] diff --git a/src/components/InputUrl.tsx b/src/components/InputUrl.tsx index db50b8cdc..2e22712a9 100644 --- a/src/components/InputUrl.tsx +++ b/src/components/InputUrl.tsx @@ -53,7 +53,7 @@ export type FieldUrlProps = { style?: object default?: string onChange(...args: unknown[]): unknown - onInput(...args: unknown[]): unknown + onInput?(...args: unknown[]): unknown multi?: boolean required?: boolean 'aria-label'?: string @@ -79,7 +79,7 @@ export default class FieldUrl extends React.Component { diff --git a/src/components/ModalSettings.jsx b/src/components/ModalSettings.tsx similarity index 85% rename from src/components/ModalSettings.jsx rename to src/components/ModalSettings.tsx index 973a68864..14afc108e 100644 --- a/src/components/ModalSettings.jsx +++ b/src/components/ModalSettings.tsx @@ -1,8 +1,6 @@ import React from 'react' -import PropTypes from 'prop-types' +import {LightSpecification, StyleSpecification, TransitionSpecification, latest} from '@maplibre/maplibre-gl-style-spec' -import {latest} from '@maplibre/maplibre-gl-style-spec' -import Block from './Block' import FieldArray from './FieldArray' import FieldNumber from './FieldNumber' import FieldString from './FieldString' @@ -13,16 +11,16 @@ import FieldColor from './FieldColor' import Modal from './Modal' import fieldSpecAdditional from '../libs/field-spec-additional' -export default class ModalSettings extends React.Component { - static propTypes = { - mapStyle: PropTypes.object.isRequired, - onStyleChanged: PropTypes.func.isRequired, - onChangeMetadataProperty: PropTypes.func.isRequired, - isOpen: PropTypes.bool.isRequired, - onOpenToggle: PropTypes.func.isRequired, - } +type ModalSettingsProps = { + mapStyle: StyleSpecification + onStyleChanged(...args: unknown[]): unknown + onChangeMetadataProperty(...args: unknown[]): unknown + isOpen: boolean + onOpenToggle(...args: unknown[]): unknown +}; - changeTransitionProperty(property, value) { +export default class ModalSettings extends React.Component { + changeTransitionProperty(property: keyof TransitionSpecification, value: number | undefined) { const transition = { ...this.props.mapStyle.transition, } @@ -40,7 +38,7 @@ export default class ModalSettings extends React.Component { }); } - changeLightProperty(property, value) { + changeLightProperty(property: keyof LightSpecification, value: any) { const light = { ...this.props.mapStyle.light, } @@ -49,6 +47,7 @@ export default class ModalSettings extends React.Component { delete light[property]; } else { + // @ts-ignore light[property] = value; } @@ -58,22 +57,24 @@ export default class ModalSettings extends React.Component { }); } - changeStyleProperty(property, value) { + changeStyleProperty(property: keyof StyleSpecification | "owner", value: any) { const changedStyle = { ...this.props.mapStyle, }; if (value === undefined) { + // @ts-ignore delete changedStyle[property]; } else { + // @ts-ignore changedStyle[property] = value; } this.props.onStyleChanged(changedStyle); } render() { - const metadata = this.props.mapStyle.metadata || {} + const metadata = this.props.mapStyle.metadata || {} as any; const {onChangeMetadataProperty, mapStyle} = this.props; const inputProps = { } @@ -98,14 +99,14 @@ export default class ModalSettings extends React.Component { label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}} data-wd-key="modal:settings.owner" - value={this.props.mapStyle.owner} + value={(this.props.mapStyle as any).owner} onChange={this.changeStyleProperty.bind(this, "owner")} /> @@ -113,7 +114,7 @@ export default class ModalSettings extends React.Component { label="Glyphs URL" fieldSpec={latest.$root.glyphs} data-wd-key="modal:settings.glyphs" - value={this.props.mapStyle.glyphs} + value={this.props.mapStyle.glyphs as string} onChange={this.changeStyleProperty.bind(this, "glyphs")} /> @@ -138,7 +139,7 @@ export default class ModalSettings extends React.Component { fieldSpec={latest.$root.center} length={2} type="number" - value={mapStyle.center} + value={mapStyle.center || []} default={latest.$root.center.default || [0, 0]} onChange={this.changeStyleProperty.bind(this, "center")} /> @@ -175,7 +176,7 @@ export default class ModalSettings extends React.Component { label={"Light anchor"} fieldSpec={latest.light.anchor} name="light-anchor" - value={light.anchor} + value={light.anchor as string} options={Object.keys(latest.light.anchor.values)} default={latest.light.anchor.default} onChange={this.changeLightProperty.bind(this, "anchor")} @@ -185,7 +186,7 @@ export default class ModalSettings extends React.Component { {...inputProps} label={"Light color"} fieldSpec={latest.light.color} - value={light.color} + value={light.color as string} default={latest.light.color.default} onChange={this.changeLightProperty.bind(this, "color")} /> @@ -194,7 +195,7 @@ export default class ModalSettings extends React.Component { {...inputProps} label={"Light intensity"} fieldSpec={latest.light.intensity} - value={light.intensity} + value={light.intensity as number} default={latest.light.intensity.default} onChange={this.changeLightProperty.bind(this, "intensity")} /> @@ -205,7 +206,7 @@ export default class ModalSettings extends React.Component { fieldSpec={latest.light.position} type="number" length={latest.light.position.length} - value={light.position} + value={light.position as number[]} default={latest.light.position.default} onChange={this.changeLightProperty.bind(this, "position")} /> diff --git a/src/components/ModalShortcuts.jsx b/src/components/ModalShortcuts.tsx similarity index 93% rename from src/components/ModalShortcuts.jsx rename to src/components/ModalShortcuts.tsx index ebe8a0e93..dc7e14b4a 100644 --- a/src/components/ModalShortcuts.jsx +++ b/src/components/ModalShortcuts.tsx @@ -1,15 +1,15 @@ import React from 'react' -import PropTypes from 'prop-types' import Modal from './Modal' -export default class ModalShortcuts extends React.Component { - static propTypes = { - isOpen: PropTypes.bool.isRequired, - onOpenToggle: PropTypes.func.isRequired, - } +type ModalShortcutsProps = { + isOpen: boolean + onOpenToggle(...args: unknown[]): unknown +}; + +export default class ModalShortcuts extends React.Component { render() { const help = [ { diff --git a/src/components/ModalSurvey.jsx b/src/components/ModalSurvey.tsx similarity index 85% rename from src/components/ModalSurvey.jsx rename to src/components/ModalSurvey.tsx index 13ab93959..59c1d1f7c 100644 --- a/src/components/ModalSurvey.jsx +++ b/src/components/ModalSurvey.tsx @@ -1,17 +1,17 @@ import React from 'react' -import PropTypes from 'prop-types' import InputButton from './InputButton' import Modal from './Modal' +// @ts-ignore import logoImage from 'maputnik-design/logos/logo-color.svg' -export default class ModalSurvey extends React.Component { - static propTypes = { - isOpen: PropTypes.bool.isRequired, - onOpenToggle: PropTypes.func.isRequired, - } +type ModalSurveyProps = { + isOpen: boolean + onOpenToggle(...args: unknown[]): unknown +}; +export default class ModalSurvey extends React.Component { onClick = () => { window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');