react-ui-basics 0.0.190 → 0.0.192

package/package.json

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

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,80 @@ 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)) {
+            return true;
+        }
 
-        if (!DateTools.equals(this.state.value, nextState.value))
+        if (this.props.open !== nextProps.open) {
             return true;
+        }
 
-        if (this.props.open !== nextProps.open)
+        if (this.state.text !== nextState.text) {
             return true;
+        }
 
-        if (this.state.text !== nextState.text)
+        if (this.state.focused !== nextState.focused) {
             return true;
+        }
 
-        if (this.state.focused !== nextState.focused)
+        if (this.state.popupStyles !== nextState.popupStyles) {
             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 +214,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/Table.tsx

@@ -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'}/>)}