TypeScript style-value-types.complex類代碼示例

const createComplexAction: CreateVectorAction = (
  action,
  { from, to, ...props }
) => {
  const valueTemplate = complex.createTransformer(from);

  invariant(
    valueTemplate(from) === complex.createTransformer(to)(from),
    `Values '${from}' and '${to}' are of different format, or a value might have changed value type.`
  );

  return action({ ...props, from: 0, to: 1 }).pipe(
    blendArray(complex.parse(from), complex.parse(to)),
    valueTemplate
  );
};

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;
  }
};

export const mixComplex = (origin: string, target: string): MixComplex => {
  const template = complex.createTransformer(target);
  const originStats = analyse(origin);
  const targetStats = analyse(target);

  // Test if both values have the same number of each value type (number/rgb/hsla), or that the origin
  // has the same or more numbers as the target, and throw if not.
  invariant(
    originStats.numHSL === targetStats.numHSL &&
      originStats.numRGB === targetStats.numRGB &&
      originStats.numNumbers >= targetStats.numNumbers,
    `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type.`
  );

  return pipe(
    mixArray(originStats.parsed, targetStats.parsed),
    template
  ) as MixComplex;
};

function analyse(value: string) {
  const parsed = complex.parse(value);
  const numValues = parsed.length;
  let numNumbers = 0;
  let numRGB = 0;
  let numHSL = 0;

  for (let i = 0; i < numValues; i++) {
    // Parsed complex values return with colors first, so if we've seen any number
    // we're already past that part of the array and don't need to continue running typeof
    if (numNumbers || typeof parsed[i] === 'number') {
      numNumbers++;
    } else {
      if ((parsed[i] as HSLA).hue !== undefined) {
        numHSL++;
      } else {
        numRGB++;
      }
    }
  }

  return { parsed, numNumbers, numRGB, numHSL };
}