109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
import { SectionedAccessoryTableCell } from '@Root/Components/SectionedAccessoryTableCell'
|
|
import { SectionHeader } from '@Root/Components/SectionHeader'
|
|
import { TableSection } from '@Root/Components/TableSection'
|
|
import { useSafeApplicationContext } from '@Root/Hooks/useSafeApplicationContext'
|
|
import { CollectionSort, CollectionSortProperty, PrefKey } from '@standardnotes/snjs'
|
|
import React, { useMemo, useState } from 'react'
|
|
|
|
export const PreferencesSection = () => {
|
|
// Context
|
|
const application = useSafeApplicationContext()
|
|
|
|
// State
|
|
const [sortBy, setSortBy] = useState<CollectionSortProperty>(() =>
|
|
application.getPreference(PrefKey.MobileSortNotesBy, CollectionSort.CreatedAt),
|
|
)
|
|
const [sortReverse, setSortReverse] = useState<boolean>(() =>
|
|
application.getLocalPreferences().getValue(PrefKey.MobileSortNotesReverse, false),
|
|
)
|
|
const [hideDates, setHideDates] = useState<boolean>(() =>
|
|
application.getLocalPreferences().getValue(PrefKey.MobileNotesHideDate, false),
|
|
)
|
|
const [hideEditorIcon, setHideEditorIcon] = useState<boolean>(() =>
|
|
application.getLocalPreferences().getValue(PrefKey.MobileNotesHideEditorIcon, false),
|
|
)
|
|
const [hidePreviews, setHidePreviews] = useState<boolean>(() =>
|
|
application.getLocalPreferences().getValue(PrefKey.MobileNotesHideNotePreview, false),
|
|
)
|
|
|
|
const sortOptions = useMemo(() => {
|
|
return [
|
|
{ key: CollectionSort.CreatedAt, label: 'Date Added' },
|
|
{ key: CollectionSort.UpdatedAt, label: 'Date Modified' },
|
|
{ key: CollectionSort.Title, label: 'Title' },
|
|
]
|
|
}, [])
|
|
|
|
const toggleReverseSort = () => {
|
|
void application.getLocalPreferences().setUserPrefValue(PrefKey.MobileSortNotesReverse, !sortReverse)
|
|
setSortReverse((value) => !value)
|
|
}
|
|
|
|
const changeSortOption = (key: CollectionSortProperty) => {
|
|
void application.getLocalPreferences().setUserPrefValue(PrefKey.MobileSortNotesBy, key)
|
|
setSortBy(key)
|
|
}
|
|
const toggleNotesPreviewHidden = () => {
|
|
void application.getLocalPreferences().setUserPrefValue(PrefKey.MobileNotesHideNotePreview, !hidePreviews)
|
|
setHidePreviews((value) => !value)
|
|
}
|
|
const toggleNotesDateHidden = () => {
|
|
void application.getLocalPreferences().setUserPrefValue(PrefKey.MobileNotesHideDate, !hideDates)
|
|
setHideDates((value) => !value)
|
|
}
|
|
const toggleNotesEditorIconHidden = () => {
|
|
void application.getLocalPreferences().setUserPrefValue(PrefKey.MobileNotesHideEditorIcon, !hideEditorIcon)
|
|
setHideEditorIcon((value) => !value)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<TableSection>
|
|
<SectionHeader
|
|
title={'Sort Notes By'}
|
|
buttonText={sortReverse ? 'Disable Reverse Sort' : 'Enable Reverse Sort'}
|
|
buttonAction={toggleReverseSort}
|
|
/>
|
|
{sortOptions.map((option, i) => {
|
|
return (
|
|
<SectionedAccessoryTableCell
|
|
onPress={() => {
|
|
changeSortOption(option.key)
|
|
}}
|
|
text={option.label}
|
|
key={option.key}
|
|
first={i === 0}
|
|
last={i === sortOptions.length - 1}
|
|
selected={() => option.key === sortBy}
|
|
/>
|
|
)
|
|
})}
|
|
</TableSection>
|
|
|
|
<TableSection>
|
|
<SectionHeader title={'Note List Options'} />
|
|
|
|
<SectionedAccessoryTableCell
|
|
onPress={toggleNotesPreviewHidden}
|
|
text={'Hide note previews'}
|
|
first
|
|
selected={() => hidePreviews}
|
|
/>
|
|
|
|
<SectionedAccessoryTableCell
|
|
onPress={toggleNotesDateHidden}
|
|
text={'Hide note dates'}
|
|
selected={() => hideDates}
|
|
/>
|
|
|
|
<SectionedAccessoryTableCell
|
|
onPress={toggleNotesEditorIconHidden}
|
|
text={'Hide editor icons'}
|
|
last
|
|
selected={() => hideEditorIcon}
|
|
/>
|
|
</TableSection>
|
|
</>
|
|
)
|
|
}
|