@devrue/rn-select
Version:
Custom typescript only select component for react native
69 lines (68 loc) • 2.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Checkbox;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _useStyles = _interopRequireDefault(require("../hooks/useStyles"));
var _CheckIcon = _interopRequireDefault(require("../icons/CheckIcon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
function Checkbox({
size = 'sm',
checked,
inactiveColor = '#c5c5c5',
activeColor = '#1616FF',
checkColor = '#fff',
...rest
}) {
const styles = (0, _useStyles.default)(({
tokens
}) => ({
container: _reactNative.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: _reactNative.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 = _reactNative.Platform.select({
ios: checked ? activeColor : '#0000',
default: checked ? checkColor : '#0000'
});
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({}, rest, {
role: "checkbox"
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.container
}, /*#__PURE__*/_react.default.createElement(_CheckIcon.default, {
stroke: stroke,
style: styles.icon
})));
}
//# sourceMappingURL=Checkbox.js.map