Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: fix settings dialog going blank on clicking a checkbox

Browse Source
This commit is contained in:
Abdullah Atta
2023-06-22 13:07:50 +05:00
committed by Abdullah Atta
parent addbd53d7a
commit b733eb3c44
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web/src/dialogs/settings/components/spell-checker-languages.tsx
View File

@@ -18,9 +18,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { Language, useSpellChecker } from "../../../hooks/use-spell-checker"; import { Language, useSpellChecker } from "../../../hooks/use-spell-checker";
import { Checkbox, Input, Label } from "@theme-ui/components"; import { Input, Label } from "@theme-ui/components";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { deleteItem } from "@notesnook/core/utils/array"; import { deleteItem } from "@notesnook/core/utils/array";
import { FlexScrollContainer } from "../../../components/scroll-container";
export function SpellCheckerLanguages() { export function SpellCheckerLanguages() {
const spellChecker = useSpellChecker(); const spellChecker = useSpellChecker();
@@ -55,24 +56,32 @@ export function SpellCheckerLanguages() {
sx={{ mx: "2px", my: 2, width: "auto" }} sx={{ mx: "2px", my: 2, width: "auto" }}
onChange={(e) => filter(e.currentTarget.value.toLowerCase().trim())} onChange={(e) => filter(e.currentTarget.value.toLowerCase().trim())}
/> />
{languages.map((lang) => ( <FlexScrollContainer suppressAutoHide style={{ maxHeight: 400 }}>
<Label key={lang.code} variant="text.body" sx={{ mb: 1 }}> {languages.map((lang) => (
<Checkbox <Label key={lang.code} variant="text.body" sx={{ mb: 1 }}>
checked={enabledLanguages.includes(lang.code)} <input
onChange={async (e) => { type="checkbox"
const { checked } = e.currentTarget; style={{
const copiedLanguages = enabledLanguages.slice(); accentColor: "var(--primary)",
marginRight: 1,
width: 14,
height: 14
}}
checked={enabledLanguages.includes(lang.code)}
onChange={async (e) => {
const { checked } = e.currentTarget;
const copiedLanguages = enabledLanguages.slice();
if (checked) copiedLanguages.push(lang.code); if (checked) copiedLanguages.push(lang.code);
else deleteItem(copiedLanguages, lang.code); else deleteItem(copiedLanguages, lang.code);
await spellChecker.setLanguages(copiedLanguages); await spellChecker.setLanguages(copiedLanguages);
}} }}
sx={{ mr: 1, width: 20, height: 20 }} />
/> <span style={{ marginLeft: 5 }}>{lang.name}</span>
{lang.name} </Label>
</Label> ))}
))} </FlexScrollContainer>
</> </>
); );
} }