@commercetools-uikit/select-input
Version:
An input component getting a selection from the user.
274 lines (262 loc) • 15.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var _flatMapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat-map');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
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 _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 reactIntl = require('react-intl');
var isEmpty = require('lodash/isEmpty');
var has = require('lodash/has');
var Select = require('react-select');
var Constraints = require('@commercetools-uikit/constraints');
var selectUtils = require('@commercetools-uikit/select-utils');
var utils = require('@commercetools-uikit/utils');
var icons = require('@commercetools-uikit/icons');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _flatMapInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatMapInstanceProperty);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
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 isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
var has__default = /*#__PURE__*/_interopDefault(has);
var Select__default = /*#__PURE__*/_interopDefault(Select);
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
const _excluded = ["appearance", "maxMenuHeight", "menuPortalZIndex", "options", "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 _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const customizedComponents = {
DropdownIndicator: selectUtils.DropdownIndicator,
ClearIndicator: selectUtils.ClearIndicator,
MultiValueRemove: selectUtils.TagRemove
};
const isOptionObject = option => option.options !== undefined;
const SelectInput = _ref => {
var _context, _context2;
let _ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
_ref$maxMenuHeight = _ref.maxMenuHeight,
maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
_ref$menuPortalZIndex = _ref.menuPortalZIndex,
menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
_ref$optionStyle = _ref.optionStyle,
optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
props = _objectWithoutProperties(_ref, _excluded);
const intl = reactIntl.useIntl();
selectUtils.warnIfMenuPortalPropsAreMissing({
menuPortalZIndex: menuPortalZIndex,
menuPortalTarget: props.menuPortalTarget,
componentName: 'SelectInput'
});
const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
// Options can be grouped as
// const colourOptions = [{ value: 'green', label: 'Green' }];
// const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
// const groupedOptions = [
// { label: 'Colours', options: colourOptions },
// { label: 'Flavours', options: flavourOptions },
// ];
// So we "ungroup" the options by merging them all into one list first.
const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](options).call(options, option => {
if (isOptionObject(option)) {
return option.options;
}
return option;
});
const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || []
// Pass the options in the order selected by the user, so that the
// sorting is not lost
).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, option => Boolean(option)) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
max: props.horizontalConstraint,
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
appearance,
maxMenuHeight,
menuPortalZIndex,
optionStyle
}, props))), {}, {
children: jsxRuntime.jsx(Select__default["default"], _objectSpread(_objectSpread({
"aria-label": props['aria-label'],
"aria-labelledby": props['aria-labelledby'],
"aria-invalid": props['aria-invalid'],
"aria-errormessage": props['aria-errormessage'],
autoFocus: props.isAutofocussed,
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
readOnly: true
}))
} : {}), appearance === 'filter' && {
DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
color: "neutral60"
}),
ClearIndicator: null
}), optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components),
menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
styles: selectUtils.createSelectStyles({
hasWarning: props.hasWarning,
hasError: props.hasError,
showOptionGroupDivider: props.showOptionGroupDivider,
menuPortalZIndex: menuPortalZIndex,
appearance: appearance,
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
isCondensed: appearance === 'filter' ? true : props.isCondensed,
iconLeft: props.iconLeft,
isMulti: props.isMulti,
hasValue: !isEmpty__default["default"](selectedOptions),
controlShouldRenderValue: props.controlShouldRenderValue,
horizontalConstraint: props.horizontalConstraint,
minMenuWidth: props.minMenuWidth,
maxMenuWidth: props.maxMenuWidth
}),
filterOption: props.filterOption
// react-select uses "id" (for the container) and "inputId" (for the input),
// but we use "id" (for the input) and "containerId" (for the container)
// instead.
// This makes it easier to less confusing to use with <label />s.
,
id: props.containerId,
inputId: props.id,
inputValue: props.inputValue,
isClearable: props.isReadOnly ? false : props.isClearable,
isDisabled: props.isDisabled,
isOptionDisabled: props.isOptionDisabled
}, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
hideSelectedOptions: props.hideSelectedOptions
}), {}, {
// @ts-ignore
isReadOnly: props.isReadOnly,
isMulti: props.isMulti,
isSearchable: props.isSearchable,
isCondensed: props.isCondensed,
maxMenuHeight: maxMenuHeight,
menuPortalTarget: props.menuPortalTarget,
menuShouldBlockScroll: props.menuShouldBlockScroll
// @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
,
closeMenuOnSelect: props.closeMenuOnSelect,
name: props.name,
noOptionsMessage: props.noOptionsMessage || (_ref2 => {
let inputValue = _ref2.inputValue;
return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
inputValue
});
}),
onBlur: typeof props.onBlur === 'function' ? () => {
const event = {
target: {
id: props.id,
name: (() => {
if (!props.isMulti) return props.name;
// We append the ".0" to make Formik set the touched
// state as an array instead of a boolean only.
// Otherwise the shapes would clash on submission, as
// Formik will create an array on submission anyways.
return props.name ? "".concat(props.name, ".0") : undefined;
})()
},
persist: () => {}
};
props.onBlur && props.onBlur(event);
} : undefined,
onChange: nextSelectedOptions => {
// nextSelectedOptions is either an array, or a single option, or null
// depending on whether we're in multi-mode or not (isMulti)
let value = null;
if (props.isMulti) {
if (nextSelectedOptions) {
var _context3;
value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, option => option.value);
} else {
value = [];
}
} else if (nextSelectedOptions) {
value = nextSelectedOptions.value;
}
props.onChange && props.onChange({
target: {
id: props.id,
name: props.name,
value
},
persist: () => {}
});
},
onFocus: props.onFocus,
onInputChange: props.onInputChange,
options: options,
placeholder: placeholder,
tabIndex: props.tabIndex,
tabSelectsValue: props.tabSelectsValue,
value: selectedOptions,
iconLeft: props.iconLeft,
controlShouldRenderValue: appearance === 'filter' ? false : props.controlShouldRenderValue,
menuPlacement: "auto"
}, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
}))
});
};
SelectInput.displayName = 'SelectInput';
/**
* Expose static helper methods.
*/
// Both "true" and an empty array [] represent a touched state.
SelectInput.isTouched = touched => Boolean(touched);
/**
* Expose react-select components for customization purposes.
*/
// custom
SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
SelectInput.Control = Select.components.Control;
//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
SelectInput.CrossIcon = Select.components.CrossIcon;
//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
SelectInput.DownChevron = Select.components.DownChevron;
// custom
SelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
SelectInput.Group = Select.components.Group;
SelectInput.GroupHeading = Select.components.GroupHeading;
SelectInput.IndicatorSeparator = Select.components.IndicatorSeparator;
SelectInput.IndicatorsContainer = Select.components.IndicatorsContainer;
SelectInput.Input = Select.components.Input;
SelectInput.LoadingIndicator = Select.components.LoadingIndicator;
SelectInput.LoadingMessage = Select.components.LoadingMessage;
SelectInput.Menu = Select.components.Menu;
SelectInput.MenuList = Select.components.MenuList;
//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
SelectInput.MenuPortal = Select.components.MenuPortal;
SelectInput.MultiValue = Select.components.MultiValue;
SelectInput.MultiValueContainer = Select.components.MultiValueContainer;
SelectInput.MultiValueLabel = Select.components.MultiValueLabel;
// custom
SelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
SelectInput.NoOptionsMessage = Select.components.NoOptionsMessage;
SelectInput.Option = Select.components.Option;
SelectInput.Placeholder = Select.components.Placeholder;
SelectInput.SelectContainer = Select.components.SelectContainer;
SelectInput.SingleValue = Select.components.SingleValue;
SelectInput.ValueContainer = Select.components.ValueContainer;
var SelectInput$1 = SelectInput;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.3.0";
exports["default"] = SelectInput$1;
exports.version = version;