@razorpay/blade
Version:
The Design System that powers Razorpay
213 lines (210 loc) • 9.2 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import styled from 'styled-components';
import { getBaseInputStyles } from './baseInputStyles.js';
import getTextStyles from '../../Typography/Text/getTextStyles.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../Typography/index.js';
import { jsx } from 'react/jsx-runtime';
import { Text } from '../../Typography/Text/Text.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["name", "isDisabled", "isRequired", "maxCharacters", "handleOnFocus", "handleOnChange", "handleOnBlur", "handleOnInput", "handleOnKeyDown", "handleOnClick", "keyboardType", "keyboardReturnKeyType", "autoCompleteSuggestionType", "accessibilityProps", "setCurrentInteraction", "numberOfLines", "type", "hasPopup", "shouldIgnoreBlurAnimation", "autoCapitalize", "$size", "valueComponentType", "tabIndex"];
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 getWebInputStyles = function getWebInputStyles(props) {
return _objectSpread(_objectSpread({}, getBaseInputStyles({
isDisabled: props.disabled,
theme: props.theme,
validationState: props.validationState,
leadingIcon: props.leadingIcon,
prefix: props.prefix,
trailingInteractionElement: props.trailingInteractionElement,
leadingInteractionElement: props.leadingInteractionElement,
suffix: props.suffix,
trailingIcon: props.trailingIcon,
textAlign: props.textAlign,
isTextArea: props.isTextArea,
hasTags: props.hasTags,
isDropdownTrigger: props.isDropdownTrigger,
size: props.$size,
valueComponentType: props.valueComponentType,
isTableInputCell: props.isTableInputCell
})), {}, {
outline: 'none',
border: 'none',
'::placeholder': _objectSpread(_objectSpread({}, getTextStyles({
size: props.$size,
variant: 'body',
weight: 'regular',
color: 'surface.text.gray.disabled',
theme: props.theme
})), {}, {
textAlign: props.textAlign
}),
':focus': {
outline: 'none'
},
cursor: props.disabled ? 'not-allowed' : 'auto'
});
};
var StyledBaseNativeInput = /*#__PURE__*/styled.input.withConfig({
displayName: "StyledBaseInputweb__StyledBaseNativeInput",
componentId: "hsusrk-0"
})(getWebInputStyles);
var StyledBaseNativeButton = /*#__PURE__*/styled.button.withConfig({
displayName: "StyledBaseInputweb__StyledBaseNativeButton",
componentId: "hsusrk-1"
})(function (props) {
return _objectSpread({}, getWebInputStyles(props));
});
var autoCompleteSuggestionTypeMap = {
none: 'off',
on: 'on',
name: 'name',
email: 'email',
username: 'username',
password: 'current-password',
newPassword: 'new-password',
oneTimeCode: 'one-time-code',
telephone: 'tel',
postalCode: 'postal-code',
countryName: 'country',
creditCardNumber: 'cc-number',
creditCardCSC: 'cc-csc',
creditCardExpiry: 'cc-exp',
creditCardExpiryMonth: 'cc-exp-month',
creditCardExpiryYear: 'cc-exp-year'
};
var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
var name = _ref.name,
isDisabled = _ref.isDisabled,
isRequired = _ref.isRequired,
maxCharacters = _ref.maxCharacters,
handleOnFocus = _ref.handleOnFocus,
handleOnChange = _ref.handleOnChange,
handleOnBlur = _ref.handleOnBlur,
handleOnInput = _ref.handleOnInput,
handleOnKeyDown = _ref.handleOnKeyDown,
handleOnClick = _ref.handleOnClick,
keyboardType = _ref.keyboardType,
keyboardReturnKeyType = _ref.keyboardReturnKeyType,
autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
accessibilityProps = _ref.accessibilityProps,
setCurrentInteraction = _ref.setCurrentInteraction,
numberOfLines = _ref.numberOfLines,
type = _ref.type,
hasPopup = _ref.hasPopup,
shouldIgnoreBlurAnimation = _ref.shouldIgnoreBlurAnimation,
autoCapitalize = _ref.autoCapitalize,
$size = _ref.$size,
valueComponentType = _ref.valueComponentType,
tabIndex = _ref.tabIndex,
props = _objectWithoutProperties(_ref, _excluded);
var commonProps = {
onBlur: function onBlur(event) {
// In certain cases like SelectInput, we want to ignore the blur animation when option item is clicked.
// The selectinput should always look like it is in focus otherwise it triggers blur + focus again which can cause flicker
if (!shouldIgnoreBlurAnimation) {
setCurrentInteraction('default');
}
handleOnBlur === null || handleOnBlur === void 0 ? void 0 : handleOnBlur({
name: name,
value: event
});
},
onFocus: function onFocus(event) {
setCurrentInteraction('focus');
handleOnFocus === null || handleOnFocus === void 0 ? void 0 : handleOnFocus({
name: name,
value: event
});
},
onKeyDown: function onKeyDown(event) {
handleOnKeyDown === null || handleOnKeyDown === void 0 ? void 0 : handleOnKeyDown({
name: name,
key: event.key,
code: event.code,
event: event
});
},
disabled: isDisabled,
enterKeyHint: keyboardReturnKeyType === 'default' ? 'enter' : keyboardReturnKeyType,
autoComplete: autoCompleteSuggestionType ? autoCompleteSuggestionTypeMap[autoCompleteSuggestionType] : undefined
};
return props.as === 'button' ? /*#__PURE__*/jsx(StyledBaseNativeButton
// @ts-expect-error: TS doesnt understand that this will always be `button`
, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref,
name: name,
type: "button",
onClick: function onClick(event) {
if (props.isDropdownTrigger) {
// dropdown triggers have click event on outer container as well on web to handle outer padding clicks of input
// we don't want the clicks to be called twice in such cases so we stop propogation if this click has happened
event.stopPropagation();
}
handleOnClick === null || handleOnClick === void 0 ? void 0 : handleOnClick({
name: name,
value: event
});
},
$size: $size,
valueComponentType: valueComponentType
}, commonProps), props), accessibilityProps), {}, {
value: props.value,
tabIndex: tabIndex,
children: /*#__PURE__*/jsx(Text, {
color: props.value && !isDisabled ? 'surface.text.gray.subtle' : 'surface.text.gray.disabled',
truncateAfterLines: 1,
textAlign: props.textAlign,
size: $size,
children: props.value ? props.value : props.placeholder
})
})) : /*#__PURE__*/jsx(StyledBaseNativeInput
// @ts-expect-error: TS doesnt understand that this will always be `input`
, _objectSpread(_objectSpread(_objectSpread({
ref: ref,
name: name,
type: type === 'telephone' ? 'tel' : type,
required: isRequired,
maxLength: maxCharacters
// In Tagged TextArea, tags take up their own space so we need to define height instead of relying on HTML rows
,
rows: props.isTextArea && props.isDropdownTrigger ? 1 : numberOfLines,
numberOfLines: numberOfLines,
inputMode: keyboardType === 'telephone' ? 'tel' : keyboardType,
onChange: function onChange(event) {
return handleOnChange === null || handleOnChange === void 0 ? void 0 : handleOnChange({
name: name,
value: event
});
},
onInput: function onInput(event) {
handleOnInput === null || handleOnInput === void 0 ? void 0 : handleOnInput({
name: name,
value: event
});
},
onClick: function onClick(event) {
if (props.isDropdownTrigger) {
// dropdown triggers have click event on outer container as well on web to handle outer padding clicks of input
// we don't want the clicks to be called twice in such cases so we stop propogation if this click has happened
event.stopPropagation();
}
handleOnClick === null || handleOnClick === void 0 ? void 0 : handleOnClick({
name: name,
value: event
});
},
autoCapitalize: autoCapitalize,
$size: $size,
valueComponentType: valueComponentType,
tabIndex: tabIndex
}, commonProps), props), accessibilityProps));
};
var StyledBaseInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_StyledBaseInput), {
displayName: 'StyledBaseInput'
});
export { StyledBaseInput };
//# sourceMappingURL=StyledBaseInput.web.js.map