import React, { FC } from "react";

export interface ChromeSizeAdjustProps {
  font?: number;
  base?: number;
  style?: object;
}

// 解除chrome 12px 的限制
export const getStyle = (font: number, base: number) => ({
  fontSize: `${font}px`, //针对可以识别12px以下字体大小的浏览器
  "-webkit-transform": `scale(${font / base})`,
  "-webkit-transform-origin-x": "left", //定义文字相对于X轴的位置
  "-o-transform": "scale(1)", //针对能识别-webkit的opera browser设置
  display: "inline-block",
  "white-space": "nowrap" // 默认强制不换行
});

export const ChromeSizeAdjust: FC<ChromeSizeAdjustProps> = props => {
  const { font = 10, base = 12, children, style } = props;
  const defaultStyle = getStyle(font, base);
  return (
    <span
      style={{
        ...defaultStyle,
        ...style
      }}
    >
      {children}
    </span>
  );
};