Skip to content

Commit

Permalink
feat: removed list arrow setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbret
mbret committed Feb 23, 2024
1 parent c310169 commit 04d665d
Show file tree
Hide file tree
Showing 4 changed files with 1 addition and 207 deletions.
31 changes: 0 additions & 31 deletions packages/web/src/common/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,34 +53,3 @@ export const useCSS = <T extends React.CSSProperties, K>(
) => {
return useMemo(css, deps ?? [])
}

/**
* Decimal adjustment of a number.
*
* @param {String} type The type of adjustment.
* @param {Number} value The number.
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
* @returns {Number} The adjusted value.
*/
export const decimalAdjust = (type: "round", value: number, exp: number) => {
let newValue = value
// If the exp is undefined or zero...
if (typeof exp === "undefined" || +exp === 0) {
return Math[type](newValue)
}
newValue = +newValue
exp = +exp
// If the value is not a number or the exp is not an integer...
if (isNaN(newValue) || !(typeof exp === "number" && exp % 1 === 0)) {
return NaN
}
// Shift
let shiftTmp = newValue.toString().split("e")
newValue = Math[type](
+(shiftTmp[0] + "e" + (shiftTmp[1] ? +shiftTmp[1] - exp : -exp))
)
// Shift back
shiftTmp = newValue.toString().split("e")

return +(shiftTmp[0] + "e" + (shiftTmp[1] ? +shiftTmp[1] + exp : exp))
}
154 changes: 1 addition & 153 deletions packages/web/src/lists/ReactWindowList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
forwardRef,
memo,
useCallback,
useEffect,
useMemo,
useRef
} from "react"
Expand All @@ -14,15 +13,8 @@ import {
VariableSizeList
} from "react-window"
import AutoSizer from "react-virtualized-auto-sizer"
import {
ArrowBackIosRounded,
ArrowForwardIosRounded,
ExpandLessRounded,
ExpandMoreRounded
} from "@mui/icons-material"
import { decimalAdjust, useCSS } from "../common/utils"
import { useCSS } from "../common/utils"
import { useTheme } from "@mui/material"
import { useLocalSettingsState } from "../settings/states"

export const ReactWindowList: FC<{
rowRenderer: (item: any, rowIndex: number) => React.ReactNode
Expand Down Expand Up @@ -104,102 +96,8 @@ const List = memo(
const computedItemHeight =
itemHeight || Math.floor(computedItemWidth / preferredRatio)
const columnCount = layout === "horizontal" ? data.length : itemsPerRow
const { useNavigationArrows } = useLocalSettingsState()
const classes = useClasses()
const displayScrollerButtons = useNavigationArrows
const isHorizontal = layout === "horizontal"
// 18/4=4.5 so we need to take ceil 5
const rowCount = Math.ceil(data.length / columnCount)
const listHeightWithoutHeader = computedItemHeight * rowCount
const listWidth = computedItemWidth * columnCount
const maxLeftOffset = listWidth - width
const maxTopOffset =
(headerHeight || 0) + listHeightWithoutHeader - height

// index will be -1 in case of header
// because negative offset will fallback to 0 it works to handle header
const scrollToRowIndex = (rowIndex: number) => {
const scrollTop =
(headerHeight || 0) + (rowIndex || 0) * computedItemHeight
return listRef?.current?.scrollTo({
scrollTop: scrollTop >= maxTopOffset ? maxTopOffset : scrollTop,
scrollLeft: 0
})
}

const scrollToColumnIndex = (columnIndex: number) => {
const leftOffsetToScroll = (columnIndex || 0) * computedItemWidth
return listRef?.current?.scrollTo({
scrollTop: 0,
scrollLeft:
leftOffsetToScroll >= maxLeftOffset
? maxLeftOffset
: leftOffsetToScroll
})
}

const getCurrentOffsetWithoutHeader = () => {
if (layout === "vertical") {
return (scrollRef.current?.scrollTop || 0) - (headerHeight || 0)
} else {
return scrollRef.current?.scrollLeft || 0
}
}

const onExpandMoreClick = () => {
const offsetWithoutHeader = getCurrentOffsetWithoutHeader()
// for some reason the offset will often be x.9987454 instead of x
// we round up x.9y y>=5 to next row index
// we try to get the smartest closest row index
if (layout === "vertical") {
const currentRowIndex = Math.floor(
decimalAdjust(
"round",
rowCount * (offsetWithoutHeader / listHeightWithoutHeader),
-1
)
)

return scrollToRowIndex(currentRowIndex + 1)
} else {
const currentIndex = Math.floor(
decimalAdjust(
"round",
columnCount * (offsetWithoutHeader / listWidth),
-1
)
)

return scrollToColumnIndex(currentIndex + 1)
}
}

const onExpandLessClick = () => {
const offsetWithoutHeader = getCurrentOffsetWithoutHeader()
if (layout === "vertical") {
const currentRowIndex = Math.ceil(
decimalAdjust(
"round",
rowCount * (offsetWithoutHeader / listHeightWithoutHeader),
-1
)
)

return scrollToRowIndex(currentRowIndex - 1)
} else {
const currentIndex = decimalAdjust(
"round",
columnCount * (offsetWithoutHeader / listWidth),
-1
)
const currentRoundedIndex = Math.floor(currentIndex)
// we are in the middle of one item, let's just roll back to the begin of it
if (!Number.isInteger(currentIndex)) {
return scrollToColumnIndex(currentRoundedIndex)
}
return scrollToColumnIndex(currentRoundedIndex - 1)
}
}

const innerElementType = useMemo(
() =>
Expand Down Expand Up @@ -286,56 +184,6 @@ const List = memo(
>
{renderItem}
</FixedSizeGrid>
{displayScrollerButtons && (
<>
{!isHorizontal && (
<div
style={{
...classes.verticalScrollButton,
...classes.verticalScrollButtonLess
}}
onClick={onExpandLessClick}
>
<ExpandLessRounded style={{ color: "white" }} />
</div>
)}
{!isHorizontal && (
<div
style={{
...classes.verticalScrollButton,
...classes.verticalScrollButtonMore
}}
onClick={onExpandMoreClick}
>
<ExpandMoreRounded style={{ color: "white" }} />
</div>
)}
{isHorizontal && (
<div
style={{
...classes.horizontalButton,
position: "absolute",
left: 5
}}
onClick={onExpandLessClick}
>
<ArrowBackIosRounded style={{ color: "white" }} />
</div>
)}
{isHorizontal && (
<div
style={{
...classes.horizontalButton,
position: "absolute",
right: 5
}}
onClick={onExpandMoreClick}
>
<ArrowForwardIosRounded style={{ color: "white" }} />
</div>
)}
</>
)}
</>
)
}
Expand Down
21 changes: 0 additions & 21 deletions packages/web/src/settings/SettingsScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,27 +173,6 @@ export const SettingsScreen = memo(() => {
)}
</ListItemSecondaryAction>
</ListItem>
<ListItem
button
onClick={() => {
localSettingsStateSignal.setValue((old) => ({
...old,
useNavigationArrows: !old.useNavigationArrows
}))
}}
>
<ListItemText
primary="Display list navigation arrows"
secondary="Scrolling by clicking on a button can be more confortable with e-ink screens"
/>
<ListItemSecondaryAction>
{localSettings.useNavigationArrows ? (
<CheckCircleRounded />
) : (
<RadioButtonUncheckedOutlined />
)}
</ListItemSecondaryAction>
</ListItem>
</List>
</Box>
<Drawer
Expand Down
2 changes: 0 additions & 2 deletions packages/web/src/settings/states.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { signal, useSignalValue } from "reactjrx"

const localSettingsStateDefaultValues = {
useNavigationArrows: false,
useOptimizedTheme: false,
readingFullScreenSwitchMode: import.meta.env.DEV
? ("never" as const)
Expand All @@ -13,7 +12,6 @@ const localSettingsStateDefaultValues = {
}

export const localSettingsStateSignal = signal<{
useNavigationArrows: boolean
useOptimizedTheme: boolean
readingFullScreenSwitchMode: "automatic" | "always" | "never"
unBlurWhenProtectedVisible: boolean
Expand Down

0 comments on commit 04d665d

Please sign in to comment.