@commercetools-uikit/search-select-input
Version:
A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.
153 lines (143 loc) • 8.34 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var react = require('react');
var reactIntl = require('react-intl');
var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
require('@commercetools-uikit/utils');
var selectUtils = require('@commercetools-uikit/select-utils');
var _styled = require('@emotion/styled/base');
var designSystem = require('@commercetools-uikit/design-system');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var messages = reactIntl.defineMessages({
noOptionsMessage: {
id: "UIKit.SearchSelectInput.noOptionsMessage",
defaultMessage: [{
"type": 0,
"value": "No matches found for your search term"
}]
},
loadingOptionsMessage: {
id: "UIKit.SearchSelectInput.loadingOptionsMessage",
defaultMessage: [{
"type": 0,
"value": "Loading exact matches"
}]
},
placeholderMessage: {
id: "UIKit.SearchSelectInput.placeholderMessage",
defaultMessage: [{
"type": 0,
"value": "Search by…"
}]
},
searchSelectInputAsFilterPlaceholder: {
id: "UIKit.SearchSelectInput.searchSelectInputAsFilterPlaceholder",
defaultMessage: [{
"type": 0,
"value": "Search"
}]
}
});
const SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
target: "e6cl9390"
} )(props => !props.isDisabled && !props.isReadOnly ? `div[class$='control'] {
&:hover {
cursor: text;
}
div[class$='indicatorContainer' i] {
cursor: pointer;
svg * {
fill: ${designSystem.designTokens.colorNeutral60};
}
:hover svg * {
fill: ${designSystem.designTokens.colorPrimary};
}
}
}` : '', ";" + ("" ));
const _excluded = ["value", "menuPortalZIndex", "maxMenuHeight", "controlShouldRenderValue", "appearance", "optionStyle"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const SearchSelectInput = _ref => {
let _ref$value = _ref.value,
value = _ref$value === void 0 ? null : _ref$value,
_ref$menuPortalZIndex = _ref.menuPortalZIndex,
menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
_ref$maxMenuHeight = _ref.maxMenuHeight,
maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
_ref$controlShouldRen = _ref.controlShouldRenderValue,
controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
_ref$optionStyle = _ref.optionStyle,
optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
props = _objectWithoutProperties(_ref, _excluded);
const intl = reactIntl.useIntl();
if (!props.isReadOnly) ;
selectUtils.warnIfMenuPortalPropsAreMissing({
menuPortalZIndex: menuPortalZIndex,
menuPortalTarget: props.menuPortalTarget,
componentName: 'SearchSelectInput'
});
const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
const optionType = props.optionType;
const components = react.useMemo(() => _objectSpread(_objectSpread(_objectSpread({
Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
optionType: optionType,
optionInnerProps: optionInnerProps
}))
}, optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components), {}, {
DropdownIndicator: selectUtils.SearchIconDropdownIndicator
}), [optionStyle, appearance, props.components, optionType]);
return jsxRuntime.jsx(SearchSelectInputWrapper, {
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
isCondensed: appearance === 'filter' ? true : props.isCondensed,
children: jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
value: value,
menuPortalZIndex: menuPortalZIndex,
maxMenuHeight: maxMenuHeight,
appearance: appearance,
optionStyle: optionStyle,
components: components,
placeholder: placeholder,
iconLeft: props.iconLeft,
loadingMessage: loadingMessage,
noOptionsMessage: noOptionsMessage,
isSearchable: true
// @ts-expect-error
,
closeMenuOnSelect: props.closeMenuOnSelect
}, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}), {}, {
controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
}))
});
};
SearchSelectInput.displayName = 'SearchSelectInput';
var SearchSelectInput$1 = SearchSelectInput;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.1";
exports["default"] = SearchSelectInput$1;
exports.version = version;