fix: Overflow behavior for colorwatch change

kevintyj · Dec 2, 2023 · 18f47c0 · 18f47c0
1 parent 79974fb
commit 18f47c0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/components/colorSwatchLarge.tsx b/src/components/colorSwatchLarge.tsx
@@ -2,17 +2,17 @@ import type { Component } from 'solid-js';
 import { For, Show } from 'solid-js';
 import { colors, colorsArr } from '../assets/color';
 import ColorIdentifier from '../assets/components/colorIdentifier.styled';
-import { focused } from '../functions/keyHandler';
+import { focused, setFocused } from '../functions/keyHandler';
 import { copy } from './shared/toast';
 
-type IColorSwatchLargeProps<T = object> = Component<T & {
+type ColorSwatchLargeProps<T = object> = Component<T & {
 	swatch?: Record<string, Record<string, string>>
 	swatchArr?: Array<Array<string>>
 	trackIndex?: 'color' | 'id'
 	disableText?: boolean
 }>;
 
-const ColorSwatchLarge: IColorSwatchLargeProps = (props) => {
+const ColorSwatchLarge: ColorSwatchLargeProps = (props) => {
 	const watchingSwatch = () => props.swatch ? props.swatch : colors();
 	const watchingSwatchArr = () => props.swatchArr ? props.swatchArr : colorsArr();
 
@@ -25,7 +25,8 @@ const ColorSwatchLarge: IColorSwatchLargeProps = (props) => {
 					</h2>
 					<h2 class="font-display text-xl capitalize font-semibold text-slate-800 dark:text-slate-200">
 						{props.trackIndex === 'color'
-							? Object.keys(watchingSwatch())[focused()[1]].toLocaleLowerCase()
+							? Object.keys(watchingSwatch())[focused()[1]]?.toLocaleLowerCase()
+							?? setFocused([focused()[0], watchingSwatchArr().length - 1])
 							: `0${Object.keys(Object.values(watchingSwatch()))[focused()[0]]}`}
 					</h2>
 				</Show>
@@ -52,12 +53,9 @@ const ColorSwatchLarge: IColorSwatchLargeProps = (props) => {
 							<ColorIdentifier
 								color={color}
 								tabindex={0}
-								class={`h-12 flex flex-1 justify-center items-center font-mono font-medium outline-none
-                              ${(focused()[0] === k() && props.trackIndex === 'color')
-                              || (focused()[1] === k() && props.trackIndex === 'id')
-                              ? 'focused'
-: ''}`}
 								onClick={() => copy(color)}
+								class={`h-12 flex flex-1 justify-center items-center font-mono font-medium outline-none
+								${(focused()[0] === k() && props.trackIndex === 'color') || (focused()[1] === k() && props.trackIndex === 'id') ? 'focused' : ''}`}
 							/>
 						)}
 					</For>

diff --git a/src/functions/keyHandler.tsx b/src/functions/keyHandler.tsx
@@ -1,11 +1,14 @@
 import type { Component } from 'solid-js';
 import { createEffect, createSignal, onCleanup } from 'solid-js';
-import { colorsArr } from '../assets/color';
 import { darkMode, setDarkMode } from '../components/shared/darkModeToggle';
+import { visibleColorScale } from '../components/shared/toggleColorScale';
+import { colorsToArr } from './colorConfig';
 
 export const [focused, setFocused] = createSignal([7, 5]);
 
 const KeyHandler: Component = () => {
+	const activeColorArr = () => colorsToArr(visibleColorScale());
+
 	onCleanup(() => {
 		document.removeEventListener('keydown', () => true);
 	});
@@ -22,16 +25,17 @@ const KeyHandler: Component = () => {
 			if (e.code === 'ArrowUp' && focused()[1] > 0)
 				setFocused([focused()[0], focused()[1] - 1]);
 
-			if (e.code === 'ArrowDown' && focused()[1] < colorsArr().length - 1)
+			if (e.code === 'ArrowDown' && focused()[1] < activeColorArr().length - 1)
 				setFocused([focused()[0], focused()[1] + 1]);
 
 			if (e.code === 'ArrowLeft' && focused()[0] > 0)
 				setFocused([focused()[0] - 1, focused()[1]]);
 
-			if (e.code === 'ArrowRight' && focused()[0] < colorsArr()[0].length - 1)
+			if (e.code === 'ArrowRight' && focused()[0] < activeColorArr()[0].length - 1)
 				setFocused([focused()[0] + 1, focused()[1]]);
 		});
 	});
+
 	return (<></>);
 };