apphouse/dist/utils/units/toSp.ts

Component library for React that uses observable state management and theme-able components.

import {
  FONT_SIZE_CONVERSION_RATIO_PX_TO_SP,
  FONT_SIZE_CONVERSION_RATIO_REMS_TO_PX
} from './fontSizeRatios';

/**
 * Convert a value to sp units (for Android devices)
 * @param value
 * @returns a string with the sufix 'sp'
 */
export const toSp = (value: string | number) => {
  if (!value) {
    return '';
  }
  if (typeof value === 'string') {
    if (value.indexOf('rem') >= 0) {
      return `${parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_REMS_TO_PX}sp`;
    }
    if (value.indexOf('px') >= 0) {
      return `${parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_SP}sp`;
    }

    if (value.indexOf('pt') >= 0) {
      return `${parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_SP}sp`;
    }

    if (value.indexOf('sp') >= 0) {
      return `${parseFloat(value)}sp`;
    }
    if (isNaN(parseFloat(value))) {
      return `0sp`;
    }
    return `${parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_SP}sp`;
  }

  if (typeof value === 'number') {
    return `${value * FONT_SIZE_CONVERSION_RATIO_PX_TO_SP}sp`;
  }

  return value;
};