diff --git a/.gitignore b/.gitignore index 6f2540c..e4147c8 100644 --- 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 index 714c1e2..4189d9b 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -15,7 +15,7 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr ```html + ``` @@ -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 index 34c123e..dc49c6f 100644 --- 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,6 +28,7 @@ "@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", @@ -35,14 +36,16 @@ "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 index 0f73400..c8b66f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,14 +7,16 @@ specifiers: '@parcel/transformer-less': ~2.6.2 '@parcel/transformer-typescript-types': ~2.6.2 '@swc/helpers': ^0.4.11 + '@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 classnames: ^2.3.1 editorjs-html: ^3.4.2 husky: ^8.0.1 + leaflet: ^1.8.0 less: ^4.1.3 lint-staged: ^13.0.3 lodash: ^4.17.21 @@ -27,11 +29,12 @@ specifiers: react-dom: ^17.0.2 react-editor-js: ^2.1.0 react-element-to-jsx-string: ^15.0.0 + react-leaflet: ^4.0.2 ts-node: ^10.9.1 typedoc: ^0.23.14 typedoc-plugin-mdn-links: ^2.0.0 typescript: ~4.7.4 - web-utility: ^3.9.2 + web-utility: ^3.9.4 dependencies: '@editorjs/editorjs': 2.25.0 @@ -39,6 +42,7 @@ dependencies: '@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 @@ -46,14 +50,16 @@ dependencies: react-dom: 17.0.2_react@17.0.2 react-editor-js: 2.1.0_5nqabvyy7cdfyepattmhvo7ray react-element-to-jsx-string: 15.0.0_sfoxds7t5ydpegc3knd667wn6m - web-utility: 3.9.2_typescript@4.7.4 + react-leaflet: 4.0.2_6k6ga34dyylvilikktgvdmyx6a + web-utility: 3.9.4_typescript@4.7.4 devDependencies: '@parcel/packager-ts': 2.6.2 '@parcel/transformer-less': 2.6.2 '@parcel/transformer-typescript-types': 2.6.2_typescript@4.7.4 + '@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 @@ -63,7 +69,7 @@ devDependencies: open-cli: 7.0.1 parcel: 2.6.2 prettier: 2.7.1 - ts-node: 10.9.1_3pqlssbs676ysn6dgu5yxz7pnq + ts-node: 10.9.1_i35juvv3q67kl3o6475tyeglwq typedoc: 0.23.14_typescript@4.7.4 typedoc-plugin-mdn-links: 2.0.0_typedoc@0.23.14 typescript: 4.7.4 @@ -1140,6 +1146,18 @@ packages: react: 17.0.2 dev: false + /@react-leaflet/core/2.0.1_6k6ga34dyylvilikktgvdmyx6a: + resolution: {integrity: sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==} + peerDependencies: + leaflet: ^1.8.0 + react: ^18.0.0 + react-dom: ^18.0.0 + dependencies: + leaflet: 1.8.0 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + dev: false + /@restart/hooks/0.4.7_react@17.0.2: resolution: {integrity: sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==} peerDependencies: @@ -1198,6 +1216,16 @@ packages: resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==} dev: true + /@types/geojson/7946.0.10: + resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==} + dev: true + + /@types/leaflet/1.7.11: + resolution: {integrity: sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==} + dependencies: + '@types/geojson': 7946.0.10 + dev: true + /@types/lodash/4.14.184: resolution: {integrity: sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==} dev: true @@ -1206,8 +1234,8 @@ packages: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true - /@types/node/14.18.27: - resolution: {integrity: sha512-DcTUcwT9xEcf4rp2UHyGAcmlqG4Mhe7acozl5vY2xzSrwP1z19ZVyjzQ6DsNUrvIadpiyZoQCTHFt4t2omYIZQ==} + /@types/node/14.18.28: + resolution: {integrity: sha512-CK2fnrQlIgKlCV3N2kM+Gznb5USlwA1KFX3rJVHmgVk6NJxFPuQ86pAcvKnu37IA4BGlSRz7sEE1lHL1aLZ/eQ==} dev: true /@types/normalize-package-data/2.4.1: @@ -1727,8 +1755,8 @@ packages: resolution: {integrity: sha512-yDoFfTJnqBAB6hSiPvzmsBJSrjOXJtHSJoqJdI/zSIh7DYupYnIOHt/bbPw/WE31BJjNTybDdNAs21gCMnTh0Q==} dev: true - /element-internals-polyfill/1.1.11: - resolution: {integrity: sha512-+izpja9BOt31/LK/p/sjyN5x0Vu6STkwnBju5e9X3yIARrzgOz83M9QZE0Kn42v4Z7dKHhXG4AIYPwXvkzkEyQ==} + /element-internals-polyfill/1.1.12: + resolution: {integrity: sha512-JdV8myuOP+dVnpTOfyAhTFOnbPBZ+t7NIMquCWPCkT3EymrAf8RE3vx+F54NNWF8tBh9rnkXlofMp2jPNWggKw==} dev: false /emoji-regex/8.0.0: @@ -2151,6 +2179,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /leaflet/1.8.0: + resolution: {integrity: sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==} + dev: false + /less/4.1.3: resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==} engines: {node: '>=6'} @@ -2834,6 +2866,19 @@ packages: resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==} dev: false + /react-leaflet/4.0.2_6k6ga34dyylvilikktgvdmyx6a: + resolution: {integrity: sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==} + peerDependencies: + leaflet: ^1.8.0 + react: ^18.0.0 + react-dom: ^18.0.0 + dependencies: + '@react-leaflet/core': 2.0.1_6k6ga34dyylvilikktgvdmyx6a + leaflet: 1.8.0 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + dev: false + /react-lifecycles-compat/3.0.4: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} dev: false @@ -3231,7 +3276,7 @@ packages: engines: {node: '>=12'} dev: true - /ts-node/10.9.1_3pqlssbs676ysn6dgu5yxz7pnq: + /ts-node/10.9.1_i35juvv3q67kl3o6475tyeglwq: resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} hasBin: true peerDependencies: @@ -3250,7 +3295,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.3 - '@types/node': 14.18.27 + '@types/node': 14.18.28 acorn: 8.7.1 acorn-walk: 8.2.0 arg: 4.1.3 @@ -3384,13 +3429,13 @@ packages: resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==} dev: true - /web-utility/3.9.2_typescript@4.7.4: - resolution: {integrity: sha512-j/xKi6YeIjXP74jgjxrMcqu95PzvgnZCstHkLNnmHvoxL7bL1uRVbMFPO9qn7mXYA+HPYcdtzW+xk8rhEYRX+g==} + /web-utility/3.9.4_typescript@4.7.4: + resolution: {integrity: sha512-SlmE79FbdpRgwXJ0JVBJscqNZvL4Do/Sjp3MHvG8p+MZdmWnbQab4zorSa1l8SkDURruNLmFbx9p/rZQlT8V3w==} peerDependencies: typescript: ^4.1.0 dependencies: '@swc/helpers': 0.4.11 - element-internals-polyfill: 1.1.11 + element-internals-polyfill: 1.1.12 regenerator-runtime: 0.13.9 typescript: 4.7.4 dev: false diff --git a/preview/index.html b/preview/index.html index d17a867..0528df6 100644 --- a/preview/index.html +++ b/preview/index.html @@ -4,7 +4,7 @@ +
diff --git a/preview/index.tsx b/preview/index.tsx index 79dceed..ddfedd9 100644 --- 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> { )} +
+ {this.renderCode( + + )} +
+
{this.renderCode( { diff --git a/source/IdeaPopover.tsx b/source/IdeaPopover.tsx index 33d406c..15b4709 100644 --- a/source/IdeaPopover.tsx +++ b/source/IdeaPopover.tsx @@ -1,4 +1,4 @@ -import React, { createRef, PropsWithChildren, PureComponent } from 'react'; +import { createRef, PropsWithChildren, PureComponent } from 'react'; import { Overlay, Popover } from 'react-bootstrap'; interface State { diff --git a/source/IdeaTable.tsx b/source/IdeaTable.tsx index 8c9fec7..009565c 100644 --- a/source/IdeaTable.tsx +++ b/source/IdeaTable.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { ReactNode, PureComponent } from 'react'; +import { ReactNode, PureComponent } from 'react'; import { TableProps, Table } from 'react-bootstrap'; export interface Column { diff --git a/source/Loading.tsx b/source/Loading.tsx index 2347433..2288c85 100644 --- a/source/Loading.tsx +++ b/source/Loading.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithChildren } from 'react'; +import { FC, PropsWithChildren } from 'react'; import { Spinner } from 'react-bootstrap'; export type LoadingProps = PropsWithChildren<{}>; diff --git a/source/MultipleFileUploader/index.tsx b/source/MultipleFileUploader/index.tsx index 3015300..cab776c 100644 --- a/source/MultipleFileUploader/index.tsx +++ b/source/MultipleFileUploader/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import { Form, Image } from 'react-bootstrap'; import { Icon } from '../Icon'; diff --git a/source/Nameplate.tsx b/source/Nameplate.tsx index 3bd1666..1293a93 100644 --- a/source/Nameplate.tsx +++ b/source/Nameplate.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithoutRef } from 'react'; +import { FC, PropsWithoutRef } from 'react'; import { Avatar } from './Avatar'; diff --git a/source/OpenMap.tsx b/source/OpenMap.tsx new file mode 100644 index 0000000..03defb5 --- /dev/null +++ b/source/OpenMap.tsx @@ -0,0 +1,93 @@ +import { CamelEventName } from 'web-utility'; +import { PureComponent } from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { LeafletEventHandlerFnMap } from 'leaflet'; +import { + MapContainerProps, + MapContainer, + TileLayer, + MarkerProps, + Marker, + Tooltip, + Popup +} from 'react-leaflet'; + +export type LeafLetComponent = 'TileLayer' | 'Marker'; + +export type MapEvent = { + [K in keyof LeafletEventHandlerFnMap as `on${N}${Capitalize< + CamelEventName + >}`]: LeafletEventHandlerFnMap[K]; +}; + +export interface MarkerMeta extends Pick { + tooltip?: string; + popup?: string; +} + +export interface OpenMapProps + extends Pick, + MapEvent<'Marker'> { + markers?: MarkerMeta[]; +} + +export class OpenMap extends PureComponent { + static displayName = 'OpenMap'; + + get eventHandlerMap() { + return Object.entries(this.props).reduce((map, [key, value]) => { + const [_, type, event] = key.match(/^on([A-Z][a-z]+)(.+)/) || []; + + if (type) + (map[type as LeafLetComponent] ||= {})[ + event.toLowerCase() as keyof LeafletEventHandlerFnMap + ] = value as (...data: any[]) => any; + + return map; + }, {} as Record); + } + + renderAttribution() { + return renderToStaticMarkup( + <> + © + + OpenMap + + contributors + + ); + } + + render() { + const { center, zoom, markers, children } = this.props, + { eventHandlerMap } = this; + + return ( + + + {markers?.map(({ position, tooltip, popup }) => ( + + {popup ? ( + {popup} + ) : ( + {tooltip} + )} + + ))} + {children} + + ); + } +} diff --git a/source/PaginationBar.tsx b/source/PaginationBar.tsx index b0436c9..b311db6 100644 --- a/source/PaginationBar.tsx +++ b/source/PaginationBar.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { FC } from 'react'; +import { FC } from 'react'; import { Pagination, PaginationProps } from 'react-bootstrap'; export interface PaginationBarProps extends Omit { diff --git a/source/ScrollBoundary.tsx b/source/ScrollBoundary.tsx index 60a4b87..364a7e3 100644 --- a/source/ScrollBoundary.tsx +++ b/source/ScrollBoundary.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { FC, ReactNode } from 'react'; +import { FC, ReactNode } from 'react'; export type EdgePosition = 'top' | 'bottom' | 'left' | 'right'; diff --git a/source/Select.tsx b/source/Select.tsx index 6b9e410..81df781 100644 --- a/source/Select.tsx +++ b/source/Select.tsx @@ -1,6 +1,6 @@ import { makeArray } from 'web-utility'; import classNames from 'classnames'; -import React, { +import { CSSProperties, PropsWithChildren, ReactNode, diff --git a/source/SpinnerButton.tsx b/source/SpinnerButton.tsx index 074c431..5a7eebb 100644 --- a/source/SpinnerButton.tsx +++ b/source/SpinnerButton.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import { Button, ButtonProps, Spinner, SpinnerProps } from 'react-bootstrap'; export interface SpinnerButtonProps diff --git a/source/TableSpinner.tsx b/source/TableSpinner.tsx index 21636b5..d3cb53a 100644 --- a/source/TableSpinner.tsx +++ b/source/TableSpinner.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithoutRef } from 'react'; +import { FC, PropsWithoutRef } from 'react'; import { Spinner } from 'react-bootstrap'; export type TableSpinnerProps = PropsWithoutRef<{ colSpan: number }>; diff --git a/source/TimeDistance.tsx b/source/TimeDistance.tsx index 14c5598..d09e5f9 100644 --- a/source/TimeDistance.tsx +++ b/source/TimeDistance.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithoutRef } from 'react'; +import { FC, PropsWithoutRef } from 'react'; import { diffTime, TimeData } from 'web-utility'; export type TimeDistanceProps = PropsWithoutRef<{ diff --git a/source/TypeEcho.tsx b/source/TypeEcho.tsx index b0a0706..9a32136 100644 --- a/source/TypeEcho.tsx +++ b/source/TypeEcho.tsx @@ -1,6 +1,6 @@ import { sleep } from 'web-utility'; import classNames from 'classnames'; -import React, { PropsWithoutRef, RefCallback, PureComponent } from 'react'; +import { PropsWithoutRef, RefCallback, PureComponent } from 'react'; export type TypeEchoProps = PropsWithoutRef<{ className?: string; diff --git a/source/index.ts b/source/index.ts index ec1943a..2c7c1fe 100644 --- a/source/index.ts +++ b/source/index.ts @@ -22,6 +22,7 @@ export * from './IdeaForm'; export * from './IdeaPopover'; export * from './Loading'; export * from './CodeBlock'; +export * from './OpenMap'; export * from './AddressPicker'; export * from './color'; diff --git a/tsconfig.json b/tsconfig.json index f6dbd57..4f01009 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "target": "ES5", "esModuleInterop": true, "downlevelIteration": true, - "jsx": "react", + "jsx": "react-jsx", "skipLibCheck": true, "lib": ["ES2021", "DOM"] },