react-native-bouncy-checkbox
Version:
Fully customizable animated bouncy checkbox for React Native
77 lines • 3.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const BouncyCheckbox_style_1 = tslib_1.__importStar(require("./BouncyCheckbox.style"));
const defaultCheckImage = require("./check.png");
class BouncyCheckbox extends React.Component {
constructor(props) {
super(props);
this.onPress = () => {
const { disableBuiltInState = false, useNativeDriver = true, bounceEffect = 1, bounceFriction = 3, } = this.props;
const { checked, springValue } = this.state;
if (!disableBuiltInState) {
this.setState({ checked: !checked }, () => {
springValue.setValue(0.7);
react_native_1.Animated.spring(springValue, {
toValue: bounceEffect,
friction: bounceFriction,
useNativeDriver,
}).start();
this.props.onPress && this.props.onPress(this.state.checked);
});
}
else {
springValue.setValue(0.7);
react_native_1.Animated.spring(springValue, {
toValue: bounceEffect,
friction: bounceFriction,
useNativeDriver,
}).start();
this.props.onPress && this.props.onPress();
}
};
this.renderCheckIcon = () => {
const { checked, springValue } = this.state;
const { size = 25, iconStyle, iconComponent, iconImageStyle, fillColor = "#ffc484", ImageComponent = react_native_1.Image, unfillColor = "transparent", disableBuiltInState, isChecked, checkIconImageSource = defaultCheckImage, } = this.props;
const checkStatus = disableBuiltInState ? isChecked : checked;
return (<react_native_1.Animated.View style={[
{ transform: [{ scale: springValue }] },
BouncyCheckbox_style_1._iconContainer(size, checkStatus, fillColor, unfillColor),
iconStyle,
]}>
{iconComponent ||
(checkStatus && (<ImageComponent source={checkIconImageSource} style={[BouncyCheckbox_style_1.default.iconImageStyle, iconImageStyle]}/>))}
</react_native_1.Animated.View>);
};
this.renderCheckboxText = () => {
const { textStyle, text, disableBuiltInState, isChecked, disableText = false, } = this.props;
const { checked } = this.state;
return (!disableText && (<react_native_1.View style={BouncyCheckbox_style_1.default.textContainer}>
<react_native_1.Text style={[
BouncyCheckbox_style_1._textStyle(disableBuiltInState ? isChecked : checked),
textStyle,
]}>
{text}
</react_native_1.Text>
</react_native_1.View>));
};
this.state = {
checked: false,
springValue: new react_native_1.Animated.Value(1),
};
}
componentDidMount() {
this.setState({ checked: this.props.isChecked || false });
}
render() {
const { style } = this.props;
return (<react_native_1.TouchableOpacity {...this.props} style={[BouncyCheckbox_style_1.default.container, style]} onPress={this.onPress.bind(this, react_native_1.Easing.bounce)}>
{this.renderCheckIcon()}
{this.renderCheckboxText()}
</react_native_1.TouchableOpacity>);
}
}
exports.default = BouncyCheckbox;
//# sourceMappingURL=BouncyCheckbox.js.map