text.tsx

/**
* simple Text component 
* do not use style
* quick for prototyping
* @author hunje
*/
import React from 'react';
import {Text as RNText, TextStyle, StyleProp, StyleSheet} from 'react-native';

type Props = {
  color?:string;
  children?:string;
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
  size?:number;
  weight?: 'normal' | 'bold';
  margin?:number;
  marginHorizontal?:number;
  marginVertical?:number;
  marginEnd?:number;
  marginStart?:number;
  marginTop?:number;
  marginBottom?:number;
  shadowColor?:string;
  shadowOffset?: {width:number, height:number};
  shadowRadius?:number;
  lineheight?:number;
  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
  spacing?:number;
  numberOfLines?:number;
  seeMore?:boolean;
}

type State = {
  numberOfLines:number;
};

export class Text extends React.PureComponent<Props, State> {

  private _text:React.RefObject<RNText>;
  static defaultProps:Partial<Props> = {
    weight: 'normal',
    seeMore: false
  };

  constructor(props:Props) {
    super(props);
    let numberOfLines = 0;
    if (!props.seeMore) {
      numberOfLines = props.numberOfLines!;
    }
    this.state = {
      numberOfLines: numberOfLines
    }
  }

  private getTextStyle(): StyleProp<TextStyle> {
    const {color, size, weight, shadowColor, shadowOffset, shadowRadius,
      lineheight, align, spacing} = this.props;
    return {
      fontSize: size,
      fontWeight: weight,
      color: color,
      textShadowColor: shadowColor,
      textShadowOffset: shadowOffset,
      textShadowRadius: shadowRadius,
      lineHeight:lineheight,
      textAlign: align,
      letterSpacing: spacing
    }
  }

  private getMargin() {
    const {margin, marginVertical, marginHorizontal, marginStart, marginEnd,
      marginTop, marginBottom} = this.props;
    return {
      marginTop: marginTop || marginVertical || margin,
      marginBottom: marginBottom || marginVertical || margin ,
      marginStart: marginStart ||  marginHorizontal || margin,
      marginEnd: marginEnd ||  marginHorizontal || margin,
    };
  }

  /*
  componentDidMount() {
    const {seeMore} = this.props;

    if (seeMore) {
      this.nextFrameAsync()
        .then(() => {
          console.log(this.props.children);
          this._text.measure(e => console.log(e));
        });
    }
  }
  */

  private nextFrameAsync() {
    return new Promise(resolve => requestAnimationFrame(() => resolve()));
  }

  private onTextLayout = ({nativeEvent}) => {
    const {numberOfLines} = this.props;
    console.log(nativeEvent);
    if (numberOfLines) {
      if (nativeEvent.lines.length > numberOfLines) {
        this.setState({numberOfLines: numberOfLines});
      }
    }
  }

  render() {
    const {children, seeMore, ellipsizeMode} = this.props;
    const {numberOfLines} = this.state;
    const style = StyleSheet.flatten([this.getTextStyle(), this.getMargin()]);
    return (
      <RNText style={style} numberOfLines={numberOfLines} ref={text => this._text = text}
        // onTextLayout={seeMore ? this.onTextLayout : undefined}
        ellipsizeMode={ellipsizeMode}
        onTextLayout={seeMore ? this.onTextLayout : undefined}
        >{children}</RNText>
    )
  }
}