@razorpay/blade
Version:
The Design System that powers Razorpay
140 lines (137 loc) • 6.7 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useMemo } from 'react';
import { StyledInputGroup } from './StyledInputGroup.js';
import { InputGroupProvider } from './InputGroupContext.js';
import { formHintLeftLabelMarginLeft } from '../Input/BaseInput/baseInputTokens.js';
import '../Box/BaseBox/index.js';
import '../BladeProvider/index.js';
import '../../utils/index.js';
import { useFormId } from '../Form/useFormId.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { FormLabel } from '../Form/FormLabel.js';
import { FormHint } from '../Form/FormHint.js';
import '../../utils/makeSize/index.js';
import { useId } from '../../utils/useId.js';
import { getHintType } from '../Input/BaseInput/BaseInput.js';
import { getOuterMotionRef } from '../../utils/getMotionRefs.js';
import '../../utils/assignWithoutSideEffects/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.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 { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["label", "labelPosition", "size", "helpText", "errorText", "successText", "validationState", "isDisabled", "children", "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 _InputGroup = function _InputGroup(_ref, ref) {
var label = _ref.label,
_ref$labelPosition = _ref.labelPosition,
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
helpText = _ref.helpText,
errorText = _ref.errorText,
successText = _ref.successText,
_ref$validationState = _ref.validationState,
validationState = _ref$validationState === void 0 ? 'none' : _ref$validationState,
_ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
children = _ref.children,
testID = _ref.testID,
_motionMeta = _ref._motionMeta,
rest = _objectWithoutProperties(_ref, _excluded);
var contextValue = useMemo(function () {
return {
isInsideInputGroup: true,
size: size,
isDisabled: isDisabled
};
}, [size, isDisabled]);
var _useFormId = useFormId('input-group'),
inputId = _useFormId.inputId,
helpTextId = _useFormId.helpTextId,
errorTextId = _useFormId.errorTextId,
successTextId = _useFormId.successTextId;
var idBase = useId('input-group');
var labelId = "".concat(idBase, "-label");
var _useTheme = useTheme(),
theme = _useTheme.theme;
var _useBreakpoint = useBreakpoint({
breakpoints: theme.breakpoints
}),
matchedDeviceType = _useBreakpoint.matchedDeviceType;
var isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';
var willRenderHintText = Boolean(helpText) || validationState === 'success' && Boolean(successText) || validationState === 'error' && Boolean(errorText);
var totalInputRows = React__default.Children.count(children);
return /*#__PURE__*/jsx(InputGroupProvider, {
value: contextValue,
children: /*#__PURE__*/jsx(StyledInputGroup, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: getOuterMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, metaAttribute({
name: MetaConstants.InputGroup,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
width: "100%",
"data-testid": testID,
role: "group",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: isLabelLeftPositioned ? 'row' : 'column',
alignItems: isLabelLeftPositioned && totalInputRows < 2 ? 'center' : undefined,
children: [label && /*#__PURE__*/jsx(FormLabel, {
as: "label",
position: labelPosition,
id: labelId,
htmlFor: inputId,
size: size,
children: label
}), /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "column",
children: children
})]
}), willRenderHintText && /*#__PURE__*/jsx(BaseBox, {
marginLeft: makeSize(label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0),
children: /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
children: /*#__PURE__*/jsx(FormHint, {
type: getHintType({
validationState: validationState,
hasHelpText: Boolean(helpText)
}),
helpText: helpText,
errorText: errorText,
successText: successText,
helpTextId: helpTextId,
errorTextId: errorTextId,
successTextId: successTextId,
size: size
})
})
})]
})
}))
});
};
var InputGroup = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_InputGroup), {
displayName: 'InputGroup',
componentId: 'InputGroup'
});
export { InputGroup };
//# sourceMappingURL=InputGroup.web.js.map