@startlibs/components 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/BasicBulletList.mjs +9 -0
- package/lib/BasicBulletList.mjs.map +1 -0
- package/lib/Button.mjs +95 -0
- package/lib/Button.mjs.map +1 -0
- package/lib/ContextMenu.mjs +461 -0
- package/lib/ContextMenu.mjs.map +1 -0
- package/lib/Dialog.mjs +232 -0
- package/lib/Dialog.mjs.map +1 -0
- package/lib/Draggable.mjs +880 -0
- package/lib/Draggable.mjs.map +1 -0
- package/lib/ErrorBoundary.mjs +108 -0
- package/lib/ErrorBoundary.mjs.map +1 -0
- package/lib/FillLastLineResizer.mjs +238 -0
- package/lib/FillLastLineResizer.mjs.map +1 -0
- package/lib/Flip.mjs +604 -0
- package/lib/Flip.mjs.map +1 -0
- package/lib/FlipList.mjs +186 -0
- package/lib/FlipList.mjs.map +1 -0
- package/lib/FormatDate.mjs +25 -0
- package/lib/FormatDate.mjs.map +1 -0
- package/lib/Icon.mjs +50 -0
- package/lib/Icon.mjs.map +1 -0
- package/lib/Image.mjs +41 -0
- package/lib/Image.mjs.map +1 -0
- package/lib/Link.mjs +116 -0
- package/lib/Link.mjs.map +1 -0
- package/lib/Loading.mjs +10 -0
- package/lib/Loading.mjs.map +1 -0
- package/lib/LoadingDiv.mjs +83 -0
- package/lib/LoadingDiv.mjs.map +1 -0
- package/lib/Notifications.mjs +63 -0
- package/lib/Notifications.mjs.map +1 -0
- package/lib/PageLoader.mjs +42 -0
- package/lib/PageLoader.mjs.map +1 -0
- package/lib/PersistentNotifications.mjs +130 -0
- package/lib/PersistentNotifications.mjs.map +1 -0
- package/lib/Popup.mjs +49 -0
- package/lib/Popup.mjs.map +1 -0
- package/lib/SplitColumnsContainer.mjs +43 -0
- package/lib/SplitColumnsContainer.mjs.map +1 -0
- package/lib/SwitchDiv.mjs +61 -0
- package/lib/SwitchDiv.mjs.map +1 -0
- package/lib/TextButton.mjs +41 -0
- package/lib/TextButton.mjs.map +1 -0
- package/lib/ToastNotifications.mjs +215 -0
- package/lib/ToastNotifications.mjs.map +1 -0
- package/lib/Tooltip.mjs +160 -0
- package/lib/Tooltip.mjs.map +1 -0
- package/lib/TransitionDiv.mjs +56 -0
- package/lib/TransitionDiv.mjs.map +1 -0
- package/lib/WarningDialog.mjs +84 -0
- package/lib/WarningDialog.mjs.map +1 -0
- package/lib/alt/buttons/OnClickLoadingButton.mjs +36 -0
- package/lib/alt/buttons/OnClickLoadingButton.mjs.map +1 -0
- package/lib/alt/dialogs/DialogWithImageHeader.mjs +14 -0
- package/lib/alt/dialogs/DialogWithImageHeader.mjs.map +1 -0
- package/lib/alt/dialogs/DialogWithSidebar.mjs +106 -0
- package/lib/alt/dialogs/DialogWithSidebar.mjs.map +1 -0
- package/lib/alt/dialogs/MobileBubbleDialog.mjs +49 -0
- package/lib/alt/dialogs/MobileBubbleDialog.mjs.map +1 -0
- package/lib/containers/DialogContainer.mjs +413 -0
- package/lib/containers/DialogContainer.mjs.map +1 -0
- package/lib/containers/Reposition.mjs +35 -0
- package/lib/containers/Reposition.mjs.map +1 -0
- package/lib/containers/usePositioning.mjs +294 -0
- package/lib/containers/usePositioning.mjs.map +1 -0
- package/lib/index.cjs +5009 -0
- package/lib/index.cjs.map +1 -0
- package/lib/index.js +14 -5
- package/lib/index.mjs +37 -0
- package/lib/index.mjs.map +1 -0
- package/lib/useDialogWithToggle.mjs +18 -0
- package/lib/useDialogWithToggle.mjs.map +1 -0
- package/lib/willUseIsSticky.mjs +123 -0
- package/lib/willUseIsSticky.mjs.map +1 -0
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -3128,8 +3128,8 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
|
|
|
3128
3128
|
return React.Children.map(children, processChild);
|
|
3129
3129
|
};
|
|
3130
3130
|
|
|
3131
|
-
var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children"],
|
|
3132
|
-
_excluded2$1 = ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"],
|
|
3131
|
+
var _excluded$9 = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children", "scrollOnHover"],
|
|
3132
|
+
_excluded2$1 = ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "scrollOnHover", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"],
|
|
3133
3133
|
_excluded3$1 = ["children", "sub", "hoverIndex", "autoHover", "menuSlot", "withoutIcons", "onClose", "onHover", "fill", "onClick"],
|
|
3134
3134
|
_excluded4 = ["slot", "sub", "withoutIcons", "children"];
|
|
3135
3135
|
var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4;
|
|
@@ -3246,7 +3246,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3246
3246
|
}, {
|
|
3247
3247
|
key: "componentDidUpdate",
|
|
3248
3248
|
value: function componentDidUpdate() {
|
|
3249
|
-
if (this.props.hover) {
|
|
3249
|
+
if (this.props.hover && this.props.scrollOnHover !== false) {
|
|
3250
3250
|
this.scrollToVisibility();
|
|
3251
3251
|
}
|
|
3252
3252
|
}
|
|
@@ -3273,6 +3273,7 @@ var SimpleLi = /*#__PURE__*/function (_React$Component) {
|
|
|
3273
3273
|
_this$props.subMenu;
|
|
3274
3274
|
var icon = _this$props.icon;
|
|
3275
3275
|
_this$props.children;
|
|
3276
|
+
_this$props.scrollOnHover;
|
|
3276
3277
|
var rest = _objectWithoutProperties(_this$props, _excluded$9);
|
|
3277
3278
|
var Tag = linkTo ? Link$1 : 'a';
|
|
3278
3279
|
return /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
|
|
@@ -3301,7 +3302,8 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3301
3302
|
keepOpen = _ref.keepOpen,
|
|
3302
3303
|
hover = _ref.hover;
|
|
3303
3304
|
_ref.layerIndex;
|
|
3304
|
-
var hoverCursor = _ref.hoverCursor
|
|
3305
|
+
var hoverCursor = _ref.hoverCursor,
|
|
3306
|
+
scrollOnHover = _ref.scrollOnHover;
|
|
3305
3307
|
_ref.passTouchThrough;
|
|
3306
3308
|
var children = _ref.children,
|
|
3307
3309
|
setCursorOnHover = _ref.setCursorOnHover,
|
|
@@ -3335,7 +3337,7 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3335
3337
|
}
|
|
3336
3338
|
};
|
|
3337
3339
|
useEffect(function () {
|
|
3338
|
-
if (hover) {
|
|
3340
|
+
if (hover && scrollOnHover !== false) {
|
|
3339
3341
|
try {
|
|
3340
3342
|
var el = nodeRef.current;
|
|
3341
3343
|
var parent = el.parentElement;
|
|
@@ -3479,6 +3481,9 @@ var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef)
|
|
|
3479
3481
|
_useState2 = _slicedToArray(_useState, 2),
|
|
3480
3482
|
hoverCursor = _useState2[0],
|
|
3481
3483
|
setHoverCursor = _useState2[1];
|
|
3484
|
+
// Hover vindo do mouse não deve rolar a lista: o Chrome dispara mousemove sintético
|
|
3485
|
+
// ao fim do scroll, e o item cortado sob o cursor puxaria a lista de volta.
|
|
3486
|
+
var hoverFromMouse = useRef(false);
|
|
3482
3487
|
var _useContextMenuShared = useContextMenuSharedState(0),
|
|
3483
3488
|
_useContextMenuShared2 = _slicedToArray(_useContextMenuShared, 2),
|
|
3484
3489
|
layerCursor = _useContextMenuShared2[0],
|
|
@@ -3499,6 +3504,7 @@ var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef)
|
|
|
3499
3504
|
}, [layerIndex, layerCursor, hoverCursor]);
|
|
3500
3505
|
useEffect(function () {
|
|
3501
3506
|
if (hoverIndex !== undefined) {
|
|
3507
|
+
if (hoverIndex !== hoverCursor) hoverFromMouse.current = false;
|
|
3502
3508
|
setHoverCursor(Math.min(Math.max(hoverIndex, -1), _getTotalKeyboardItems(children) + 1));
|
|
3503
3509
|
}
|
|
3504
3510
|
}, [hoverIndex !== hoverCursor]);
|
|
@@ -3526,6 +3532,7 @@ var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef)
|
|
|
3526
3532
|
var _direction = e.keyCode - 39;
|
|
3527
3533
|
var max = _getTotalKeyboardItems(children);
|
|
3528
3534
|
var newIndex = (hoverCursor + _direction + max) % max;
|
|
3535
|
+
hoverFromMouse.current = false;
|
|
3529
3536
|
setHoverCursor(newIndex);
|
|
3530
3537
|
onHover(newIndex);
|
|
3531
3538
|
}
|
|
@@ -3545,6 +3552,7 @@ var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef)
|
|
|
3545
3552
|
return sum;
|
|
3546
3553
|
};
|
|
3547
3554
|
var setCursorOnHover = function setCursorOnHover(index) {
|
|
3555
|
+
hoverFromMouse.current = true;
|
|
3548
3556
|
setLayerCursor(layerIndex);
|
|
3549
3557
|
setHoverCursor(index);
|
|
3550
3558
|
onHover(index);
|
|
@@ -3558,6 +3566,7 @@ var ContextMenuComponent = /*#__PURE__*/forwardRef(function (_ref2, unesuredRef)
|
|
|
3558
3566
|
fixedPosition: props.fixed,
|
|
3559
3567
|
hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
|
|
3560
3568
|
hoverCursor: hoverCursor,
|
|
3569
|
+
scrollOnHover: !hoverFromMouse.current,
|
|
3561
3570
|
index: indexRef.current++,
|
|
3562
3571
|
setCursorOnHover: setCursorOnHover,
|
|
3563
3572
|
emitter: itemsEmitter,
|
package/lib/index.mjs
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export { Icon } from './Icon.mjs';
|
|
2
|
+
export { Loading } from './Loading.mjs';
|
|
3
|
+
export { Button, DropdownIcon } from './Button.mjs';
|
|
4
|
+
export { OnClickLoadingButton } from './alt/buttons/OnClickLoadingButton.mjs';
|
|
5
|
+
export { TextButton } from './TextButton.mjs';
|
|
6
|
+
export { LoadingDiv } from './LoadingDiv.mjs';
|
|
7
|
+
export { CloseIcon, ConfirmDialog, DefaultConfirmDialog, Dialog, DialogContent, DialogContentWrapper, DialogError, DialogErrorContent, DialogFooter, DialogIcon, DialogTitle, FooterAuxiliaryContainer } from './Dialog.mjs';
|
|
8
|
+
export { useDialog, useDialogWithToggle } from './useDialogWithToggle.mjs';
|
|
9
|
+
export { DefaultWarningDialog, WarningDialog, WarningDialogIcon, WarningDialogTitle, setWarningDialog, useWarningDialog } from './WarningDialog.mjs';
|
|
10
|
+
export { Notifications, setNotification, useNotification, useNotificationRef, willSetNotification } from './Notifications.mjs';
|
|
11
|
+
export { ToastNotifications, createToastNotification, useToastNotificationToggle, useToastNotifications, willShowToastNotification } from './ToastNotifications.mjs';
|
|
12
|
+
export { PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, hidePersistentNotifications, openPersistentNotification, useIsHiddenPersistentNotifications } from './PersistentNotifications.mjs';
|
|
13
|
+
export { DefaultArrow, addPositioningBound, usePositioning } from './containers/usePositioning.mjs';
|
|
14
|
+
export { Reposition } from './containers/Reposition.mjs';
|
|
15
|
+
export { AnimatedModal, DialogContainer, Modal, ModalContainer, dialogFadeInDown, dialogModalIn, dialogModalOut, getDialogLayersSize, isFakeScrolled, preventDialogPop, removeWindowScroll, useDialogLayers, waitForPop } from './containers/DialogContainer.mjs';
|
|
16
|
+
export { DraggableContainer, DraggableItem, DroppableContainer } from './Draggable.mjs';
|
|
17
|
+
export { Popup } from './Popup.mjs';
|
|
18
|
+
export { Tooltip } from './Tooltip.mjs';
|
|
19
|
+
export { SplitColumnsContainer, fixDoubledLastMarginBottom } from './SplitColumnsContainer.mjs';
|
|
20
|
+
export { ContextListMenu, ContextMenu, ContextMenuComponent, Li, ListHeading, ListItem, ListMenu, ListSeparator, SimpleLi, StickyContainer, contextMenuLayersQuantity } from './ContextMenu.mjs';
|
|
21
|
+
export { ErrorBoundary } from './ErrorBoundary.mjs';
|
|
22
|
+
export { LoadingBar, PageLoader, SuspenseLoadingBar } from './PageLoader.mjs';
|
|
23
|
+
export { FillLastLineResizer } from './FillLastLineResizer.mjs';
|
|
24
|
+
export { defaultAnimationMaker, formatAnimation, getClientRectAnimation, morph, toPosition, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, willUseFlip, willUseFlipSwitch } from './Flip.mjs';
|
|
25
|
+
export { FlipList } from './FlipList.mjs';
|
|
26
|
+
export { AnimationBlockContainer, TransitionDiv } from './TransitionDiv.mjs';
|
|
27
|
+
export { SwitchDiv } from './SwitchDiv.mjs';
|
|
28
|
+
export { willUseIsSticky } from './willUseIsSticky.mjs';
|
|
29
|
+
export { FormatDate } from './FormatDate.mjs';
|
|
30
|
+
export { Image } from './Image.mjs';
|
|
31
|
+
export { DialogWithImageHeader } from './alt/dialogs/DialogWithImageHeader.mjs';
|
|
32
|
+
export { DialogTabMenu, DialogWithSidebar, DialogWithSidebarPresentation, MENU_TAB, SideMenu } from './alt/dialogs/DialogWithSidebar.mjs';
|
|
33
|
+
export { MobileBubbleDialog } from './alt/dialogs/MobileBubbleDialog.mjs';
|
|
34
|
+
export { HistoryLink, Link, Navigate, Route, Router, Routes, useAbsoluteLocation, useAbsolutePath, useLocation, useNavigate, useParams, useSearchParams } from './Link.mjs';
|
|
35
|
+
export { BasicBulletList } from './BasicBulletList.mjs';
|
|
36
|
+
export { useBrowserLocation } from 'wouter/use-browser-location';
|
|
37
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useToggle, useFill } from '@startlibs/core';
|
|
2
|
+
|
|
3
|
+
const useDialog = function (dialog) {
|
|
4
|
+
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
5
|
+
let toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
|
|
6
|
+
const toggle = useToggle(false, toggleCallback);
|
|
7
|
+
useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen, ...args]);
|
|
8
|
+
return toggle.open;
|
|
9
|
+
};
|
|
10
|
+
const useDialogWithToggle = function (dialog) {
|
|
11
|
+
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
12
|
+
const toggle = useToggle();
|
|
13
|
+
useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen, ...args]);
|
|
14
|
+
return toggle;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { useDialog, useDialogWithToggle };
|
|
18
|
+
//# sourceMappingURL=useDialogWithToggle.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogWithToggle.mjs","sources":["../src/useDialogWithToggle.jsx"],"sourcesContent":["import {useToggle,useFill} from '@startlibs/core'\n\nexport const useDialog = (dialog, args = [], toggleCallback) => {\n const toggle = useToggle(false,toggleCallback)\n useFill(\"Dialog\", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen, ...args])\n return toggle.open\n}\nexport const useDialogWithToggle = (dialog, args = []) => {\n const toggle = useToggle()\n useFill(\"Dialog\", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen, ...args])\n return toggle\n}"],"names":["useDialog","dialog","args","arguments","length","undefined","toggleCallback","toggle","useToggle","useFill","isOpen","close","open","useDialogWithToggle"],"mappings":";;MAEaA,SAAS,GAAG,UAACC,MAAM,EAAgC;AAAA,EAAA,IAA9BC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;EAAA,IAAEG,cAAc,GAAAH,SAAA,CAAAC,MAAA,GAAAD,CAAAA,GAAAA,SAAA,MAAAE,SAAA,CAAA;AACzD,EAAA,MAAME,MAAM,GAAGC,SAAS,CAAC,KAAK,EAACF,cAAc,CAAC,CAAA;EAC9CG,OAAO,CAAC,QAAQ,EAAEF,MAAM,CAACG,MAAM,KAAK,KAAK,IAAIT,MAAM,CAACM,MAAM,CAACI,KAAK,CAAC,EAAE,CAACJ,MAAM,CAACG,MAAM,EAAE,GAAGR,IAAI,CAAC,CAAC,CAAA;EAC5F,OAAOK,MAAM,CAACK,IAAI,CAAA;AACpB,EAAC;MACYC,mBAAmB,GAAG,UAACZ,MAAM,EAAgB;AAAA,EAAA,IAAdC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AACnD,EAAA,MAAMI,MAAM,GAAGC,SAAS,EAAE,CAAA;EAC1BC,OAAO,CAAC,QAAQ,EAAEF,MAAM,CAACG,MAAM,KAAK,KAAK,IAAIT,MAAM,CAACM,MAAM,CAAC,EAAE,CAACA,MAAM,CAACG,MAAM,EAAE,GAAGR,IAAI,CAAC,CAAC,CAAA;AACtF,EAAA,OAAOK,MAAM,CAAA;AACf;;;;"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _without from 'lodash/fp/without';
|
|
3
|
+
import _identity from 'lodash/fp/identity';
|
|
4
|
+
import React, { useState, useEffect } from 'react';
|
|
5
|
+
import { willUseSharedCallback, willUseSharedState, useEnsureRef } from '@startlibs/core';
|
|
6
|
+
import styled from 'styled-components';
|
|
7
|
+
import { callIfFunction } from '@startlibs/utils';
|
|
8
|
+
|
|
9
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
|
+
const TOP_TRIGGER = (posInfo, refInfo) => {
|
|
12
|
+
// Started sticking.
|
|
13
|
+
if (posInfo.bottom < refInfo.top) {
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
// Stopped sticking.
|
|
17
|
+
if (posInfo.bottom >= refInfo.top && posInfo.bottom < refInfo.bottom) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const BOTTOM_TRIGGER = (posInfo, refInfo) => {
|
|
22
|
+
// Started sticking.
|
|
23
|
+
if (posInfo.top > refInfo.bottom) {
|
|
24
|
+
return true;
|
|
25
|
+
}
|
|
26
|
+
if (posInfo.top <= refInfo.bottom && posInfo.top > refInfo.top) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const SentinelStyle = /*#__PURE__*/styled.div.withConfig({
|
|
31
|
+
displayName: "willUseIsSticky__SentinelStyle",
|
|
32
|
+
componentId: "sc-1nsyca-0"
|
|
33
|
+
})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], props => props.addCss);
|
|
34
|
+
const willUseIsSticky = function () {
|
|
35
|
+
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
36
|
+
const [useRegister, onChange] = willUseSharedCallback();
|
|
37
|
+
const [useSharedIsSticky,, setSharedIsSticky] = willUseSharedState();
|
|
38
|
+
const createObserver = root => window.IntersectionObserver ? new window.IntersectionObserver((records, observer) => {
|
|
39
|
+
for (const record of records) {
|
|
40
|
+
const targetInfo = record.boundingClientRect;
|
|
41
|
+
const rootBoundsInfo = record.rootBounds;
|
|
42
|
+
if (!rootBoundsInfo) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
onChange(targetInfo, rootBoundsInfo, record.target, record.isIntersecting);
|
|
46
|
+
}
|
|
47
|
+
}, _objectSpread({
|
|
48
|
+
root
|
|
49
|
+
}, options)) : {
|
|
50
|
+
observe: _identity,
|
|
51
|
+
unobserve: _identity
|
|
52
|
+
};
|
|
53
|
+
const observerMap = new Map();
|
|
54
|
+
const getObserver = function () {
|
|
55
|
+
let root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
56
|
+
const result = observerMap.get(root);
|
|
57
|
+
if (result) {
|
|
58
|
+
return result;
|
|
59
|
+
}
|
|
60
|
+
const observer = createObserver(root);
|
|
61
|
+
observerMap.set(root, observer);
|
|
62
|
+
return observer;
|
|
63
|
+
};
|
|
64
|
+
let activeObserved = [];
|
|
65
|
+
const resetObservers = function () {
|
|
66
|
+
let root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
67
|
+
const observer = getObserver(root);
|
|
68
|
+
activeObserved.forEach(observed => {
|
|
69
|
+
observer.unobserve(observed);
|
|
70
|
+
observer.observe(observed);
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
const WithIsSticky = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
74
|
+
let {
|
|
75
|
+
className,
|
|
76
|
+
id,
|
|
77
|
+
css,
|
|
78
|
+
children,
|
|
79
|
+
bottom,
|
|
80
|
+
root,
|
|
81
|
+
intersection,
|
|
82
|
+
onChange
|
|
83
|
+
} = _ref;
|
|
84
|
+
const ensuredRef = useEnsureRef(ref);
|
|
85
|
+
const [isSticky, setIsSticky] = useState(false);
|
|
86
|
+
useRegister((posInfo, refInfo, target, isIntersecting) => {
|
|
87
|
+
if (ensuredRef.current === target) {
|
|
88
|
+
const value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
|
|
89
|
+
if (value !== undefined) {
|
|
90
|
+
setIsSticky(value);
|
|
91
|
+
callIfFunction(onChange, value);
|
|
92
|
+
if (!id) {
|
|
93
|
+
setSharedIsSticky(value);
|
|
94
|
+
} else if (value) {
|
|
95
|
+
setSharedIsSticky(id);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
setIsSticky(false);
|
|
102
|
+
getObserver(callIfFunction(root)).observe(ensuredRef.current);
|
|
103
|
+
activeObserved = activeObserved.concat(ensuredRef.current);
|
|
104
|
+
return () => {
|
|
105
|
+
// observer.unobserve(ref.current)
|
|
106
|
+
activeObserved = _without([ensuredRef.current], activeObserved);
|
|
107
|
+
};
|
|
108
|
+
}, []);
|
|
109
|
+
const renderSentinel = function () {
|
|
110
|
+
let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
111
|
+
return /*#__PURE__*/React.createElement(SentinelStyle, {
|
|
112
|
+
addCss: css,
|
|
113
|
+
className: className,
|
|
114
|
+
ref: ensuredRef
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
return children ? children(renderSentinel, isSticky) : renderSentinel(css);
|
|
118
|
+
});
|
|
119
|
+
return [WithIsSticky, useSharedIsSticky, resetObservers];
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export { willUseIsSticky };
|
|
123
|
+
//# sourceMappingURL=willUseIsSticky.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"willUseIsSticky.mjs","sources":["../src/willUseIsSticky.jsx"],"sourcesContent":["import React, {useEffect, useState} from 'react'\nimport {useEnsureRef, willUseSharedState, willUseSharedCallback} from '@startlibs/core'\nimport styled from 'styled-components'\nimport _ from 'lodash/fp'\nimport {callIfFunction} from '@startlibs/utils'\n\n\nconst TOP_TRIGGER = (posInfo,refInfo) => {\n // Started sticking.\n if (posInfo.bottom < refInfo.top) {\n return true\n }\n // Stopped sticking.\n if (posInfo.bottom >= refInfo.top &&\n posInfo.bottom < refInfo.bottom) {\n return false\n }\n}\nconst BOTTOM_TRIGGER = (posInfo,refInfo) => {\n // Started sticking.\n if (posInfo.top > refInfo.bottom) {\n return true\n }\n if (posInfo.top <= refInfo.bottom &&\n posInfo.top > refInfo.top) {\n return false\n }\n}\n\nconst SentinelStyle = styled.div`\n position:absolute;\n visibility: hidden;\n height:1px;\n width: 1px;\n ${props => props.addCss}\n`\n\nexport const willUseIsSticky = (options = {}) => {\n\n const [useRegister, onChange] = willUseSharedCallback()\n const [useSharedIsSticky,, setSharedIsSticky] = willUseSharedState()\n\n const createObserver = (root) => window.IntersectionObserver ? new window.IntersectionObserver((records, observer) => {\n for (const record of records) {\n const targetInfo = record.boundingClientRect\n const rootBoundsInfo = record.rootBounds\n if (!rootBoundsInfo) {\n return\n }\n onChange(targetInfo,rootBoundsInfo, record.target, record.isIntersecting)\n }\n },{root,...options}) : {observe:_.identity,unobserve:_.identity}\n\n const observerMap = new Map()\n const getObserver = (root = null) => {\n const result = observerMap.get(root)\n if (result) {\n return result\n }\n const observer = createObserver(root)\n observerMap.set(root,observer)\n return observer\n }\n \n let activeObserved = []\n const resetObservers = (root = null) => {\n const observer = getObserver(root)\n activeObserved.forEach((observed) => {\n observer.unobserve(observed)\n observer.observe(observed)\n })\n }\n\n const WithIsSticky = React.forwardRef(({className, id, css, children,bottom, root, intersection,onChange},ref) => {\n const ensuredRef = useEnsureRef(ref)\n const [isSticky,setIsSticky] = useState(false)\n\n useRegister((posInfo,refInfo,target, isIntersecting) => {\n if (ensuredRef.current === target) {\n const value = intersection ? isIntersecting : (bottom ? BOTTOM_TRIGGER(posInfo,refInfo) : TOP_TRIGGER(posInfo,refInfo))\n if (value!==undefined) {\n setIsSticky(value)\n callIfFunction(onChange,value)\n if (!id) {\n setSharedIsSticky(value)\n } else if (value) {\n setSharedIsSticky(id)\n }\n }\n }\n })\n\n useEffect(() => {\n setIsSticky(false)\n getObserver(callIfFunction(root)).observe(ensuredRef.current)\n activeObserved = activeObserved.concat(ensuredRef.current)\n return () => {\n // observer.unobserve(ref.current)\n activeObserved = _.without([ensuredRef.current],activeObserved)\n }\n },[])\n\n const renderSentinel = (css = \"\") => <SentinelStyle addCss={css} className={className} ref={ensuredRef} />\n\n return children\n ? children(renderSentinel,isSticky)\n : renderSentinel(css)\n\n })\n\n\n return [WithIsSticky, useSharedIsSticky, resetObservers]\n}"],"names":["TOP_TRIGGER","posInfo","refInfo","bottom","top","BOTTOM_TRIGGER","SentinelStyle","styled","div","withConfig","displayName","componentId","props","addCss","willUseIsSticky","options","arguments","length","undefined","useRegister","onChange","willUseSharedCallback","useSharedIsSticky","setSharedIsSticky","willUseSharedState","createObserver","root","window","IntersectionObserver","records","observer","record","targetInfo","boundingClientRect","rootBoundsInfo","rootBounds","target","isIntersecting","_objectSpread","observe","_identity","unobserve","observerMap","Map","getObserver","result","get","set","activeObserved","resetObservers","forEach","observed","WithIsSticky","React","forwardRef","_ref","ref","className","id","css","children","intersection","ensuredRef","useEnsureRef","isSticky","setIsSticky","useState","current","value","callIfFunction","useEffect","concat","_without","renderSentinel","createElement"],"mappings":";;;;;;;;;;AAOA,MAAMA,WAAW,GAAGA,CAACC,OAAO,EAACC,OAAO,KAAK;AACvC;AACA,EAAA,IAAID,OAAO,CAACE,MAAM,GAAGD,OAAO,CAACE,GAAG,EAAE;AAChC,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA;AACA,EAAA,IAAIH,OAAO,CAACE,MAAM,IAAID,OAAO,CAACE,GAAG,IAC/BH,OAAO,CAACE,MAAM,GAAGD,OAAO,CAACC,MAAM,EAAE;AACjC,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,CAAC,CAAA;AACD,MAAME,cAAc,GAAGA,CAACJ,OAAO,EAACC,OAAO,KAAK;AAC1C;AACA,EAAA,IAAID,OAAO,CAACG,GAAG,GAAGF,OAAO,CAACC,MAAM,EAAE;AAChC,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,IAAIF,OAAO,CAACG,GAAG,IAAIF,OAAO,CAACC,MAAM,IACjCF,OAAO,CAACG,GAAG,GAAGF,OAAO,CAACE,GAAG,EAAE;AACzB,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,CAAC,CAAA;AAED,MAAME,aAAa,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2DAAA,EAAA,EAAA,CAAA,EAK5BC,KAAK,IAAIA,KAAK,CAACC,MAAM,CACxB,CAAA;AAEYC,MAAAA,eAAe,GAAG,YAAkB;AAAA,EAAA,IAAjBC,OAAO,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;EAE1C,MAAM,CAACG,WAAW,EAAEC,QAAQ,CAAC,GAAGC,qBAAqB,EAAE,CAAA;EACvD,MAAM,CAACC,iBAAiB,GAAGC,iBAAiB,CAAC,GAAGC,kBAAkB,EAAE,CAAA;AAEpE,EAAA,MAAMC,cAAc,GAAIC,IAAI,IAAKC,MAAM,CAACC,oBAAoB,GAAG,IAAID,MAAM,CAACC,oBAAoB,CAAC,CAACC,OAAO,EAAEC,QAAQ,KAAK;AACpH,IAAA,KAAK,MAAMC,MAAM,IAAIF,OAAO,EAAE;AAC5B,MAAA,MAAMG,UAAU,GAAGD,MAAM,CAACE,kBAAkB,CAAA;AAC5C,MAAA,MAAMC,cAAc,GAAGH,MAAM,CAACI,UAAU,CAAA;MACxC,IAAI,CAACD,cAAc,EAAE;AACnB,QAAA,OAAA;AACF,OAAA;AACAd,MAAAA,QAAQ,CAACY,UAAU,EAACE,cAAc,EAAEH,MAAM,CAACK,MAAM,EAAEL,MAAM,CAACM,cAAc,CAAC,CAAA;AAC3E,KAAA;AACF,GAAC,EAAAC,aAAA,CAAA;AAAEZ,IAAAA,IAAAA;GAAQX,EAAAA,OAAO,CAAC,CAAC,GAAG;AAACwB,IAAAA,OAAO,EAAAC,SAAW;AAACC,IAAAA,SAAS,EAAAD,SAAAA;GAAY,CAAA;AAEhE,EAAA,MAAME,WAAW,GAAG,IAAIC,GAAG,EAAE,CAAA;AAC7B,EAAA,MAAMC,WAAW,GAAG,YAAiB;AAAA,IAAA,IAAhBlB,IAAI,GAAAV,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI,CAAA;AAC9B,IAAA,MAAM6B,MAAM,GAAGH,WAAW,CAACI,GAAG,CAACpB,IAAI,CAAC,CAAA;AACpC,IAAA,IAAImB,MAAM,EAAE;AACV,MAAA,OAAOA,MAAM,CAAA;AACf,KAAA;AACA,IAAA,MAAMf,QAAQ,GAAGL,cAAc,CAACC,IAAI,CAAC,CAAA;AACrCgB,IAAAA,WAAW,CAACK,GAAG,CAACrB,IAAI,EAACI,QAAQ,CAAC,CAAA;AAC9B,IAAA,OAAOA,QAAQ,CAAA;GAChB,CAAA;EAED,IAAIkB,cAAc,GAAG,EAAE,CAAA;AACvB,EAAA,MAAMC,cAAc,GAAG,YAAiB;AAAA,IAAA,IAAhBvB,IAAI,GAAAV,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI,CAAA;AACjC,IAAA,MAAMc,QAAQ,GAAGc,WAAW,CAAClB,IAAI,CAAC,CAAA;AAClCsB,IAAAA,cAAc,CAACE,OAAO,CAAEC,QAAQ,IAAK;AACnCrB,MAAAA,QAAQ,CAACW,SAAS,CAACU,QAAQ,CAAC,CAAA;AAC5BrB,MAAAA,QAAQ,CAACS,OAAO,CAACY,QAAQ,CAAC,CAAA;AAC5B,KAAC,CAAC,CAAA;GACH,CAAA;EAED,MAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,CAAAC,IAAA,EAAoEC,GAAG,KAAK;IAAA,IAA3E;MAACC,SAAS;MAAEC,EAAE;MAAEC,GAAG;MAAEC,QAAQ;MAACzD,MAAM;MAAEuB,IAAI;MAAEmC,YAAY;AAACzC,MAAAA,QAAAA;AAAQ,KAAC,GAAAmC,IAAA,CAAA;AACvG,IAAA,MAAMO,UAAU,GAAGC,YAAY,CAACP,GAAG,CAAC,CAAA;IACpC,MAAM,CAACQ,QAAQ,EAACC,WAAW,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE9C/C,WAAW,CAAC,CAAClB,OAAO,EAACC,OAAO,EAACkC,MAAM,EAAEC,cAAc,KAAK;AACtD,MAAA,IAAIyB,UAAU,CAACK,OAAO,KAAK/B,MAAM,EAAE;QACjC,MAAMgC,KAAK,GAAGP,YAAY,GAAIxB,cAAc,GAAIlC,MAAM,GAAGE,cAAc,CAACJ,OAAO,EAACC,OAAO,CAAC,GAAGF,WAAW,CAACC,OAAO,EAACC,OAAO,CAAE,CAAA;QACxH,IAAIkE,KAAK,KAAGlD,SAAS,EAAE;UACrB+C,WAAW,CAACG,KAAK,CAAC,CAAA;AAClBC,UAAAA,cAAc,CAACjD,QAAQ,EAACgD,KAAK,CAAC,CAAA;UAC9B,IAAI,CAACV,EAAE,EAAE;YACPnC,iBAAiB,CAAC6C,KAAK,CAAC,CAAA;WACzB,MAAM,IAAIA,KAAK,EAAE;YAChB7C,iBAAiB,CAACmC,EAAE,CAAC,CAAA;AACvB,WAAA;AACF,SAAA;AACF,OAAA;AACF,KAAC,CAAC,CAAA;AAEFY,IAAAA,SAAS,CAAC,MAAM;MACdL,WAAW,CAAC,KAAK,CAAC,CAAA;AAClBrB,MAAAA,WAAW,CAACyB,cAAc,CAAC3C,IAAI,CAAC,CAAC,CAACa,OAAO,CAACuB,UAAU,CAACK,OAAO,CAAC,CAAA;MAC7DnB,cAAc,GAAGA,cAAc,CAACuB,MAAM,CAACT,UAAU,CAACK,OAAO,CAAC,CAAA;AAC1D,MAAA,OAAO,MAAM;AACX;QACAnB,cAAc,GAAGwB,QAAA,CAAU,CAACV,UAAU,CAACK,OAAO,CAAC,EAACnB,cAAc,CAAC,CAAA;OAChE,CAAA;KACF,EAAC,EAAE,CAAC,CAAA;IAEL,MAAMyB,cAAc,GAAG,YAAA;AAAA,MAAA,IAACd,GAAG,GAAA3C,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAAA,MAAA,oBAAKqC,KAAA,CAAAqB,aAAA,CAACpE,aAAa,EAAA;AAACO,QAAAA,MAAM,EAAE8C,GAAI;AAACF,QAAAA,SAAS,EAAEA,SAAU;AAACD,QAAAA,GAAG,EAAEM,UAAAA;AAAW,OAAE,CAAC,CAAA;AAAA,KAAA,CAAA;AAE1G,IAAA,OAAOF,QAAQ,GACXA,QAAQ,CAACa,cAAc,EAACT,QAAQ,CAAC,GACjCS,cAAc,CAACd,GAAG,CAAC,CAAA;AAEzB,GAAC,CAAC,CAAA;AAGF,EAAA,OAAO,CAACP,YAAY,EAAE9B,iBAAiB,EAAE2B,cAAc,CAAC,CAAA;AAC1D;;;;"}
|