@ozen-ui/kit
Version:
React component library
70 lines (69 loc) • 4.03 kB
JavaScript
import { __assign, __rest } from "tslib";
import './DataListBase.css';
import React, { useRef } from 'react';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { Popover } from '../Popover';
import { DATA_LIST_BASE_DEFAULT_DISABLED, DATA_LIST_BASE_DEFAULT_MULTIPLE, DATA_LIST_BASE_DEFAULT_TAG, } from './constants';
import { DataListBaseContext } from './DataListBaseContext';
import { useDataListBaseEvents, useDataListBaseControls, useDataListBaseOptions, useDataListBaseOptionsStore, useDataListBaseScroll, useDataListBaseValue, } from './hooks';
export var cnDataListBase = cn('DataListBase');
var DataListBaseRender = function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'DataListBase',
});
var children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_BASE_DEFAULT_TAG : _a, value = props.value, defaultValue = props.defaultValue, _b = props.multiple, multiple = _b === void 0 ? DATA_LIST_BASE_DEFAULT_MULTIPLE : _b, open = props.open, anchorRef = props.anchorRef, onMouseDown = props.onMouseDown, className = props.className, onChange = props.onChange, onClose = props.onClose, optionsStoreProp = props.optionsStore, _c = props.disabled, disabled = _c === void 0 ? DATA_LIST_BASE_DEFAULT_DISABLED : _c, other = __rest(props, ["children", "as", "value", "defaultValue", "multiple", "open", "anchorRef", "onMouseDown", "className", "onChange", "onClose", "optionsStore", "disabled"]);
var active = !!open;
var internalRef = useRef(null);
var internalOptionsStore = useDataListBaseOptionsStore(children);
var optionsStore = optionsStoreProp !== null && optionsStoreProp !== void 0 ? optionsStoreProp : internalOptionsStore;
var valueControl = useDataListBaseValue({
value: value,
defaultValue: defaultValue,
onChange: function (event, value, changedOption) {
onChange === null || onChange === void 0 ? void 0 : onChange(event, value, changedOption);
},
inProps: inProps,
multiple: multiple,
});
var controlsControl = useDataListBaseControls({
active: active,
valueControl: valueControl,
optionsStore: optionsStore,
});
useDataListBaseEvents({
container: anchorRef !== null && anchorRef !== void 0 ? anchorRef : internalRef,
onClose: onClose,
active: active,
controlsControl: controlsControl,
});
var optionsControl = useDataListBaseOptions({
optionsStore: optionsStore,
valueControl: valueControl,
multiple: multiple,
});
var scrollControl = useDataListBaseScroll({
dataListRef: internalRef,
active: active,
valueControl: valueControl,
optionsStore: optionsStore,
});
return (React.createElement(DataListBaseContext.Provider, { value: {
optionsStore: optionsStore,
valueControl: valueControl,
optionsControl: optionsControl,
multiple: multiple,
scrollControl: scrollControl,
active: active,
disabled: disabled,
} },
React.createElement(Popover, __assign({ disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], strategy: "absolute", placement: "bottom-start" }, other, { onClose: onClose, transitionProps: { classNames: 'DataListBase-animation' }, className: cnDataListBase('', [className]), as: as, open: open, anchorRef: anchorRef, onMouseDown: function (event) {
event.preventDefault();
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
}, ref: useMultiRef([internalRef, ref]) }), children)));
};
export var DataListBase = polymorphicComponentWithRef(DataListBaseRender);
DataListBase.displayName = 'DataListBase';