@razorpay/blade
Version:
The Design System that powers Razorpay
198 lines (192 loc) • 10.2 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext.js';
import './CheckboxIcon/index.js';
import { useCheckbox } from './useCheckbox.js';
import { checkboxSizes, checkboxHoverTokens } from './checkboxTokens.js';
import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../Box/BaseBox/index.js';
import '../Form/index.js';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.web.js';
import { SelectorTitle } from '../Form/Selector/SelectorTitle.js';
import { SelectorSupportText } from '../Form/Selector/SelectorSupportText.js';
import { SelectorInput } from '../Form/Selector/SelectorInput.web.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import '../../utils/index.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import useTheme from '../BladeProvider/useTheme.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { CheckboxIcon } from './CheckboxIcon/CheckboxIcon.js';
import { FormHint } from '../Form/FormHint.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["defaultChecked", "validationState", "isChecked", "isDisabled", "isIndeterminate", "isRequired", "name", "onChange", "value", "children", "helpText", "errorText", "size", "tabIndex", "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 _Checkbox = function _Checkbox(_ref, ref) {
var _groupProps$state, _groupProps$size;
var defaultChecked = _ref.defaultChecked,
validationState = _ref.validationState,
isChecked = _ref.isChecked,
isDisabled = _ref.isDisabled,
isIndeterminate = _ref.isIndeterminate,
isRequired = _ref.isRequired,
name = _ref.name,
onChange = _ref.onChange,
value = _ref.value,
children = _ref.children,
helpText = _ref.helpText,
errorText = _ref.errorText,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
tabIndex = _ref.tabIndex,
testID = _ref.testID,
_motionMeta = _ref._motionMeta,
rest = _objectWithoutProperties(_ref, _excluded);
var groupProps = useCheckboxGroupContext();
// ban certain props in checkbox while inside group
var hasValidationState = !isUndefined(validationState);
var hasName = !isUndefined(name);
var hasDefaultChecked = !isUndefined(defaultChecked);
var hasIsChecked = !isUndefined(isChecked);
var hasOnChange = !isUndefined(onChange);
if (false) {
if ((hasValidationState || hasName || hasDefaultChecked || hasIsChecked || hasOnChange) && !isEmpty(groupProps)) {
var props = [hasValidationState ? 'validationState' : undefined, hasName ? 'name' : undefined, hasDefaultChecked ? 'defaultChecked' : undefined, hasIsChecked ? 'isChecked' : undefined, hasOnChange ? 'onChange' : undefined].filter(Boolean).join(',');
throwBladeError({
message: "Cannot set `".concat(props, "` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself"),
moduleName: 'Checkbox'
});
}
// mandate value prop when using inside group
if (!value && !isEmpty(groupProps)) {
throw new Error("[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n <CheckboxGroup>\n <Checkbox value=\"apple\">Apple</Checkbox>\n <Checkbox value=\"mango\">Mango</Checkbox>\n </CheckboxGroup>\n ");
}
}
var _validationState = validationState !== null && validationState !== void 0 ? 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 = Boolean(isRequired || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required');
var _name = name !== null && name !== void 0 ? name : groupProps === null || groupProps === void 0 ? void 0 : groupProps.name;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
var _isChecked = isChecked !== null && isChecked !== void 0 ? isChecked : groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var formHintSize = {
small: 'medium',
medium: 'medium',
large: 'large'
};
var showSupportingText = helpText;
var handleChange = function handleChange(_ref2) {
var isChecked = _ref2.isChecked,
event = _ref2.event,
value = _ref2.value;
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.addValue(value);
} 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(value);
}
onChange === null || onChange === void 0 ? void 0 : onChange({
isChecked: isChecked,
event: event,
value: value
});
};
var _useCheckbox = useCheckbox({
defaultChecked: defaultChecked,
isChecked: _isChecked,
isIndeterminate: isIndeterminate,
hasError: _hasError,
hasHelperText: Boolean(showSupportingText),
isDisabled: _isDisabled,
isRequired: _isRequired,
name: _name,
value: value,
onChange: handleChange
}),
state = _useCheckbox.state,
ids = _useCheckbox.ids,
inputProps = _useCheckbox.inputProps;
// Checkbox icon's size & margin + margin-left of SelectorTitle which is 2
var helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
ref: getOuterMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, metaAttribute({
name: MetaConstants.Checkbox,
testID: testID
})), getStyledProps(rest)), {}, {
children: [/*#__PURE__*/jsx(SelectorLabel, {
componentName: MetaConstants.CheckboxLabel,
inputProps: state.isReactNative ? inputProps : {},
style: {
cursor: isDisabled ? 'not-allowed' : 'pointer'
},
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
children: [/*#__PURE__*/jsx(SelectorInput, _objectSpread({
hoverTokens: checkboxHoverTokens,
isChecked: state.isChecked || Boolean(isIndeterminate),
isDisabled: _isDisabled,
hasError: _hasError,
inputProps: inputProps,
tabIndex: tabIndex,
ref: getInnerMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, makeAnalyticsAttribute(rest))), /*#__PURE__*/jsx(CheckboxIcon, {
size: _size,
isChecked: state.isChecked,
isIndeterminate: isIndeterminate,
isDisabled: _isDisabled,
isNegative: _hasError
}), children ? /*#__PURE__*/jsx(SelectorTitle, {
size: _size,
isDisabled: _isDisabled,
children: children
}) : null]
}), showSupportingText ? /*#__PURE__*/jsx(BaseBox, {
marginLeft: helpTextLeftSpacing,
children: /*#__PURE__*/jsx(SelectorSupportText, {
size: _size,
id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
children: helpText
})
}) : null]
})
}), /*#__PURE__*/jsx(FormHint, {
size: formHintSize[_size],
errorText: errorText,
errorTextId: ids === null || ids === void 0 ? void 0 : ids.errorTextId,
type: validationState === 'error' ? 'error' : 'help'
})]
}));
};
var Checkbox = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Checkbox), {
displayName: 'Checkbox'
});
export { Checkbox };
//# sourceMappingURL=Checkbox.js.map