@razorpay/blade
Version:
The Design System that powers Razorpay
236 lines (233 loc) • 11.7 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useChipGroupContext } from './ChipGroupContext.js';
import { chipColorTokens, getChipInputHoverTokens, chipHorizontalPaddingTokens, chipHeightTokens, chipIconSizes, chipTextSizes } from './chipTokens.js';
import { AnimatedChip } from './AnimatedChip.web.js';
import { StyledChipWrapper } from './StyledChipWrapper.web.js';
import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../Box/BaseBox/index.js';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.web.js';
import { SelectorInput } from '../Form/Selector/SelectorInput.web.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import { useCheckbox } from '../Checkbox/useCheckbox.js';
import { useRadio } from '../Radio/useRadio.js';
import '../../utils/index.js';
import '../Typography/index.js';
import '../BladeProvider/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 { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
import { throwBladeError } from '../../utils/logger/logger.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 { isReactNative } from '../../utils/platform/isReactNative.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { Text } from '../Typography/Text/Text.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["isDisabled", "value", "children", "icon", "color", "testID", "_motionMeta", "width", "maxWidth", "minWidth"];
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 _Chip = function _Chip(_ref, ref) {
var _groupProps$state, _groupProps$defaultVa, _ref2;
var isDisabled = _ref.isDisabled,
value = _ref.value,
children = _ref.children,
Icon = _ref.icon,
color = _ref.color,
testID = _ref.testID,
_motionMeta = _ref._motionMeta,
width = _ref.width,
maxWidth = _ref.maxWidth,
minWidth = _ref.minWidth,
rest = _objectWithoutProperties(_ref, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var _useBreakpoint = useBreakpoint({
breakpoints: theme.breakpoints
}),
matchedDeviceType = _useBreakpoint.matchedDeviceType;
var groupProps = useChipGroupContext();
var isInsideGroup = !isEmpty(groupProps);
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isPressed = _React$useState2[0],
setIsPressed = _React$useState2[1];
if (false) {
if (!isInsideGroup) {
throwBladeError({
moduleName: 'Chip',
message: '<Chip /> component should only be used within the context of a <ChipGroup /> component'
});
}
}
var hasError = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.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;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
var _isChecked = groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
// Check if the defaultValue property of groupProps is undefined
var defaultChecked = typeof (groupProps === null || groupProps === void 0 ? void 0 : groupProps.defaultValue) === 'undefined' ? undefined // If undefined, defaultChecked is also undefined
: groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$defaultVa = groupProps.defaultValue) === null || _groupProps$defaultVa === void 0 ? void 0 : _groupProps$defaultVa.includes(value); // If multiple selection, check if value is in defaultValue array
var useChip = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.selectionType) === 'single' ? useRadio : useCheckbox;
var _size = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) || 'small';
var chipColor = (_ref2 = color !== null && color !== void 0 ? color : groupProps === null || groupProps === void 0 ? void 0 : groupProps.color) !== null && _ref2 !== void 0 ? _ref2 : 'primary';
var handleChange = function handleChange(_ref3) {
var isChecked = _ref3.isChecked,
value = _ref3.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);
}
};
var _useChip = useChip({
defaultChecked: defaultChecked,
isChecked: _isChecked,
isDisabled: _isDisabled,
isRequired: _isRequired,
hasError: hasError,
name: _name,
value: value,
onChange: handleChange
}),
state = _useChip.state,
inputProps = _useChip.inputProps;
var handlePointerPressedIn = React__default.useCallback(function () {
if (_isDisabled) return;
setIsPressed(true);
}, [_isDisabled]);
var handlePointerPressedOut = React__default.useCallback(function () {
if (_isDisabled) return;
setIsPressed(false);
}, [_isDisabled]);
var handleKeyboardPressedIn = React__default.useCallback(function (e) {
if (_isDisabled) return;
if (e.key === ' ') {
setIsPressed(true);
}
}, [_isDisabled]);
var handleKeyboardPressedOut = React__default.useCallback(function (e) {
if (_isDisabled) return;
if (e.key === ' ') {
setIsPressed(false);
}
}, [_isDisabled]);
var textVariant = 'unchecked';
if (_isChecked && chipColor) {
textVariant = chipColor;
}
if (_isDisabled) {
textVariant = 'disabled';
}
var chipTextColor = chipColorTokens.text[textVariant];
var chipIconColor = chipColorTokens.icon[textVariant];
var colorVariant = 'unchecked';
var stateVariant = _isDisabled ? 'disabled' : 'default';
if (_isChecked && chipColor) {
colorVariant = chipColor;
}
var chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];
var chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.Chip,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
display: isReactNative() ? 'flex' : 'inline-flex',
ref: getOuterMotionRef({
_motionMeta: _motionMeta,
ref: ref
}),
width: width,
maxWidth: maxWidth,
minWidth: minWidth,
children: /*#__PURE__*/jsx(SelectorLabel, {
componentName: MetaConstants.ChipLabel,
onTouchStart: handlePointerPressedIn,
onTouchEnd: handlePointerPressedOut,
onMouseDown: handlePointerPressedIn,
onMouseUp: handlePointerPressedOut,
onMouseOut: handlePointerPressedOut,
onKeyDown: handleKeyboardPressedIn,
onKeyUp: handleKeyboardPressedOut,
inputProps: isReactNative() ? inputProps : {},
style: {
cursor: _isDisabled ? 'not-allowed' : 'pointer',
width: '100%'
},
children: /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "column",
width: "100%",
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
flexDirection: "row",
children: [/*#__PURE__*/jsx(SelectorInput, {
hoverTokens: getChipInputHoverTokens(chipColor),
isChecked: state.isChecked,
isDisabled: _isDisabled,
inputProps: inputProps,
hasError: hasError,
ref: getInnerMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}), /*#__PURE__*/jsx(AnimatedChip, {
borderColor: chipBorderColor,
isDisabled: _isDisabled,
isPressed: isPressed,
isDesktop: matchedDeviceType === 'desktop',
children: /*#__PURE__*/jsxs(StyledChipWrapper, {
borderColor: chipBorderColor,
isChecked: _isChecked,
isDisabled: _isDisabled,
color: chipColor,
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
backgroundColor: chipBackgroundColor,
borderRadius: "max",
borderWidth: ['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin',
paddingLeft: chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[_size],
paddingRight: chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[_size],
height: makeSize(chipHeightTokens[_size]),
gap: "spacing.3",
width: "100%",
children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
display: "flex",
children: /*#__PURE__*/jsx(Icon, {
color: chipIconColor,
size: chipIconSizes[_size]
})
}) : null, children ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, chipTextSizes[_size]), {}, {
truncateAfterLines: 1,
color: chipTextColor,
children: children
})) : null]
})
})]
})
})
})
}));
};
var Chip = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Chip), {
displayName: 'Chip'
});
export { Chip };
//# sourceMappingURL=Chip.js.map