fix scrolling

pull/5370/head
filip mertens 3 years ago
parent 79fc093bc8
commit 3f529aa6cf
  1. 2
      libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
  2. 36
      libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@ -9,6 +9,8 @@ export function verticalScrollReducer (prevState: any, actionPayload: actionType
const { scrollHeight, clientHeight } = actionPayload.payload const { scrollHeight, clientHeight } = actionPayload.payload
let { scrollState } = actionPayload.payload let { scrollState } = actionPayload.payload
if (scrollHeight > clientHeight) scrollState = true if (scrollHeight > clientHeight) scrollState = true
console.log(scrollHeight, clientHeight)
console.log(scrollState)
return { scrollHeight, clientHeight, scrollState } return { scrollHeight, clientHeight, scrollState }
} }
return prevState return prevState

@ -30,22 +30,32 @@ const RemixUiVerticalIconsPanel = ({
const iconPanelRef = useRef<any>() const iconPanelRef = useRef<any>()
const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState) const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
const [theme, setTheme] = useState<string>('dark') const [theme, setTheme] = useState<string>('dark')
const evaluateScrollability = () => {
dispatchScrollAction({
type: 'resize',
payload: {
scrollHeight: scrollableRef.current?.scrollHeight,
clientHeight: scrollableRef.current?.clientHeight,
scrollState: false
}
})
}
useEffect(() => { useEffect(() => {
const evaluateScrollability = (evt: any) => { window.addEventListener('resize', evaluateScrollability)
dispatchScrollAction({ evaluateScrollability()
type: 'resize',
payload: {
scrollHeight: scrollableRef.current?.scrollHeight,
clientHeight: scrollableRef.current?.clientHeight,
scrollState: false
}
})
}
addEventListener('resize', evaluateScrollability)
return () => { return () => {
removeEventListener('resize', evaluateScrollability) window.removeEventListener('resize', evaluateScrollability)
} }
}) }, [])
useEffect(() => {
evaluateScrollability()
},[icons, theme])
useEffect(() => { useEffect(() => {
verticalIconsPlugin.call('theme', 'currentTheme').then((th: any) => { verticalIconsPlugin.call('theme', 'currentTheme').then((th: any) => {
setTheme(th.quality) setTheme(th.quality)

Loading…
Cancel
Save