@devrue/rn-select
Version:
Custom typescript only select component for react native
64 lines • 2.04 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { View } from 'react-native';
import useStyles from '../hooks/useStyles';
import { Pressable } from 'react-native';
import CheckIcon from '../icons/CheckIcon';
import { Platform } from 'react-native';
export default function Checkbox({
size = 'sm',
checked,
inactiveColor = '#c5c5c5',
activeColor = '#1616FF',
checkColor = '#fff',
...rest
}) {
const styles = useStyles(({
tokens
}) => ({
container: Platform.select({
ios: {
width: tokens.size[size],
height: tokens.size[size],
justifyContent: 'center',
alignItems: 'center'
},
default: {
width: tokens.size[size],
height: tokens.size[size],
borderWidth: 1,
borderColor: inactiveColor,
borderRadius: tokens.size[size] / 4,
justifyContent: 'center',
alignItems: 'center',
...(checked && {
borderColor: activeColor,
backgroundColor: activeColor
})
}
}),
icon: Platform.select({
ios: {
width: tokens.size[size],
height: tokens.size[size]
},
default: {
width: tokens.size[size] - 4,
height: tokens.size[size] - 4
}
})
}), [size, checked]);
const stroke = Platform.select({
ios: checked ? activeColor : '#0000',
default: checked ? checkColor : '#0000'
});
return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
role: "checkbox"
}), /*#__PURE__*/React.createElement(View, {
style: styles.container
}, /*#__PURE__*/React.createElement(CheckIcon, {
stroke: stroke,
style: styles.icon
})));
}
//# sourceMappingURL=Checkbox.js.map