@razorpay/blade
Version:
The Design System that powers Razorpay
218 lines (215 loc) • 10.1 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 '../BaseInput/index.js';
import { useTaggedInput } from '../BaseInput/useTaggedInput.js';
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
import '../../Icons/index.js';
import '../../Button/IconButton/index.js';
import '../../Box/BaseBox/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../Form/CharacterCounter/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/index.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import { hintMarginTop } from '../../Form/formTokens.js';
import { jsx } from 'react/jsx-runtime';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { IconButton } from '../../Button/IconButton/IconButton.js';
import CloseIcon from '../../Icons/CloseIcon/CloseIcon.js';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["label", "accessibilityLabel", "labelPosition", "necessityIndicator", "errorText", "helpText", "successText", "validationState", "defaultValue", "isDisabled", "isRequired", "name", "onChange", "onFocus", "onBlur", "onSubmit", "onKeyDown", "placeholder", "value", "maxCharacters", "showClearButton", "onClearButtonClick", "autoFocus", "numberOfLines", "testID", "size", "isTaggedInput", "tags", "onTagChange"];
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; }
// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var isReactNative = function isReactNative(_textInputRef) {
return getPlatformType() === 'react-native';
};
var _TextArea = function _TextArea(_ref, ref) {
var label = _ref.label,
accessibilityLabel = _ref.accessibilityLabel,
labelPosition = _ref.labelPosition,
necessityIndicator = _ref.necessityIndicator,
errorText = _ref.errorText,
helpText = _ref.helpText,
successText = _ref.successText,
validationState = _ref.validationState,
defaultValue = _ref.defaultValue,
isDisabled = _ref.isDisabled,
isRequired = _ref.isRequired,
name = _ref.name,
_onChange = _ref.onChange,
_onFocus = _ref.onFocus,
_onBlur = _ref.onBlur,
onSubmit = _ref.onSubmit,
_onKeyDown = _ref.onKeyDown,
placeholder = _ref.placeholder,
value = _ref.value,
maxCharacters = _ref.maxCharacters,
showClearButton = _ref.showClearButton,
onClearButtonClick = _ref.onClearButtonClick,
autoFocus = _ref.autoFocus,
_ref$numberOfLines = _ref.numberOfLines,
numberOfLines = _ref$numberOfLines === void 0 ? 2 : _ref$numberOfLines,
testID = _ref.testID,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
isTaggedInput = _ref.isTaggedInput,
tags = _ref.tags,
onTagChange = _ref.onTagChange,
rest = _objectWithoutProperties(_ref, _excluded);
var inputRef = React__default.useRef(null);
var mergedRef = useMergeRefs(ref, inputRef);
var _React$useState = React__default.useState(autoFocus !== null && autoFocus !== void 0 ? autoFocus : false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isInputFocussed = _React$useState2[0],
setIsInputFocussed = _React$useState2[1];
var _useTaggedInput = useTaggedInput({
tags: tags,
onTagChange: onTagChange,
isDisabled: isDisabled,
inputRef: inputRef,
isTaggedInput: isTaggedInput,
name: name,
value: value,
onChange: _onChange
}),
activeTagIndex = _useTaggedInput.activeTagIndex,
setActiveTagIndex = _useTaggedInput.setActiveTagIndex,
getTags = _useTaggedInput.getTags,
handleTaggedInputKeydown = _useTaggedInput.handleTaggedInputKeydown,
handleTaggedInputChange = _useTaggedInput.handleTaggedInputChange,
handleTagsClear = _useTaggedInput.handleTagsClear;
var _React$useState3 = React__default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
shouldShowClearButton = _React$useState4[0],
setShouldShowClearButton = _React$useState4[1];
React__default.useEffect(function () {
setShouldShowClearButton(Boolean(showClearButton && ((value === null || value === void 0 ? void 0 : value.length) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length))));
}, [showClearButton, defaultValue, value]);
var renderInteractionElement = function renderInteractionElement() {
if (shouldShowClearButton) {
return /*#__PURE__*/jsx(BaseBox, {
paddingTop: "spacing.3",
marginTop: "spacing.1",
children: /*#__PURE__*/jsx(IconButton, {
icon: CloseIcon,
accessibilityLabel: "Clear textarea content",
onClick: function onClick() {
var _inputRef$current;
if (isEmpty(value) && inputRef.current) {
// when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
if (isReactNative(inputRef.current)) {
inputRef.current.clear();
inputRef.current.focus();
} else if (inputRef.current instanceof HTMLTextAreaElement) {
inputRef.current.value = '';
inputRef.current.focus();
}
}
handleTagsClear();
// if the input field is controlled just call the click handler and the value change shall be left upto the consumer
onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
setShouldShowClearButton(false);
}
})
});
}
return null;
};
return /*#__PURE__*/jsx(BaseInput, _objectSpread({
as: "textarea",
id: "textarea",
maxTagRows: "multiple",
componentName: MetaConstants.TextArea,
autoFocus: autoFocus,
ref: mergedRef,
label: label,
tags: isTaggedInput ? getTags({
size: size
}) : undefined,
activeTagIndex: activeTagIndex,
setActiveTagIndex: setActiveTagIndex,
isDropdownTrigger: isTaggedInput,
showAllTags: isInputFocussed,
accessibilityLabel: accessibilityLabel,
hideLabelText: !Boolean(label),
labelPosition: labelPosition,
necessityIndicator: necessityIndicator,
errorText: errorText,
helpText: helpText,
successText: successText,
validationState: validationState,
isDisabled: isDisabled,
isRequired: isRequired,
name: name,
maxCharacters: maxCharacters,
placeholder: placeholder,
trailingInteractionElement: renderInteractionElement(),
defaultValue: defaultValue,
value: value,
numberOfLines: numberOfLines,
onChange: function onChange(_ref2) {
var name = _ref2.name,
value = _ref2.value;
if (showClearButton && value !== null && value !== void 0 && value.length) {
// show the clear button when the user starts typing in
setShouldShowClearButton(true);
}
if (shouldShowClearButton && !(value !== null && value !== void 0 && value.length)) {
// hide the clear button when the input field is empty
setShouldShowClearButton(false);
}
handleTaggedInputChange({
name: name,
value: value
});
_onChange === null || _onChange === void 0 ? void 0 : _onChange({
name: name,
value: value
});
},
onFocus: function onFocus(e) {
setIsInputFocussed(true);
_onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
},
onBlur: function onBlur(e) {
setIsInputFocussed(false);
_onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
},
onKeyDown: function onKeyDown(e) {
handleTaggedInputKeydown(e);
_onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown({
name: e.name,
value: e.event.currentTarget.value,
event: e.event
});
},
onSubmit: onSubmit,
trailingFooterSlot: function trailingFooterSlot(value) {
var _value$length;
return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
marginTop: hintMarginTop[size],
marginRight: "spacing.1",
children: /*#__PURE__*/jsx(CharacterCounter, {
currentCount: (_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0,
maxCount: maxCharacters
})
}) : null;
},
testID: testID,
size: size
}, rest));
};
var TextArea = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_TextArea), {
displayName: 'TextArea'
});
export { TextArea };
//# sourceMappingURL=TextArea.js.map