@razorpay/blade
Version:
The Design System that powers Razorpay
105 lines (102 loc) • 3.91 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { useControllableState } from '../../utils/useControllable.js';
import { useId } from '../../utils/useId.js';
import '../../utils/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/logger/index.js';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useRadio = function useRadio(_ref) {
var isChecked = _ref.isChecked,
defaultChecked = _ref.defaultChecked,
isDisabled = _ref.isDisabled,
isRequired = _ref.isRequired,
hasError = _ref.hasError,
onChange = _ref.onChange,
name = _ref.name,
value = _ref.value;
var inputRef = React__default.useRef(null);
var isReactNative = getPlatformType() === 'react-native';
if (false) {
if (isChecked && defaultChecked) {
throwBladeError({
message: "Do not provide both 'isChecked' and 'defaultChecked' to useRadio. Consider if you want this component to be controlled or uncontrolled.",
moduleName: 'Radio'
});
}
}
var _useControllableState = useControllableState({
value: isChecked,
defaultValue: defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
radioState = _useControllableState2[0],
setRadioState = _useControllableState2[1];
var handleOnChange = function handleOnChange(event) {
if (isDisabled) {
event.stopPropagation();
event.preventDefault();
return;
}
setRadioState(function (checked) {
// Prevent radio to be unchecked when clicked again
// Once checked radios don't act as toggle buttons
if (checked === false) {
onChange === null || onChange === void 0 ? void 0 : onChange({
isChecked: true,
event: event,
value: value
});
return true;
}
return checked;
});
};
var state = {
isChecked: radioState,
setChecked: setRadioState
};
var idBase = useId('radio');
var helpTextId = useId("".concat(idBase, "-helptext"));
var accessibilityProps = makeAccessible({
role: 'radio',
required: Boolean(isRequired),
invalid: Boolean(hasError),
disabled: Boolean(isDisabled),
checked: radioState,
describedBy: helpTextId
});
if (isReactNative) {
return {
state: state,
inputProps: _objectSpread({
onPress: handleOnChange,
name: name,
value: value
}, accessibilityProps)
};
}
return {
state: state,
ids: {
helpTextId: helpTextId
},
inputProps: _objectSpread({
ref: inputRef,
onChange: handleOnChange,
type: 'radio',
name: name,
value: value,
checked: radioState,
disabled: isDisabled,
required: isRequired
}, accessibilityProps)
};
};
export { useRadio };
//# sourceMappingURL=useRadio.js.map