chore: update price range slider to rc-slider (#4980)
* chore: update price range slider to rc-slider * removing styles * decreasing stepsize
This commit is contained in:
Jack Short
GitHub
parent
414b221727
commit
a97a6b7fa8
@ -80,7 +80,6 @@
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-redux": "^7.1.24",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@types/react-slider": "^1.3.1",
|
||||
"@types/react-table": "^7.7.12",
|
||||
"@types/react-virtualized-auto-sizer": "^1.0.0",
|
||||
"@types/react-window": "^1.8.2",
|
||||
@ -195,6 +194,7 @@
|
||||
"polyfill-object.fromentries": "^1.0.1",
|
||||
"popper-max-size-modifier": "^0.2.0",
|
||||
"qs": "^6.9.4",
|
||||
"rc-slider": "^10.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-confetti": "^6.0.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -208,7 +208,6 @@
|
||||
"react-redux": "^8.0.2",
|
||||
"react-relay": "^14.1.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-slider": "^2.0.4",
|
||||
"react-spring": "^9.5.5",
|
||||
"react-table": "^7.8.0",
|
||||
"react-use-gesture": "^6.0.14",
|
||||
|
||||
@ -1,60 +1,6 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
import { body } from 'nft/css/common.css'
|
||||
import { sprinkles, themeVars } from 'nft/css/sprinkles.css'
|
||||
|
||||
// https://www.npmjs.com/package/react-slider
|
||||
// https://codesandbox.io/s/peaceful-pine-gqszx6?file=/src/styles.css:587-641
|
||||
|
||||
export const sliderLight = style([
|
||||
sprinkles({
|
||||
height: '8',
|
||||
marginTop: '20',
|
||||
borderRadius: '8',
|
||||
width: 'full',
|
||||
}),
|
||||
])
|
||||
|
||||
export const sliderDark = style([
|
||||
sliderLight,
|
||||
sprinkles({
|
||||
backgroundColor: 'accentAction',
|
||||
}),
|
||||
])
|
||||
|
||||
export const tracker = style([
|
||||
sprinkles({
|
||||
backgroundColor: 'accentAction',
|
||||
height: '8',
|
||||
}),
|
||||
{
|
||||
selectors: {
|
||||
'&:nth-child(1)': {
|
||||
backgroundColor: themeVars.colors.accentActionSoft,
|
||||
borderRadius: 8,
|
||||
opacity: 0.65,
|
||||
},
|
||||
'&:nth-child(3)': {
|
||||
backgroundColor: themeVars.colors.accentActionSoft,
|
||||
borderRadius: 8,
|
||||
opacity: 0.65,
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const thumb = style([
|
||||
sprinkles({
|
||||
width: '12',
|
||||
height: '20',
|
||||
borderRadius: '4',
|
||||
cursor: 'pointer',
|
||||
boxShadow: 'shallow',
|
||||
backgroundColor: 'grey50',
|
||||
}),
|
||||
{
|
||||
top: -6,
|
||||
},
|
||||
])
|
||||
import { sprinkles } from 'nft/css/sprinkles.css'
|
||||
|
||||
export const priceInput = style([
|
||||
body,
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import 'rc-slider/assets/index.css'
|
||||
|
||||
import { Box } from 'nft/components/Box'
|
||||
import { Row } from 'nft/components/Flex'
|
||||
import { NumericInput } from 'nft/components/layout/Input'
|
||||
@ -7,15 +9,19 @@ import { useCollectionFilters } from 'nft/hooks/useCollectionFilters'
|
||||
import { usePriceRange } from 'nft/hooks/usePriceRange'
|
||||
import { TraitPosition } from 'nft/hooks/useTraitsOpen'
|
||||
import { scrollToTop } from 'nft/utils/scrollToTop'
|
||||
import { default as Slider } from 'rc-slider'
|
||||
import { FormEvent, useEffect, useState } from 'react'
|
||||
import { FocusEventHandler } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import ReactSlider from 'react-slider'
|
||||
import { useIsDarkMode } from 'state/user/hooks'
|
||||
import styled, { useTheme } from 'styled-components/macro'
|
||||
|
||||
import * as styles from './PriceRange.css'
|
||||
import { TraitsHeader } from './TraitsHeader'
|
||||
|
||||
const StyledSlider = styled(Slider)`
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
export const PriceRange = () => {
|
||||
const [placeholderText, setPlaceholderText] = useState('')
|
||||
const setMinPrice = useCollectionFilters((state) => state.setMinPrice)
|
||||
@ -28,7 +34,7 @@ export const PriceRange = () => {
|
||||
const setPriceRangeHigh = usePriceRange((statae) => statae.setPriceRangeHigh)
|
||||
const prevMinMax = usePriceRange((state) => state.prevMinMax)
|
||||
const setPrevMinMax = usePriceRange((state) => state.setPrevMinMax)
|
||||
const isDarktheme = useIsDarkMode()
|
||||
const theme = useTheme()
|
||||
|
||||
const isMobile = useIsMobile()
|
||||
const location = useLocation()
|
||||
@ -97,7 +103,9 @@ export const PriceRange = () => {
|
||||
scrollToTop()
|
||||
}
|
||||
|
||||
const handleSliderLogic = (minMax: Array<number>) => {
|
||||
const handleSliderLogic = (minMax: number | Array<number>) => {
|
||||
if (typeof minMax === 'number') return
|
||||
|
||||
const [newMin, newMax] = minMax
|
||||
|
||||
// strip commas so parseFloat can parse properly
|
||||
@ -160,14 +168,33 @@ export const PriceRange = () => {
|
||||
</Row>
|
||||
</Row>
|
||||
|
||||
<Row marginBottom="20" paddingLeft="8" paddingRight="8">
|
||||
<ReactSlider
|
||||
disabled={!priceRangeLow || !priceRangeHigh}
|
||||
<Row marginTop="24" marginBottom="12" paddingLeft="8" paddingRight="8">
|
||||
<StyledSlider
|
||||
defaultValue={[0, 100]}
|
||||
min={0}
|
||||
max={100}
|
||||
range
|
||||
step={0.0001}
|
||||
value={prevMinMax}
|
||||
className={isDarktheme ? styles.sliderDark : styles.sliderLight}
|
||||
trackClassName={styles.tracker}
|
||||
thumbClassName={styles.thumb}
|
||||
trackStyle={{
|
||||
top: '3px',
|
||||
height: '8px',
|
||||
background: `${theme.accentAction}`,
|
||||
}}
|
||||
handleStyle={{
|
||||
top: '3px',
|
||||
width: '12px',
|
||||
height: '20px',
|
||||
backgroundColor: `${theme.textPrimary}`,
|
||||
borderRadius: '4px',
|
||||
border: 'none',
|
||||
boxShadow: `${theme.shallowShadow.slice(0, -1)}`,
|
||||
}}
|
||||
railStyle={{
|
||||
top: '3px',
|
||||
height: '8px',
|
||||
backgroundColor: `${theme.accentActionSoft}`,
|
||||
}}
|
||||
onChange={handleSliderLogic}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
51
yarn.lock
51
yarn.lock
@ -1074,10 +1074,10 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.18.9"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
|
||||
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
|
||||
"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.19.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
|
||||
integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
@ -3799,13 +3799,6 @@
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-slider@^1.3.1":
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-slider/-/react-slider-1.3.1.tgz#a3816989eb4fc172e7df316930f242fec90690fc"
|
||||
integrity sha512-4X2yK7RyCIy643YCFL+bc6XNmcnBtt8n88uuyihvcn5G7Lut23eNQU3q3KmwF7MWIfKfsW5NxCjw0SeDZRtgaA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-table@^7.7.12":
|
||||
version "7.7.12"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.12.tgz#628011d3cb695b07c678704a61f2f1d5b8e567fd"
|
||||
@ -6677,10 +6670,10 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
classnames@^2.2.5, classnames@^2.3.1:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
|
||||
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
|
||||
|
||||
clean-css@^4.2.3:
|
||||
version "4.2.3"
|
||||
@ -14488,7 +14481,7 @@ prompts@2.4.0, prompts@^2.0.1:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -14727,6 +14720,25 @@ raw-body@2.4.0:
|
||||
iconv-lite "0.4.24"
|
||||
unpipe "1.0.0"
|
||||
|
||||
rc-slider@^10.0.1:
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9"
|
||||
integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.1"
|
||||
classnames "^2.2.5"
|
||||
rc-util "^5.18.1"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
rc-util@^5.18.1:
|
||||
version "5.24.4"
|
||||
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.24.4.tgz#a4126f01358c86f17c1bf380a1d83d6c9155ae65"
|
||||
integrity sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
react-is "^16.12.0"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
rc@^1.0.1, rc@^1.1.6:
|
||||
version "1.2.8"
|
||||
resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz"
|
||||
@ -15016,13 +15028,6 @@ react-scripts@^4.0.3:
|
||||
optionalDependencies:
|
||||
fsevents "^2.1.3"
|
||||
|
||||
react-slider@^2.0.4:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-2.0.4.tgz#21c656ffabc3bb4481cf6b49e6d647baeda83572"
|
||||
integrity sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==
|
||||
dependencies:
|
||||
prop-types "^15.8.1"
|
||||
|
||||
react-spring@^9.5.5:
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.5.5.tgz#314009a65efc04d0ef157d3d60590dbb9de65f3c"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user