iampeter/pixelplanet
1
Fork 0
forked from ppfun/pixelplanet
Code Pull Requests Activity

move from unmaintained react-toggle-button to react-toggle

Browse Source
This commit is contained in:
HF 2022-07-11 15:52:17 +02:00
parent e105b8fa07
commit 76a3f7d42a
7 changed files with 181 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
package-lock.json generated
View File

@ -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": {

2
package.json
View File

@ -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",

12
src/components/HistorySelect.jsx
View File

@ -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>

29
src/components/MdToggleButton.jsx
View File

@ -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;

1
src/components/windows/Settings.jsx
View File

@ -44,6 +44,7 @@ const titleStyles = {
const rowStyles = {
...flexy,
alignItems: 'center',
flexDirection: 'row',
};

1
src/server.js
View File

@ -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';

145
src/styles/default.css
View File

@ -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;
}