Skip to content

Commit 98d25dd

Browse files
moodysalemmoodysalem
committed
perf(cleanup): remove the material ui dependency for the input range
1 parent f289dec commit 98d25dd

File tree

4 files changed

+133
-254
lines changed

4 files changed

+133
-254
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"@ethersproject/strings": "^5.0.0-beta.136",
1414
"@ethersproject/units": "^5.0.0-beta.132",
1515
"@ethersproject/wallet": "^5.0.0-beta.141",
16-
"@material-ui/core": "^4.9.5",
1716
"@popperjs/core": "^2.4.0",
1817
"@reach/dialog": "^0.10.3",
1918
"@reach/portal": "^0.10.3",

‎src/components/Slider/index.tsx‎

Lines changed: 118 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,127 @@
1-
import React from 'react'
2-
import Slider from '@material-ui/core/Slider'
3-
import { withStyles } from '@material-ui/core/styles'
4-
5-
const StyledSlider = withStyles({
6-
root: {
7-
width: '90%',
8-
color: '#565A69',
9-
height: 4,
10-
marginLeft: '15px',
11-
marginRight: '15px',
12-
padding: '15px 0'
13-
},
14-
thumb: {
15-
height: 28,
16-
width: 28,
17-
backgroundColor: '#565A69',
18-
marginTop: -14,
19-
marginLeft: -14,
20-
'&:focus,&:hover,&$active': {
21-
boxShadow:
22-
'0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.04)',
23-
// Reset on touch devices, it doesn't add specificity
24-
'@media (hover: none)': {}
1+
import React, { useCallback } from 'react'
2+
import styled from 'styled-components'
3+
4+
const StyledRangeInput = styled.input<{ value: number }>`
5+
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
6+
width: 100%; /* Specific width is required for Firefox. */
7+
background: transparent; /* Otherwise white in Chrome */
8+
cursor: pointer;
9+
10+
&:focus {
11+
outline: none;
12+
}
13+
14+
&::-moz-focus-outer {
15+
border: 0;
16+
}
17+
18+
&::-webkit-slider-thumb {
19+
-webkit-appearance: none;
20+
height: 28px;
21+
width: 28px;
22+
background-color: #565a69;
23+
border-radius: 100%;
24+
border: none;
25+
transform: translateY(-50%);
26+
color: ${({ theme }) => theme.bg1};
27+
28+
&:hover,
29+
&:focus {
30+
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
31+
0px 24px 32px rgba(0, 0, 0, 0.04);
2532
}
26-
},
27-
active: {},
28-
track: {
29-
height: 4
30-
},
31-
rail: {
32-
height: 2,
33-
opacity: 0.5,
34-
backgroundColor: '#C3C5CB'
35-
},
36-
mark: {
37-
backgroundColor: '#C3C5CB',
38-
height: 12,
39-
width: 2,
40-
marginTop: -4
41-
},
42-
markActive: {
43-
opacity: 1,
44-
backgroundColor: 'currentColor',
45-
height: 12,
46-
width: 2,
47-
marginTop: -4
48-
}
49-
})(Slider)
33+
}
34+
35+
&::-moz-range-thumb {
36+
height: 28px;
37+
width: 28px;
38+
background-color: #565a69;
39+
border-radius: 100%;
40+
border: none;
41+
color: ${({ theme }) => theme.bg1};
42+
43+
&:hover,
44+
&:focus {
45+
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
46+
0px 24px 32px rgba(0, 0, 0, 0.04);
47+
}
48+
}
49+
50+
&::-ms-thumb {
51+
height: 28px;
52+
width: 28px;
53+
background-color: #565a69;
54+
border-radius: 100%;
55+
color: ${({ theme }) => theme.bg1};
56+
57+
&:hover,
58+
&:focus {
59+
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
60+
0px 24px 32px rgba(0, 0, 0, 0.04);
61+
}
62+
}
63+
64+
&::-webkit-slider-runnable-track {
65+
background: linear-gradient(
66+
90deg,
67+
${({ theme }) => theme.bg5},
68+
${({ theme }) => theme.bg5} ${({ value }) => value}%,
69+
${({ theme }) => theme.bg3} ${({ value }) => value}%,
70+
${({ theme }) => theme.bg3}
71+
);
72+
height: 2px;
73+
}
74+
75+
&::-moz-range-track {
76+
background: linear-gradient(
77+
90deg,
78+
${({ theme }) => theme.bg5},
79+
${({ theme }) => theme.bg5} ${({ value }) => value}%,
80+
${({ theme }) => theme.bg3} ${({ value }) => value}%,
81+
${({ theme }) => theme.bg3}
82+
);
83+
height: 2px;
84+
}
85+
86+
&::-ms-track {
87+
width: 100%;
88+
border-color: transparent;
89+
color: transparent;
90+
91+
background: ${({ theme }) => theme.bg5};
92+
height: 2px;
93+
}
94+
&::-ms-fill-lower {
95+
background: ${({ theme }) => theme.bg5};
96+
}
97+
&::-ms-fill-upper {
98+
background: ${({ theme }) => theme.bg3};
99+
}
100+
`
50101

51102
interface InputSliderProps {
52103
value: number
53104
onChange: (value: number) => void
54105
}
55106

56107
export default function InputSlider({ value, onChange }: InputSliderProps) {
57-
function wrappedOnChange(_, value) {
58-
onChange(value)
59-
}
60-
return <StyledSlider value={value} onChange={wrappedOnChange} aria-labelledby="input-slider" step={1} />
108+
const changeCallback = useCallback(
109+
e => {
110+
onChange(e.target.value)
111+
},
112+
[onChange]
113+
)
114+
115+
return (
116+
<StyledRangeInput
117+
type="range"
118+
value={value}
119+
style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
120+
onChange={changeCallback}
121+
aria-labelledby="input-slider"
122+
step={1}
123+
min={0}
124+
max={100}
125+
/>
126+
)
61127
}

‎src/pages/RemoveLiquidity/index.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { splitSignature } from '@ethersproject/bytes'
22
import { Contract } from '@ethersproject/contracts'
33
import { Percent, WETH } from '@uniswap/sdk'
4-
import React, { useContext, useState } from 'react'
4+
import React, { useCallback, useContext, useState } from 'react'
55
import { ArrowDown, Plus } from 'react-feather'
66
import ReactGA from 'react-ga'
77
import { RouteComponentProps } from 'react-router'
@@ -384,6 +384,13 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
384384
tokens[Field.TOKEN_A]?.symbol
385385
} and ${parsedAmounts[Field.TOKEN_B]?.toSignificant(6)} ${tokens[Field.TOKEN_B]?.symbol}`
386386

387+
const liquidityPercentChangeCallback = useCallback(
388+
(value: number) => {
389+
onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
390+
},
391+
[onUserInput]
392+
)
393+
387394
return (
388395
<>
389396
<AppBody>
@@ -426,9 +433,7 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
426433
<>
427434
<Slider
428435
value={Number.parseInt(parsedAmounts[Field.LIQUIDITY_PERCENT].toFixed(0))}
429-
onChange={value => {
430-
onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
431-
}}
436+
onChange={liquidityPercentChangeCallback}
432437
/>
433438
<RowBetween>
434439
<MaxButton onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '25')} width="20%">

0 commit comments

Comments
 (0)