react-ui-basics 0.0.192 → 0.0.194

package/package.json

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

package/src/DNDContainer.tsx

@@ -27,8 +27,12 @@ const clearSelection = () => {
         } else if (getSelection().removeAllRanges) {  // Firefox
             getSelection().removeAllRanges();
         }
-    } else if (DOCUMENT.selection) {  // IE?
-        DOCUMENT.selection.empty();
+    } else {
+        // @ts-ignore
+        if (DOCUMENT.selection) {  // IE?
+            // @ts-ignore
+            DOCUMENT.selection.empty();
+        }
     }
 };
 

package/src/DatePicker.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import './DatePicker.css'
 import TextField from "./TextField";
 import * as DateTools from "./DateTools";
-import {orNoop, classNames, preventDefault, ref} from "./Tools";
+import {orNoop, classNames, preventDefault, ref, WINDOW} from "./Tools";
 import Button from './Button'
 import CalendarMonthView from "./CalendarMonthView";
 import MaterialIcon from "./MaterialIcon";
@@ -92,10 +92,20 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     };
 
     private getPopupStyles = () => {
-        const boundingClientRect = this.el.getBoundingClientRect();
+        const textInputBoundingRect = this.el.getBoundingClientRect();
+        const popupBoundingRect = this.popup.getBoundingClientRect();
+        let left = textInputBoundingRect.left;
+        let top = textInputBoundingRect.bottom;
+        if (left + popupBoundingRect.width > WINDOW.innerWidth) {
+            left = textInputBoundingRect.right - popupBoundingRect.width;
+        }
+        if (top + popupBoundingRect.height > WINDOW.innerHeight) {
+            top = textInputBoundingRect.top - popupBoundingRect.height;
+        }
+
         return {
-            left: boundingClientRect.left + 'px',
-            top: boundingClientRect.bottom + 'px',
+            left: left + 'px',
+            top: top + 'px',
         }
     };
 

package/src/ResizeObserver.ts

@@ -47,4 +47,5 @@ class ResizeObserver {
     }
 }
 
+// @ts-ignore
 WINDOW.ResizeObserver = WINDOW.ResizeObserver || ResizeObserver;

package/src/Table.tsx

@@ -43,7 +43,7 @@ export interface RowProps<T> {
     onFinishEditing: () => void,
     handleInputChange: (e: ChangeEvent) => void,
     setValue: (v: any, t: T, field: keyof T) => void,
-    setEditing: (t: T, i: number, value?: any, focused?: boolean) => void,
+    setEditing: (t: T, row: number, column: number, value?: any, focused?: boolean) => void,
     onMouseDown?: (e: SyntheticEvent, row: number, column: number) => void,
     onMouseUp?: (e: SyntheticEvent, row: number, column: number) => void,
     onMouseEnter?: (e: SyntheticEvent, row: number, column: number) => void,
@@ -88,7 +88,7 @@ export interface TableProps<T> {
     onRowClick?: (t: T, e: SyntheticEvent) => void,
     disabled?: (t: T) => boolean,
     toKey?: (t: T) => number | string,
-    onChange?: (t: T, cancel: () => void) => void,
+    onChange?: (t: T, cancel: () => void, rowIndex: number) => void,
     rowClassName?: string | ((t: T) => string),
     onMouseDown?: (e: SyntheticEvent, row: number, column: number) => void,
     onMouseUp?: (e: SyntheticEvent, row: number, column: number) => void,
@@ -107,6 +107,7 @@ export interface TableState<T> {
 export interface EditingState<T> {
     id: number | string
     value: any
+    rowIndex: number
     columnIndex: number
     item: T
     field: keyof T
@@ -141,10 +142,10 @@ class Table<T> extends Component<TableProps<T>, TableState<T>> {
             editingState(null)
         };
 
-        const setEditing = (item, columnIndex, value, focused = true) => {
+        const setEditing = (item, rowIndex, columnIndex, value, focused = true) => {
             const {columns} = props()
             const field = columns[columnIndex].field
-            editingState({id: item.id, value: (value != null ? value : item[field]), columnIndex, item, field, focused: !!focused})
+            editingState({id: item.id, value: (value != null ? value : item[field]), rowIndex, columnIndex, item, field, focused: !!focused})
         };
         this.startEditing = setEditing
         this.getEditingState = () => editingState()
@@ -171,7 +172,7 @@ class Table<T> extends Component<TableProps<T>, TableState<T>> {
                 ...editing.item,
                 [editing.field]: value
             };
-            props().onChange(updated, cancelEditing)
+            props().onChange(updated, cancelEditing, editing.rowIndex)
         };
         this.finishEditing = onFinishEditing
 
@@ -314,7 +315,7 @@ class Row<T> extends PureComponent<RowProps<T>> {
             {columns.filter(it => !!it).map((column, j) => {
                 const isEditing = editing && editing.columnIndex === j;
                 const editable = isFunction(column.editable) ? (column.editable as ((t: T) => boolean))(item) : !!column.editable;
-                const startEditing = !isEditing && editable ? () => setEditing(item, j) : NOOP;
+                const startEditing = !isEditing && editable ? () => setEditing(item, i, j) : NOOP;
                 const onClick = (!!column.onClick ? (e) => column.onClick(e, startEditing, item, column.field, i, j) : startEditing)
 
                 let displayEditor = isEditing || column.displayEditor;
@@ -341,7 +342,7 @@ class Row<T> extends PureComponent<RowProps<T>> {
                                 value={value}
                                 focused={editing.focused}
                                 onFocus={() => {
-                                    setEditing(item, j, value, true)
+                                    setEditing(item, i, j, value, true)
                                 }}
                                 onBlur={onFinishEditing}
                                 onChange={handleInputChange}

package/src/Tools.ts

@@ -1,5 +1,5 @@
 var global = global || window;
-export const WINDOW = global;
+export const WINDOW: Window = global as Window;
 export const DOCUMENT = WINDOW.document;
 
 export function classNames(...classes: Array<string | number | boolean | null | void>) {