react-ui-basics 0.0.189 → 0.0.190

package/package.json

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

package/src/AutocompleteSelect.js

@@ -22,6 +22,7 @@ import {
 import Button from "./Button";
 import MaterialIcon from "./MaterialIcon";
 import {PureComponent} from "./ReactConstants";
+import ReactDOM from "react-dom";
 
 export const MODE_DEFAULT = 'default';
 export const MODE_INLINE = 'inline';
@@ -99,7 +100,9 @@ class AutocompleteSelect extends PureComponent {
     componentDidMount() {
         addEventListener(DOCUMENT, 'mousedown', this.listener = (e) => {
             if (__state(this).isActive && this.el && !this.el.contains(__target(e))) {
-                this.onClickOutside()
+                if(!__props(this).listPortal || !this.list?.el?.el || !this.list.el.el.contains(__target(e))){
+                    this.onClickOutside()
+                }
             }
         })
         if (__props(this).required) {
@@ -112,11 +115,29 @@ class AutocompleteSelect extends PureComponent {
             }
         }
         this.initSelected(__props(this), __state(this))
+        this.updateListPosition()
+    }
+
+    updateListPosition = () => {
+        if (__props(this).listPortal && __state(this).isActive) {
+            var rect = this.el.getBoundingClientRect();
+            this.setState({
+                listStyles: {
+                    position: 'absolute',
+                    top: rect.bottom + 'px',
+                    left: __left(rect) + 'px',
+                    minWidth: __width(rect) + 'px',
+                    maxHeight: '300px',
+                }
+            })
+        }
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         if (__props(this).value !== __value(prevProps))
             this.initSelected(__props(this), __state(this))
+        if (__state(this).isActive && !prevState.isActive)
+            this.updateListPosition()
     }
 
     initSelected = ({value, mode, allowCustom}, {filterValue = ''}) => {
@@ -174,11 +195,12 @@ class AutocompleteSelect extends PureComponent {
             allowCustom,
             inlineSelected,
             removeIcon,
+            listPortal,
         } = __props(this);
         const id = __props(this).id || this.randomId;
         const selectedComponent = __props(this).selectedComponent || childComponent;
         const {selected = {}, filterValue = '', errored} = __state(this);
-        let {isActive} = __state(this);
+        let {isActive, listStyles} = __state(this);
         if (__props(this).isActive !== UNDEFINED) {
             isActive = __props(this).isActive
         }
@@ -209,6 +231,26 @@ class AutocompleteSelect extends PureComponent {
         const dataFiltered = allowCustom ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
 
         const filterFunction = this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter)
+        let filteredList = <FilteredList className={classNames(isActive && 'visible', listPortal && 'portal')}
+                                         style={listStyles}
+                                         ref={ref('list', this)}
+                                         filter={filterFunction}
+                                         selectSingle={!allowCustom}
+                                         scroll={scroll}
+                                         inline={isInline}
+                                         nextProvider={ref('next', this)}
+                                         prevProvider={ref('prev', this)}
+                                         selectedProvider={ref('getSelected', this)}
+                                         resetProvider={ref('reset', this)}
+                                         onSelect={this.onSelect}
+                                         selected={selected}
+                                         childComponent={childComponent}
+                                         childProps={childProps}
+                                         data={dataFiltered}
+                                         labels={labels}
+        />;
+        filteredList = listPortal ? ReactDOM.createPortal(filteredList, listPortal) : filteredList
+
         return (
             <div id={id}
                  className={classNames(
@@ -333,23 +375,7 @@ class AutocompleteSelect extends PureComponent {
                     </div>
                 )}
 
-                <FilteredList className={classNames(isActive && 'visible')}
-                              ref={ref('list', this)}
-                              filter={filterFunction}
-                              selectSingle={!allowCustom}
-                              scroll={scroll}
-                              inline={isInline}
-                              nextProvider={ref('next', this)}
-                              prevProvider={ref('prev', this)}
-                              selectedProvider={ref('getSelected', this)}
-                              resetProvider={ref('reset', this)}
-                              onSelect={this.onSelect}
-                              selected={selected}
-                              childComponent={childComponent}
-                              childProps={childProps}
-                              data={dataFiltered}
-                              labels={labels}
-                />
+                {filteredList}
             </div>
         )
     }

package/src/FilteredList.css

@@ -18,6 +18,9 @@
   opacity: 1;
   visibility: visible;
 }
+.FilteredList.portal {
+  transition: opacity 0.2s ease-out;
+}
 .FilteredList.inline {
   max-height: 225px;
   margin-top: 5px;

package/src/FilteredList.scss

@@ -22,6 +22,10 @@
     }
   }
 
+  &.portal {
+    transition: opacity 0.2s ease-out;
+  }
+
   &.inline {
     max-height: 225px;
     margin-top: 5px;

package/src/Scrollable.js

@@ -2,7 +2,21 @@ import ReactConstants from "./../ReactConstants"; import {clientHeight as __clie
 import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import './Scrollable.css'; import ReactCreateElement from './ReactCreateElement';
 import PropTypes from 'prop-types';
 import './Scrollable.css'
-import {classNames, preventDefault, WINDOW, addEventListener, removeEventListener, setTimeout, clearTimeout, setInterval, clearInterval, createRef, orNoop, NOOP} from "./Tools";
+import {
+    classNames,
+    preventDefault,
+    WINDOW,
+    addEventListener,
+    removeEventListener,
+    setTimeout,
+    clearTimeout,
+    setInterval,
+    clearInterval,
+    createRef,
+    orNoop,
+    NOOP,
+    ref
+} from "./Tools";
 import {propsGetter, stateGS, PureComponent, render, componentDidMount, componentDidUpdate, componentWillUnmount} from "./ReactConstants";
 
 export const SCROLLBAR_MODE_HIDDEN = 'hidden';
@@ -36,7 +50,6 @@ class Scrollable extends PureComponent {
         const status = stateGS(that);
         const statusH = stateGS(that);
 
-        const containerRef = createRef();
         const viewportRef = createRef();
         const scrollbarRef = createRef();
         const horizontalScrollbarRef = createRef();
@@ -63,7 +76,7 @@ class Scrollable extends PureComponent {
             const viewport = viewportRef();
             const scrollbar = scrollbarRef();
             const scrollbarH = horizontalScrollbarRef();
-            const container = containerRef();
+            const container = that.el;
             const thumb = thumbRef();
             const thumbH = horizontalThumbRef();
 
@@ -340,13 +353,13 @@ class Scrollable extends PureComponent {
         };
         that.getScroll = () => __scrollTop(viewportRef());
         that.getScrollHeight = () => scrollHeightOf(viewportRef());
-        that.getHeight = () => __clientHeight(containerRef());
+        that.getHeight = () => that.el.clientHeight;
 
         that[ReactConstants[3]] = () => {
             const _props = props();
             const {className, children} = _props;
             return (
-                <div className={classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal')} style={styleOf(_props)} ref={containerRef}>
+                <div className={classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal')} style={styleOf(_props)} ref={ref('el', this)}>
                     <div className="viewport" ref={viewportRef}>
                         {children}
                     </div>

package/src/Table.css

@@ -92,3 +92,9 @@
   padding: 0px;
   background-color: rgb(240, 240, 240);
 }
+.Table .editable > .AutocompleteSelect {
+  min-width: unset;
+}
+.Table .editable > .AutocompleteSelect > .selected > .DummyChild {
+  margin: 0;
+}

package/src/Table.scss

@@ -116,6 +116,14 @@
         background-color: rgb(240, 240, 240);
       }
     }
+
+    > .AutocompleteSelect{
+      min-width: unset;
+
+      > .selected > .DummyChild {
+        margin: 0;
+      }
+    }
   }
 
 }

package/src/Table.tsx

@@ -15,7 +15,7 @@ import {
     createRef,
     setInterval,
     createAccessor,
-    UNDEFINED
+    UNDEFINED, DOCUMENT
 } from "./Tools";
 import MaterialIcon from "./MaterialIcon";
 import {componentDidUpdate, componentWillUnmount, render, PureComponent, propsGetter, componentDidMount, stateGSs, stateGS} from "./ReactConstants";
@@ -296,6 +296,7 @@ export interface TableColumnSelect<T> extends TableColumn<T> {
     editorSelectedComponent?: any,
     editorChildComponent?: any,
     prefilter?: any,
+    filter?: (value: any, filterValue: string) => boolean,
 }
 
 class Row<T> extends PureComponent<RowProps<T>> {
@@ -358,7 +359,7 @@ class Row<T> extends PureComponent<RowProps<T>> {
                                 data={(column as TableColumnSelect<T>).editorData}
                                 focused={true}
                                 withArrow={false}
-                                withFilter={false}
+                                withFilter={true}
                                 selectedMode={'inline'}
                                 selectedComponent={(column as TableColumnSelect<T>).editorSelectedComponent}
                                 mode={(column as TableColumnSelect<T>).multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT}
@@ -371,6 +372,8 @@ class Row<T> extends PureComponent<RowProps<T>> {
                                 childComponent={(column as TableColumnSelect<T>).editorChildComponent}
                                 onCancel={cancelEditing}
                                 prefilter={(column as TableColumnSelect<T>).prefilter}
+                                filter={(column as TableColumnSelect<T>).filter}
+                                listPortal={DOCUMENT.body}
                             />
                         )}
                         {displayEditor && column.editor === editorSwitch && (