Merge pull request #600 from acelaya-forks/feature/update-react-datepicker

Updated to latest react-datepicker major version
This commit is contained in:
Alejandro Celaya 2022-03-11 17:27:23 +01:00 committed by GitHub
commit 187e26810d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 145 deletions

158
package-lock.json generated
View file

@ -29,7 +29,7 @@
"react-chartjs-2": "^3.3.0",
"react-colorful": "^5.5.1",
"react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^3.6.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-external-link": "^1.2.2",
"react-leaflet": "^3.2.5",
@ -2375,19 +2375,6 @@
"react": ">=16.x"
}
},
"node_modules/@hypnosphi/create-react-context": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
"integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
"dependencies": {
"gud": "^1.0.0",
"warning": "^4.0.3"
},
"peerDependencies": {
"prop-types": "^15.0.0",
"react": ">=0.14.0"
}
},
"node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@ -4382,20 +4369,6 @@
"react-popper": "^2.2.5"
}
},
"node_modules/@types/react-datepicker/node_modules/react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dev": true,
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
}
},
"node_modules/@types/react-dom": {
"version": "17.0.13",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.13.tgz",
@ -13172,11 +13145,6 @@
"integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
"dev": true
},
"node_modules/gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"node_modules/gzip-size": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@ -18779,12 +18747,6 @@
"node": ">=6"
}
},
"node_modules/popper.js": {
"version": "1.14.6",
"resolved": "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz",
"integrity": "sha1-qyDdTt+SiLiztlMcR8NhEHtgtLA=",
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1"
},
"node_modules/portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -24106,15 +24068,16 @@
}
},
"node_modules/react-datepicker": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.6.0.tgz",
"integrity": "sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==",
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
"integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
"dependencies": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.0.1",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.10.0",
"react-popper": "^1.3.8"
"react-onclickoutside": "^6.12.0",
"react-popper": "^2.2.5"
},
"peerDependencies": {
"react": "^16.9.0 || ^17",
@ -24439,19 +24402,16 @@
}
},
"node_modules/react-popper": {
"version": "1.3.10",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.10.tgz",
"integrity": "sha512-sZfwHtHCMst0L0G/c83/Y/K1f9fNWMEKsk/cGAor68rQBHB75WuDQ7k95tkce8QNaUHhg9uFXIJbZO0eWRvJbw==",
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dependencies": {
"@babel/runtime": "^7.1.2",
"@hypnosphi/create-react-context": "^0.3.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
}
},
"node_modules/react-redux": {
@ -24579,19 +24539,6 @@
"react-dom": ">=16.8.0"
}
},
"node_modules/reactstrap/node_modules/react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
}
},
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -28947,11 +28894,6 @@
"underscore": "^1.12.1"
}
},
"node_modules/typed-styles": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
},
"node_modules/typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@ -33025,15 +32967,6 @@
"prop-types": "^15.7.2"
}
},
"@hypnosphi/create-react-context": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
"integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
"requires": {
"gud": "^1.0.0",
"warning": "^4.0.3"
}
},
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@ -34559,18 +34492,6 @@
"@types/react": "*",
"date-fns": "^2.0.1",
"react-popper": "^2.2.5"
},
"dependencies": {
"react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dev": true,
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
}
}
},
"@types/react-dom": {
@ -41539,11 +41460,6 @@
"integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
"dev": true
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"gzip-size": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@ -45898,11 +45814,6 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.14.6",
"resolved": "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz",
"integrity": "sha1-qyDdTt+SiLiztlMcR8NhEHtgtLA="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -50125,15 +50036,16 @@
}
},
"react-datepicker": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.6.0.tgz",
"integrity": "sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==",
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
"integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
"requires": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.0.1",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.10.0",
"react-popper": "^1.3.8"
"react-onclickoutside": "^6.12.0",
"react-popper": "^2.2.5"
}
},
"react-dev-utils": {
@ -50376,15 +50288,11 @@
"requires": {}
},
"react-popper": {
"version": "1.3.10",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.10.tgz",
"integrity": "sha512-sZfwHtHCMst0L0G/c83/Y/K1f9fNWMEKsk/cGAor68rQBHB75WuDQ7k95tkce8QNaUHhg9uFXIJbZO0eWRvJbw==",
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"requires": {
"@babel/runtime": "^7.1.2",
"@hypnosphi/create-react-context": "^0.3.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
},
@ -50477,17 +50385,6 @@
"prop-types": "^15.5.8",
"react-popper": "^2.2.4",
"react-transition-group": "^4.4.2"
},
"dependencies": {
"react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
}
}
},
"read-pkg": {
@ -53913,11 +53810,6 @@
"underscore": "^1.12.1"
}
},
"typed-styles": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
},
"typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

View file

@ -45,7 +45,7 @@
"react-chartjs-2": "^3.3.0",
"react-colorful": "^5.5.1",
"react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^3.6.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-external-link": "^1.2.2",
"react-leaflet": "^3.2.5",

View file

@ -88,8 +88,9 @@
z-index: 2;
&[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
border-top-color: var(--primary-color);
border-bottom-color: var(--border-color);
&::after {
border-top-color: var(--primary-color);
}
&::before {
border-top-color: var(--border-color);
@ -97,8 +98,9 @@
}
&[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
border-top-color: var(--border-color);
border-bottom-color: var(--secondary-color);
&::after {
border-bottom-color: var(--secondary-color);
}
&::before {
border-bottom-color: var(--border-color);

View file

@ -1,12 +1,12 @@
import { FC, useRef } from 'react';
import * as Popper from 'popper.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { UncontrolledTooltip } from 'reactstrap';
import { Placement } from '@popperjs/core';
interface InfoTooltipProps {
className?: string;
placement: Popper.Placement;
placement: Placement;
}
export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {

View file

@ -1,6 +1,6 @@
import { shallow } from 'enzyme';
import { UncontrolledTooltip } from 'reactstrap';
import Popper from 'popper.js';
import { Placement } from '@popperjs/core';
import { InfoTooltip } from '../../src/utils/InfoTooltip';
describe('<InfoTooltip />', () => {
@ -28,10 +28,10 @@ describe('<InfoTooltip />', () => {
});
it.each([
[ 'right' as Popper.Placement ],
[ 'left' as Popper.Placement ],
[ 'top' as Popper.Placement ],
[ 'bottom' as Popper.Placement ],
[ 'right' as Placement ],
[ 'left' as Placement ],
[ 'top' as Placement ],
[ 'bottom' as Placement ],
])('places tooltip where requested', (placement) => {
const wrapper = shallow(<InfoTooltip placement={placement} />);
const tooltip = wrapper.find(UncontrolledTooltip);