Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-07 13:59:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix RangeSlider

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-05-06 00:09:03 -07:00 committed by Fernando Porazzi
parent 1145812e2e
commit 6c53fc21c5
No known key found for this signature in database
GPG Key ID: 9A3B39858C514F12
2 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/MakerPage.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { InputAdornment, LinearProgress, Dialog, IconButton, DialogActions, DialogContent, DialogContentText, DialogTitle, Accordion, AccordionDetails, AccordionSummary, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material" import { InputAdornment, LinearProgress, Dialog, IconButton, DialogActions, DialogContent, DialogContentText, DialogTitle, Accordion, AccordionDetails, AccordionSummary, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
import RangeSlider from "./RangeSlider";
import { LocalizationProvider, TimePicker} from '@mui/lab'; import { LocalizationProvider, TimePicker} from '@mui/lab';
import DateFnsUtils from "@date-io/date-fns"; import DateFnsUtils from "@date-io/date-fns";
import { Link as LinkRouter } from 'react-router-dom' import { Link as LinkRouter } from 'react-router-dom'
import { styled } from '@mui/material/styles';
import getFlags from './getFlags'; import getFlags from './getFlags';
import AutocompletePayments from './AutocompletePayments'; import AutocompletePayments from './AutocompletePayments';
@ -461,36 +461,6 @@ class MakerPage extends Component {
return parseFloat(Number(min_amount*1.1).toPrecision(2)) return parseFloat(Number(min_amount*1.1).toPrecision(2))
} }
RangeSlider = styled(Slider)(({ theme }) => ({
color: 'primary',
height: 3,
padding: '13px 0',
'& .MuiSlider-thumb': {
height: 27,
width: 27,
backgroundColor: '#fff',
border: '1px solid currentColor',
'&:hover': {
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
},
'& .range-bar': {
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
'& .MuiSlider-track': {
height: 3,
},
'& .MuiSlider-rail': {
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
opacity: theme.palette.mode === 'dark' ? undefined : 1,
height: 3,
},
}));
RangeThumbComponent(props) { RangeThumbComponent(props) {
const { children, ...other } = props; const { children, ...other } = props;
return ( return (
@ -561,24 +531,24 @@ class MakerPage extends Component {
<LinearProgress /> <LinearProgress />
</div> </div>
<div style={{ display: this.state.loadingLimits == false ? '':'none'}}> <div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
{/* {this.RangeSlider( <RangeSlider
disableSwap=true, disableSwap={true}
sx={width:200, align:"center"}, sx={{width:200, align:"center"}}
disabled=(!this.state.enableAmountRange || this.state.loadingLimits), disabled={!this.state.enableAmountRange || this.state.loadingLimits}
value=([this.state.minAmount, this.state.maxAmount]), value={[this.state.minAmount, this.state.maxAmount]}
step=((this.getMaxAmount()-this.getMinAmount())/5000), step={(this.getMaxAmount()-this.getMinAmount())/5000}
valueLabelDisplay="auto", valueLabelDisplay="auto"
components=({ Thumb: this.RangeThumbComponent }), components={{ Thumb: this.RangeThumbComponent }}
valueLabelFormat=((x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)), valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)}
marks=(this.state.limits == null? marks={this.state.limits == null?
null null
: :
[{value: this.getMinAmount(),label: this.getMinAmount()+" "+ this.state.currencyCode}, [{value: this.getMinAmount(),label: this.getMinAmount()+" "+ this.state.currencyCode},
{value: this.getMaxAmount(),label: this.getMaxAmount()+" "+this.state.currencyCode}]), {value: this.getMaxAmount(),label: this.getMaxAmount()+" "+this.state.currencyCode}]}
min=this.getMinAmount(), min={this.getMinAmount()}
max=this.getMaxAmount(), max={this.getMaxAmount()}
onChange=this.handleRangeAmountChange) onChange={this.handleRangeAmountChange}
} */} />
</div> </div>
</FormControl> </FormControl>
</Grid> </Grid>

34
frontend/src/components/RangeSlider.js Normal file
View File

@ -0,0 +1,34 @@
import { Slider } from "@mui/material"
import { styled } from '@mui/material/styles';
const RangeSlider = styled(Slider)(({ theme }) => ({
color: 'primary',
height: 3,
padding: '13px 0',
'& .MuiSlider-thumb': {
height: 27,
width: 27,
backgroundColor: '#fff',
border: '1px solid currentColor',
'&:hover': {
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
},
'& .range-bar': {
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
'& .MuiSlider-track': {
height: 3,
},
'& .MuiSlider-rail': {
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
opacity: theme.palette.mode === 'dark' ? undefined : 1,
height: 3,
},
}));
export default RangeSlider;