@eslam-elmeniawy/react-native-common-components
Version:
Common `ReactNative` components packed in library for usage in projects.
96 lines (92 loc) • 2.75 kB
JavaScript
"use strict";
// External imports.
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { withTheme, TouchableRipple } from 'react-native-paper';
import tinyColor from 'tinycolor2';
// Types imports.
// Internal imports.
import styles from "./CompoundButton.styles.js";
import { Text } from "../Text/index.js";
import { RadioButton as PaperRadioButton } from "../wrappers/index.js";
/**
* RadioButtonComponent (unwrapped, for testing)
* @internal For testing purposes only. Do not use in production code.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RadioButtonComponent = /*#__PURE__*/React.memo(props => {
const {
text,
checked,
onPress,
disabled,
checkedColor,
uncheckedColor,
textProps,
contentAlign,
style,
theme,
...other
} = props;
const {
style: textStyle,
...rest
} = textProps ?? {};
const _checkedColor = checkedColor ?? theme.colors.primary;
const _rippleColor = tinyColor(_checkedColor).setAlpha(0.25).toHex8String();
const _flattenStyle = StyleSheet.flatten(style ?? {});
const {
padding,
paddingHorizontal,
paddingVertical,
paddingTop,
paddingBottom,
paddingStart,
paddingEnd,
paddingRight,
paddingLeft
} = _flattenStyle ?? {};
const _borderRadius = (theme.isV3 ? 5 : 1) * theme.roundness;
return /*#__PURE__*/_jsx(View, {
style: StyleSheet.flatten([styles.container, {
borderRadius: _borderRadius
}, style, styles.noPadding]),
...other,
children: /*#__PURE__*/_jsx(TouchableRipple, {
onPress: onPress,
disabled: disabled,
rippleColor: _rippleColor,
underlayColor: _rippleColor,
children: /*#__PURE__*/_jsxs(View, {
style: StyleSheet.flatten([styles.rippleView, {
padding,
paddingHorizontal,
paddingVertical,
paddingTop,
paddingBottom,
paddingStart,
paddingEnd,
paddingRight,
paddingLeft,
alignItems: contentAlign ?? 'center'
}]),
children: [/*#__PURE__*/_jsx(PaperRadioButton.Android, {
value: text ?? 'radio',
status: checked ? 'checked' : 'unchecked',
onPress: onPress,
color: _checkedColor,
uncheckedColor: uncheckedColor,
disabled: disabled
}), Boolean(text) && Boolean(text?.length) && /*#__PURE__*/_jsx(Text, {
style: StyleSheet.flatten([styles.text, textStyle]),
...rest,
children: text
})]
})
})
});
});
const RadioButton = withTheme(RadioButtonComponent);
export { RadioButtonComponent };
export default RadioButton;
//# sourceMappingURL=RadioButton.js.map