@spaced-out/ui-design-system
Version:
Sense UI components library
180 lines (178 loc) • 6.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Combobox = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Dropdown = require("../Dropdown");
var _Input = require("../Input");
var _Text = require("../Text");
var _ComboboxModule = _interopRequireDefault(require("./Combobox.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
value,
onChange,
classNames,
disabled,
type = 'text',
label,
inputPlaceholder,
size = 'medium',
onContainerClick,
onInputFocus,
onInputBlur,
onInputKeyDown,
onInputContainerClick,
inputName,
locked,
error,
errorText,
helperText,
required,
iconLeftName,
iconLeftType,
iconRightName,
iconRightType,
onIconRightClick,
readOnly,
boxRef,
inputBoxRef,
minLength,
maxLength,
pattern,
min,
max,
menu,
onMenuOpen,
onMenuClose,
scrollMenuToBottom,
onDropdownFocus,
onDropdownBlur,
onDropdownKeyDown,
onDropdownContainerClick,
dropdownName,
dropdownPlaceholder,
dropdownBoxRef
} = props;
const inputRef = React.useRef();
const dropdownRef = React.useRef();
const {
input: inputValue,
dropdown: dropdownInputText
} = value;
const handleInputChange = (evt, isEnter) => {
onChange({
dropdown: dropdownInputText || '',
input: evt.target.value,
inputChange: {
evt,
isEnter
}
});
};
const handleDropdownChange = option => {
onChange({
dropdown: option.label || '',
input: inputValue || '',
dropdownOption: option
});
};
/* Handling locked functionality at Combobox level */
React.useEffect(() => {
if (locked) {
inputRef.current && (inputRef.current.disabled = true);
dropdownRef.current && (dropdownRef.current.disabled = true);
} else {
inputRef.current && (inputRef.current.disabled = false);
dropdownRef.current && (dropdownRef.current.disabled = false);
}
}, [locked]);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper)
}, Boolean(label) && /*#__PURE__*/React.createElement("div", {
className: _ComboboxModule.default.info
}, /*#__PURE__*/React.createElement("div", {
className: _ComboboxModule.default.infoContent
}, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
color: "secondary"
}, label ?? ''), "\xA0", required && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
color: "danger"
}, "*"))), /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_ComboboxModule.default.box, {
[_ComboboxModule.default.withError]: error ?? false
}, classNames?.box),
onClick: !(disabled || locked) ? onContainerClick : null,
ref: boxRef
}, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
ref: dropdownRef,
menu: menu,
boxRef: dropdownBoxRef,
placeholder: dropdownPlaceholder,
readOnly: readOnly,
classNames: {
wrapper: (0, _classify.default)(_ComboboxModule.default.dropdownWrapper, classNames?.dropdown?.wrapper),
box: (0, _classify.default)(_ComboboxModule.default.dropdownBox, {
[_ComboboxModule.default.disabled]: disabled ?? null,
[_ComboboxModule.default.locked]: locked ?? null
}, classNames?.dropdown?.box),
iconRight: _ComboboxModule.default.chevron
},
disabled: disabled,
size: size,
onMenuOpen: onMenuOpen,
onMenuClose: onMenuClose,
onChange: handleDropdownChange,
scrollMenuToBottom: scrollMenuToBottom,
dropdownInputText: dropdownInputText,
onFocus: onDropdownFocus,
onBlur: onDropdownBlur,
onKeyDown: onDropdownKeyDown,
onContainerClick: onDropdownContainerClick,
name: dropdownName
}), /*#__PURE__*/React.createElement(_Input.Input, {
ref: inputRef,
boxRef: inputBoxRef,
name: inputName,
placeholder: inputPlaceholder,
onFocus: onInputFocus,
onBlur: onInputBlur,
onChange: handleInputChange,
onKeyDown: onInputKeyDown,
onContainerClick: onInputContainerClick,
value: inputValue,
type: type,
error: error,
disabled: disabled,
readOnly: readOnly,
classNames: {
wrapper: (0, _classify.default)(_ComboboxModule.default.inputWrapper, classNames?.input?.wrapper),
box: (0, _classify.default)(_ComboboxModule.default.inputBox, {
[_ComboboxModule.default.disabled]: disabled ?? null,
[_ComboboxModule.default.locked]: locked ?? null
}, classNames?.input?.box),
iconLeft: classNames?.input?.iconLeft,
iconRight: classNames?.input?.iconRight
},
size: size,
iconLeftName: iconLeftName,
iconLeftType: iconLeftType,
iconRightName: iconRightName,
iconRightType: iconRightType,
onIconRightClick: onIconRightClick,
minLength: minLength,
maxLength: maxLength,
pattern: pattern,
min: min,
max: max
})), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
className: _ComboboxModule.default.info
}, error && errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
color: "danger"
}, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
color: disabled ? 'disabled' : 'secondary'
}, helperText) : helperText));
});