react-native-blitzllama
Version:
Blitzllama React Native Library
85 lines (84 loc) • 3.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getCheckBoxStyles = exports.getFillColor = exports.getAnimationStyle = exports.handleAnimation = void 0;
const react_native_1 = require("react-native");
const config_1 = require("./config");
const types_1 = require("./types");
/**
* Handles animation based on the given animation type and press type.
*/
const handleAnimation = (animRef, animationType = types_1.ANIMATION_TYPES.NONE, pressType) => {
if (animationType !== types_1.ANIMATION_TYPES.NONE) {
react_native_1.Animated.timing(animRef, config_1.ANIMATION_CONFIG[animationType][pressType]).start();
}
};
exports.handleAnimation = handleAnimation;
/**
* Returns the animation style object based on the animation type.
*/
const getAnimationStyle = (type, animRef) => {
switch (type) {
case types_1.ANIMATION_TYPES.OPACITY:
return { opacity: animRef };
case types_1.ANIMATION_TYPES.BOUNCY:
return { transform: [{ scale: animRef }] };
default:
return {};
}
};
exports.getAnimationStyle = getAnimationStyle;
/**
* Returns the fill color based on the provided parameters.
*/
const getFillColor = (fillColor, fillMode) => {
if (fillColor) {
return fillColor;
}
if (fillMode) {
return react_native_1.Platform.OS === 'ios' ? config_1.IOS_PRIMARY_COLOR : config_1.ANDROID_PRIMARY_COLOR;
}
return undefined;
};
exports.getFillColor = getFillColor;
/**
* Returns the check color based on the provided parameters.
*/
const getCheckColor = (checkColor, fillColor, fillMode) => {
const _checkColor = checkColor
? checkColor
: fillColor || fillMode
? '#FFFFFF'
: '#1a1a1a';
return _checkColor;
};
/**
* Derives styles for the CheckBox component based on props and animation state.
* @returns Object containing container style and check mark style
*/
const getCheckBoxStyles = ({ checkColor, checkBoxSize = 20, animationType = types_1.ANIMATION_TYPES.NONE, borderWidth = 1.5, borderRadius = 3, fillMode = false, fillColor, }, animRef) => {
const _fillColor = (0, exports.getFillColor)(fillColor, fillMode);
const _checkColor = getCheckColor(checkColor, fillColor, fillMode);
// Container style for the CheckBox
const containerStyle = {
justifyContent: 'center',
alignItems: 'center',
width: checkBoxSize,
height: checkBoxSize,
borderColor: fillColor || fillMode ? _fillColor : _checkColor,
borderWidth: borderWidth,
borderRadius: borderRadius > -1 ? borderRadius : checkBoxSize,
backgroundColor: _fillColor,
...(0, exports.getAnimationStyle)(animationType, animRef),
};
// Check mark style within the CheckBox
const checkMarkStyle = {
borderColor: _checkColor,
width: checkBoxSize * 0.28 * 1.8,
height: checkBoxSize * 0.28,
borderLeftWidth: borderWidth,
borderBottomWidth: borderWidth,
transform: [{ rotate: '-45deg' }, { translateY: -1 }, { translateX: 0.5 }],
};
return { containerStyle, checkMarkStyle };
};
exports.getCheckBoxStyles = getCheckBoxStyles;