@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
168 lines (167 loc) • 5.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RadioButtonInput = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _index = require("../../_internal/style-sheets/index.js");
var _index2 = require("../../carbon-style-sheet/index.js");
var _index3 = require("../../contexts/index.js");
var _jsxRuntime = require("react/jsx-runtime");
const RadioButtonInput = exports.RadioButtonInput = /*#__PURE__*/(0, _react.forwardRef)(function RadioButtonInput({
defaultChecked,
checked: checkedProp,
value,
interactiveState = 'normal',
role = 'radio',
onChange,
onBlur,
onFocus,
onPress,
style,
...props
}, forwardedRef) {
(0, _react.useContext)(_index3.ThemeContext);
const viewRef = (0, _react.useRef)(null),
ref = (0, _react.useRef)({
onChangeEffect: false,
checked: defaultChecked ?? false
}),
[isFocused, setIsFocused] = (0, _react.useState)(false),
[checkedSelf, setCheckedSelf] = (0, _react.useState)(ref.current.checked),
controlled = typeof checkedProp === 'boolean',
checked = controlled ? !!checkedProp : checkedSelf,
blurHandler = (0, _react.useCallback)(event => {
onBlur?.(event);
setIsFocused(false);
}, [onBlur]),
focusHandler = (0, _react.useCallback)(event => {
onFocus?.(event);
setIsFocused(true);
}, [onFocus]),
pressHandler = (0, _react.useCallback)(event => {
onPress?.(event);
if (!controlled) {
ref.current.onChangeEffect = true;
setCheckedSelf(true);
} else {
onChange?.(!ref.current.checked, value);
}
}, [controlled, onPress, onChange, value]);
(0, _react.useEffect)(() => {
if (ref.current.onChangeEffect) {
ref.current.onChangeEffect = false;
ref.current.checked = checked;
onChange?.(ref.current.checked, value);
}
}, [checked, value, onChange]);
(0, _react.useImperativeHandle)(forwardedRef, () => {
return Object.assign(viewRef.current ?? {}, {
get checked() {
return checked;
},
setChecked(checked_) {
if (!controlled) {
ref.current.onChangeEffect = true;
if (typeof checked_ === 'boolean') {
ref.current.checked = checked_;
} else {
ref.current.checked = checked_(ref.current.checked);
}
setCheckedSelf(ref.current.checked);
}
}
});
}, [controlled, checked]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
...props,
role: role,
disabled: interactiveState === 'disabled',
onBlur: blurHandler,
onFocus: focusHandler,
onPress: pressHandler,
style: [_index.FlexStyleSheet.items_center, _index.FlexStyleSheet.justify_center, _index.CommonStyleSheet.relative, baseStyle.radioButton, mapInteractiveStateStyle_[`${interactiveState}_${checked}_container`], style],
ref: viewRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [_index.CommonStyleSheet.absolute, _index.CommonStyleSheet.overflow_hidden, baseStyle.focusBox, isFocused ? carbonStyle.focusBox : null]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [_index.FlexStyleSheet.flex_initial, baseStyle.marker, checked ? mapInteractiveStateStyle_[`${interactiveState}_true_marker`] : null]
})]
});
});
const size = 18,
baseStyle = _reactNative.StyleSheet.create({
radioButton: {
width: size,
height: size,
borderRadius: size,
borderWidth: 1
},
focusBox: {
width: size + 6,
height: size + 6,
borderRadius: size + 3,
borderWidth: 2,
borderColor: 'transparent'
},
marker: {
width: size / 2,
height: size / 2,
borderRadius: size,
overflow: 'hidden'
}
}),
carbonStyle = _index2.CarbonStyleSheet.create({
focusBox: {
borderColor: _index2.CarbonStyleSheet.color.focus
}
}),
mapInteractiveStateStyle_ = _index2.CarbonStyleSheet.create({
normal_true_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_primary
},
normal_true_marker: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_primary
},
normal_false_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_primary
},
disabled_true_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_disabled
},
disabled_true_marker: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_disabled
},
disabled_false_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_disabled
},
error_true_container: {
borderColor: _index2.CarbonStyleSheet.color.support_error
},
error_true_marker: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_primary
},
error_false_container: {
borderColor: _index2.CarbonStyleSheet.color.support_error
},
read_only_true_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_disabled
},
read_only_true_marker: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_primary
},
read_only_false_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_disabled
},
warning_true_container: {
borderColor: _index2.CarbonStyleSheet.color.icon_primary
},
warning_true_marker: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_primary
},
warning_false_container: {
backgroundColor: _index2.CarbonStyleSheet.color.icon_primary
}
});
//# sourceMappingURL=RadioButtonInput.js.map