react-ui-basics 0.0.250 → 0.0.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.250",
+  "version": "0.0.252",
   "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/FilteredList.tsx

@@ -17,7 +17,7 @@ export interface FilteredListProps<T> {
     selectedProvider?: (cb: () => void) => void
     data: T[]
     labels?: Labels<T>
-    filter?: (item: T) => boolean
+    filter?: (item: any, id: T) => boolean
     className?: string
     selected?: T | { [key: string]: boolean } | { [key: number]: boolean }
     inline?: boolean
@@ -99,8 +99,8 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
                     onMouseEnter={e => this.setState({selected: id})}
                     onMouseLeave={e => id === this.state.selected && this.setState({selected: null})}
                     className={classNames('child', this.state.selected === id && 'active', selected === id || (isObject(selected) && selected[id as (string | number)]) && 'selected')}
-                    classProvider={it => {
-                        const hidden = !filter(it);
+                    classProvider={(it, id) => {
+                        const hidden = !filter(it, id);
                         this.hidden.set(id, hidden)
                         return hidden && 'hidden';
                     }}
@@ -191,7 +191,7 @@ interface ItemWrapperProps {
     onMouseDown?: MouseEventHandler
     onMouseEnter?: MouseEventHandler
     onMouseLeave?: MouseEventHandler
-    classProvider?: (data) => string
+    classProvider?: (data, id) => string
     className?: string
     childComponent
     childProps
@@ -211,7 +211,7 @@ class ItemWrapper extends React.Component<ItemWrapperProps> {
             dataConsumer: (data) => this.data = data,
         });
 
-        const cssClass = orNoop(classProvider)(this.data);
+        const cssClass = orNoop(classProvider)(this.data, id);
         return (
             <div className={classNames('ItemWrapper', cssClass, className)}
                  onMouseEnter={onMouseEnter}

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);