Text.js

Text.js

/**
 * @flow
 */
import React, { PureComponent } from 'react'
import { Text as NativeText, StyleSheet } from 'react-native'
import * as shared from 'cugn-vost-shared'
import { Theme } from '../../design'
import { createStyleSelector } from '../../services/style-helpers'
import type { c } from 'react'
import { i18n } from '../lang'

export class Text extends PureComponent<{
  light?: boolean,
  normal?: boolean,
  important?: boolean,
  center?: boolean,
  italic?: boolean,
  secondary?: boolean,
  small?: boolean,
  large?: boolean,
  xlarge?: boolean,
  xxlarge?: boolean,
  children?: Node,
  hint?: boolean,
  raw?: boolean // no trad
}> {
  render () {
    // behavior props. They
    // are passed down to other text child
    const {
      light,
      normal,
      important,
      center,
      italic,
      secondary,
      small,
      large,
      xlarge,
      xxlarge,
      children,
      hint, // some opacity
      ...rest
    } = this.props
    const behaviors = {light, normal, important, center, italic, secondary, small, large, xlarge, xxlarge, hint}
    let computedStyle = [selectStyle('text', behaviors), rest.style]

    return (
      <NativeText {...this.props} style={computedStyle}>
        {/* Parent text pass down all its style to Text children */}
        {React.Children.map(children, child => {
          if (typeof child === 'string' && !this.props.raw) return i18n(child)
          if (!React.isValidElement(child) || child.type !== Text) {
            return child
          }
          let style = child.props.style
          // if parent has style + small optimization
          if (rest.style) style = [rest.style, style]

          return React.cloneElement(child, {...behaviors, ...child.props, style})
        })}
      </NativeText>
    )
  }
}

const styles = StyleSheet.create({
  'text': {
    color: shared.design.colors.greyNormal,
    fontSize: Theme.fonts.sizes.base
  },
  'text.header2': {},
  'text.important': {
    fontWeight: 'bold'
  },
  'text.normal': {
    fontWeight: 'normal'
  },
  'text.secondary': {
    color: shared.design.colors.textSecondary
  },
  'text.light': {
    color: shared.design.colors.textLight
  },
  'text.light.hint': {
    color: shared.design.colors.textLightHint
  },
  'text.italic': {
    fontStyle: 'italic'
  },
  'text.center': {
    textAlign: 'center'
  },
  'text.large': {
    fontSize: Theme.fonts.sizes.large
  },
  'text.xlarge': {
    fontSize: Theme.fonts.sizes.xlarge
  },
  'text.xxlarge': {
    fontSize: Theme.fonts.sizes.xxlarge
  },
  'text.small': {
    fontSize: Theme.fonts.sizes.small
  }
})

const selectStyle = createStyleSelector(styles)