move from unmaintained react-toggle-button to react-toggle
This commit is contained in:
parent
e105b8fa07
commit
76a3f7d42a
101
package-lock.json
generated
101
package-lock.json
generated
|
@ -38,7 +38,7 @@
|
|||
"react-redux": "^7.2.6",
|
||||
"react-responsive": "^8.2.0",
|
||||
"react-stay-scrolled": "^7.4.0",
|
||||
"react-toggle-button": "^2.1.0",
|
||||
"react-toggle": "^4.1.2",
|
||||
"redis": "^4.1.0",
|
||||
"redux": "^4.1.2",
|
||||
"redux-logger": "^3.0.6",
|
||||
|
@ -3760,6 +3760,11 @@
|
|||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||
},
|
||||
"node_modules/clean-css": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
||||
|
@ -8356,11 +8361,6 @@
|
|||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
||||
},
|
||||
"node_modules/performance-now": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
|
||||
"integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
|
||||
},
|
||||
"node_modules/pg-connection-string": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
||||
|
@ -8719,19 +8719,6 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/raf": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
||||
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
|
||||
"dependencies": {
|
||||
"performance-now": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/raf/node_modules/performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
|
||||
},
|
||||
"node_modules/random-bytes": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
||||
|
@ -8900,29 +8887,17 @@
|
|||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toggle-button": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
|
||||
"integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
|
||||
"node_modules/react-toggle": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
|
||||
"integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.0",
|
||||
"react-motion": "^0.5.2"
|
||||
"classnames": "^2.2.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.13.2 || ^0.14 || ^15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toggle-button/node_modules/react-motion": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
|
||||
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
|
||||
"dependencies": {
|
||||
"performance-now": "^0.2.0",
|
||||
"prop-types": "^15.5.8",
|
||||
"raf": "^3.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.9 || ^15.3.0 || ^16.0.0"
|
||||
"prop-types": ">= 15.3.0 < 18",
|
||||
"react": ">= 15.3.0 < 18",
|
||||
"react-dom": ">= 15.3.0 < 18"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
|
@ -13900,6 +13875,11 @@
|
|||
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
||||
"dev": true
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
||||
|
@ -17411,11 +17391,6 @@
|
|||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
|
||||
"integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
|
||||
},
|
||||
"pg-connection-string": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
||||
|
@ -17663,21 +17638,6 @@
|
|||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true
|
||||
},
|
||||
"raf": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
||||
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
|
||||
"requires": {
|
||||
"performance-now": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"random-bytes": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
||||
|
@ -17803,25 +17763,12 @@
|
|||
"tiny-invariant": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"react-toggle-button": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
|
||||
"integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
|
||||
"react-toggle": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
|
||||
"integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
|
||||
"requires": {
|
||||
"prop-types": "^15.6.0",
|
||||
"react-motion": "^0.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-motion": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
|
||||
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
|
||||
"requires": {
|
||||
"performance-now": "^0.2.0",
|
||||
"prop-types": "^15.5.8",
|
||||
"raf": "^3.1.0"
|
||||
}
|
||||
}
|
||||
"classnames": "^2.2.5"
|
||||
}
|
||||
},
|
||||
"readable-stream": {
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
"react-redux": "^7.2.6",
|
||||
"react-responsive": "^8.2.0",
|
||||
"react-stay-scrolled": "^7.4.0",
|
||||
"react-toggle-button": "^2.1.0",
|
||||
"react-toggle": "^4.1.2",
|
||||
"redis": "^4.1.0",
|
||||
"redux": "^4.1.2",
|
||||
"redux-logger": "^3.0.6",
|
||||
|
|
|
@ -14,14 +14,14 @@ import { requestHistoricalTimes } from '../store/actions/fetch';
|
|||
|
||||
|
||||
function stringToDate(dateString) {
|
||||
if (!dateString) return null;
|
||||
if (!dateString) return '';
|
||||
// YYYYMMDD
|
||||
// eslint-disable-next-line max-len
|
||||
return `${dateString.substring(0, 4)}-${dateString.substring(4, 6)}-${dateString.substring(6)}`;
|
||||
}
|
||||
|
||||
function stringToTime(timeString) {
|
||||
if (!timeString) return null;
|
||||
if (!timeString) return '';
|
||||
return `${timeString.substring(0, 2)}:${timeString.substring(2)}`;
|
||||
}
|
||||
|
||||
|
@ -105,17 +105,18 @@ const HistorySelect = () => {
|
|||
<div id="historyselect">
|
||||
<input
|
||||
type="date"
|
||||
requiredPattern="\d{4}-\d{2}-\d{2}"
|
||||
pattern="\d{4}-\d{2}-\d{2}"
|
||||
key="dateinput"
|
||||
value={selectedDate}
|
||||
min={canvasStartDate}
|
||||
max={max}
|
||||
ref={dateSelect}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
<div>
|
||||
<div key="timeselcon">
|
||||
{ (!!times.length && historicalTime && !submitting)
|
||||
&& (
|
||||
<div>
|
||||
<div key="timesel">
|
||||
<button
|
||||
type="button"
|
||||
className="hsar"
|
||||
|
@ -128,7 +129,6 @@ const HistorySelect = () => {
|
|||
{times.map((value) => (
|
||||
<option
|
||||
value={value}
|
||||
selected={value === selectedTime}
|
||||
>
|
||||
{value}
|
||||
</option>
|
||||
|
|
|
@ -2,35 +2,14 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ToggleButton from 'react-toggle-button';
|
||||
import { MdCheck, MdClose } from 'react-icons/md';
|
||||
|
||||
import ToggleButton from 'react-toggle';
|
||||
|
||||
const MdToggleButton = ({ value, onToggle, deactivated }) => (
|
||||
<ToggleButton
|
||||
inactiveLabel={<MdClose />}
|
||||
activeLabel={<MdCheck />}
|
||||
value={value}
|
||||
onToggle={onToggle}
|
||||
colors={(deactivated)
|
||||
? {
|
||||
activeThumb: {
|
||||
base: '#b2b2b2',
|
||||
},
|
||||
inactiveTumb: {
|
||||
base: '#b2b2b2',
|
||||
},
|
||||
active: {
|
||||
base: '#cbcbcb',
|
||||
},
|
||||
inactive: {
|
||||
base: '#cbcbcb',
|
||||
},
|
||||
}
|
||||
: {}}
|
||||
thumbStyleHover={{ backgroundColor: '#ededed' }}
|
||||
checked={value}
|
||||
onChange={onToggle}
|
||||
disabled={deactivated}
|
||||
/>
|
||||
);
|
||||
|
||||
// thumbAnimateRange={[-10, 36]}
|
||||
export default MdToggleButton;
|
||||
|
|
|
@ -44,6 +44,7 @@ const titleStyles = {
|
|||
|
||||
const rowStyles = {
|
||||
...flexy,
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
};
|
||||
|
||||
|
|
|
@ -7,7 +7,6 @@ import compression from 'compression';
|
|||
import express from 'express';
|
||||
import http from 'http';
|
||||
|
||||
// import baseCss from './components/base.tcss';
|
||||
import forceGC from './core/forceGC';
|
||||
import logger from './core/logger';
|
||||
import rankings from './core/ranking';
|
||||
|
|
|
@ -951,3 +951,148 @@ tr:nth-child(even) {
|
|||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*-----------*/
|
||||
/* react-toggle css */
|
||||
|
||||
.react-toggle {
|
||||
touch-action: pan-x;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4D4D4D;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: #19AB27;
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #128D15;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #4D4D4D;
|
||||
border-radius: 50%;
|
||||
background-color: #FAFAFA;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
border-color: #19AB27;
|
||||
}
|
||||
|
||||
.react-toggle--focus .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||
box-shadow: 0px 0px 2px 3px #0099E0;
|
||||
}
|
||||
|
||||
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user