| 1 | import React, { Component } from 'react';
|
| 2 | import PropTypes from 'prop-types';
|
| 3 | import Button from './Button';
|
| 4 |
|
| 5 | export default class Toggle extends Component {
|
| 6 | static propTypes = {
|
| 7 | children: PropTypes.string,
|
| 8 | isChecked: PropTypes.bool,
|
| 9 | onChange: PropTypes.func,
|
| 10 | uncheckedButtonColor: PropTypes.string,
|
| 11 | checkedButtonColor: PropTypes.string,
|
| 12 | uncheckedTextColor: PropTypes.string,
|
| 13 | checkedTextColor: PropTypes.string,
|
| 14 | textFontSize: PropTypes.number,
|
| 15 | borderRadius: PropTypes.number,
|
| 16 | borderWidth: PropTypes.number,
|
| 17 | uncheckedBorderColor: PropTypes.string,
|
| 18 | checkedBorderColor: PropTypes.string,
|
| 19 | buttonStyle: PropTypes.object,
|
| 20 | textStyle: PropTypes.oneOfType([
|
| 21 | PropTypes.object,
|
| 22 | PropTypes.array
|
| 23 | ]),
|
| 24 | marginTop: PropTypes.number,
|
| 25 | marginLeft: PropTypes.number,
|
| 26 | name: PropTypes.string,
|
| 27 | height: PropTypes.number,
|
| 28 | width: PropTypes.number,
|
| 29 | paddingHorizontal: PropTypes.number,
|
| 30 | debounce: PropTypes.number
|
| 31 | };
|
| 32 |
|
| 33 | static defaultProps = {
|
| 34 | children: '',
|
| 35 | isChecked: false,
|
| 36 | onChange: () => {},
|
| 37 | uncheckedButtonColor: '#cfcfcf',
|
| 38 | checkedButtonColor: '#4d4d4d',
|
| 39 | uncheckedTextColor: '#ffffff',
|
| 40 | checkedTextColor: '#ffffff',
|
| 41 | textFontSize: 16,
|
| 42 | borderRadius: 3,
|
| 43 | borderWidth: 0,
|
| 44 | uncheckedBorderColor: '#cfcfcf',
|
| 45 | checkedBorderColor: '#4d4d4d',
|
| 46 | buttonStyle: {},
|
| 47 | textStyle: {},
|
| 48 | marginTop: 0,
|
| 49 | marginLeft: 0,
|
| 50 | name: '',
|
| 51 | height: 40,
|
| 52 | width: null,
|
| 53 | paddingHorizontal: 15,
|
| 54 | debounce: 0
|
| 55 | };
|
| 56 |
|
| 57 | onPressButton = (name) => {
|
| 58 | this.props.onChange(!this.props.isChecked, name);
|
| 59 | };
|
| 60 |
|
| 61 | render() {
|
| 62 | return (
|
| 63 | <Button
|
| 64 | onPress={this.onPressButton}
|
| 65 | buttonColor={this.props.isChecked ? this.props.checkedButtonColor : this.props.uncheckedButtonColor}
|
| 66 | buttonStyle={this.props.buttonStyle}
|
| 67 | height={this.props.height}
|
| 68 | width={this.props.width}
|
| 69 | textColor={this.props.isChecked ? this.props.checkedTextColor : this.props.uncheckedTextColor}
|
| 70 | borderRadius={this.props.borderRadius}
|
| 71 | textStyle={this.props.textStyle}
|
| 72 | marginTop={this.props.marginTop}
|
| 73 | marginLeft={this.props.marginLeft}
|
| 74 | textFontSize={this.props.textFontSize}
|
| 75 | borderWidth={this.props.borderWidth}
|
| 76 | borderColor={this.props.isChecked ? this.props.checkedBorderColor : this.props.uncheckedBorderColor}
|
| 77 | paddingHorizontal={this.props.paddingHorizontal}
|
| 78 | name={this.props.name}
|
| 79 | debounce={this.props.debounce}
|
| 80 | >
|
| 81 | { this.props.children }
|
| 82 | </Button>
|
| 83 | );
|
| 84 | }
|
| 85 | }
|