[chore] fix react deprecation warnings

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Mar 1, 2025 · 128df06 · 128df06
1 parent 9762dc3
commit 128df06
Show file tree

Hide file tree

Showing 9 changed files with 1,345 additions and 266 deletions.
diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
@@ -45,7 +45,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.0",
-    "react-markdown": "^6.0.3",
+    "react-markdown": "^8.0.7",
     "react-redux": "^8.0.5",
     "react-resizable-panels": "^2.1.7",
     "react-router": "3.2.5",

diff --git a/examples/demo-app/src/components/load-data-modal/load-remote-map.js b/examples/demo-app/src/components/load-data-modal/load-remote-map.js
@@ -5,9 +5,11 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import {CORS_LINK} from '../../constants/default-settings';
-import {FormattedMessage} from 'react-intl';
+
 import {Button} from '@kepler.gl/components';
+import {FormattedMessage} from '@kepler.gl/localization';
+
+import {CORS_LINK} from '../../constants/default-settings';
 import {validateUrl} from '../../utils/url';
 
 const propTypes = {
@@ -122,8 +124,10 @@ class LoadRemoteMap extends Component {
             </ul>
           </StyledInputLabel>
           <StyledInputLabel>
-            <FormattedMessage id={'loadRemoteMap.cors'} />{' '}
-            <FormattedMessage id={'loadRemoteMap.clickHere'} values={CORS_LINK_MESSAGE} />
+            <FormattedMessage id={'loadRemoteMap.cors'} />
+            <a rel="noopener noreferrer" target="_blank" href={CORS_LINK_MESSAGE.corsLink}>
+              <FormattedMessage id={'loadRemoteMap.clickHere'} />
+            </a>
           </StyledInputLabel>
           <StyledFromGroup>
             <StyledInput

diff --git a/examples/demo-app/src/constants/localization.js b/examples/demo-app/src/constants/localization.js
@@ -14,8 +14,7 @@ const en = {
   'loadRemoteMap.examples': 'Examples:',
   'loadRemoteMap.cors':
     '* CORS policy must be defined on your custom url domain in order to be accessible. For more info ',
-  'loadRemoteMap.clickHere':
-    '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">click here</a>',
+  'loadRemoteMap.clickHere': 'click here',
   'loadRemoteMap.fetch': 'Fetch',
   'tooltip.hideSQLPanel': 'Hide SQL Panel',
   'tooltip.showSQLPanel': 'Show SQL Panel'
@@ -34,8 +33,7 @@ export const messages = {
     'loadRemoteMap.examples': 'Esimerkkejä:',
     'loadRemoteMap.cors':
       '* CORS-käytäntö pitää olla määriteltynä urlin domainissa, jotta aineiston voi ladata.',
-    'loadRemoteMap.clickHere':
-      '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">Lisätietoja</a>',
+    'loadRemoteMap.clickHere': 'Lisätietoja',
     'loadRemoteMap.fetch': 'Nouda'
   },
   ca: {
@@ -49,8 +47,7 @@ export const messages = {
     'loadRemoteMap.examples': 'Exemples:',
     'loadRemoteMap.cors':
       '* La política CORS s’ha de definir al teu domini per tal que sigui accessible. Per a més informació ',
-    'loadRemoteMap.clickHere':
-      '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">fes clic aquí</a>',
+    'loadRemoteMap.clickHere': 'fes clic aquí',
     'loadRemoteMap.fetch': 'Cerca'
   },
   es: {
@@ -64,8 +61,7 @@ export const messages = {
     'loadRemoteMap.examples': 'Ejemplos:',
     'loadRemoteMap.cors':
       '* La política CORS debe ser definida en tu dominio para que sea accessible. Para más información ',
-    'loadRemoteMap.clickHere':
-      '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">haz clic aquí</a>',
+    'loadRemoteMap.clickHere': 'haz clic aquí',
     'loadRemoteMap.fetch': 'Busca'
   },
   cn: {
@@ -78,8 +74,7 @@ export const messages = {
       '您可以使用以下格式：CSV | JSON | Kepler.gl 配置 json。 确保 url 包含文件扩展名。',
     'loadRemoteMap.examples': '示例：',
     'loadRemoteMap.cors': '* 必须在您的自定义 url 域上定义 CORS 策略才能访问。欲了解更多信息',
-    'loadRemoteMap.clickHere':
-      '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">点击此处</a>',
+    'loadRemoteMap.clickHere': '点击此处',
     'loadRemoteMap.fetch': '获取'
   }
 };