react-ui-basics 0.0.189 → 0.0.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.189",
+  "version": "0.0.191",
   "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/DatePicker.css

@@ -8,21 +8,25 @@
 .DatePicker > .TextField input {
   text-align: center;
 }
-.DatePicker .calendar {
+
+.calendar {
   user-select: none;
   position: absolute;
   top: 33px;
   z-index: 10;
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
   transition: 0.2s all ease;
   opacity: 0;
   visibility: hidden;
 }
-.DatePicker .calendar.focused {
+.calendar.focused {
   opacity: 1;
   visibility: visible;
 }
-.DatePicker .monthSelect {
+.calendar .monthSelect {
+  align-items: center;
   margin-bottom: 0;
   background: white;
   font-size: 12px;
@@ -31,39 +35,39 @@
   padding-left: 16px;
   height: 40px;
 }
-.DatePicker .monthSelect span {
+.calendar .monthSelect span {
   margin-right: auto;
 }
-.DatePicker .monthSelect .Button {
+.calendar .monthSelect .Button {
   min-width: 25px;
   min-height: 25px;
 }
-.DatePicker .monthSelect .Button .material-icons {
+.calendar .monthSelect .Button .material-icons {
   font-size: 16px;
 }
-.DatePicker .monthSelect .Button.disabled {
+.calendar .monthSelect .Button.disabled {
   background: transparent;
 }
-.DatePicker .CalendarMonthView {
+.calendar .CalendarMonthView {
   background: white;
 }
-.DatePicker .CalendarMonthView .headers, .DatePicker .CalendarMonthView .days {
+.calendar .CalendarMonthView .headers, .calendar .CalendarMonthView .days {
   margin-bottom: 0;
 }
-.DatePicker .CalendarMonthView .header {
+.calendar .CalendarMonthView .header {
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   text-transform: uppercase;
   margin: 5px;
 }
-.DatePicker .CalendarMonthView .day {
+.calendar .CalendarMonthView .day {
   font-size: 10px;
 }
-.DatePicker .CalendarMonthView .day.notSelectedMonth {
+.calendar .CalendarMonthView .day.notSelectedMonth {
   color: #969696;
 }
-.DatePicker .CalendarMonthView .day span {
+.calendar .CalendarMonthView .day span {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -74,20 +78,20 @@
   transition: 0.2s all ease;
   cursor: pointer;
 }
-.DatePicker .CalendarMonthView .day span:hover {
+.calendar .CalendarMonthView .day span:hover {
   background-color: #e6e6e6;
 }
-.DatePicker .CalendarMonthView .day span.inactive {
+.calendar .CalendarMonthView .day span.inactive {
   color: lightgray;
   cursor: unset;
 }
-.DatePicker .CalendarMonthView .day span.inactive:hover {
+.calendar .CalendarMonthView .day span.inactive:hover {
   background: unset;
 }
-.DatePicker .CalendarMonthView .day span.selected {
+.calendar .CalendarMonthView .day span.selected {
   color: white;
   background-color: #2196F3;
 }
-.DatePicker .CalendarMonthView .day span.selected:hover {
+.calendar .CalendarMonthView .day span.selected:hover {
   background-color: #51adf6;
 }

package/src/DatePicker.scss

@@ -11,26 +11,28 @@
       text-align: center;
     }
   }
-
-  .calendar {
-    user-select: none;
-    position: absolute;
-    top: 33px;
-    z-index: 10;
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-
-    transition: 0.2s all ease;
-    opacity: 0;
-    visibility: hidden;
-
-    &.focused {
-      opacity: 1;
-      visibility: visible;
-    }
+}
+
+.calendar {
+  user-select: none;
+  position: absolute;
+  top: 33px;
+  z-index: 10;
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+
+  transition: 0.2s all ease;
+  opacity: 0;
+  visibility: hidden;
+
+  &.focused {
+    opacity: 1;
+    visibility: visible;
   }
 
-
   .monthSelect {
+    align-items: center;
     margin-bottom: 0;
     background: white;
     font-size: 12px;

package/src/DatePicker.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import ReactDOM from "react-dom";
 import './DatePicker.css'
 import TextField from "./TextField";
 import * as DateTools from "./DateTools";
-import {orNoop, classNames, preventDefault} from "./Tools";
+import {orNoop, classNames, preventDefault, ref} from "./Tools";
 import Button from './Button'
 import CalendarMonthView from "./CalendarMonthView";
 import MaterialIcon from "./MaterialIcon";
@@ -41,7 +42,8 @@ export interface DatePickerProps {
     parser: (input: string) => Date
     onChange: (e) => void
     dayOfWeekToString: (day: number) => string | JSX.Element
-    monthToString: (day: number) => string | JSX.Element
+    monthToString: (day: number) => string | JSX.Element,
+    portal?: Element | DocumentFragment
 }
 
 interface DatePickerState {
@@ -49,10 +51,12 @@ interface DatePickerState {
     value: Date,
     selectedMonth: DateExtended,
     text: string,
+    popupStyles?: any,
 }
 
 class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     private el: HTMLDivElement;
+    private popup: HTMLDivElement;
     private listener: (e) => void;
 
     constructor(props: DatePickerProps) {
@@ -78,7 +82,8 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
         if (this.props.open !== prevProps.open) {
             const open = !!this.props.open
             this.setState({
-                focused: open
+                focused: open,
+                popupStyles: this.getPopupStyles()
             })
         }
         if (!this.state.focused && !!prevState.focused) {
@@ -86,10 +91,24 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
         }
     };
 
+    private getPopupStyles = () => {
+        const boundingClientRect = this.el.getBoundingClientRect();
+        return {
+            left: boundingClientRect.left + 'px',
+            top: boundingClientRect.bottom + 'px',
+        }
+    };
+
     componentDidMount() {
         document.addEventListener('mousedown', this.listener = (e) => {
-            if (this.state.focused && !this.el.contains(e.target))
-                this.setState({focused: false});
+            if (this.state.focused && !this.el.contains(e.target)) {
+                if (!this.props.portal || !this.popup.contains(e.target)) {
+                    this.setState({focused: false});
+                }
+            }
+        })
+        this.setState({
+            popupStyles: this.getPopupStyles()
         })
     };
 
@@ -98,35 +117,76 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     };
 
     shouldComponentUpdate(nextProps, nextState, nextContext) {
-        if (!DateTools.equals(this.props.value, nextProps.value))
+        if (!DateTools.equals(this.props.value, nextProps.value)) {
             return true;
+        }
 
-        if (!DateTools.equals(this.state.value, nextState.value))
+        if (!DateTools.equals(this.state.value, nextState.value)) {
             return true;
+        }
 
-        if (this.props.open !== nextProps.open)
+        if (this.props.open !== nextProps.open) {
             return true;
+        }
 
-        if (this.state.text !== nextState.text)
+        if (this.state.text !== nextState.text) {
             return true;
+        }
 
-        if (this.state.focused !== nextState.focused)
+        if (this.state.focused !== nextState.focused) {
             return true;
+        }
 
-        if (this.state.selectedMonth !== nextState.selectedMonth)
+        if (this.state.selectedMonth !== nextState.selectedMonth) {
             return true;
+        }
 
-        if (!DateTools.equals(this.props.minDate, nextProps.minDate))
+        if (!DateTools.equals(this.props.minDate, nextProps.minDate)) {
             return true;
+        }
 
         return false;
     };
 
     render() {
-        const {minDate, formatter, parser, dayOfWeekToString, monthToString, renderInput} = this.props;
-        const {value, text, focused, selectedMonth} = this.state;
-
-        return <div className={`DatePicker`} ref={el => this.el = el}>
+        const {minDate, formatter, parser, dayOfWeekToString, monthToString, renderInput, portal} = this.props;
+        const {value, text, focused, selectedMonth, popupStyles } = this.state;
+
+        let popup = <div className={classNames('calendar', focused && 'focused', portal && 'portal')}
+                         ref={ref('popup', this)}
+                         style={popupStyles}>
+            <div className={'row monthSelect'}>
+                <span>
+                    {monthToString(selectedMonth.get(DateTools.TimeUnit.MONTH))}
+                    &nbsp;{selectedMonth.get(DateTools.TimeUnit.YEAR)}
+                </span>
+                <Button flat={true} round={true} disabled={minDate && DateTools.dateOf(selectedMonth).isBefore(minDate)} onClick={() => {
+                    this.setState({selectedMonth: DateTools.dateOf(selectedMonth).subtract(1, DateTools.TimeUnit.MONTH)})
+                }}>
+                    <MaterialIcon icon={'chevron_left'}/>
+                </Button>
+                <Button flat={true} round={true} onClick={() => {
+                    this.setState({selectedMonth: DateTools.dateOf(selectedMonth).add(1, DateTools.TimeUnit.MONTH)})
+                }}>
+                    <MaterialIcon icon={'chevron_right'}/>
+                </Button>
+            </div>
+            <CalendarMonthView monthOf={selectedMonth}
+                               dayOfWeekToString={dayOfWeekToString}
+                               dayRenderer={(date) => <DayRenderer
+                                   day={DateTools.dateOf(date)}
+                                   selected={value}
+                                   minDate={minDate}
+                                   onClick={value => {
+                                       this.onChange(value)
+                                       this.setState({focused: false, text: formatter(value)});
+                                   }}
+                               />}/>
+        </div>;
+
+        popup = portal ? ReactDOM.createPortal(popup, portal) : popup
+
+        return <div className={`DatePicker`} ref={ref('el', this)}>
             {!!renderInput && renderInput()}
             {!renderInput && <TextField id={'value'} value={text}
                                         autoComplete="off"
@@ -150,35 +210,7 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
                                             }
                                         }}
             />}
-            <div className={`calendar ${focused && 'focused'}`}>
-                <div className={'row monthSelect'}>
-                    <span>
-                        {monthToString(selectedMonth.get(DateTools.TimeUnit.MONTH))}
-                        &nbsp;{selectedMonth.get(DateTools.TimeUnit.YEAR)}
-                    </span>
-                    <Button flat={true} round={true} disabled={minDate && DateTools.dateOf(selectedMonth).isBefore(minDate)} onClick={() => {
-                        this.setState({selectedMonth: DateTools.dateOf(selectedMonth).subtract(1, DateTools.TimeUnit.MONTH)})
-                    }}>
-                        <MaterialIcon icon={'chevron_left'}/>
-                    </Button>
-                    <Button flat={true} round={true} onClick={() => {
-                        this.setState({selectedMonth: DateTools.dateOf(selectedMonth).add(1, DateTools.TimeUnit.MONTH)})
-                    }}>
-                        <MaterialIcon icon={'chevron_right'}/>
-                    </Button>
-                </div>
-                <CalendarMonthView monthOf={selectedMonth}
-                                   dayOfWeekToString={dayOfWeekToString}
-                                   dayRenderer={(date) => <DayRenderer
-                                       day={DateTools.dateOf(date)}
-                                       selected={value}
-                                       minDate={minDate}
-                                       onClick={value => {
-                                           this.onChange(value)
-                                           this.setState({focused: false, text: formatter(value)});
-                                       }}
-                                   />}/>
-            </div>
+            {popup}
         </div>
     };
 

package/src/DateTools.ts

@@ -3,7 +3,7 @@ export const resetTime = (date: Date) => {
     return date
 };
 export const timeOf = (date: Date) => date.getTime();
-export const equals = (a: Date, b: Date) => a && b && timeOf(a) === timeOf(b);
+export const equals = (a: Date, b: Date) => (a === b) || (a && b && timeOf(a) === timeOf(b));
 export const isBefore = (a: Date, b: Date) => a && b && timeOf(a) < timeOf(b);
 export const isAfter = (a: Date, b: Date) => a && b && timeOf(a) > timeOf(b);
 export const max = (a: Date, b: Date) => {

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";
@@ -61,6 +61,7 @@ export interface TableColumn<T> {
     onClick?: (e: SyntheticEvent, startEditing: () => void, item: T, field: keyof T, row: number, column: number) => void,
     comparator?: Comparator,
     header?: string | ReactElement,
+    headerColspan?: number,
     sortable?: boolean,
     displayEditor?: boolean,
     formatter?: Formatter<T, T[keyof T]>,
@@ -234,8 +235,11 @@ class Table<T> extends Component<TableProps<T>, TableState<T>> {
                     <tr ref={headers}>
                         {columns.filter(it => !!it).map((column, i) => {
                             const sortable = column.sortable || column.sortable == null;
+                            if (column.headerColspan === 0)
+                                return null
+
                             return (
-                                <th key={i} onClick={e => sortable && sort(e, column.field, comparatorGetter(column))}>
+                                <th key={i} colSpan={column.headerColspan} onClick={e => sortable && sort(e, column.field, comparatorGetter(column))}>
                                     <div className={classNames('hidden', sortable && 'sortable', sortBy === column.field && 'active')}>
                                         {column.header}
                                         {column.header && sortBy === column.field && sortOrder === SORT_ASC && (<MaterialIcon icon={'keyboard_arrow_up'}/>)}
@@ -296,6 +300,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 +363,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 +376,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 && (