From 62330aaf718d1196bb72cb075188beae78a84395 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 15:55:31 +0800 Subject: [PATCH 01/11] [Project] Update gitignore --- .gitignore | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 4a701f8..e26a6c7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store +.vscode node_modules lib dist -coverage -.vscode \ No newline at end of file +coverage \ No newline at end of file From 6a7bbb3102cb971c7cda894e887dd4b839aaf591 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 16:09:45 +0800 Subject: [PATCH 02/11] [SVGMap] Clean code --- src/svg-map.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/svg-map.jsx b/src/svg-map.jsx index dbc410d..ab421c4 100644 --- a/src/svg-map.jsx +++ b/src/svg-map.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; function SVGMap(props) { - return ( Date: Sat, 13 Apr 2019 16:11:14 +0800 Subject: [PATCH 03/11] [CheckboxSVGMap] Allow locationClassName function --- src/checkbox-svg-map.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/checkbox-svg-map.jsx b/src/checkbox-svg-map.jsx index 6572029..3a9dbb9 100644 --- a/src/checkbox-svg-map.jsx +++ b/src/checkbox-svg-map.jsx @@ -115,7 +115,7 @@ CheckboxSVGMap.propTypes = { label: PropTypes.string }).isRequired, className: PropTypes.string, - locationClassName: PropTypes.string, + locationClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), onLocationMouseOver: PropTypes.func, onLocationMouseOut: PropTypes.func, onLocationMouseMove: PropTypes.func, From b7f76bb70da8baf4813fcaf09ac492c582c349a3 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 16:11:23 +0800 Subject: [PATCH 04/11] [RadioSVGMap] Allow locationClassName function --- src/radio-svg-map.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/radio-svg-map.jsx b/src/radio-svg-map.jsx index edc92f3..59dc8f9 100644 --- a/src/radio-svg-map.jsx +++ b/src/radio-svg-map.jsx @@ -154,7 +154,7 @@ RadioSVGMap.propTypes = { label: PropTypes.string }).isRequired, className: PropTypes.string, - locationClassName: PropTypes.string, + locationClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), onLocationMouseOver: PropTypes.func, onLocationMouseOut: PropTypes.func, onLocationMouseMove: PropTypes.func, From 461a921c0f39cb299a97fa12fe4c4f9b5f389ba8 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 16:12:00 +0800 Subject: [PATCH 05/11] [Doc] Update SVGMap, CheckboxSVGMap and RadioSVGMap API --- README.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 3a8f781..a412999 100644 --- a/README.md +++ b/README.md @@ -122,8 +122,8 @@ ReactDOM.render( | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. | | className | string | `'svg-map'` | CSS class of ``. | | role | string | `'none'` | ARIA role of ``. | -| locationClassName | string or function | `'svg-map__location'` | CSS class of each ``. | -| locationTabIndex | string or function | `'0'` | Tabindex each ``. | +| locationClassName | string or function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. | +| locationTabIndex | string or function | `'0'` | Tabindex each ``. The function parameters are the location object and the location index. | | locationRole | string | `'none'` | ARIA role of each ``. | | onLocationMouseOver | function | | Invoked when the user puts the mouse over a location. | | onLocationMouseOut | function | | Invoked when the user puts the mouse out of a location. | @@ -136,14 +136,13 @@ ReactDOM.render( | tabIndex | string | `'0'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationTabIndex` and will be removed in next major version. | | type | string | `'none'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationRole` and will be removed in next major version. | - ### CheckboxSVGMap | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. | | className | string | `'svg-map'` | CSS class of ``. | -| locationClassName | string | `'svg-map__location'` | CSS class of each ``. | +| locationClassName | string or function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. | | onChange | function | | Invoked when the user selects/deselects a location. The list of selected locations is passed as parameter. | | onLocationMouseOver | function | | Invoked when the user puts the mouse over a location. | | onLocationMouseOut | function | | Invoked when the user puts the mouse out of a location. | @@ -157,7 +156,7 @@ ReactDOM.render( | ---- | ---- | ------- | ----------- | | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. | | className | string | `'svg-map'` | CSS class of ``. | -| locationClassName | string | `'svg-map__location'` | CSS class of each ``. | +| locationClassName | string or function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. | | onChange | function | | Invoked when the user selects a location. The selected location is passed as parameter. | | onLocationMouseOver | function | | Invoked when the user puts the mouse over a location. | | onLocationMouseOut | function | | Invoked when the user puts the mouse out of a location. | @@ -327,8 +326,8 @@ You can modify existing maps or create your own. #### Modify a map 1. Import the map to modify. -2. Create a new object from this map. -3. Pass this new object as `map` prop of `` component. +1. Create a new object from this map. +1. Pass this new object as `map` prop of `` component. ```javascript import React from 'react'; From b3457fa8fbe3842290542f5d6690e2172291f718 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 16:36:38 +0800 Subject: [PATCH 06/11] [Tests] Fix Jest config and move it to independant file --- .eslintignore | 1 + jest.config.js | 15 +++++++++++++++ package.json | 13 +------------ 3 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 jest.config.js diff --git a/.eslintignore b/.eslintignore index b43bf86..f88b161 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ README.md +jest.config.js \ No newline at end of file diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..4a00c46 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,15 @@ +module.exports = { + // Fix "localStorage is not available for opaque origins" error + // https://github.com/jsdom/jsdom/issues/2304 + testURL: 'http://localhost', + + setupTestFrameworkScriptFile: '/jest-setup.js', + moduleNameMapper: { + '\\.(css|scss)$': '/__mocks__/styleMock.js' + }, + collectCoverage: true, + coverageDirectory: './coverage/', + collectCoverageFrom: [ + 'src/*.jsx' + ], +}; \ No newline at end of file diff --git a/package.json b/package.json index a94c6d2..e6fca02 100644 --- a/package.json +++ b/package.json @@ -67,16 +67,5 @@ "peerDependencies": { "react": "^16.0.0", "react-dom": "^16.0.0" - }, - "jest": { - "setupTestFrameworkScriptFile": "/jest-setup.js", - "moduleNameMapper": { - "\\.(css|scss)$": "/__mocks__/styleMock.js" - }, - "collectCoverage": true, - "coverageDirectory": "./coverage/", - "collectCoverageFrom": [ - "src/*.jsx" - ] } -} +} \ No newline at end of file From 3ff1c351da8929ac356595d44dfc17e281bc28ee Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 16:51:10 +0800 Subject: [PATCH 07/11] [Tests] Update tests and comments --- __tests__/__snapshots__/svg-map.test.js.snap | 101 ++++++++++++++----- __tests__/checkbox-svg-map.test.js | 1 + __tests__/radio-svg-map.test.js | 2 +- __tests__/svg-map.test.js | 34 +++---- 4 files changed, 91 insertions(+), 47 deletions(-) diff --git a/__tests__/__snapshots__/svg-map.test.js.snap b/__tests__/__snapshots__/svg-map.test.js.snap index cd8c256..79bed18 100644 --- a/__tests__/__snapshots__/svg-map.test.js.snap +++ b/__tests__/__snapshots__/svg-map.test.js.snap @@ -2248,7 +2248,52 @@ exports[`SVGMap component Maps displays map of Utah 1`] = ` `; -exports[`SVGMap component Properties displays heat map with custom location css 1`] = ` +exports[`SVGMap component Properties displays map with custom function location props 1`] = ` + + + + +`; + +exports[`SVGMap component Properties displays map with custom props 1`] = ` - -`; - -exports[`SVGMap component Properties displays map with custom props 1`] = ` - + { let location = null; beforeEach(() => { + // TODO: Use fake map to simplify tests? wrapper = mount(); location = wrapper.find(locationSelector); }); diff --git a/__tests__/radio-svg-map.test.js b/__tests__/radio-svg-map.test.js index aaf2c63..2236d60 100644 --- a/__tests__/radio-svg-map.test.js +++ b/__tests__/radio-svg-map.test.js @@ -21,6 +21,7 @@ describe('RadioSVGMap component', () => { let nextLocation = null; beforeEach(() => { + // TODO: Use fake map to simplify tests? wrapper = mount(); location = wrapper.find(locationSelector); previousLocation = wrapper.find(previousLocationSelector); @@ -84,7 +85,6 @@ describe('RadioSVGMap component', () => { }); }); - // TODO: Add tests for first/last location and right/left arrow describe('Keyboard navigation', () => { test('selects focused unselected location when hitting spacebar', () => { expect(location.props()['aria-checked']).toBeFalsy(); diff --git a/__tests__/svg-map.test.js b/__tests__/svg-map.test.js index ca9fcbb..edf3188 100644 --- a/__tests__/svg-map.test.js +++ b/__tests__/svg-map.test.js @@ -8,9 +8,14 @@ describe('SVGMap component', () => { label: 'label', viewBox: 'viewBox', locations: [{ - name: 'name', - id: 'id', - path: 'path' + name: 'name0', + id: 'id0', + path: 'path0' + }, + { + name: 'name1', + id: 'id1', + path: 'path1' }] }; @@ -46,25 +51,13 @@ describe('SVGMap component', () => { expect(tree).toMatchSnapshot(); }); - test('displays heat map with custom location css', () => { - const eventHandler = () => 'eventHandler'; - const isLocationSelected = () => 'isLocationSelected'; - const generateHeat = () => 'svg-map__location heat0'; + test('displays map with custom function location props', () => { + const locationClassName = (location, index) => `locationClassName-${index}`; + const locationTabIndex = (location, index) => `locationTabIndex-${index}`; const component = renderer.create( ); const tree = component.toJSON(); @@ -73,7 +66,6 @@ describe('SVGMap component', () => { }); }); - describe('Maps', () => { test('displays map of Australia', () => { const component = renderer.create(); From 645951af390cceb362437b2a155941208a23bac5 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 17:21:47 +0800 Subject: [PATCH 08/11] [Examples] Merge HeatMap and TooltipMap --- examples/src/components/examples-app.jsx | 6 ++-- examples/src/components/examples-app.scss | 32 ++++++++++++------- .../{tooltip-map.jsx => tooltip-heat-map.jsx} | 14 +++++--- 3 files changed, 33 insertions(+), 19 deletions(-) rename examples/src/components/{tooltip-map.jsx => tooltip-heat-map.jsx} (80%) diff --git a/examples/src/components/examples-app.jsx b/examples/src/components/examples-app.jsx index eeecdda..5e00b3d 100644 --- a/examples/src/components/examples-app.jsx +++ b/examples/src/components/examples-app.jsx @@ -2,8 +2,7 @@ import React from 'react'; import CheckboxMap from './checkbox-map'; import RadioMap from './radio-map'; import LinkMap from './link-map'; -import TooltipMap from './tooltip-map'; -import HeatMap from './heat-map'; +import TooltipHeatMap from './tooltip-heat-map'; import './examples-app.scss'; class ExamplesApp extends React.Component { @@ -20,8 +19,7 @@ class ExamplesApp extends React.Component { - - + ); } diff --git a/examples/src/components/examples-app.scss b/examples/src/components/examples-app.scss index eaf3cda..18e7431 100644 --- a/examples/src/components/examples-app.scss +++ b/examples/src/components/examples-app.scss @@ -51,17 +51,27 @@ &--usa { width: 800px; // USA needs more space for tooltip - .svg-map{ - &__location { - &.heat1{ - opacity:0.8; - } - &.heat2{ - opacity:0.6; - } - &.heat3{ - opacity:0.4; - } + + .svg-map__location { + &--heat0 { + fill: blue; + } + + &--heat1 { + fill: lightblue; + } + + &--heat2 { + fill: orange; + } + + &--heat3 { + fill: red; + } + + &:focus, + &:hover { + opacity: 0.75; } } } diff --git a/examples/src/components/tooltip-map.jsx b/examples/src/components/tooltip-heat-map.jsx similarity index 80% rename from examples/src/components/tooltip-map.jsx rename to examples/src/components/tooltip-heat-map.jsx index 568b8f2..0c83665 100644 --- a/examples/src/components/tooltip-map.jsx +++ b/examples/src/components/tooltip-heat-map.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { SVGMap, USA } from '../../../src/'; +import { SVGMap, USA } from '../../../src'; import { getLocationName } from '../utils'; import '../../../src/svg-map.scss'; -class TooltipMap extends React.Component { +class TooltipHeatMap extends React.Component { constructor(props) { super(props); @@ -37,15 +37,21 @@ class TooltipMap extends React.Component { this.setState({ tooltipStyle }); } + getLocationClassName(location, index) { + // Generate random heat map + return `svg-map__location svg-map__location--heat${index % 4}`; + } + render() { return (

- USA SVG map with tooltips + USA SVG heat map with tooltips

@@ -58,4 +64,4 @@ class TooltipMap extends React.Component { } } -export default TooltipMap; +export default TooltipHeatMap; From 290246728cb42c6b25ea0342cf38a8f45f89e2c3 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 17:51:17 +0800 Subject: [PATCH 09/11] [Project] Update v1.2.0 to v1.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e6fca02..bd80848 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-svg-map", - "version": "1.2.0", + "version": "1.3.0", "description": "A set of React.js components to display an interactive SVG map", "main": "lib/index.js", "scripts": { From 1d85951ecf37f099eaa8c3d440d877cec187a6ed Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 17:59:17 +0800 Subject: [PATCH 10/11] [Project] Add new line at eof --- .eslintignore | 2 +- .gitignore | 2 +- jest.config.js | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintignore b/.eslintignore index f88b161..28e34ed 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,2 @@ README.md -jest.config.js \ No newline at end of file +jest.config.js diff --git a/.gitignore b/.gitignore index e26a6c7..1ed88f6 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,4 @@ node_modules lib dist -coverage \ No newline at end of file +coverage diff --git a/jest.config.js b/jest.config.js index 4a00c46..10f1ff1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -12,4 +12,4 @@ module.exports = { collectCoverageFrom: [ 'src/*.jsx' ], -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index bd80848..48c9b99 100644 --- a/package.json +++ b/package.json @@ -68,4 +68,4 @@ "react": "^16.0.0", "react-dom": "^16.0.0" } -} \ No newline at end of file +} From a8a15d5fd774ca94c1f9006df0b197985328a6c5 Mon Sep 17 00:00:00 2001 From: Victor Cazanave Date: Sat, 13 Apr 2019 18:04:08 +0800 Subject: [PATCH 11/11] [Project] Update changelog --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c03cb44..16fb9e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [1.3.0] +### Added +- Allow function locationClassName prop of SVGMap, CheckboxSVGMap and RadioSVGMap components + +### Changed +- Update examples +- Externalize Jest config +- Update Jest config + ## [1.2.0] ### Added - Create CheckboxSVGMap and RadioSVGMap components