How to use style-value-types - 10 common examples

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

// If it isn't a keyframes or the first keyframes value was set as `null`, read the
            // value from the DOM. It might be worth investigating whether to check props (for SVG)
            // or props.style (for HTML) if the value exists there before attempting to read.
            if (value === null) {
                value = this.readValueFromSource(key)

                invariant(
                    value !== null,
                    `No initial value for "${key}" can be inferred. Ensure an initial value for "${key}" is defined on the component.`
                )
            }

            if (typeof value === "string" && isNumericalString(value)) {
                // If this is a number read as a string, ie "0" or "200", convert it to a number
                value = parseFloat(value)
            } else if (!getValueType(value) && complex.test(targetValue)) {
                // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
                value = complex.getAnimatableNone(targetValue as string)
            }

            this.values.set(key, motionValue(value))
            this.baseTarget[key] = value
        }
    }

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

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

// or props.style (for HTML) if the value exists there before attempting to read.
            if (value === null) {
                value = this.readValueFromSource(key)

                invariant(
                    value !== null,
                    `No initial value for "${key}" can be inferred. Ensure an initial value for "${key}" is defined on the component.`
                )
            }

            if (typeof value === "string" && isNumericalString(value)) {
                // If this is a number read as a string, ie "0" or "200", convert it to a number
                value = parseFloat(value)
            } else if (!getValueType(value) && complex.test(targetValue)) {
                // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
                value = complex.getAnimatableNone(targetValue as string)
            }

            this.values.set(key, motionValue(value))
            this.baseTarget[key] = value
        }
    }

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 detectMixerFactory(v: T): MixerFactory {
  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 blendValue = from.map((fromThis, i) => {
    const toThis = to[i];

    if (isNum(fromThis)) {
      return (v: number) => mix(fromThis, toThis as number, v);
    } else if (color.test(fromThis)) {
      return mixColor(fromThis, toThis as HSLA | RGBA | string);
    } else {
      return mixComplex(fromThis as string, toThis as string);
    }
  });

const isAnimatable = (value: string | number) => typeof value === "number" || complex.test(value)