@wix/design-system/dist/cjs/ColorPicker/ColorPickerKeyboardUtils.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.getHueColorFromKey = exports.getHsbColorFromKey = exports.createColorPickerKeyHandler = void 0;
var _color = _interopRequireDefault(require("color"));
var _clamp = _interopRequireDefault(require("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
 */
var createColorPickerKeyHandler = _ref => {
  var {
    onChange,
    getCurrentColor,
    getNewColor,
    largeStep
  } = _ref;
  return e => {
    var current = getCurrentColor();
    var step = e.shiftKey ? 10 : 1;
    var handled = true;
    var 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
 */
exports.createColorPickerKeyHandler = createColorPickerKeyHandler;
var getHsbColorFromKey = (key, step, largeStep, current) => {
  var s = current.saturationv();
  var v = current.value();
  switch (key) {
    case 'ArrowRight':
      s = (0, _clamp.default)(s + step, 0, 100);
      break;
    case 'ArrowLeft':
      s = (0, _clamp.default)(s - step, 0, 100);
      break;
    case 'ArrowUp':
      v = (0, _clamp.default)(v + step, 0, 100);
      break;
    case 'ArrowDown':
      v = (0, _clamp.default)(v - step, 0, 100);
      break;
    case 'Home':
      s = 0;
      v = 0;
      break;
    case 'End':
      s = 100;
      v = 100;
      break;
    case 'PageUp':
      s = (0, _clamp.default)(s + largeStep, 0, 100);
      v = (0, _clamp.default)(v + largeStep, 0, 100);
      break;
    case 'PageDown':
      s = (0, _clamp.default)(s - largeStep, 0, 100);
      v = (0, _clamp.default)(v - largeStep, 0, 100);
      break;
  }
  return (0, _color.default)({
    h: current.hue(),
    s,
    v
  });
};

/**
 * Handler for Hue keyboard navigation
 */
exports.getHsbColorFromKey = getHsbColorFromKey;
var getHueColorFromKey = (key, step, largeStep, current) => {
  var 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 (0, _color.default)({
    h,
    s: current.saturationv(),
    v: current.value()
  });
};
exports.getHueColorFromKey = getHueColorFromKey;
//# sourceMappingURL=ColorPickerKeyboardUtils.js.map