= ({
7 | textColor,
8 | mapRef,
9 | provinceName,
10 | pathClickedHandle,
11 | pathMouseOverHandler,
12 | data,
13 | width,
14 | tooltipTitle,
15 | }) => {
16 | const badge = `
17 |
18 |
${provinceName}
19 |
20 | ${
21 | provinceName &&
22 | data[
23 | //@ts-ignore
24 | provinces.find((item: any) => item.provinceFaName === provinceName)?.provinceName
25 | ]
26 | }
27 | ${tooltipTitle && `${tooltipTitle}`}
28 |
29 |
30 | `
31 |
32 | return (
33 | <>
34 |
1822 |
1823 |
1824 | )
1825 | }
1826 |
1827 | export default IranMapWrapper
1828 |
--------------------------------------------------------------------------------
/src/components/mapSvg/iran-map.css:
--------------------------------------------------------------------------------
1 | .iran-map-wrapper {
2 | overflow: hidden;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | margin: auto;
7 | position: relative;
8 | direction: ltr !important;
9 | }
10 |
11 | .iran-map-wrapper path,
12 | .iran-map-wrapper polygon {
13 | outline: none !important;
14 | stroke: transparent;
15 | cursor: pointer;
16 | transition: all .3s;
17 | }
18 |
19 | .iran-map-wrapper .react-map-water {
20 | fill: #7bdaff !important;
21 | }
22 |
23 | .react-map-badge {
24 | background-color: #fff;
25 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
26 | border-radius: 4px;
27 | font-family: inherit;
28 | overflow: hidden;
29 | min-width: 95px;
30 | text-align: right;
31 | }
32 |
33 | .react-map-badge h2 {
34 | margin: 0;
35 | padding: 7px;
36 | font-size: 12px;
37 | background-color: #e6e6e6;
38 | }
39 |
40 | .react-map-badge h3 {
41 | font-size: 13px;
42 | margin: 0;
43 | padding: 7px 10px;
44 | display: flex;
45 | justify-content: space-between;
46 | text-align: right;
47 | }
48 |
49 | .react-map-badge h3 span {
50 | flex: 1;
51 | direction: rtl;
52 | }
53 |
54 | .iran-map-wrapper g,
55 | .iran-map-wrapper text {
56 | pointer-events: none !important;
57 | font-family: inherit;
58 | font-weight: 700;
59 | }
60 |
--------------------------------------------------------------------------------
/src/data/provinces.ts:
--------------------------------------------------------------------------------
1 | export const provinces = [
2 | {
3 | provinceName: 'ardabil',
4 | provinceFaName: 'اردبیل',
5 | },
6 | {
7 | provinceName: 'isfahan',
8 | provinceFaName: 'اصفهان',
9 | },
10 | {
11 | provinceName: 'alborz',
12 | provinceFaName: 'البرز',
13 | },
14 | {
15 | provinceName: 'ilam',
16 | provinceFaName: 'ایلام',
17 | },
18 | {
19 | provinceName: 'eastAzerbaijan',
20 | provinceFaName: 'آذربایجان شرقی',
21 | },
22 | {
23 | provinceName: 'westAzerbaijan',
24 | provinceFaName: 'آذربایجان غربی',
25 | },
26 | {
27 | provinceName: 'bushehr',
28 | provinceFaName: 'بوشهر',
29 | },
30 | {
31 | provinceName: 'tehran',
32 | provinceFaName: 'تهران',
33 | },
34 | {
35 | provinceName: 'chaharmahalandBakhtiari',
36 | provinceFaName: 'چهارمحال و بختیاری',
37 | },
38 | {
39 | provinceName: 'southKhorasan',
40 | provinceFaName: 'خراسان جنوبی',
41 | },
42 | {
43 | provinceName: 'razaviKhorasan',
44 | provinceFaName: 'خراسان رضوی',
45 | },
46 | {
47 | provinceName: 'northKhorasan',
48 | provinceFaName: 'خراسان شمالی',
49 | },
50 | {
51 | provinceName: 'khuzestan',
52 | provinceFaName: 'خوزستان',
53 | },
54 | {
55 | provinceName: 'zanjan',
56 | provinceFaName: 'زنجان',
57 | },
58 | {
59 | provinceName: 'semnan',
60 | provinceFaName: 'سمنان',
61 | },
62 | {
63 | provinceName: 'sistanAndBaluchestan',
64 | provinceFaName: 'سیستان و بلوچستان',
65 | },
66 | {
67 | provinceName: 'fars',
68 | provinceFaName: 'فارس',
69 | },
70 | {
71 | provinceName: 'qazvin',
72 | provinceFaName: 'قزوین',
73 | },
74 | {
75 | provinceName: 'qom',
76 | provinceFaName: 'قم',
77 | },
78 | {
79 | provinceName: 'kurdistan',
80 | provinceFaName: 'کردستان',
81 | },
82 | {
83 | provinceName: 'kerman',
84 | provinceFaName: 'کرمان',
85 | },
86 | {
87 | provinceName: 'kohgiluyehAndBoyerAhmad',
88 | provinceFaName: 'کهگیلویه و بویراحمد',
89 | },
90 | {
91 | provinceName: 'kermanshah',
92 | provinceFaName: 'کرمانشاه',
93 | },
94 | {
95 | provinceName: 'golestan',
96 | provinceFaName: 'گلستان',
97 | },
98 | {
99 | provinceName: 'gilan',
100 | provinceFaName: 'گیلان',
101 | },
102 | {
103 | provinceName: 'lorestan',
104 | provinceFaName: 'لرستان',
105 | },
106 | {
107 | provinceName: 'mazandaran',
108 | provinceFaName: 'مازندران',
109 | },
110 | {
111 | provinceName: 'markazi',
112 | provinceFaName: 'مرکزی',
113 | },
114 | {
115 | provinceName: 'hormozgan',
116 | provinceFaName: 'هرمزگان',
117 | },
118 | {
119 | provinceName: 'hamadan',
120 | provinceFaName: 'همدان',
121 | },
122 | {
123 | provinceName: 'yazd',
124 | provinceFaName: 'یزد',
125 | },
126 | ]
127 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import IranMap from './components/mapSvg/IranMap'
2 |
3 | export { IranMap }
4 |
--------------------------------------------------------------------------------
/src/interfaces.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/ban-types */
2 | export interface selectedProvinceType {
3 | name: string | undefined
4 | faName: string | undefined
5 | }
6 |
7 | export interface provinceType {
8 | provinceName: string
9 | provinceFaName: string
10 | }
11 |
12 | export interface mapDataType {
13 | [key: string]: number
14 | }
15 |
16 | export interface IranMapWrapperProps {
17 | data: {}
18 | width?: number | string
19 | colorRange: string
20 | textColor?: string
21 | defaultSelectedProvince?: string
22 | selectedProvinceColor?: string
23 | tooltipTitle?: string
24 | selectProvinceHandler?: Function
25 | deactiveProvinceColor?: string
26 | }
27 |
28 | export interface MapProps {
29 | textColor: string
30 | mapRef: React.RefObject
31 | provinceName: null | string
32 | pathClickedHandle: Function
33 | pathMouseOverHandler: Function
34 | data: {}
35 | tooltipTitle: undefined | string
36 | width: number | string | undefined
37 | }
38 |
--------------------------------------------------------------------------------
/styleMock.tsx:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 |
--------------------------------------------------------------------------------
/tests/common.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { render } from '@testing-library/react'
3 | import 'jest-canvas-mock'
4 | import IranMap from '../src/components/mapSvg/IranMap'
5 |
6 | const testData = {
7 | ardabil: 0,
8 | isfahan: 20,
9 | alborz: 11,
10 | ilam: 18,
11 | eastAzerbaijan: 10,
12 | westAzerbaijan: 20,
13 | bushehr: 15,
14 | tehran: 3,
15 | chaharmahalandBakhtiari: 25,
16 | southKhorasan: 29,
17 | razaviKhorasan: 11,
18 | northKhorasan: 19,
19 | khuzestan: 12,
20 | zanjan: 18,
21 | semnan: 9,
22 | sistanAndBaluchestan: 3,
23 | fars: 7,
24 | qazvin: 35,
25 | qom: 30,
26 | kurdistan: 24,
27 | kerman: 23,
28 | kohgiluyehAndBoyerAhmad: 2,
29 | kermanshah: 7,
30 | golestan: 18,
31 | gilan: 14,
32 | lorestan: 7,
33 | mazandaran: 28,
34 | markazi: 25,
35 | hormozgan: 14,
36 | hamadan: 19,
37 | yazd: 32,
38 | }
39 |
40 | describe('Common render', () => {
41 | it('renders without crashing', () => {
42 | render()
43 | })
44 | })
45 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src"],
3 | "exclude": ["dist", "node_modules"],
4 | "compilerOptions": {
5 | "module": "esnext",
6 | "lib": ["dom", "esnext"],
7 | "importHelpers": true,
8 | "declaration": true,
9 | "sourceMap": true,
10 | "rootDir": "./src",
11 | "outDir": "./dist/esm",
12 | "strict": true,
13 | "noImplicitReturns": true,
14 | "noFallthroughCasesInSwitch": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "moduleResolution": "node",
18 | "jsx": "react",
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true
22 | }
23 | }
24 |
--------------------------------------------------------------------------------