@braineet/ui
Version:
Braineet design system
228 lines (227 loc) • 9.99 kB
JavaScript
;
exports.__esModule = true;
exports.Select = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactVirtual = require("@tanstack/react-virtual");
var _formik = require("formik");
var _hooks = require("../../hooks");
var _box = _interopRequireDefault(require("../box"));
var _combobox = require("../combobox");
var _renderOptions = require("./renderOptions");
var _RenderPlaceholder = _interopRequireDefault(require("./RenderPlaceholder"));
var _selectState = require("./select-state");
var _SelectPopover = require("./SelectPopover");
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "defaultValue", "options", "disabled", "multiple", "field", "form", "placeholder", "renderPlaceholder", "renderOption", "className", "noArrow", "noResult", "size", "maxHeightList", "maxWidthList", "onChange", "comboboxPlaceholder", "disableSearch", "classNames", "buttonStyle", "popoverStyles", "popoverProps", "virtual", "minOptionsForVirtual", "buttonProps"],
_excluded2 = ["value", "setValue"];
/* eslint-disable react/no-array-index-key */
/**
* The `Select` component.
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var Select = exports.Select = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
var value = _ref.value,
defaultValue = _ref.defaultValue,
options = _ref.options,
disabled = _ref.disabled,
multiple = _ref.multiple,
field = _ref.field,
form = _ref.form,
placeholder = _ref.placeholder,
renderPlaceholder = _ref.renderPlaceholder,
renderOption = _ref.renderOption,
className = _ref.className,
noArrow = _ref.noArrow,
noResult = _ref.noResult,
size = _ref.size,
maxHeightList = _ref.maxHeightList,
maxWidthList = _ref.maxWidthList,
onChange = _ref.onChange,
comboboxPlaceholder = _ref.comboboxPlaceholder,
disableSearch = _ref.disableSearch,
classNames = _ref.classNames,
buttonStyle = _ref.buttonStyle,
popoverStyles = _ref.popoverStyles,
popoverProps = _ref.popoverProps,
virtual = _ref.virtual,
minOptionsForVirtual = _ref.minOptionsForVirtual,
buttonProps = _ref.buttonProps,
selectStateProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var localValue = field ? field.value : value;
var _useSearch = (0, _hooks.useSearch)(options, ['label']),
matches = _useSearch.items,
setValue = _useSearch.setValue;
var combobox = (0, _combobox.useCombobox)(_extends({
setValue: setValue
}, selectStateProps));
var comboboxValue = combobox.value,
setValueCombobox = combobox.setValue,
selectProps = _objectWithoutPropertiesLoose(combobox, _excluded2);
var selectValueProps = localValue !== undefined ? {
value: multiple ? localValue || [] : "" + localValue || ''
} : {
defaultValue: defaultValue || (multiple ? [] : '')
};
var select = (0, _selectState.useSelectState)(_extends({}, selectValueProps, {
virtualFocus: false,
setValue: function setValue(v) {
if (form && field != null && field.name && form != null && form.setFieldValue) {
form == null || form.setFieldValue(field.name, v);
}
if (onChange) onChange(v);
}
}, selectProps));
var hasVirtual = virtual && matches.length >= minOptionsForVirtual;
var virtualizer = (0, _reactVirtual.useVirtualizer)({
count: matches.length,
getScrollElement: function getScrollElement() {
return select.contentElement;
},
estimateSize: function estimateSize() {
return 32;
}
});
if (!select.mounted && combobox.value) {
combobox.setValue('');
}
var error = (form == null ? void 0 : form.errors) && (field == null ? void 0 : field.name) && (0, _formik.getIn)(form.errors, field.name);
var touch = (form == null ? void 0 : form.touched) && (field == null ? void 0 : field.name) && (0, _formik.getIn)(form.touched, field.name);
var _useMemo = (0, _react.useMemo)(function () {
var selectedValue;
var selectValueObj;
if (Array.isArray(select.value)) {
if (select.value.length >= 1 && options.length > 0) {
selectedValue = "(" + select.value.length + ") " + select.value.reduce(function (acc, elm, index) {
var label;
if (options.find(function (option) {
return option.value === elm;
})) {
label = options.find(function (option) {
return option.value === elm;
}).label;
}
return acc + (label !== undefined ? label + (index < select.value.length - 1 ? ', ' : '') : '');
}, '');
} else {
selectedValue = undefined;
}
} else {
selectedValue = _extends({}, options.find(function (elm) {
return "" + elm.value === "" + select.value;
})).label;
selectValueObj = _extends({}, options.find(function (elm) {
return "" + elm.value === "" + select.value;
}));
}
return {
selected: selectedValue,
selectObj: selectValueObj
};
}, [options, select.value]),
selected = _useMemo.selected,
selectObj = _useMemo.selectObj;
var optionItems = hasVirtual ? virtualizer.getVirtualItems().map(function (virtualItem) {
return _extends({}, matches[virtualItem.index], virtualItem, {
ref: virtualizer.measureElement,
style: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: virtualItem.size + "px",
transform: "translateY(" + virtualItem.start + "px)"
}
});
}) : matches;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledSelect, _extends({
type: "button",
state: select,
ref: ref,
"data-invalid": touch && error,
"data-filled": selected,
disabled: disabled,
value: select.value,
className: className,
size: size,
$buttonStyle: buttonStyle
}, buttonProps, {
children: [!noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledIconSelect, {
name: "drop",
size: 24,
color: "black",
className: classNames.selectIndicator
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledSelected, {
as: "span",
className: classNames.selectedItemWrapper,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderPlaceholder.default, {
placeholder: placeholder,
value: select.value,
selected: selected,
selectObj: selectObj,
renderPlaceholder: renderPlaceholder,
renderOption: renderOption,
classNames: classNames,
size: size
})
})]
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectPopover.SelectPopover, _extends({
state: select,
composite: !(!disableSearch && options.length >= 5),
className: classNames.popover,
$maxHeightList: maxHeightList,
$maxWidthList: maxWidthList,
$padding: !disableSearch && options.length >= 5 ? '0 0.5rem 0.5rem' : '0.5rem',
$popoverStyles: popoverStyles
}, popoverProps, {
children: select.mounted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!disableSearch && options.length >= 5 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, {
position: "sticky",
top: "0",
backgroundColor: "inherit",
padding: "0.5rem 0",
zIndex: "1",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_combobox.Combobox, {
state: combobox,
comboboxOptions: {
autoComplete: 'list'
},
placeholder: comboboxPlaceholder,
withCancel: true,
className: classNames.combobox
})
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_combobox.ComboboxList, {
state: combobox,
style: {
height: hasVirtual && virtualizer.getTotalSize() + "px",
width: '100%',
position: 'relative'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderOptions.RenderOptions, {
value: select.value,
options: optionItems,
multiple: multiple,
noResult: noResult,
renderOption: renderOption,
form: form,
field: field,
classNames: classNames
})
})]
})
}))]
});
});
Select.defaultProps = {
size: 'md',
noResult: 'No options available',
classNames: {},
buttonProps: {},
virtual: true,
minOptionsForVirtual: 50
};