@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.
Files changed (76) hide show
  1. package/lib/BasicBulletList.mjs +9 -0
  2. package/lib/BasicBulletList.mjs.map +1 -0
  3. package/lib/Button.mjs +95 -0
  4. package/lib/Button.mjs.map +1 -0
  5. package/lib/ContextMenu.mjs +461 -0
  6. package/lib/ContextMenu.mjs.map +1 -0
  7. package/lib/Dialog.mjs +232 -0
  8. package/lib/Dialog.mjs.map +1 -0
  9. package/lib/Draggable.mjs +880 -0
  10. package/lib/Draggable.mjs.map +1 -0
  11. package/lib/ErrorBoundary.mjs +108 -0
  12. package/lib/ErrorBoundary.mjs.map +1 -0
  13. package/lib/FillLastLineResizer.mjs +238 -0
  14. package/lib/FillLastLineResizer.mjs.map +1 -0
  15. package/lib/Flip.mjs +604 -0
  16. package/lib/Flip.mjs.map +1 -0
  17. package/lib/FlipList.mjs +186 -0
  18. package/lib/FlipList.mjs.map +1 -0
  19. package/lib/FormatDate.mjs +25 -0
  20. package/lib/FormatDate.mjs.map +1 -0
  21. package/lib/Icon.mjs +50 -0
  22. package/lib/Icon.mjs.map +1 -0
  23. package/lib/Image.mjs +41 -0
  24. package/lib/Image.mjs.map +1 -0
  25. package/lib/Link.mjs +116 -0
  26. package/lib/Link.mjs.map +1 -0
  27. package/lib/Loading.mjs +10 -0
  28. package/lib/Loading.mjs.map +1 -0
  29. package/lib/LoadingDiv.mjs +83 -0
  30. package/lib/LoadingDiv.mjs.map +1 -0
  31. package/lib/Notifications.mjs +63 -0
  32. package/lib/Notifications.mjs.map +1 -0
  33. package/lib/PageLoader.mjs +42 -0
  34. package/lib/PageLoader.mjs.map +1 -0
  35. package/lib/PersistentNotifications.mjs +130 -0
  36. package/lib/PersistentNotifications.mjs.map +1 -0
  37. package/lib/Popup.mjs +49 -0
  38. package/lib/Popup.mjs.map +1 -0
  39. package/lib/SplitColumnsContainer.mjs +43 -0
  40. package/lib/SplitColumnsContainer.mjs.map +1 -0
  41. package/lib/SwitchDiv.mjs +61 -0
  42. package/lib/SwitchDiv.mjs.map +1 -0
  43. package/lib/TextButton.mjs +41 -0
  44. package/lib/TextButton.mjs.map +1 -0
  45. package/lib/ToastNotifications.mjs +215 -0
  46. package/lib/ToastNotifications.mjs.map +1 -0
  47. package/lib/Tooltip.mjs +160 -0
  48. package/lib/Tooltip.mjs.map +1 -0
  49. package/lib/TransitionDiv.mjs +56 -0
  50. package/lib/TransitionDiv.mjs.map +1 -0
  51. package/lib/WarningDialog.mjs +84 -0
  52. package/lib/WarningDialog.mjs.map +1 -0
  53. package/lib/alt/buttons/OnClickLoadingButton.mjs +36 -0
  54. package/lib/alt/buttons/OnClickLoadingButton.mjs.map +1 -0
  55. package/lib/alt/dialogs/DialogWithImageHeader.mjs +14 -0
  56. package/lib/alt/dialogs/DialogWithImageHeader.mjs.map +1 -0
  57. package/lib/alt/dialogs/DialogWithSidebar.mjs +106 -0
  58. package/lib/alt/dialogs/DialogWithSidebar.mjs.map +1 -0
  59. package/lib/alt/dialogs/MobileBubbleDialog.mjs +49 -0
  60. package/lib/alt/dialogs/MobileBubbleDialog.mjs.map +1 -0
  61. package/lib/containers/DialogContainer.mjs +413 -0
  62. package/lib/containers/DialogContainer.mjs.map +1 -0
  63. package/lib/containers/Reposition.mjs +35 -0
  64. package/lib/containers/Reposition.mjs.map +1 -0
  65. package/lib/containers/usePositioning.mjs +294 -0
  66. package/lib/containers/usePositioning.mjs.map +1 -0
  67. package/lib/index.cjs +5009 -0
  68. package/lib/index.cjs.map +1 -0
  69. package/lib/index.js +14 -5
  70. package/lib/index.mjs +37 -0
  71. package/lib/index.mjs.map +1 -0
  72. package/lib/useDialogWithToggle.mjs +18 -0
  73. package/lib/useDialogWithToggle.mjs.map +1 -0
  74. package/lib/willUseIsSticky.mjs +123 -0
  75. package/lib/willUseIsSticky.mjs.map +1 -0
  76. 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;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startlibs/components",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "Startlibs Components",
5
5
  "main": "lib/index.js",
6
6
  "sideEffects": false,