@ozen-ui/kit
Version:
React component library
73 lines (72 loc) • 4.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataListBase = exports.cnDataListBase = void 0;
var tslib_1 = require("tslib");
require("./DataListBase.css");
var react_1 = tslib_1.__importStar(require("react"));
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var Popover_1 = require("../Popover");
var constants_1 = require("./constants");
var DataListBaseContext_1 = require("./DataListBaseContext");
var hooks_1 = require("./hooks");
exports.cnDataListBase = (0, classname_1.cn)('DataListBase');
var DataListBaseRender = function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'DataListBase',
});
var children = props.children, _a = props.as, as = _a === void 0 ? constants_1.DATA_LIST_BASE_DEFAULT_TAG : _a, value = props.value, defaultValue = props.defaultValue, _b = props.multiple, multiple = _b === void 0 ? constants_1.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 ? constants_1.DATA_LIST_BASE_DEFAULT_DISABLED : _c, other = tslib_1.__rest(props, ["children", "as", "value", "defaultValue", "multiple", "open", "anchorRef", "onMouseDown", "className", "onChange", "onClose", "optionsStore", "disabled"]);
var active = !!open;
var internalRef = (0, react_1.useRef)(null);
var internalOptionsStore = (0, hooks_1.useDataListBaseOptionsStore)(children);
var optionsStore = optionsStoreProp !== null && optionsStoreProp !== void 0 ? optionsStoreProp : internalOptionsStore;
var valueControl = (0, hooks_1.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 = (0, hooks_1.useDataListBaseControls)({
active: active,
valueControl: valueControl,
optionsStore: optionsStore,
});
(0, hooks_1.useDataListBaseEvents)({
container: anchorRef !== null && anchorRef !== void 0 ? anchorRef : internalRef,
onClose: onClose,
active: active,
controlsControl: controlsControl,
});
var optionsControl = (0, hooks_1.useDataListBaseOptions)({
optionsStore: optionsStore,
valueControl: valueControl,
multiple: multiple,
});
var scrollControl = (0, hooks_1.useDataListBaseScroll)({
dataListRef: internalRef,
active: active,
valueControl: valueControl,
optionsStore: optionsStore,
});
return (react_1.default.createElement(DataListBaseContext_1.DataListBaseContext.Provider, { value: {
optionsStore: optionsStore,
valueControl: valueControl,
optionsControl: optionsControl,
multiple: multiple,
scrollControl: scrollControl,
active: active,
disabled: disabled,
} },
react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], strategy: "absolute", placement: "bottom-start" }, other, { onClose: onClose, transitionProps: { classNames: 'DataListBase-animation' }, className: (0, exports.cnDataListBase)('', [className]), as: as, open: open, anchorRef: anchorRef, onMouseDown: function (event) {
event.preventDefault();
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
}, ref: (0, useMultiRef_1.useMultiRef)([internalRef, ref]) }), children)));
};
exports.DataListBase = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListBaseRender);
exports.DataListBase.displayName = 'DataListBase';