@fluentui/react-northstar
Version:
A themable React component library.
113 lines (112 loc) • 4.23 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _invoke from "lodash/invoke";
import * as customPropTypes from '@fluentui/react-proptypes';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import cx from 'classnames';
import { createShorthandFactory, commonPropTypes } from '../../utils';
import { Input } from '../Input/Input';
import { useFluentContext, useTelemetry, useStyles, useUnhandledProps } from '@fluentui/react-bindings';
export var dropdownSearchInputClassName = 'ui-dropdown__searchinput';
export var dropdownSearchInputSlotClassNames = {
input: dropdownSearchInputClassName + "__input",
wrapper: dropdownSearchInputClassName + "__wrapper"
};
/**
* A DropdownSearchInput represents item of 'search' Dropdown.
* Used to display the search input field.
*/
export var DropdownSearchInput = /*#__PURE__*/function () {
var DropdownSearchInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(DropdownSearchInput.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibilityComboboxProps = props.accessibilityComboboxProps,
accessibilityInputProps = props.accessibilityInputProps,
inputRef = props.inputRef,
inline = props.inline,
placeholder = props.placeholder,
disabled = props.disabled,
className = props.className,
design = props.design,
styles = props.styles,
variables = props.variables;
var unhandledProps = useUnhandledProps(DropdownSearchInput.handledProps, props);
var _useStyles = useStyles(DropdownSearchInput.displayName, {
className: dropdownSearchInputClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
inline: inline
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
}
}),
resolvedStyles = _useStyles.styles;
var handleFocus = function handleFocus(e) {
_invoke(props, 'onFocus', e, props);
};
var handleInputKeyDown = function handleInputKeyDown(e) {
_invoke(props, 'onInputKeyDown', e, props);
};
var handleInputBlur = function handleInputBlur(e) {
_invoke(props, 'onInputBlur', e, props);
};
var handleKeyUp = function handleKeyUp(e) {
_invoke(props, 'onKeyUp', e, props);
};
var element = /*#__PURE__*/React.createElement(Input, _extends({
ref: ref,
disabled: disabled,
inputRef: inputRef,
onFocus: handleFocus,
onKeyUp: handleKeyUp
}, unhandledProps, {
wrapper: Object.assign({
className: cx(dropdownSearchInputSlotClassNames.wrapper, className),
styles: resolvedStyles.root
}, accessibilityComboboxProps, unhandledProps.wrapper),
input: Object.assign({
type: 'text',
className: dropdownSearchInputSlotClassNames.input,
styles: resolvedStyles.input,
placeholder: placeholder,
onBlur: handleInputBlur,
onKeyDown: handleInputKeyDown
}, accessibilityInputProps, unhandledProps.input)
}));
setEnd();
return element;
});
DropdownSearchInput.displayName = 'DropdownSearchInput';
DropdownSearchInput.propTypes = Object.assign({}, commonPropTypes.createCommon({
accessibility: false,
children: false,
content: false
}), {
accessibilityInputProps: PropTypes.object,
accessibilityComboboxProps: PropTypes.object,
disabled: PropTypes.bool,
inline: PropTypes.bool,
inputRef: customPropTypes.ref,
onFocus: PropTypes.func,
onInputBlur: PropTypes.func,
onInputKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
placeholder: PropTypes.string
});
DropdownSearchInput.handledProps = Object.keys(DropdownSearchInput.propTypes);
DropdownSearchInput.create = createShorthandFactory({
Component: DropdownSearchInput
});
return DropdownSearchInput;
}();
//# sourceMappingURL=DropdownSearchInput.js.map