NativeBase/src/basic/Radio.js at master · mszero/NativeBase · 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
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Platform } from 'react-native';
import { connectStyle } from 'native-base-shoutem-theme';
import Icon from 'react-native-vector-icons/Ionicons';

import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
import variable from '../theme/variables/platform';
import computeProps from '../utils/computeProps';

class Radio extends Component {
  static contextTypes = {
    theme: PropTypes.object
  };
  prepareRootProps() {
    const defaultProps = {
      standardStyle: false
    };

    return computeProps(this.props, defaultProps);
  }

  render() {
    const variables = this.context.theme
      ? this.context.theme['@@shoutem.theme/themeStyle'].variables
      : variable;

    return (
      <TouchableOpacity
        ref={c => (this._root = c)}
        {...this.prepareRootProps()}
      >
        {Platform.OS === 'ios' && !this.props.standardStyle ? (
          this.props.selected && (
            <Icon
              style={{
                color: this.props.selectedColor
                  ? this.props.selectedColor
                  : variables.radioColor,
                lineHeight: 25,
                height: 20,
                fontSize: variables.radioBtnSize
              }}
              name="ios-checkmark"
            />
          )
        ) : (
          <Icon
            style={{
              color:
                Platform.OS === 'ios'
                  ? this.props.selected
                    ? this.props.selectedColor
                      ? this.props.selectedColor
                      : variables.radioColor
                    : this.props.color
                    ? this.props.color
                    : undefined
                  : this.props.selected
                  ? this.props.selectedColor
                    ? this.props.selectedColor
                    : variables.radioSelectedColorAndroid
                  : this.props.color
                  ? this.props.color
                  : undefined,
              lineHeight: variables.radioBtnLineHeight,
              fontSize: variables.radioBtnSize
            }}
            name={
              Platform.OS === 'ios'
                ? this.props.selected
                  ? 'ios-radio-button-on'
                  : 'ios-radio-button-off'
                : this.props.selected
                ? 'md-radio-button-on'
                : 'md-radio-button-off'
            }
          />
        )}
      </TouchableOpacity>
    );
  }
}

Radio.propTypes = {
  ...TouchableOpacity.propTypes,
  selected: PropTypes.bool,
  standardStyle: PropTypes.bool
};

const StyledRadio = connectStyle('NativeBase.Radio', {}, mapPropsToStyleNames)(
  Radio
);

export { StyledRadio as Radio };