zent/src/colorpicker/helpers/color.ts

一套前端设计语言和基于React的实现

import tinycolor from '../../utils/tinycolor';

export default {
  simpleCheckForValidColor(data) {
    const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'a', 'v'];
    let checked = 0;
    let passed = 0;

    keysToCheck.forEach(letter => {
      const v = data[letter];

      if (v) {
        checked += 1;
        if (!isNaN(v)) {
          passed += 1;
        }
      }
    });
    return checked === passed ? data : false;
  },

  toState(data, oldHue) {
    const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
    const hsl = color.toHsl();
    const hsv = color.toHsv();
    if (hsl.s === 0) {
      hsl.h = oldHue || 0;
      hsv.h = oldHue || 0;
    }

    return {
      hsl,
      hex: `#${color.toHex()}`,
      rgb: color.toRgb(),
      rgba: color.toRgbString(),
      hsv,
      oldHue: data.h || oldHue || hsl.h,
      source: data.source,
    };
  },

  isValidHex(hex) {
    return tinycolor(hex).isValid;
  },
};

export const red = {
  hsl: { a: 1, h: 0, l: 0.5, s: 1 },
  hex: '#ff0000',
  rgb: { r: 255, g: 0, b: 0, a: 1 },
  hsv: { h: 0, s: 1, v: 1, a: 1 },
};