NativeBase/src/basic/Radio.js at master · wahhid/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
96
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;
    const platformStyle = variables.platformStyle;
    const platform = variables.platform;

    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 };