@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
86 lines • 5.55 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useRef, forwardRef } from 'react';
import classnames from 'classnames';
import ButtonSimple from '../ButtonSimple';
import { STYLE, DEFAULTS, ICON_HEIGHT_MAPPING, ARIA_ROLES, WARNINGS, } from './SearchInput.constants';
import './SearchInput.style.scss';
import { useSearchField } from '@react-aria/searchfield';
import { useSearchFieldState } from '@react-stately/searchfield';
import InputMessage from '../InputMessage';
import { useFocusState } from '../../hooks/useFocusState';
import Icon from '../Icon';
import LoadingSpinner from '../LoadingSpinner';
import { useProvidedRef } from '../../utils/useProvidedRef';
/**
* Search input
*/
var SearchInput = function (props, providedRef) {
var className = props.className, style = props.style, searching = props.searching, clearButtonAriaLabel = props.clearButtonAriaLabel, label = props.label, ariaLabel = props["aria-label"], isDisabled = props.isDisabled, _a = props.height, height = _a === void 0 ? DEFAULTS.HEIGHT : _a, ariaControls = props.ariaControls, _b = props.isCombobox, isCombobox = _b === void 0 ? DEFAULTS.ISCOMBOBOX : _b, isComboboxExpanded = props.isComboboxExpanded, providedKeydown = props.onKeyDown, searchIconProps = props.searchIconProps;
// due to how the prop types are defined, both label and aria-label are valid inputs
// as this component does not actually have a label component, we should not pass the label prop to the useSearchField hook
var cleanedProps = __assign(__assign({}, props), { label: undefined, 'aria-label': ariaLabel || label });
if (isCombobox && isComboboxExpanded === undefined) {
console.warn(WARNINGS.ISCOMBOBOX_1_ISEXPANDED_0);
}
if (!isCombobox && !!ariaControls) {
console.warn(WARNINGS.ISCOMBOBOX_0_CONTROLS_1);
}
if (!isCombobox && typeof isComboboxExpanded === 'boolean') {
console.warn(WARNINGS.ISCOMBOBOX_0_ISEXPANDED_1);
}
var state = useSearchFieldState(cleanedProps);
var inputRef = useProvidedRef(providedRef, null);
var _c = useFocusState(cleanedProps), focusProps = _c.focusProps, isFocused = _c.isFocused;
var containerRef = useRef(null);
var _d = useSearchField(cleanedProps, state, inputRef), ariaInputProps = _d.inputProps, clearButtonProps = _d.clearButtonProps;
var onKeyDown = ariaInputProps.onKeyDown, otherAriaInputProps = __rest(ariaInputProps, ["onKeyDown"]);
var internalOnKeyDown = function (e) {
// When the input is empty, pressing escape should be
// propagated to the parent so that popovers can close
if ((e.key === 'Escape' && !state.value) || (e.key === 'Enter' && state.value)) {
containerRef.current.dispatchEvent(new KeyboardEvent('keydown', e));
}
onKeyDown(e);
providedKeydown && providedKeydown(e);
};
var inputProps = __assign(__assign({}, otherAriaInputProps), { onKeyDown: internalOnKeyDown });
var handleClick = function () {
if (inputRef.current) {
inputRef.current.focus();
}
};
var inputElement = isCombobox ? (React.createElement("input", __assign({ "aria-controls": ariaControls, "aria-expanded": isComboboxExpanded, role: ARIA_ROLES.COMBOBOX }, inputProps, focusProps, { ref: inputRef }))) : (React.createElement("input", __assign({}, inputProps, focusProps, { ref: inputRef })));
return (React.createElement("div", { className: classnames(className, STYLE.wrapper), onClick: handleClick, style: style, "data-disabled": isDisabled, "data-focus": isFocused, "data-height": height, ref: containerRef },
React.createElement("div", null, searching ? (React.createElement(LoadingSpinner, { "aria-hidden": true, scale: ICON_HEIGHT_MAPPING[height], className: STYLE.searching, variant: "button" })) : (React.createElement(Icon, __assign({ weight: "bold", scale: ICON_HEIGHT_MAPPING[height], className: STYLE.search, name: "search" }, searchIconProps)))),
React.createElement("div", { className: STYLE.container }, inputElement),
!!state.value && !isDisabled && (React.createElement(ButtonSimple, __assign({ className: STYLE.clear }, clearButtonProps, { "aria-label": clearButtonAriaLabel, excludeFromTabOrder: false, useNativeKeyDown: true }),
React.createElement(Icon, { weight: "bold", scale: ICON_HEIGHT_MAPPING[height], name: "cancel" }))),
React.createElement(InputMessage, null)));
};
var _SearchInput = forwardRef(SearchInput);
_SearchInput.displayName = 'SearchInput';
export default _SearchInput;
//# sourceMappingURL=SearchInput.js.map