@wix/design-system
Version:
@wix/design-system
105 lines • 3.23 kB
JavaScript
import color from 'color';
import clamp from 'lodash/clamp';
/**
* Creates a keyboard event handler for color picker sliders
* @param {Object} config - Configuration object
* @param {Function} config.onChange - Callback to trigger when value changes
* @param {Function} config.getCurrentColor - Function that returns the current color object
* @param {Function} config.getNewColor - Function that receives (key, step, largeStep, currentColor) and returns new color
* @param {number} config.largeStep - Step size for PageUp/PageDown
* @returns {Function} Event handler function
*/
export const createColorPickerKeyHandler = ({ onChange, getCurrentColor, getNewColor, largeStep, }) => {
return e => {
const current = getCurrentColor();
const step = e.shiftKey ? 10 : 1;
let handled = true;
let newColor = null;
switch (e.key) {
case 'ArrowRight':
case 'ArrowLeft':
case 'ArrowUp':
case 'ArrowDown':
case 'Home':
case 'End':
case 'PageUp':
case 'PageDown':
newColor = getNewColor(e.key, step, largeStep, current);
break;
default:
handled = false;
}
if (handled && newColor) {
e.preventDefault();
onChange(newColor);
}
};
};
/**
* Handler for HSB (Saturation/Brightness) keyboard navigation
*/
export const getHsbColorFromKey = (key, step, largeStep, current) => {
let s = current.saturationv();
let v = current.value();
switch (key) {
case 'ArrowRight':
s = clamp(s + step, 0, 100);
break;
case 'ArrowLeft':
s = clamp(s - step, 0, 100);
break;
case 'ArrowUp':
v = clamp(v + step, 0, 100);
break;
case 'ArrowDown':
v = clamp(v - step, 0, 100);
break;
case 'Home':
s = 0;
v = 0;
break;
case 'End':
s = 100;
v = 100;
break;
case 'PageUp':
s = clamp(s + largeStep, 0, 100);
v = clamp(v + largeStep, 0, 100);
break;
case 'PageDown':
s = clamp(s - largeStep, 0, 100);
v = clamp(v - largeStep, 0, 100);
break;
}
return color({ h: current.hue(), s, v });
};
/**
* Handler for Hue keyboard navigation
*/
export const getHueColorFromKey = (key, step, largeStep, current) => {
let h = current.hue();
switch (key) {
case 'ArrowRight':
case 'ArrowUp':
h = (h + step) % 360;
break;
case 'ArrowLeft':
case 'ArrowDown':
h = (h - step + 360) % 360;
break;
case 'Home':
h = 0;
break;
case 'End':
h = 359;
break;
case 'PageUp':
h = (h + largeStep) % 360;
break;
case 'PageDown':
h = (h - largeStep + 360) % 360;
break;
}
return color({ h, s: current.saturationv(), v: current.value() });
};
//# sourceMappingURL=ColorPickerKeyboardUtils.js.map