mp-colorui/dist/h5/components/text/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST, pxMap, TEXT_COLOR_LIST } from "../../lib/model";
import "./index.scss";
import { classNames, isNumber, screenPercent } from "../../lib/index";
const SPECIAL_CLASS = {
  firstUpper: "text-Abc",
  upper: "text-ABC",
  lower: "text-abc"
};
const LINE_SPACING = {
  small: 95 * screenPercent,
  normal: 115 * screenPercent,
  large: 155 * screenPercent
};
const FONT_SPACING = {
  small: 5,
  normal: 10,
  large: 20
};
export default class ClText extends Taro.Component {
  render() {
    const props = this.props;

    const lineSpacing = props.lineSpacing || "none";
    const fontSpacing = props.fontSpacing || "none";
    const size = isNumber(props.size) ? props.size : props.size || "normal";
    const fontSize = isNumber(size) ? Taro.pxTransform(size) : Taro.pxTransform(pxMap[size || "normal"] * screenPercent);
    // const sizeClassName = `text-${SIZE[size === "normal" ? "df" : size]}`;
    const textColorClassName = props.textColor ? TEXT_COLOR_LIST[props.textColor || "black"] : "";
    const bgColorClassName = props.bgColor ? BG_COLOR_LIST[props.bgColor || "white"] : "";
    const cutClassName = props.cut ? "text-cut" : "";
    const alignClassName = props.align ? `text-${props.align}` : "text-left";
    const specialClassName = props.special ? SPECIAL_CLASS[props.special] : "";
    return <View className={classNames(` ${textColorClassName} ${bgColorClassName} ${cutClassName} ${alignClassName}`, props.className)} style={Object.assign({
      lineHeight: lineSpacing === "none" ? "normal" : Taro.pxTransform(isNumber(lineSpacing) ? lineSpacing : LINE_SPACING[lineSpacing]),
      letterSpacing: fontSpacing === "none" ? "normal" : Taro.pxTransform(isNumber(fontSpacing) ? fontSpacing : FONT_SPACING[fontSpacing]),
      fontWeight: props.fontWeight,
      fontSize
    }, props.style)}>
      <Text className={classNames([{
        "cl-text__wrap": props.wrap || !cutClassName
      }, {
        "cl-text__nowrap": !props.wrap || cutClassName
      }], `${specialClassName}`)}>
        {props.text}
        {this.props.children}
      </Text>
    </View>;
  }

}
ClText.options = {
  addGlobalClass: true
};
ClText.defaultProps = {
  size: "normal",
  textColor: undefined,
  bgColor: undefined,
  cut: false,
  align: "left",
  special: undefined,
  text: "",
  lineSpacing: "none",
  fontSpacing: "none",
  fontWeight: "normal",
  wrap: true
};