Skip to content

I
interface
Commit a97a6b7f authored by Jack Short's avatar Jack Short Committed by GitHub
Browse files
Options

chore: update price range slider to rc-slider (#4980) 

* chore: update price range slider to rc-slider

* removing styles

* decreasing stepsize
parent 414b2217
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 90 deletions
src/nft/components/collection/PriceRange.css.ts
View file @ a97a6b7f
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,
......
src/nft/components/collection/PriceRange.tsx
View file @ a97a6b7f
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>
......
yarn.lock
View file @ a97a6b7f
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment