turkey-district-maps-3 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +106 -81
- package/dist/index.js +22 -36
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +22 -36
- package/dist/index.modern.js.map +1 -1
- package/package.json +69 -69
package/LICENSE
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 ritzykey
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,81 +1,106 @@
|
|
|
1
|
-
# Turkey District Maps React Component
|
|
2
|
-
|
|
3
|
-
> A SVG district maps of Turkey cities for React JS applications.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/turkey-district-maps-3) [](https://standardjs.com)
|
|
6
|
-
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
1
|
+
# Turkey District Maps React Component
|
|
2
|
+
|
|
3
|
+
> A SVG district maps of Turkey cities for React JS applications.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/turkey-district-maps-3) [](https://standardjs.com) [](https://www.npmjs.com/package/react)
|
|
6
|
+
|
|
7
|
+
## 🌏 Open in the Cloud
|
|
8
|
+
|
|
9
|
+
Click any of the buttons below to start a new development environment to demo or contribute to the codebase without having to install anything on your machine:
|
|
10
|
+
|
|
11
|
+
[](https://vscode.dev/github/ritzykey/turkey-district-map)
|
|
12
|
+
[](https://codesandbox.io/p/sandbox/example-turkey-district-maps-9qcxyk)
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install turkey-district-maps-3
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
import { Istanbul, Ankara } from 'turkey-district-maps-3'
|
|
24
|
+
|
|
25
|
+
const App = () => (
|
|
26
|
+
<>
|
|
27
|
+
<Istanbul />
|
|
28
|
+
<Ankara />
|
|
29
|
+
</>
|
|
30
|
+
)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Handling events
|
|
34
|
+
|
|
35
|
+
On click example:
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<Istanbul onClick={({ name }) => console.log(name + ' is just clicked!')} />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
On mouse over example:
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
<Istanbul
|
|
45
|
+
onHover={({ name }) => console.log('Cursor is over on ' + name + '!')}
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### District component wrapping
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
<Istanbul
|
|
53
|
+
distWrapper={(distComponent, distData) => (
|
|
54
|
+
<Tooltip title={distData.name} key={distData.name}>
|
|
55
|
+
{distComponent}
|
|
56
|
+
</Tooltip>
|
|
57
|
+
)}
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
This is generally used for [Antd](https://ant.design/components/tooltip/) style _Tooltip_.
|
|
62
|
+
|
|
63
|
+
## API
|
|
64
|
+
|
|
65
|
+
### Types
|
|
66
|
+
|
|
67
|
+
| Type | Description |
|
|
68
|
+
| :---------------- | :----------------------------------------------------------------------------------- |
|
|
69
|
+
| _distDataType_ | { **name**: _string_, **distPath**: _string_ } |
|
|
70
|
+
| _viewBoxType_ | { **top**: _number_, **left**: _number_, **width**: _number_, **height**: _number_ } |
|
|
71
|
+
| _customStyleType_ | { **idleColor**: _string_, **hoverColor**: _string_ } |
|
|
72
|
+
| _strokeStyleType_ | { **strokeWidth**: _string_, **strokeColor**: _string_ } |
|
|
73
|
+
|
|
74
|
+
### props
|
|
75
|
+
|
|
76
|
+
| Property | Description | Type | Default |
|
|
77
|
+
| :---------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------- | :------------------------------------------------------------------- |
|
|
78
|
+
| distWrapper | District DOMs are wrapped by provided component. | ( **cityComponent**: _JSX.Element_, **distData** : _distDataType_ ) => _JSX.Element_ | _Unwrapped district_ |
|
|
79
|
+
| onClick | Event when a district clicked on the map. | ( **district** : _distDataType_ ) => _void_ | - |
|
|
80
|
+
| onHover | Event when a district hovered on the map. | ( **district** : _distDataType_ ) => _void_ | - |
|
|
81
|
+
| customStyle | Stylizing the component. | _customStyleType_ | { **idleColor**: _#444_, **hoverColor**: _#dc3522_ } |
|
|
82
|
+
| strokeStyle | Stylizing the component. | _strokeStyleType_ | { **strokeWidth**: _0.08_, **strokeColor**: _white_ } |
|
|
83
|
+
| viewBox | Position and dimension information of the map (svg) layout | _viewBoxType_ | { **top**: _30_, **left**: _75_, **width**: _74_, **height**: _45_ } |
|
|
84
|
+
| hidden | Defines the visibility of the component | _boolean_ | _false_ |
|
|
85
|
+
|
|
86
|
+
## Development
|
|
87
|
+
|
|
88
|
+
Local development is broken into two parts (ideally using two tabs).
|
|
89
|
+
|
|
90
|
+
First, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm start # runs rollup with watch flag
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
The second part will be running the `example/` create-react-app that's linked to the local version of your module.
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
# (in another tab)
|
|
100
|
+
cd example
|
|
101
|
+
npm start # runs create-react-app dev server
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## License
|
|
105
|
+
|
|
106
|
+
MIT © [ritzykey](https://github.com/ritzykey)
|
package/dist/index.js
CHANGED
|
@@ -3,21 +3,13 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
3
3
|
var React = _interopDefault(require('react'));
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
|
-
_extends = Object.assign
|
|
7
|
-
for (var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
for (var key in source) {
|
|
11
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
12
|
-
target[key] = source[key];
|
|
13
|
-
}
|
|
14
|
-
}
|
|
6
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
7
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
8
|
+
var t = arguments[e];
|
|
9
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
15
10
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
return _extends.apply(this, arguments);
|
|
11
|
+
return n;
|
|
12
|
+
}, _extends.apply(null, arguments);
|
|
21
13
|
}
|
|
22
14
|
|
|
23
15
|
var data = {
|
|
@@ -3031,7 +3023,6 @@ var onHover2 = function onHover2(e, onHover) {
|
|
|
3031
3023
|
};
|
|
3032
3024
|
var handleMouseEvent = function handleMouseEvent(e, callback) {
|
|
3033
3025
|
var element = e.target;
|
|
3034
|
-
|
|
3035
3026
|
if (element.tagName === "path") {
|
|
3036
3027
|
var distPath = element.getAttribute("d");
|
|
3037
3028
|
var name = element.id;
|
|
@@ -3052,33 +3043,30 @@ var parentSvgStyles = {
|
|
|
3052
3043
|
width: 'auto',
|
|
3053
3044
|
margin: '0 auto'
|
|
3054
3045
|
};
|
|
3055
|
-
|
|
3056
3046
|
var TurkeyCityMaps = function TurkeyCityMaps(_ref) {
|
|
3057
3047
|
var city = _ref.city,
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3048
|
+
_ref$customStyle = _ref.customStyle,
|
|
3049
|
+
idleColor = _ref$customStyle.idleColor,
|
|
3050
|
+
hoverColor = _ref$customStyle.hoverColor,
|
|
3051
|
+
_ref$strokeStyle = _ref.strokeStyle,
|
|
3052
|
+
strokeWidth = _ref$strokeStyle.strokeWidth,
|
|
3053
|
+
strokeColor = _ref$strokeStyle.strokeColor,
|
|
3054
|
+
hidden = _ref.hidden,
|
|
3055
|
+
_ref$viewBox = _ref.viewBox,
|
|
3056
|
+
top = _ref$viewBox.top,
|
|
3057
|
+
left = _ref$viewBox.left,
|
|
3058
|
+
width = _ref$viewBox.width,
|
|
3059
|
+
height = _ref$viewBox.height,
|
|
3060
|
+
distWrapper = _ref.distWrapper,
|
|
3061
|
+
_onClick = _ref.onClick,
|
|
3062
|
+
onHover = _ref.onHover;
|
|
3074
3063
|
var distWrapper2 = function distWrapper2() {
|
|
3075
3064
|
return getDistrict().map(function (_ref2) {
|
|
3076
3065
|
var element = _ref2.element,
|
|
3077
|
-
|
|
3066
|
+
distData = _ref2.distData;
|
|
3078
3067
|
return distWrapper ? distWrapper(element, distData) : element;
|
|
3079
3068
|
});
|
|
3080
3069
|
};
|
|
3081
|
-
|
|
3082
3070
|
var getDistrict = function getDistrict() {
|
|
3083
3071
|
return data["" + city].map(function (distData, i) {
|
|
3084
3072
|
var element = /*#__PURE__*/React.createElement("path", {
|
|
@@ -3109,7 +3097,6 @@ var TurkeyCityMaps = function TurkeyCityMaps(_ref) {
|
|
|
3109
3097
|
};
|
|
3110
3098
|
});
|
|
3111
3099
|
};
|
|
3112
|
-
|
|
3113
3100
|
return /*#__PURE__*/React.createElement("div", {
|
|
3114
3101
|
style: parentSvgStyles
|
|
3115
3102
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
@@ -3120,7 +3107,6 @@ var TurkeyCityMaps = function TurkeyCityMaps(_ref) {
|
|
|
3120
3107
|
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
3121
3108
|
}, /*#__PURE__*/React.createElement("g", null, distWrapper2())));
|
|
3122
3109
|
};
|
|
3123
|
-
|
|
3124
3110
|
TurkeyCityMaps.defaultProps = {
|
|
3125
3111
|
city: 'istanbul',
|
|
3126
3112
|
customStyle: {
|