@razorpay/blade
Version:
The Design System that powers Razorpay
181 lines (177 loc) • 8.63 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, { useState } from 'react';
import '../BaseInput/index.js';
import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
import '../../Icons/index.js';
import '../../Button/IconButton/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../Box/BaseBox/index.js';
import '../../Spinner/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/index.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
import { useDropdown } from '../../Dropdown/useDropdown.js';
import { jsx } from 'react/jsx-runtime';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import { Spinner } from '../../Spinner/Spinner/Spinner.js';
import { IconButton } from '../../Button/IconButton/IconButton.js';
import CloseIcon from '../../Icons/CloseIcon/CloseIcon.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import SearchIcon from '../../Icons/SearchIcon/SearchIcon.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["label", "accessibilityLabel", "labelPosition", "placeholder", "defaultValue", "name", "value", "onChange", "onClick", "onFocus", "onBlur", "onSubmit", "isDisabled", "helpText", "onClearButtonClick", "isLoading", "autoCapitalize", "autoFocus", "testID", "size", "showSearchIcon"];
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 SearchInput 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 _SearchInput = function _SearchInput(_ref, ref) {
var label = _ref.label,
accessibilityLabel = _ref.accessibilityLabel,
_ref$labelPosition = _ref.labelPosition,
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
placeholder = _ref.placeholder,
defaultValue = _ref.defaultValue,
name = _ref.name,
value = _ref.value,
_onChange = _ref.onChange,
_onClick = _ref.onClick,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
onSubmit = _ref.onSubmit,
isDisabled = _ref.isDisabled,
helpText = _ref.helpText,
onClearButtonClick = _ref.onClearButtonClick,
isLoading = _ref.isLoading,
autoCapitalize = _ref.autoCapitalize,
autoFocus = _ref.autoFocus,
testID = _ref.testID,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
_ref$showSearchIcon = _ref.showSearchIcon,
showSearchIcon = _ref$showSearchIcon === void 0 ? true : _ref$showSearchIcon,
rest = _objectWithoutProperties(_ref, _excluded);
var textInputRef = React__default.useRef(null);
var mergedRef = useMergeRefs(ref, textInputRef);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
shouldShowClearButton = _useState2[0],
setShouldShowClearButton = _useState2[1];
var _useDropdown = useDropdown(),
triggererWrapperRef = _useDropdown.triggererWrapperRef,
onTriggerKeydown = _useDropdown.onTriggerKeydown,
onTriggerClick = _useDropdown.onTriggerClick,
dropdownTriggerer = _useDropdown.dropdownTriggerer;
var isInsideDropdown = dropdownTriggerer === 'SearchInput';
React__default.useEffect(function () {
setShouldShowClearButton(Boolean(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value));
}, [defaultValue, value]);
var renderInteractionElement = function renderInteractionElement() {
if (isLoading) {
return /*#__PURE__*/jsx(Spinner, {
accessibilityLabel: "Loading Content",
color: "primary"
});
}
if (shouldShowClearButton) {
return /*#__PURE__*/jsx(IconButton, {
size: "medium",
icon: CloseIcon,
onClick: function onClick() {
var _textInputRef$current;
if (isEmpty(value) && textInputRef.current) {
// when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
if (isReactNative(textInputRef.current)) {
textInputRef.current.clear();
textInputRef.current.focus();
} else if (textInputRef.current instanceof HTMLInputElement) {
textInputRef.current.value = '';
textInputRef.current.focus();
}
}
// 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();
textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
setShouldShowClearButton(false);
},
isDisabled: isDisabled,
accessibilityLabel: "Clear Input Content"
});
}
return null;
};
return /*#__PURE__*/jsx(BaseBox, {
position: "relative",
children: /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread({
id: "searchinput",
componentName: MetaConstants.SearchInput,
ref: mergedRef,
isDropdownTrigger: true,
setInputWrapperRef: isInsideDropdown ? function (wrapperNode) {
triggererWrapperRef.current = wrapperNode;
} : undefined,
label: label,
accessibilityLabel: accessibilityLabel,
hideLabelText: !Boolean(label),
labelPosition: labelPosition,
placeholder: placeholder,
defaultValue: defaultValue,
value: value,
name: name,
onKeyDown: isInsideDropdown ? onTriggerKeydown : undefined,
onChange: function onChange(_ref2) {
var name = _ref2.name,
value = _ref2.value;
if (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);
}
_onChange === null || _onChange === void 0 ? void 0 : _onChange({
name: name,
value: value
});
},
onClick: function onClick(e) {
if (isDisabled) return;
if (isInsideDropdown) {
onTriggerClick();
}
_onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
},
onFocus: onFocus,
onBlur: onBlur,
onSubmit: onSubmit,
isDisabled: isDisabled,
leadingIcon: showSearchIcon ? SearchIcon : undefined,
trailingInteractionElement: renderInteractionElement(),
helpText: helpText
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
testID: testID
}, getKeyboardAndAutocompleteProps({
type: 'search',
autoCapitalize: autoCapitalize
})), {}, {
size: size
}, rest))
});
};
var SearchInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SearchInput), {
displayName: 'SearchInput',
componentId: dropdownComponentIds.triggers.SearchInput
});
export { SearchInput };
//# sourceMappingURL=SearchInput.js.map