TypeScript style-value-types.color类代码示例

export const blendColor = (from: Color | string, to: Color | string) => {
  const fromColor = typeof from === 'string' ? color.parse(from) : from;
  const toColor = typeof to === 'string' ? color.parse(to) : to;
  let blended = { ...fromColor };

  // Only use the sqrt blending function for rgba and hex
  const blendFunc =
    (from as HSLA).hue !== undefined ||
    (typeof from === 'string' && hsla.test(from as string))
      ? getValueFromProgress
      : blend;

  return (v: number) => {
    blended = { ...blended };
    for (const key in blended) {
      if (key !== 'alpha' && blended.hasOwnProperty(key)) {
        blended[key] = blendFunc(fromColor[key], toColor[key], v);
      }
    }

    blended.alpha = getValueFromProgress(fromColor.alpha, toColor.alpha, v);

    return blended;
  };
};

function getMixer(origin: any, target: any) {
  if (isNum(origin)) {
    return (v: number) => mix(origin, target as number, v);
  } else if (color.test(origin)) {
    return mixColor(origin, target as HSLA | RGBA | string);
  } else {
    return mixComplex(origin as string, target as string);
  }
}

function detectMixerFactory<T>(v: T): MixerFactory<any> {
  if (typeof v === 'number') {
    return mixNumber;
  } else if (typeof v === 'string') {
    if (color.test(v)) {
      return mixColor;
    } else {
      return mixComplex;
    }
  } else if (Array.isArray(v)) {
    return mixArray;
  } else if (typeof v === 'object') {
    return mixObject;
  }
}

const getActionCreator = (prop: any) => {
  // Pattern matching would be quite lovely here
  if (typeof prop === 'number') {
    return createAction;
  } else if (Array.isArray(prop)) {
    return createArrayAction;
  } else if (isUnitProp(prop)) {
    return createUnitAction;
  } else if (color.test(prop)) {
    return createColorAction;
  } else if (complex.test(prop)) {
    return createComplexAction;
  } else if (typeof prop === 'object') {
    return createObjectAction;
  } else {
    return createAction;
  }
};