prism/app/NumberStack.js at master · tmpfs-archive/prism · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {Prism} from 'react-native-prism'
import View from './View'

import Label from './Label'

class NumberStack extends Component {

  //static styleOptions = {
    //flat: true
  //}

  static mapPropsToStyle = {
    titleStyle: {
      size: ({css, prop}) => css.pseudo(prop)
    },
    numberStyle: {
      size: ({css, prop}) => css.pseudo(prop)
    }
  }

  //static mapStyleToProps = {
    //titleStyle: {
      //textTransform: ({prop}) => {
        //console.log('mapStyleToProps on child style')
        //return prop
      //}
    //}
  //}

  static propTypes = {
    value: PropTypes.number,
    color: PropTypes.string,
    bold: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large'])
  }

  static defaultProps = {
    bold: true,
    size: 'medium',
    align: 'center',
    style: {
      padding: 10,
      textTransform: 'capitalize'
    }
  }

  render() {
    const {
      style,
      align,
      color,
      bold,
      value,
      textTransform,
      titleStyle,
      numberStyle
    } = this.props

    const center = (align === 'center')
    let ellipsis
    if (align === 'right') {
      ellipsis='head'
    }

    //console.log(style)
    //console.log(titleStyle)
    //console.log(textTransform)

    const title = (
      <Label
        align={align}
        bold={bold}
        color={color}
        textTransform={textTransform}
        ellipsis={ellipsis}
        style={titleStyle}>
        {this.props.children}
      </Label>
    )

    const num = (
      <Label
        align={align}
        bold={bold}
        ellipsis={ellipsis}
        style={numberStyle}>
        {value.toString()}
      </Label>
    )

    return (
      <View center={center} style={style}>
        {title}
        {num}
      </View>
    )
  }
}

export default Prism(NumberStack, 'NumberStack')