@razorpay/blade
Version:
The Design System that powers Razorpay
151 lines (147 loc) • 7.66 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useRadio } from './useRadio.js';
import { RadioIcon } from './RadioIcon/RadioIcon.js';
import { useRadioGroupContext } from './RadioGroup/RadioContext.js';
import { radioSizes, radioHoverTokens } from './radioTokens.js';
import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.web.js';
import '../Box/BaseBox/index.js';
import { SelectorTitle } from '../Form/Selector/SelectorTitle.js';
import { SelectorSupportText } from '../Form/Selector/SelectorSupportText.js';
import { SelectorInput } from '../Form/Selector/SelectorInput.web.js';
import '../Box/styledProps/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/logger/index.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["value", "children", "helpText", "isDisabled", "size", "testID", "_motionMeta"];
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 _Radio = function _Radio(_ref, ref) {
var _groupProps$state, _groupProps$size;
var value = _ref.value,
children = _ref.children,
helpText = _ref.helpText,
isDisabled = _ref.isDisabled,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
testID = _ref.testID,
_motionMeta = _ref._motionMeta,
rest = _objectWithoutProperties(_ref, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var groupProps = useRadioGroupContext();
var isInsideGroup = !isEmpty(groupProps);
if (false) {
if (!isInsideGroup) {
throwBladeError({
moduleName: 'Radio',
message: 'Cannot use <Radio /> outside of <RadioGroup />'
});
}
}
var isChecked = groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
var defaultChecked = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.defaultValue) === undefined ? undefined : (groupProps === null || groupProps === void 0 ? void 0 : groupProps.defaultValue) === value;
var validationState = groupProps === null || groupProps === void 0 ? void 0 : groupProps.validationState;
var hasError = validationState === 'error';
var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
var _isRequired = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required';
var name = groupProps === null || groupProps === void 0 ? void 0 : groupProps.name;
var showHelpText = helpText;
var isReactNative = getPlatformType() === 'react-native';
var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
var handleChange = function handleChange(_ref2) {
var isChecked = _ref2.isChecked,
value = _ref2.value,
event = _ref2.event;
if (isChecked) {
var _groupProps$state2;
groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state2 = groupProps.state) === null || _groupProps$state2 === void 0 ? void 0 : _groupProps$state2.setValue(value, event);
} else {
var _groupProps$state3;
groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state3 = groupProps.state) === null || _groupProps$state3 === void 0 ? void 0 : _groupProps$state3.removeValue();
}
};
var _useRadio = useRadio({
defaultChecked: defaultChecked,
isChecked: isChecked,
hasError: hasError,
isDisabled: _isDisabled,
isRequired: _isRequired,
name: name,
value: value,
onChange: handleChange
}),
state = _useRadio.state,
ids = _useRadio.ids,
inputProps = _useRadio.inputProps;
// radio icon's size & margin + margin-left of SelectorTitle which is 2
var helpTextLeftSpacing = makeSize(radioSizes.icon[size].width + theme.spacing[3]);
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
ref: getOuterMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, getStyledProps(rest)), {}, {
children: /*#__PURE__*/jsx(SelectorLabel, {
componentName: MetaConstants.RadioLabel,
inputProps: isReactNative ? inputProps : {},
testID: testID,
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
flexDirection: "row",
children: [/*#__PURE__*/jsx(SelectorInput, _objectSpread({
hoverTokens: radioHoverTokens,
isChecked: state.isChecked,
isDisabled: _isDisabled,
hasError: hasError,
inputProps: inputProps,
ref: getInnerMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, makeAnalyticsAttribute(rest))), /*#__PURE__*/jsx(RadioIcon, {
size: _size,
isChecked: state.isChecked,
isDisabled: _isDisabled,
isNegative: hasError
}), children ? /*#__PURE__*/jsx(SelectorTitle, {
size: _size,
isDisabled: _isDisabled,
children: children
}) : null]
}), showHelpText && /*#__PURE__*/jsx(BaseBox, {
marginLeft: helpTextLeftSpacing,
children: /*#__PURE__*/jsx(SelectorSupportText, {
size: _size,
id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
children: helpText
})
})]
})
})
}));
};
var Radio = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Radio), {
displayName: 'Radio'
});
export { Radio };
//# sourceMappingURL=Radio.js.map