@singularsystems/neo-react 1.0.14 → 1.0.15

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 (5) hide show
  1. package/dist/ReactComponents/Button.d.ts +2 -0
  2. package/dist/ReactComponents/Button.js +8 -1
  3. package/dist/ReactComponents/Grid/StickyTableHeader.d.ts +4 -1
  4. package/dist/ReactComponents/Grid/StickyTableHeader.js +23 -11
  5. package/package.json +3 -3
package/dist/ReactComponents/Button.d.ts CHANGED
@@ -13,12 +13,14 @@ export default class Button extends ComponentBase<IButtonProps, IButtonState> {
13
13
  menuDom: React.RefObject<HTMLDivElement>;
14
14
  private iconFactory;
15
15
  private windowClickHandler;
16
+ private positionHelper?;
16
17
  constructor(props: IButtonProps);
17
18
  showMenu(): void;
18
19
  hideMenu(): void;
19
20
  private menuItemClicked;
20
21
  private windowClicked;
21
22
  afterRender(): void;
23
+ componentWillUnmount(): void;
22
24
  render(): JSX.Element;
23
25
  }
24
26
  export {};
package/dist/ReactComponents/Button.js CHANGED
@@ -25,10 +25,12 @@ var Button = /** @class */ (function (_super) {
25
25
  }
26
26
  };
27
27
  Button.prototype.hideMenu = function () {
28
+ var _a;
28
29
  if (this.state.isExpanded) {
29
30
  this.setState({ isExpanded: false });
30
31
  }
31
32
  window.removeEventListener("click", this.windowClickHandler);
33
+ (_a = this.positionHelper) === null || _a === void 0 ? void 0 : _a.dispose();
32
34
  };
33
35
  Button.prototype.menuItemClicked = function (e, data, userEvent) {
34
36
  this.hideMenu();
@@ -48,9 +50,14 @@ var Button = /** @class */ (function (_super) {
48
50
  };
49
51
  Button.prototype.afterRender = function () {
50
52
  if (this.btnGroupDom.current && this.menuDom.current) {
51
- Components.PositionHelper.checkScreenBounds(this.btnGroupDom.current, this.menuDom.current, undefined, this.props.menuAlignment === "right");
53
+ this.menuDom.current.style.position = "fixed"; // override bootstrap style.
54
+ this.positionHelper = new Components.FixedPositionHelper(this.btnGroupDom.current, this.menuDom.current, this.props.menuAlignment === "right");
52
55
  }
53
56
  };
57
+ Button.prototype.componentWillUnmount = function () {
58
+ var _a;
59
+ (_a = this.positionHelper) === null || _a === void 0 ? void 0 : _a.dispose();
60
+ };
54
61
  Button.prototype.render = function () {
55
62
  var _this = this;
56
63
  var _a;
package/dist/ReactComponents/Grid/StickyTableHeader.d.ts CHANGED
@@ -11,7 +11,10 @@ export declare class StickyTableHeader {
11
11
  * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
12
12
  */
13
13
  constructor(table: HTMLTableElement, fixedElement?: HTMLElement | undefined);
14
- private scrollParent?;
14
+ /** Parent element that may scroll, requiring a position update. */
15
+ private scrollElement?;
16
+ /** Fixed height parent element that the grid scrolls within. */
17
+ private relativeParent?;
15
18
  private header;
16
19
  private headerCopy?;
17
20
  private headerHeight;
package/dist/ReactComponents/Grid/StickyTableHeader.js CHANGED
@@ -16,12 +16,17 @@ var StickyTableHeader = /** @class */ (function () {
16
16
  throw Error("Table must have a header section.");
17
17
  }
18
18
  this.header = table.tHead;
19
- this.scrollParent = StickyTableHeader.getParentScrollElement(table);
19
+ this.scrollElement = StickyTableHeader.getParentScrollElement(table);
20
+ if (this.scrollElement) {
21
+ if (this.scrollElement.style.height || this.scrollElement.style.maxHeight) {
22
+ this.relativeParent = this.scrollElement;
23
+ }
24
+ }
20
25
  this.handleScroll = this.handleScroll.bind(this);
21
26
  this.onPossibleContentChange = this.onPossibleContentChange.bind(this);
22
27
  document.addEventListener("scroll", this.handleScroll);
23
- if (this.scrollParent) {
24
- this.scrollParent.addEventListener("scroll", this.handleScroll);
28
+ if (this.scrollElement) {
29
+ this.scrollElement.addEventListener("scroll", this.handleScroll);
25
30
  }
26
31
  table.addEventListener("keydown", this.onPossibleContentChange);
27
32
  table.addEventListener("mouseup", this.onPossibleContentChange);
@@ -31,10 +36,10 @@ var StickyTableHeader = /** @class */ (function () {
31
36
  // otherwise if there is a fixed (non scrolling) element at the top of the page, then the headers must appear below that.
32
37
  // otherwise the headers will stick to the top of the screen.
33
38
  var fixedElement = null;
34
- if (!this.scrollParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
39
+ if (!this.relativeParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
35
40
  fixedElement = this.fixedElement;
36
41
  }
37
- var topBoundary = this.scrollParent ? this.scrollParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
42
+ var topBoundary = this.relativeParent ? this.relativeParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
38
43
  var tableBounds = this.table.getBoundingClientRect();
39
44
  var tbodyBounds = this.table.tBodies[this.table.tBodies.length - 1].getBoundingClientRect();
40
45
  if (tableBounds.top < topBoundary && tbodyBounds.bottom - this.headerHeight > topBoundary) {
@@ -50,6 +55,11 @@ var StickyTableHeader = /** @class */ (function () {
50
55
  }
51
56
  this.header.style.left = tableBounds.left + "px";
52
57
  this.header.style.top = topBoundary + "px";
58
+ if (this.scrollElement) {
59
+ var left = this.scrollElement.scrollLeft;
60
+ var width = this.scrollElement.clientWidth + left;
61
+ this.header.style.clipPath = "rect(0px ".concat(width, "px 100% ").concat(left, "px)");
62
+ }
53
63
  }
54
64
  else {
55
65
  this.setColumnWidths(true);
@@ -59,6 +69,7 @@ var StickyTableHeader = /** @class */ (function () {
59
69
  StickyTableHeader.prototype.removeCopy = function () {
60
70
  if (this.headerCopy) {
61
71
  this.header.classList.remove("neo-grid-fixed-header");
72
+ this.header.style.clipPath = "";
62
73
  this.table.removeChild(this.headerCopy);
63
74
  this.headerCopy = undefined;
64
75
  }
@@ -81,8 +92,8 @@ var StickyTableHeader = /** @class */ (function () {
81
92
  };
82
93
  StickyTableHeader.prototype.dispose = function () {
83
94
  document.removeEventListener("scroll", this.handleScroll);
84
- if (this.scrollParent) {
85
- this.scrollParent.removeEventListener("scroll", this.handleScroll);
95
+ if (this.scrollElement) {
96
+ this.scrollElement.removeEventListener("scroll", this.handleScroll);
86
97
  }
87
98
  this.table.removeEventListener("keydown", this.onPossibleContentChange);
88
99
  this.table.removeEventListener("mouseup", this.onPossibleContentChange);
@@ -92,10 +103,11 @@ var StickyTableHeader = /** @class */ (function () {
92
103
  * Returns the first parent element that has a scrollbar.
93
104
  */
94
105
  StickyTableHeader.getParentScrollElement = function (element) {
95
- var current = element;
96
- while (current) {
97
- if ((current.style.height || current.style.maxHeight) &&
98
- (current.style.overflow === "scroll" || current.style.overflow === "auto" || current.style.overflowY === "scroll" || current.style.overflowY === "auto")) {
106
+ var current = element.parentElement;
107
+ var depth = 0;
108
+ while (current && depth < 5) {
109
+ var computedStyle = window.getComputedStyle(current);
110
+ if (computedStyle.overflowX === "auto" || computedStyle.overflowX === "scroll" || computedStyle.overflowY === "auto" || computedStyle.overflowY === "scroll") {
99
111
  return current;
100
112
  }
101
113
  current = current.parentElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@singularsystems/neo-react",
3
- "version": "1.0.14",
3
+ "version": "1.0.15",
4
4
  "description": "React application logic and components for the Neo client library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
31
31
  "typescript": "5.4.2"
32
32
  },
33
33
  "dependencies": {
34
- "@singularsystems/neo-core": "1.0.11",
34
+ "@singularsystems/neo-core": "1.0.12",
35
35
  "@types/rc-slider": "^8.6.5",
36
36
  "@types/react-color": "^3.0.1",
37
37
  "axios": "1.6.7",
@@ -49,7 +49,7 @@
49
49
  "tslib": "2.5.0"
50
50
  },
51
51
  "peerDependencies": {
52
- "@singularsystems/neo-core": ">=1.0.11",
52
+ "@singularsystems/neo-core": ">=1.0.12",
53
53
  "axios": ">=1.6.2",
54
54
  "inversify": ">=5.0.1",
55
55
  "mobx": ">=6.9.0",