react-ui-basics 0.0.251 → 0.0.253

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.251",
+  "version": "0.0.253",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/AutocompleteSelect.js

@@ -122,19 +122,28 @@ class AutocompleteSelect extends PureComponent {
     }
 
     updateListPosition = () => {
-        if (__props(this).listPortal && __state(this).isActive) {
-            var rect = this.el.getBoundingClientRect();
+        if (__props(this).listPortal && __state(this).isActive && this.el) {
+            const rect = this.el.getBoundingClientRect();
+            const listPortal = __props(this).listPortal;
+            const portalRect = listPortal.getBoundingClientRect ? listPortal.getBoundingClientRect() : {left: 0, top: 0};
+            const scrollLeft = __scrollLeft(listPortal) || 0;
+            const scrollTop = __scrollTop(listPortal) || 0;
+
+            const list = this.list?.el?.el || this.list?.el || this.list;
+            const listRect = list?.getBoundingClientRect ? list.getBoundingClientRect() : null;
+            const listWidth = (listRect && __width(listRect)) || __width(rect);
+
             let listPortalPosition = __props(this).listPortalPosition;
             let listStyles = {
                 position: 'absolute',
-                top: rect.bottom + 'px',
+                top: (rect.bottom - __top(portalRect) + scrollTop) + 'px',
                 minWidth: __width(rect) + 'px',
                 maxHeight: '300px',
             };
             if (listPortalPosition === 'right')
-                listStyles.right = (window.innerWidth - rect.right) + 'px'
+                listStyles.left = (rect.right - __left(portalRect) + scrollLeft - listWidth) + 'px'
             else
-                listStyles.left = __left(rect) + 'px'
+                listStyles.left = (__left(rect) - __left(portalRect) + scrollLeft) + 'px'
 
             this.setState({
                 listStyles: listStyles

package/src/AutocompleteSelect.test.js

@@ -0,0 +1,103 @@
+import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import React from 'react';
+import {mount} from 'enzyme';
+import AutocompleteSelect from "./AutocompleteSelect";
+
+describe('AutocompleteSelect listPortal position', () => {
+    it('calculates list position with listPortal and scroll when listPortalPosition is left', () => {
+        const portal = document.createElement('div');
+        portal.scrollTop = 50;
+        portal.scrollLeft = 20;
+        portal.getBoundingClientRect = () => ({
+            top: 100,
+            left: 50,
+            bottom: 400,
+            right: 350,
+            width: 300,
+            height: 300,
+        });
+
+        const wrapper = mount(
+            <AutocompleteSelect
+                listPortal={portal}
+                data={['item1', 'item2']}
+            />
+        );
+
+        const instance = wrapper.instance();
+        instance.el.getBoundingClientRect = () => ({
+            top: 150,
+            bottom: 186,
+            left: 80,
+            right: 280,
+            width: 200,
+            height: 36,
+        });
+
+        wrapper.setState({isActive: true});
+        instance.updateListPosition();
+
+        expect(__state(instance).listStyles).toEqual({
+            position: 'absolute',
+            top: `${186 - 100 + 50}px`, // 136px
+            left: `${80 - 50 + 20}px`,  // 50px
+            minWidth: '200px',
+            maxHeight: '300px',
+        });
+    });
+
+    it('calculates list position with listPortal and list bounding rect when listPortalPosition is right', () => {
+        const portal = document.createElement('div');
+        portal.scrollTop = 30;
+        portal.scrollLeft = 10;
+        portal.getBoundingClientRect = () => ({
+            top: 100,
+            left: 50,
+            bottom: 500,
+            right: 450,
+            width: 400,
+            height: 400,
+        });
+
+        const wrapper = mount(
+            <AutocompleteSelect
+                listPortal={portal}
+                listPortalPosition="right"
+                data={['item1', 'item2']}
+            />
+        );
+
+        const instance = wrapper.instance();
+        instance.el.getBoundingClientRect = () => ({
+            top: 150,
+            bottom: 186,
+            left: 100,
+            right: 300,
+            width: 200,
+            height: 36,
+        });
+
+        // Mock list getBoundingClientRect with width 250
+        if (instance.list?.el?.el) {
+            instance.list.el.el.getBoundingClientRect = () => ({
+                top: 0,
+                left: 0,
+                bottom: 200,
+                right: 250,
+                width: 250,
+                height: 200,
+            });
+        }
+
+        wrapper.setState({isActive: true});
+        instance.updateListPosition();
+
+        // rect.right (300) - __left(portalRect) (50) + scrollLeft (10) - listWidth (250) = 10px
+        expect(__state(instance).listStyles).toEqual({
+            position: 'absolute',
+            top: `${186 - 100 + 30}px`, // 116px
+            left: `${300 - 50 + 10 - 250}px`, // 10px
+            minWidth: '200px',
+            maxHeight: '300px',
+        });
+    });
+});

package/src/ReadyListener.tsx

@@ -5,17 +5,22 @@ import {orNoop} from "./Tools";
 
 export interface NotReadyIndicatorProps {
     onChange?: (ready: boolean) => void
-    render?: (ready: boolean) => JSX.Element | ReactNode
+    render?: (ready: boolean, notReadyElements: string[]) => JSX.Element | ReactNode
     children?: ReactNode
 }
 
+export interface NotReadyProps {
+    name?: string
+}
+
 interface NotReadyIndicatorState {
     r: boolean
 }
 
 export const createReadyListener = () => {
     let indicator,
-        count = 0;
+        count = 0,
+        notReadyElements: string[] = [];
 
     class NotReadyIndicator extends PureComponent<NotReadyIndicatorProps, NotReadyIndicatorState> {
         constructor(properties) {
@@ -29,25 +34,30 @@ export const createReadyListener = () => {
                     ready = state(that).r;
 
                 if (renderer)
-                    return renderer(ready);
+                    return renderer(ready, notReadyElements);
                 else
                     return (!ready && _props[children]) || null;
             };
             that[componentDidMount] = that[componentDidUpdate] = () => {
-                orNoop(props(that).onChange)(state(that).r);
+                // console.log('NotReadyIndicator.update.mounted', state(that).r, count)
+                orNoop(props(that).onChange)(state(that).r && count === 0);
             }
         }
     }
 
-    class NotReady extends PureComponent {
-        constructor(props) {
+    class NotReady extends PureComponent<NotReadyProps> {
+        constructor(props: NotReadyProps) {
             super(props);
             const that = this;
+            count++;
+            // console.log('NotReady created')
             that[componentDidMount] = () => {
-                count++;
+                notReadyElements.push(that.props.name || 'unknown')
                 setState(indicator, {r: false});
             };
             that[componentWillUnmount] = () => {
+                let index = notReadyElements.indexOf(that.props.name || 'unknown')
+                notReadyElements.splice(index, 1)
                 setState(indicator, {r: --count === 0});
             };
             that[render] = () => null;

package/src/Tools.ts

@@ -184,7 +184,7 @@ export class Comparators {
     static SORT_ASC: SortOrder = 'ASC';
     static SORT_DESC: SortOrder = 'DESC';
 
-    static of = <T>(field: SortField<T> | SortField<T>[], order: SortOrder | SortOrder[], data?: T[]): Comparator<T> => {
+    static of = <T>(field: SortField<T> | SortField<T>[], order: SortOrder | SortOrder[] = Comparators.SORT_ASC, data?: T[]): Comparator<T> => {
         let comparator;
         if (Array.isArray(field)) {
             const isOrderArray = Array.isArray(order);