From 088466ea074d38a1451f73189710827568f6bee3 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 6 Nov 2020 13:35:11 +1100 Subject: [PATCH] Added slider label on drag --- src/components/Slider.js | 69 +++++++++++++++++++++++++++++++ src/components/note/NoteMenu.js | 4 +- src/components/party/Stream.js | 3 +- src/components/token/TokenMenu.js | 4 +- src/modals/SettingsModal.js | 12 ++---- 5 files changed, 80 insertions(+), 12 deletions(-) create mode 100644 src/components/Slider.js diff --git a/src/components/Slider.js b/src/components/Slider.js new file mode 100644 index 0000000..fdc601b --- /dev/null +++ b/src/components/Slider.js @@ -0,0 +1,69 @@ +import React, { useState } from "react"; +import { Box, Slider as ThemeSlider } from "theme-ui"; + +function Slider({ min, max, value, ml, mr, labelFunc, ...rest }) { + const percentValue = ((value - min) * 100) / (max - min); + + const [labelVisible, setLabelVisible] = useState(false); + + return ( + + {labelVisible && ( + + + + {labelFunc(value)} + + + + )} + setLabelVisible(true)} + onMouseUp={() => setLabelVisible(false)} + onTouchStart={() => setLabelVisible(true)} + onTouchEnd={() => setLabelVisible(false)} + {...rest} + /> + + ); +} + +Slider.defaultProps = { + min: 0, + max: 1, + value: 0, + ml: 0, + mr: 0, + labelFunc: (value) => value, +}; + +export default Slider; diff --git a/src/components/note/NoteMenu.js b/src/components/note/NoteMenu.js index 783025d..0fd0732 100644 --- a/src/components/note/NoteMenu.js +++ b/src/components/note/NoteMenu.js @@ -1,5 +1,7 @@ import React, { useEffect, useState, useContext } from "react"; -import { Box, Input, Slider, Flex, Text, IconButton } from "theme-ui"; +import { Box, Input, Flex, Text, IconButton } from "theme-ui"; + +import Slider from "../Slider"; import MapMenu from "../map/MapMenu"; diff --git a/src/components/party/Stream.js b/src/components/party/Stream.js index 809db3d..d3e7bcc 100644 --- a/src/components/party/Stream.js +++ b/src/components/party/Stream.js @@ -1,9 +1,10 @@ import React, { useState, useRef, useEffect } from "react"; -import { Text, IconButton, Box, Slider, Flex } from "theme-ui"; +import { Text, IconButton, Box, Flex } from "theme-ui"; import StreamMuteIcon from "../../icons/StreamMuteIcon"; import Banner from "../Banner"; +import Slider from "../Slider"; function Stream({ stream, nickname }) { const [streamVolume, setStreamVolume] = useState(1); diff --git a/src/components/token/TokenMenu.js b/src/components/token/TokenMenu.js index bf9679e..2009a17 100644 --- a/src/components/token/TokenMenu.js +++ b/src/components/token/TokenMenu.js @@ -1,5 +1,7 @@ import React, { useEffect, useState, useContext } from "react"; -import { Box, Input, Slider, Flex, Text, IconButton } from "theme-ui"; +import { Box, Input, Flex, Text, IconButton } from "theme-ui"; + +import Slider from "../Slider"; import MapMenu from "../map/MapMenu"; diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js index d1441de..126d371 100644 --- a/src/modals/SettingsModal.js +++ b/src/modals/SettingsModal.js @@ -1,15 +1,8 @@ import React, { useState, useContext } from "react"; -import { - Label, - Flex, - Button, - useColorMode, - Checkbox, - Slider, - Divider, -} from "theme-ui"; +import { Label, Flex, Button, useColorMode, Checkbox, Divider } from "theme-ui"; import Modal from "../components/Modal"; +import Slider from "../components/Slider"; import AuthContext from "../contexts/AuthContext"; import DatabaseContext from "../contexts/DatabaseContext"; @@ -86,6 +79,7 @@ function SettingsModal({ isOpen, onRequestClose }) { sx={{ width: "initial" }} value={labelSize} onChange={(e) => setLabelSize(parseFloat(e.target.value))} + labelFunc={(value) => `${value}x`} />