@appbuckets/react-ui
Version:
Just Another React UI Framework
318 lines (310 loc) • 8.42 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var EventStack = require('@semantic-ui-react/event-stack');
var reactPopper = require('react-popper');
var reactUiCore = require('@appbuckets/react-ui-core');
var customHook = require('../utils/customHook.js');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');
var internalHooks = require('./lib/internalHooks.js');
function _interopDefaultLegacy(e) {
return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}
function _interopNamespaceDefaultOnly(e) {
return Object.freeze({ __proto__: null, default: e });
}
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);
var EventStack__default = /*#__PURE__*/ _interopDefaultLegacy(EventStack);
var Header = null;
Promise.resolve()
.then(function () {
return /*#__PURE__*/ _interopNamespaceDefaultOnly(
require('../Header/Header.js')
);
})
.then(function (_a) {
var importedHeader = _a.default;
Header = importedHeader;
});
/* --------
* Component Render
* -------- */
var Popup = function (receivedProps) {
var _a;
var props = BucketContext.useWithDefaultProps('popup', receivedProps);
// ----
// Destructuring Props
// ----
var _b = customHook.useSharedClassName(props),
className = _b.className,
_c = _b.rest,
children = _c.children,
content = _c.content,
basic = _c.basic,
disabled = _c.disabled,
hideOnScroll = _c.hideOnScroll,
hideOnScrollDelay = _c.hideOnScrollDelay,
hoverable = _c.hoverable,
inverted = _c.inverted,
offset = _c.offset,
onClose = _c.onClose,
onMount = _c.onMount,
onOpen = _c.onOpen;
_c.onOutsideClick;
var onUnmount = _c.onUnmount;
_c.openOn;
var position = _c.position,
userDefinedPopperModifiers = _c.popperModifiers,
userDefinedPortalProps = _c.portalProps,
updateDependencies = _c.updateDependencies,
trigger = _c.trigger,
userDefinedStyle = _c.style,
rest = tslib.__rest(_c, [
'children',
'content',
'basic',
'disabled',
'hideOnScroll',
'hideOnScrollDelay',
'hoverable',
'inverted',
'offset',
'onClose',
'onMount',
'onOpen',
'onOutsideClick',
'onUnmount',
'openOn',
'position',
'popperModifiers',
'portalProps',
'updateDependencies',
'trigger',
'style',
]);
// ----
// Reference Handling
// ----
var _d = tslib.__read(React__namespace.useState(), 2),
referenceElement = _d[0],
setReferenceElement = _d[1];
var _e = tslib.__read(React__namespace.useState(), 2),
popperElement = _e[0],
setPopperElement = _e[1];
// ----
// Internal State Definition
// ----
var _f = tslib.__read(React__namespace.useState(false), 2),
closed = _f[0],
setClosed = _f[1];
var _g = tslib.__read(React__namespace.useState(), 2),
closeTimeout = _g[0],
setCloseTimeout = _g[1];
// ----
// Popper Building
// ----
var popperModifiers = internalHooks.usePopperModifiers(
[
{ name: 'arrow', enabled: false },
{ name: 'offset', enabled: !!offset, options: { offset: offset } },
{ name: 'preventOverflow', enabled: true, options: { padding: 8 } },
],
userDefinedPopperModifiers !== null && userDefinedPopperModifiers !== void 0
? userDefinedPopperModifiers
: [],
[offset]
);
/** Get Popper Placement using Position */
var popperPlacement = internalHooks.usePopperPlacementMapping(position);
var _h = reactPopper.usePopper(referenceElement, popperElement, {
modifiers: popperModifiers,
placement: popperPlacement,
}),
popperStyle = _h.styles,
attributes = _h.attributes,
scheduleUpdate = _h.update,
state = _h.state;
// ----
// Component LifeCycle Hooks
// ----
var updateSchedulerDependencies = React__namespace.useMemo(
function () {
return updateDependencies
? tslib.__spreadArray(
[scheduleUpdate, state],
tslib.__read(updateDependencies),
false
)
: [scheduleUpdate, state];
},
[updateDependencies, scheduleUpdate, state]
);
React__namespace.useEffect(
function () {
/** On Dependencies Update, reload Position */
if (scheduleUpdate) {
scheduleUpdate();
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[updateSchedulerDependencies]
);
React__namespace.useEffect(
function () {
return function () {
/** On Component Unmount, clear close Timer */
if (closeTimeout) {
clearTimeout(closeTimeout);
}
};
},
[closeTimeout]
);
// ----
// Component Internal Hooks
// ----
var ElementType = reactUiCore.useElementType(Popup, receivedProps, props);
var portalProps = internalHooks.usePortalProps(userDefinedPortalProps, props);
// ----
// Avoid Component Render if Popup is Closed or Disabled
// ----
if (closed || disabled) {
return trigger !== null && trigger !== void 0 ? trigger : null;
}
// ----
// Portal Event Handling
// ----
var handlePortalClose = function (event) {
if (typeof onClose === 'function') {
onClose(event, props);
}
};
var handlePortalMount = function () {
if (typeof onMount === 'function') {
onMount(null, props);
}
};
var handlePortalOpen = function (event) {
if (typeof onOpen === 'function') {
onOpen(event, props);
}
};
var handlePortalUnmount = function () {
if (typeof onUnmount === 'function') {
onUnmount(null, props);
}
};
var handlePopupClick = (
(_a = props.openOn) === null || _a === void 0
? void 0
: _a.includes('click')
)
? function (event) {
if (!basic && !inverted) {
event.stopPropagation();
}
}
: undefined;
// ----
// Scroll Handler
// ----
var handleHideOnScroll = function (event) {
setClosed(true);
EventStack.instance.unsub('scroll', handleHideOnScroll, {
target: 'window',
});
setCloseTimeout(
setTimeout(function () {
setClosed(false);
}, hideOnScrollDelay)
);
handlePortalClose(event);
};
// ----
// Popup Content Build
// ----
var style = tslib.__assign(
tslib.__assign({ left: 'auto', right: 'auto' }, popperStyle.popper),
userDefinedStyle
);
var classes = clsx__default['default'](
'visible',
{ inverted: inverted, basic: basic, hoverable: hoverable },
position,
'popup',
className
);
/** Build Content */
var popupContent = React__namespace.createElement(
ElementType,
tslib.__assign(
{},
rest,
{
ref: setPopperElement,
className: classes,
style: style,
onClick: handlePopupClick,
},
attributes.popper
),
React__namespace.createElement(
'div',
{ className: 'content' },
reactUiCore.childrenUtils.isNil(children)
? Header && Header.create(content, { autoGenerateKey: false })
: children
),
hideOnScroll &&
React__namespace.createElement(EventStack__default['default'], {
on: handleHideOnScroll,
name: 'scroll',
target: 'window',
})
);
// ----
// Component Render
// ----
return React__namespace.createElement(
reactUiCore.Portal,
tslib.__assign({}, portalProps, {
trigger: trigger,
triggerRef: setReferenceElement,
onClose: handlePortalClose,
onMount: handlePortalMount,
onOpen: handlePortalOpen,
onUnmount: handlePortalUnmount,
}),
popupContent
);
};
Popup.displayName = 'Popup';
module.exports = Popup;