[add] Open Map component

[optimize] upgrade to JSX runtime
idea2app · Sep 10, 2022 · 1da5303 · 1da5303 · github-actions · Sep 10, 2022
1 parent 74e7fb1
commit 1da5303
Show file tree

Hide file tree

Showing 35 changed files with 215 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ dist/
 preview/pnpm-lock.yaml
 docs/
 .parcel-cache
+.vscode/settings.json
 .vercel
diff --git a/ReadMe.md b/ReadMe.md
@@ -15,7 +15,7 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 ```html
 <link
     rel="stylesheet"
-    href="https://unpkg.com/bootstrap@5.2.0/dist/css/bootstrap.min.css"
+    href="https://unpkg.com/bootstrap@5.2.1/dist/css/bootstrap.min.css"
 />
 <link
     rel="stylesheet"
@@ -31,7 +31,11 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 />
 <link
     rel="stylesheet"
-    href="https://unpkg.com/idea-react@0.26.8/dist/index.umd.css"
+    href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+/>
+<link
+    rel="stylesheet"
+    href="https://unpkg.com/idea-react@0.27.0/dist/index.umd.css"
 />
 ```
 
@@ -54,15 +58,16 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 15. [Code Block](source/CodeBlock.tsx)
 16. [Editor](source/Editor.tsx)
 17. [Editor HTML](source/EditorHTML.tsx)
-18. [Address Picker](source/AddressPicker.tsx)
-19. [Idea Info](source/IdeaInfo.tsx)
-20. [Idea Table](source/IdeaTable.tsx)
-21. [Table Spinner](source/TableSpinner.tsx)
-22. [Loading](source/Loading.tsx)
-23. [Pagination Bar](source/PaginationBar.tsx)
-24. [Idea Form](source/IdeaForm.tsx)
-25. [Idea Popover](source/IdeaPopover.tsx)
-26. [Idea Dialog](source/IdeaDialog.tsx)
+18. [Open Map](source/OpenMap.tsx)
+19. [Address Picker](source/AddressPicker.tsx)
+20. [Idea Info](source/IdeaInfo.tsx)
+21. [Idea Table](source/IdeaTable.tsx)
+22. [Table Spinner](source/TableSpinner.tsx)
+23. [Loading](source/Loading.tsx)
+24. [Pagination Bar](source/PaginationBar.tsx)
+25. [Idea Form](source/IdeaForm.tsx)
+26. [Idea Popover](source/IdeaPopover.tsx)
+27. [Idea Dialog](source/IdeaDialog.tsx)
 
 ## Utilities
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "0.26.10",
+    "version": "0.27.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -28,21 +28,24 @@
         "@swc/helpers": "^0.4.11",
         "classnames": "^2.3.1",
         "editorjs-html": "^3.4.2",
+        "leaflet": "^1.8.0",
         "lodash": "^4.17.21",
         "prismjs": "^1.29.0",
         "react": "^17.0.2",
         "react-bootstrap": "^2.5.0",
         "react-dom": "^17.0.2",
         "react-editor-js": "^2.1.0",
         "react-element-to-jsx-string": "^15.0.0",
-        "web-utility": "^3.9.2"
+        "react-leaflet": "^4.0.2",
+        "web-utility": "^3.9.4"
     },
     "devDependencies": {
         "@parcel/packager-ts": "~2.6.2",
         "@parcel/transformer-less": "~2.6.2",
         "@parcel/transformer-typescript-types": "~2.6.2",
+        "@types/leaflet": "^1.7.11",
         "@types/lodash": "^4.14.184",
-        "@types/node": "^14.18.27",
+        "@types/node": "^14.18.28",
         "@types/prismjs": "^1.26.0",
         "@types/react": "^17.0.49",
         "@types/react-dom": "^17.0.17",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/index.html b/preview/index.html
@@ -4,7 +4,7 @@
         <meta http-equiv="Cache-control" content="no-store" />
         <link
             rel="stylesheet"
-            href="https://unpkg.com/bootstrap@5.2.0/dist/css/bootstrap.min.css"
+            href="https://unpkg.com/bootstrap@5.2.1/dist/css/bootstrap.min.css"
         />
         <link
             rel="stylesheet"
@@ -14,6 +14,10 @@
             rel="stylesheet"
             href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css"
         />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+        />
     </head>
     <body>
         <div id="app"></div>

diff --git a/preview/index.tsx b/preview/index.tsx
@@ -22,6 +22,7 @@ import {
     IdeaTable,
     Loading,
     CodeBlock,
+    OpenMap,
     AddressPicker,
     MultipleFileUploader,
     Nameplate,
@@ -389,6 +390,12 @@ export class App extends PureComponent<{}, State> {
                         )}
                     </Section>
 
+                    <Section title="Open Map">
+                        {this.renderCode(
+                            <OpenMap center={[34.32, 108.55]} zoom={4} />
+                        )}
+                    </Section>
+
                     <Section title="Map Select">
                         {this.renderCode(
                             <AddressPicker

diff --git a/preview/package.json b/preview/package.json
@@ -3,7 +3,7 @@
     "private": true,
     "dependencies": {
         "classnames": "^2.3.1",
-        "web-utility": "^3.9.2"
+        "web-utility": "^3.9.4"
     },
     "devDependencies": {
         "@parcel/transformer-less": "^2.7.0",

diff --git a/source/AddressPicker.tsx b/source/AddressPicker.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, PureComponent, SyntheticEvent } from 'react';
+import { PropsWithChildren, PureComponent, SyntheticEvent } from 'react';
 import { Modal } from 'react-bootstrap';
 
 export interface MapData {

diff --git a/source/Avatar.tsx b/source/Avatar.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, FC, PropsWithoutRef } from 'react';
+import { CSSProperties, FC, PropsWithoutRef } from 'react';
 
 export type AvatarProps = PropsWithoutRef<{
     style?: CSSProperties;

diff --git a/source/ClickBoundary.tsx b/source/ClickBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, PureComponent, createRef } from 'react';
+import { PropsWithChildren, PureComponent, createRef } from 'react';
 
 export type ClickBoundaryProps = PropsWithChildren<{
     className?: string;

diff --git a/source/CodeBlock.tsx b/source/CodeBlock.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import { highlight, languages } from 'prismjs';
 

diff --git a/source/Editor.tsx b/source/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithoutRef, ComponentClass, PureComponent } from 'react';
+import { PropsWithoutRef, ComponentClass, PureComponent } from 'react';
 import EditorJS from '@editorjs/editorjs';
 import { createReactEditorJS } from 'react-editor-js';
 

diff --git a/source/EditorHTML.tsx b/source/EditorHTML.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithoutRef } from 'react';
+import { FC, PropsWithoutRef } from 'react';
 import EditorJS_HTML from 'editorjs-html';
 
 export const parser = new EditorJS_HTML({

diff --git a/source/FilePicker/index.tsx b/source/FilePicker/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, PropsWithoutRef, PureComponent } from 'react';
+import { ChangeEvent, PropsWithoutRef, PureComponent } from 'react';
 
 import { Icon } from '../Icon';
 import * as style from './index.module.less';

diff --git a/source/FileUploader/index.tsx b/source/FileUploader/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Component } from 'react';
+import { ChangeEvent, Component } from 'react';
 import { Form, Image } from 'react-bootstrap';
 
 import { Icon } from '../Icon';

diff --git a/source/FilterInput/index.tsx b/source/FilterInput/index.tsx
@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import React, { KeyboardEvent, PureComponent, createRef } from 'react';
+import { KeyboardEvent, PureComponent, createRef } from 'react';
 import { Badge } from 'react-bootstrap';
 
 import { Icon } from '../Icon';

diff --git a/source/Icon.tsx b/source/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, FC, PropsWithRef } from 'react';
+import { HTMLAttributes, FC, PropsWithRef } from 'react';
 import classNames from 'classnames';
 
 export type IconProps = PropsWithRef<

diff --git a/source/IdeaDialog.tsx b/source/IdeaDialog.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Button, Modal } from 'react-bootstrap';
 
 import { SpinnerButtonProps, SpinnerButton } from './SpinnerButton';