@commercetools-uikit/search-select-field
Version:
A search select field built on top of search select input, allowing users to asynchronously search for options
168 lines (160 loc) • 9.97 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 _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
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 react = require('react');
var utils = require('@commercetools-uikit/utils');
var Constraints = require('@commercetools-uikit/constraints');
var hooks = require('@commercetools-uikit/hooks');
var Spacings = require('@commercetools-uikit/spacings');
var FieldLabel = require('@commercetools-uikit/field-label');
var SearchSelectInput = require('@commercetools-uikit/search-select-input');
var FieldErrors = require('@commercetools-uikit/field-errors');
var FieldWarnings = require('@commercetools-uikit/field-warnings');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
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 Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
var SearchSelectInput__default = /*#__PURE__*/_interopDefault(SearchSelectInput);
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
const _excluded = ["controlShouldRenderValue"];
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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const hasErrors = errors => {
var _context;
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
};
const hasWarnings = warnings => {
var _context2;
return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
};
const sequentialId = utils.createSequentialId('search-select-field-');
const SearchSelectField = _ref => {
let _ref$controlShouldRen = _ref.controlShouldRenderValue,
controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
props = _objectWithoutProperties(_ref, _excluded);
const hasError = Boolean(props.touched) && hasErrors(props.errors);
const hasWarning = props.hasWarning || Boolean(props.touched) && hasWarnings(props.warnings);
const id = hooks.useFieldId(props.id, sequentialId);
const errorsContainerId = `${id}-errors`;
const warningsContainerId = `${id}-warnings`;
if (!props.isReadOnly) {
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectField: `onChange` is required when field is not read only.') : void 0;
}
if (props.hintIcon) {
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.hint === 'string' || /*#__PURE__*/react.isValidElement(props.hint), 'SearchSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
}
if (props.isMulti) {
process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'SearchSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.touched === 'undefined' || _Array$isArray__default["default"](props.touched), 'SearchSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
}
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
max: props.horizontalConstraint,
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
scale: "xs",
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
title: props.title,
hint: props.hint,
description: props.description,
onInfoButtonClick: props.onInfoButtonClick,
hintIcon: props.hintIcon,
badge: props.badge,
hasRequiredIndicator: props.isRequired,
htmlFor: id
}), jsxRuntime.jsx(SearchSelectInput__default["default"], _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
controlShouldRenderValue
}, props))), {}, {
horizontalConstraint: "scale",
hasError: hasError,
"aria-label": props['aria-label'],
"aria-labelledby": props['aria-labelledby'],
"aria-invalid": hasError,
"aria-errormessage": errorsContainerId,
isAutofocussed: props.isAutofocussed,
backspaceRemovesValue: props.backspaceRemovesValue,
components: props.components,
filterOption: props.filterOption,
id: id,
containerId: props.containerId,
isClearable: props.isClearable,
isCondensed: props.isCondensed,
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
isOptionDisabled: props.isOptionDisabled,
isMulti: props.isMulti,
hasWarning: hasWarning,
maxMenuHeight: props.maxMenuHeight,
menuPortalTarget: props.menuPortalTarget,
menuPortalZIndex: props.menuPortalZIndex,
menuShouldBlockScroll: props.menuShouldBlockScroll,
name: props.name,
noOptionsMessage: props.noOptionsMessage,
loadingMessage: props.loadingMessage,
onBlur: props.onBlur,
onChange: props.onChange,
onFocus: props.onFocus,
onInputChange: props.onInputChange,
placeholder: props.placeholder,
tabIndex: props.tabIndex,
tabSelectsValue: props.tabSelectsValue,
value: props.value
// Async react-select props
,
loadOptions: props.loadOptions,
cacheOptions: props.cacheOptions,
showOptionGroupDivider: props.showOptionGroupDivider,
optionType: props.optionType,
controlShouldRenderValue: controlShouldRenderValue,
iconLeft: props.iconLeft
})), jsxRuntime.jsx(FieldErrors__default["default"], {
id: errorsContainerId,
errors: props.errors,
isVisible: hasError,
renderError: props.renderError
}), jsxRuntime.jsx(FieldWarnings__default["default"], {
id: warningsContainerId,
warnings: props.warnings,
isVisible: hasWarning,
renderWarning: props.renderWarning
})]
})
});
};
SearchSelectField.displayName = 'SearchSelectField';
/**
* Use this function to convert the Formik `errors` object type to
* our custom field errors type.
* This is primarly useful when using TypeScript.
*/
SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
return errors;
};
var SearchSelectField$1 = SearchSelectField;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.1";
exports["default"] = SearchSelectField$1;
exports.version = version;