From e8d07fa694e3e975626fe798fa490a52bafa43fd Mon Sep 17 00:00:00 2001 From: Harel M Date: Wed, 20 Dec 2023 22:56:33 +0200 Subject: [PATCH] Initial migration to typescript (#845) This migrates some utilities classes from javascript to typescript. Nothing special about the migration, mainly added types and made sure the code adheres to the strict mode. I have picked some small files so git doesn't think they are the same since they are "very different". I hope that in later PRs, when migrating lager files this won't be an issues. --- package-lock.json | 16 ++++++++++++++++ package.json | 1 + src/components/Collapse.jsx | 4 ++-- src/components/FilterEditor.jsx | 2 +- src/components/SingleFilterEditor.jsx | 2 +- src/libs/accessibility.js | 12 ------------ src/libs/accessibility.ts | 8 ++++++++ src/libs/diffmessage.js | 13 ------------- src/libs/diffmessage.ts | 13 +++++++++++++ src/libs/{document-uid.js => document-uid.ts} | 2 +- src/libs/filterops.js | 6 ------ src/libs/filterops.ts | 7 +++++++ src/libs/query-util.js | 12 ------------ src/libs/sort-numerically.js | 14 -------------- src/libs/sort-numerically.ts | 14 ++++++++++++++ src/libs/stylegen.js | 0 src/libs/{zoomcontrol.js => zoomcontrol.ts} | 18 ++++++++++++------ 17 files changed, 76 insertions(+), 68 deletions(-) delete mode 100644 src/libs/accessibility.js create mode 100644 src/libs/accessibility.ts delete mode 100644 src/libs/diffmessage.js create mode 100644 src/libs/diffmessage.ts rename src/libs/{document-uid.js => document-uid.ts} (63%) delete mode 100644 src/libs/filterops.js create mode 100644 src/libs/filterops.ts delete mode 100644 src/libs/query-util.js delete mode 100644 src/libs/sort-numerically.js create mode 100644 src/libs/sort-numerically.ts delete mode 100644 src/libs/stylegen.js rename src/libs/{zoomcontrol.js => zoomcontrol.ts} (54%) diff --git a/package-lock.json b/package-lock.json index 092f72903..8c039f7ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -68,6 +68,7 @@ "@storybook/react-vite": "^7.6.5", "@storybook/theming": "^7.6.5", "@types/cors": "^2.8.17", + "@types/lodash.throttle": "^4.1.9", "@types/react": "^16.14.52", "@types/react-dom": "^16.9.24", "@types/uuid": "^9.0.7", @@ -4695,6 +4696,21 @@ "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", + "dev": true + }, + "node_modules/@types/lodash.throttle": { + "version": "4.1.9", + "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.9.tgz", + "integrity": "sha512-PCPVfpfueguWZQB7pJQK890F2scYKoDUL3iM522AptHWn7d5NQmeS/LTEHIcLr5PaTzl3dK2Z0xSUHHTHwaL5g==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/mapbox__point-geometry": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz", diff --git a/package.json b/package.json index 7e54e2a2d..7b34cc197 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@storybook/react-vite": "^7.6.5", "@storybook/theming": "^7.6.5", "@types/cors": "^2.8.17", + "@types/lodash.throttle": "^4.1.9", "@types/react": "^16.14.52", "@types/react-dom": "^16.9.24", "@types/uuid": "^9.0.7", diff --git a/src/components/Collapse.jsx b/src/components/Collapse.jsx index 3dfac1927..df854c347 100644 --- a/src/components/Collapse.jsx +++ b/src/components/Collapse.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Collapse as ReactCollapse } from 'react-collapse' -import accessibility from '../../libs/accessibility' +import {reducedMotionEnabled} from '../../libs/accessibility' export default class Collapse extends React.Component { @@ -15,7 +15,7 @@ export default class Collapse extends React.Component { } render() { - if (accessibility.reducedMotionEnabled()) { + if (reducedMotionEnabled()) { return (
{this.props.children} diff --git a/src/components/FilterEditor.jsx b/src/components/FilterEditor.jsx index 3d570e0f7..0cad6be19 100644 --- a/src/components/FilterEditor.jsx +++ b/src/components/FilterEditor.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { combiningFilterOps } from '../libs/filterops.js' +import {combiningFilterOps} from '../libs/filterops' import {mdiTableRowPlusAfter} from '@mdi/js'; import {isEqual} from 'lodash'; diff --git a/src/components/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.jsx index 57661dcb2..752a2d5d3 100644 --- a/src/components/SingleFilterEditor.jsx +++ b/src/components/SingleFilterEditor.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { otherFilterOps } from '../libs/filterops.js' +import {otherFilterOps} from '../libs/filterops' import InputString from './InputString' import InputAutocomplete from './InputAutocomplete' import InputSelect from './InputSelect' diff --git a/src/libs/accessibility.js b/src/libs/accessibility.js deleted file mode 100644 index 23c13396c..000000000 --- a/src/libs/accessibility.js +++ /dev/null @@ -1,12 +0,0 @@ -import throttle from 'lodash.throttle' - - -// 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 default { - reducedMotionEnabled -} diff --git a/src/libs/accessibility.ts b/src/libs/accessibility.ts new file mode 100644 index 000000000..e2bc5b795 --- /dev/null +++ b/src/libs/accessibility.ts @@ -0,0 +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) +} diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js deleted file mode 100644 index 1075c8200..000000000 --- a/src/libs/diffmessage.js +++ /dev/null @@ -1,13 +0,0 @@ -import {diff} from '@maplibre/maplibre-gl-style-spec' - -export function diffMessages(beforeStyle, afterStyle) { - const changes = diff(beforeStyle, afterStyle) - return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' ')) -} - -export function undoMessages(beforeStyle, afterStyle) { - return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m) -} -export function redoMessages(beforeStyle, afterStyle) { - return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m) -} diff --git a/src/libs/diffmessage.ts b/src/libs/diffmessage.ts new file mode 100644 index 000000000..95cfe0bcc --- /dev/null +++ b/src/libs/diffmessage.ts @@ -0,0 +1,13 @@ +import {StyleSpecification, diff} from '@maplibre/maplibre-gl-style-spec' + +function diffMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) { + const changes = diff(beforeStyle, afterStyle) + return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' ')) +} + +export function undoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) { + return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m) +} +export function redoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) { + return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m) +} \ No newline at end of file diff --git a/src/libs/document-uid.js b/src/libs/document-uid.ts similarity index 63% rename from src/libs/document-uid.js rename to src/libs/document-uid.ts index 83af672e6..832715094 100644 --- a/src/libs/document-uid.js +++ b/src/libs/document-uid.ts @@ -3,7 +3,7 @@ */ let REF = 0; -export default function(prefix="") { +export default function generateUniqueId(prefix="") { REF++; return prefix+REF; } diff --git a/src/libs/filterops.js b/src/libs/filterops.js deleted file mode 100644 index 0a66f465c..000000000 --- a/src/libs/filterops.js +++ /dev/null @@ -1,6 +0,0 @@ -import {latest} from '@maplibre/maplibre-gl-style-spec' -export const combiningFilterOps = ['all', 'any', 'none'] -export const setFilterOps = ['in', '!in'] -export const otherFilterOps = Object - .keys(latest.filter_operator.values) - .filter(op => combiningFilterOps.indexOf(op) < 0) diff --git a/src/libs/filterops.ts b/src/libs/filterops.ts new file mode 100644 index 000000000..ad87093f7 --- /dev/null +++ b/src/libs/filterops.ts @@ -0,0 +1,7 @@ +import {latest} from '@maplibre/maplibre-gl-style-spec' + +export const combiningFilterOps = ['all', 'any', 'none']; +export const setFilterOps = ['in', '!in']; +export const otherFilterOps = Object + .keys(latest.filter_operator.values) + .filter(op => combiningFilterOps.indexOf(op) < 0); diff --git a/src/libs/query-util.js b/src/libs/query-util.js deleted file mode 100644 index e1793bfb0..000000000 --- a/src/libs/query-util.js +++ /dev/null @@ -1,12 +0,0 @@ -function asBool(queryObj, key) { - if(queryObj.hasOwnProperty(key)) { - return !queryObj[key].match(/^false|0$/); - } - else { - return false; - } -} - -module.exports = { - asBool -} diff --git a/src/libs/sort-numerically.js b/src/libs/sort-numerically.js deleted file mode 100644 index 2bc1528fe..000000000 --- a/src/libs/sort-numerically.js +++ /dev/null @@ -1,14 +0,0 @@ -export default function(a, b) { - a = parseFloat(a); - b = parseFloat(b); - - if(a < b) { - return -1 - } - else if(a > b) { - return 1 - } - else { - return 0; - } -} diff --git a/src/libs/sort-numerically.ts b/src/libs/sort-numerically.ts new file mode 100644 index 000000000..e19261bf1 --- /dev/null +++ b/src/libs/sort-numerically.ts @@ -0,0 +1,14 @@ +export default function(num1: string | number, num2: string| number) { + const a = +num1; + const b = +num2; + + if(a < b) { + return -1 + } + else if(a > b) { + return 1 + } + else { + return 0; + } +} diff --git a/src/libs/stylegen.js b/src/libs/stylegen.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.ts similarity index 54% rename from src/libs/zoomcontrol.js rename to src/libs/zoomcontrol.ts index 34e947d62..37e679451 100644 --- a/src/libs/zoomcontrol.js +++ b/src/libs/zoomcontrol.ts @@ -1,5 +1,11 @@ +import {Map} from 'maplibre-gl'; + export default class ZoomControl { - onAdd(map) { + _map: Map| undefined = undefined; + _container: HTMLDivElement | undefined = undefined; + _textEl: HTMLSpanElement | null = null; + + onAdd(map: Map) { this._map = map; this._container = document.createElement('div'); this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom'; @@ -15,17 +21,17 @@ export default class ZoomControl { } updateZoomLevel() { - this._textEl.innerHTML = this._map.getZoom().toFixed(2); + this._textEl!.innerHTML = this._map!.getZoom().toFixed(2); } addEventListeners (){ - this._map.on('render', this.updateZoomLevel.bind(this) ); - this._map.on('zoomIn', this.updateZoomLevel.bind(this) ); - this._map.on('zoomOut', this.updateZoomLevel.bind(this) ); + this._map!.on('render', () => this.updateZoomLevel()); + this._map!.on('zoomIn', () => this.updateZoomLevel()); + this._map!.on('zoomOut', () => this.updateZoomLevel()); } onRemove() { - this._container.parentNode.removeChild(this._container); + this._container!.parentNode!.removeChild(this._container!); this._map = undefined; } }