@fluentui/react-northstar
Version:
A themable React component library.
120 lines (118 loc) • 5.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.dropdownSearchInputSlotClassNames = exports.dropdownSearchInputClassName = exports.DropdownSearchInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var React = _interopRequireWildcard(require("react"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../../utils");
var _Input = require("../Input/Input");
var _reactBindings = require("@fluentui/react-bindings");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var dropdownSearchInputClassName = 'ui-dropdown__searchinput';
exports.dropdownSearchInputClassName = dropdownSearchInputClassName;
var dropdownSearchInputSlotClassNames = {
input: dropdownSearchInputClassName + "__input",
wrapper: dropdownSearchInputClassName + "__wrapper"
};
exports.dropdownSearchInputSlotClassNames = dropdownSearchInputSlotClassNames;
/**
* A DropdownSearchInput represents item of 'search' Dropdown.
* Used to display the search input field.
*/
var DropdownSearchInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.useUnhandledProps)(DropdownSearchInput.handledProps, props);
var _useStyles = (0, _reactBindings.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) {
(0, _invoke2.default)(props, 'onFocus', e, props);
};
var handleInputKeyDown = function handleInputKeyDown(e) {
(0, _invoke2.default)(props, 'onInputKeyDown', e, props);
};
var handleInputBlur = function handleInputBlur(e) {
(0, _invoke2.default)(props, 'onInputBlur', e, props);
};
var handleKeyUp = function handleKeyUp(e) {
(0, _invoke2.default)(props, 'onKeyUp', e, props);
};
var element = /*#__PURE__*/React.createElement(_Input.Input, (0, _extends2.default)({
ref: ref,
disabled: disabled,
inputRef: inputRef,
onFocus: handleFocus,
onKeyUp: handleKeyUp
}, unhandledProps, {
wrapper: Object.assign({
className: (0, _classnames.default)(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;
});
exports.DropdownSearchInput = DropdownSearchInput;
DropdownSearchInput.displayName = 'DropdownSearchInput';
DropdownSearchInput.propTypes = Object.assign({}, _utils.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 = (0, _utils.createShorthandFactory)({
Component: DropdownSearchInput
});
//# sourceMappingURL=DropdownSearchInput.js.map