@braineet/ui
Version:
Braineet design system
229 lines (227 loc) • 10.5 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"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* The `Select` component.
*/
var 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 ? void 0 : 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
})
})]
})
}))]
});
});
exports.Select = Select;
Select.defaultProps = {
size: 'md',
noResult: 'No options available',
classNames: {},
buttonProps: {},
virtual: true,
minOptionsForVirtual: 50
};