react-ui-basics 0.0.218 → 0.0.220

package/package.json

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

package/src/Button.tsx

@@ -0,0 +1,97 @@
+import React, {FocusEventHandler, MouseEventHandler, ReactElement, ReactNode} from 'react';
+import ReactCreateElement from './ReactCreateElement';
+import './Button.css'
+import {classNames, DOCUMENT, addEventListener, createRef, orNoop} from "./Tools";
+import PropTypes from "prop-types";
+import {PureComponent, render, stateGS, props} from "./ReactConstants";
+
+export interface ButtonProps {
+    flat?: boolean,
+    raised?: boolean,
+    round?: boolean,
+    disabled?: boolean,
+    withRipple?: boolean,
+    type?: 'button' | 'submit' | 'reset',
+    className?: string,
+    onClick?: MouseEventHandler,
+    onFocus?: FocusEventHandler,
+    style?: any,
+    children?: ReactNode,
+}
+
+class Button extends PureComponent<ButtonProps> {
+    static defaultProps = {
+        type: 'button',
+        withRipple: true,
+    }
+
+    constructor(properties) {
+        super(properties);
+
+        const that = this;
+        const el = createRef<HTMLButtonElement>();
+        const ripple = createRef<HTMLSpanElement>();
+
+        const rippleClassName = stateGS<string>(that);
+
+        const onMouseDown = (e) => {
+            if (!props(that).withRipple) return;
+
+            const rect = el().getBoundingClientRect();
+            const rippleElement = ripple();
+            const style = rippleElement.style;
+            const body = DOCUMENT.body;
+
+            style.height = style.width = Math.max(rect.width, rect.height) + 'px';
+            style.top = (e.pageY - rect.top - rippleElement.offsetHeight / 2 - body.scrollTop) + 'px';
+            style.left = (e.pageX - rect.left - rippleElement.offsetWidth / 2 - body.scrollLeft) + 'px';
+
+            rippleClassName('show');
+
+            addEventListener(rippleElement, 'animationend', () => {
+                rippleClassName('showed');
+            });
+        };
+
+        const onFocus = e => {
+            orNoop(props(that).onFocus)(e)
+            if (rippleClassName() === 'show')
+                return
+
+            const rect = el().getBoundingClientRect();
+            const style = ripple().style;
+
+            let size = Math.max(rect.width, rect.height) * 0.8
+            style.height = style.width = size + 'px';
+            style.top = (rect.height / 2 - size / 2) + 'px';
+            style.left = (rect.width / 2 - size / 2) + 'px';
+
+            rippleClassName('focused');
+        }
+
+        that[render] = () => {
+            const {children, type, className, onClick, flat, raised = !flat, round, style, disabled} = props(that);
+            return (
+                <button className={classNames('Button',
+                    className,
+                    disabled && 'disabled',
+                    raised && 'raised',
+                    flat && 'flat',
+                    round && 'round')
+                }
+                        onFocus={onFocus}
+                        disabled={disabled}
+                        style={style}
+                        type={type}
+                        onClick={onClick}
+                        onMouseDown={onMouseDown}
+                        ref={el}>
+                    {children}
+                    <span className={classNames(`ripple`, rippleClassName())} ref={ripple}/>
+                </button>
+            );
+        }
+    }
+}
+
+export default Button;

package/src/DNDContainer.tsx

@@ -18,6 +18,8 @@ import {
     UNDEFINED
 } from "./Tools";
 import {propsGetter, render, componentDidMount} from "./ReactConstants";
+import Droppable from "./DNDDroppable";
+import Draggable from "./DNDDraggable";
 
 const clearSelection = () => {
     const getSelection = WINDOW.getSelection;
@@ -113,9 +115,9 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
             draggable = null;
         };
 
-        const draggableInitializer = (item) => {
+        const draggableInitializer = (item: Draggable) => {
             const handle = item.props.handle;
-            const draggableElement = (handle && item.element.childNodes[0]) || item.element;
+            const draggableElement: HTMLElement = ((handle && item.element.firstElementChild as HTMLElement) || item.element);
             draggableElement.draggable = true;
 
             const dragStartListener = (e) => {
@@ -131,7 +133,7 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
                 item.width = itemOffset.width;
                 item.height = itemOffset.height;
 
-                let clone = orNoop(item.props.copy)((it) => {
+                let clone = orNoop(item.props.copy)((it: Draggable) => {
                     let style = it.element.style;
 
                     const offsetLeft = totalOffsetLeft(container) + (e.clientX - itemOffset.left);
@@ -177,7 +179,7 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
                     }
                 }
                 onDragStart(e);
-                setTimeout(() => item.setState({placeholder: true}), 1)
+                return setTimeout(() => item.setState({placeholder: true}), 1)
             };
             addListener(draggableElement, item, 'dragend', (e) => {
                 if (item.state.placeholder)
@@ -232,7 +234,7 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
             });
         }
 
-        const droppableInitializer = (item) => {
+        const droppableInitializer = (item: Droppable) => {
             droppables.push(item);
 
             addEventListener(item.element, 'drop', (e) => {
@@ -242,27 +244,34 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
                     data && orNoop(item.props.onDrop)(data);
                 }
             }, false);
-            addEventListener(item.element, 'dragenter', (e) => {
+            addEventListener(item.element, 'mouseenter', (e) => {
+                if(!draggable)
+                    return
+
                 if (item.state.allow) {
                     preventDefault(e);
                     item.isHover(e, draggable, true)
                 }
             });
-            addEventListener(item.element, 'dragleave', (e) => {
+            addEventListener(item.element, 'mouseleave', (e) => {
+                if(!draggable)
+                    return
+
                 if (item.state.allow) {
                     preventDefault(e);
                     item.isHover(e, draggable, false)
                 }
             });
 
-            item.onDragStart = (e, draggable) => {
+            item.onDragStart = (e, draggable: Draggable) => {
                 item.bounds = item.element.getBoundingClientRect();
                 let allow = (orNoop(item.props.onDragStart)(e, data));
                 if (allow === UNDEFINED)
                     allow = true
-                item.setState({allow});
+                item.setState({allow: allow as boolean});
+                item.isHover(e, draggable)
             };
-            item.isHover = (e, draggable, hover) => {
+            item.isHover = (e, draggable, hover?: boolean) => {
                 const bounds = item.bounds;
                 if (!bounds)
                     return;

package/src/{DNDDraggable.js → DNDDraggable.tsx}

@@ -1,4 +1,4 @@
-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 React, {MouseEventHandler} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import {classNames, orNoop, ref} from "./Tools";
 import {componentDidUpdate, props, state, render, children, className, componentDidMount, componentWillUnmount, PureComponent} from "./ReactConstants";
@@ -12,35 +12,61 @@ const hover = 'hover',
 
 const init = that => orNoop(props(that)[initializer])(that);
 
-class Draggable extends PureComponent {
+interface DraggableProps {
+    id: string | number
+    data: any
+    copy?: (initializer: (it: Draggable) => Draggable, classname: string, item: Draggable) => Draggable
+    onClick?: MouseEventHandler<HTMLDivElement>
+    children?: React.ReactNode
+    className?: string,
+    handle?: React.ReactNode
+    initializer?: (draggable: Draggable) => void
+}
+
+interface DraggableState {
+    dragged?: boolean,
+    placeholder?: boolean,
+    hover?: boolean,
+}
+
+abstract class AbstractDraggable extends PureComponent<DraggableProps, DraggableState> {
+    onUnmount?: () => void
+    element: HTMLDivElement
+    width: number;
+    height: number;
+    createPositionListener: (e, style, itemOffset, container) => any;
+    initDraggedStyles: (style, itemOffset) => void;
+}
+
+class Draggable extends AbstractDraggable {
 
     constructor(properties) {
         super(properties);
         const that = this;
         that.state = {};
-        that[ReactConstants[2]] = (prevProps) => {
+        that[componentDidUpdate] = (prevProps) => {
             if (prevProps[handle] !== props(that)[handle] || prevProps[initializer] !== props(that)[initializer])
                 init(that)
         };
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             init(that)
         };
-        that[ReactConstants[1]] = () => {
+        that[componentWillUnmount] = () => {
             orNoop(that.onUnmount)();
         };
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const _state = state(that),
                 _props = props(that);
-            return <div className={classNames('Draggable', _props[ReactConstants[5]],
+            return <div className={classNames('Draggable', _props[className],
                 _state[dragged] && dragged,
                 _state[placeholder] && placeholder,
                 _state[hover] && hover,
             )}
-                        onClick={_props[ReactConstants[6]]}
+                        onClick={_props.onClick}
                         ref={ref('element', that)}
             >
                 {_props[handle]}
-                {_props[ReactConstants[4]]}
+                {_props[children]}
             </div>;
         }
     }

package/src/{DNDDroppable.js → DNDDroppable.tsx}

@@ -1,7 +1,8 @@
-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 React from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import {classNames, orNoop, ref, preventDefault, stopPropagation} from "./Tools";
 import {componentDidMount, componentDidUpdate, render, props, state, componentWillUnmount, children, className, PureComponent} from "./ReactConstants";
+import Draggable from "./DNDDraggable";
 
 const hover = 'hover',
     allow = 'allow',
@@ -10,32 +11,58 @@ const hover = 'hover',
 
 const init = that => orNoop(props(that)[initializer])(that);
 
-class Droppable extends PureComponent {
+interface DroppableProps {
+    children?: React.ReactNode
+    className?: string,
+    initializer?: (draggable: Droppable) => void
+    onDrop?: (data: any) => void
+    onHover?: (e, draggable: Draggable) => void
+    onDragStart?: (e, data: any) => boolean
+}
+
+interface DroppableState {
+    allow?: boolean,
+    hover?: boolean,
+}
+
+abstract class AbstractDroppable extends PureComponent<DroppableProps, DroppableState> {
+    onUnmount?: () => void
+    element: HTMLDivElement
+    onDragStart: (e, draggable: Draggable) => void
+    bounds: DOMRect
+    isHover: (e, draggable: Draggable, hover?: boolean) => void;
+    onDragEnd: () => void;
+    dropIfHover: () => void;
+}
+
+class Droppable extends AbstractDroppable {
+
 
     constructor(properties) {
         super(properties);
         const that = this;
+        that.state = {}
 
-        that[ReactConstants[2]] = (prevProps) => {
+        that[componentDidUpdate] = (prevProps) => {
             if (prevProps[initializer] !== props(that)[initializer])
                 init(that)
         };
 
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             init(that)
         };
 
-        that[ReactConstants[1]] = () => {
+        that[componentWillUnmount] = () => {
             orNoop(that.onUnmount)();
         };
 
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const _props = props(that),
                 _state = state(that);
             return <div className={
                 classNames(
                     'Droppable',
-                    _props[ReactConstants[5]],
+                    _props[className],
                     _state[hover] && hover,
                     _state[allow] && allow,
                 )}
@@ -46,7 +73,7 @@ class Droppable extends PureComponent {
                             }
                         }}
                         ref={ref('element', that)}>
-                {_props[ReactConstants[4]]}
+                {_props[children]}
             </div>;
         };
     }

package/src/DroppableHorizontalList.js

@@ -39,6 +39,37 @@ class DroppableHorizontalList extends Component {
         let oldIndex;
         let newIndex;
 
+        const onHover = (e, draggable) => {
+            const offset = __pageX(e) - that.scrollOffsetX;
+            const transformLeft = 'translateX(' + __width(draggable) + 'px)';
+            const transformRight = 'translateX(-' + __width(draggable) + 'px)';
+            list.forEach((id, i) => {
+                if (i !== oldIndex) {
+                    const d = draggables[id];
+                    const bounds = d.bounds;
+                    const style = d.element.style;
+                    if (i > oldIndex) {
+                        if (offset >= __left(bounds))
+                            style.transform = transformRight;
+                        else
+                            style.transform = '';
+                    } else {
+                        if (offset <= bounds.right)
+                            style.transform = transformLeft;
+                        else
+                            style.transform = '';
+                    }
+                }
+            });
+
+            let i = list.findIndex(id => {
+                let bounds = draggables[id].bounds;
+                return offset >= __left(bounds) && offset <= bounds.right
+            });
+
+            newIndex = i !== -1 ? i : __length(list);
+        };
+
         that[ReactConstants[0]] = () => {
             let inTransition = false;
             orNoop(props().provideDraggableEnhancer)(initializer => it => {
@@ -46,6 +77,7 @@ class DroppableHorizontalList extends Component {
                 it.createPositionListener = (e, style) => {
                     const offset = __pageX(e);
                     return e => {
+                        onHover(e, it)
                         __pageX(e) && (style.transform = 'translateX(' + (__pageX(e) - offset) + 'px)');
                     };
                 };
@@ -80,41 +112,10 @@ class DroppableHorizontalList extends Component {
             })
         };
 
-        const onHover = (e, draggable) => {
-            const offset = __pageX(e) - that.scrollOffsetX;
-            const transformLeft = 'translateX(' + __width(draggable) + 'px)';
-            const transformRight = 'translateX(-' + __width(draggable) + 'px)';
-            list.forEach((id, i) => {
-                if (i !== oldIndex) {
-                    const d = draggables[id];
-                    const bounds = d.bounds;
-                    const style = d.element.style;
-                    if (i > oldIndex) {
-                        if (offset >= __left(bounds))
-                            style.transform = transformRight;
-                        else
-                            style.transform = '';
-                    } else {
-                        if (offset <= bounds.right)
-                            style.transform = transformLeft;
-                        else
-                            style.transform = '';
-                    }
-                }
-            });
-
-            let i = list.findIndex(id => {
-                let bounds = draggables[id].bounds;
-                return offset >= __left(bounds) && offset <= bounds.right
-            });
-
-            newIndex = i !== -1 ? i : __length(list);
-        };
-
         const onDragStart = (e, draggable) => {
             dragging = true;
             dropped = false;
-            oldIndex = list.indexOf(getProps(draggable).id);
+            oldIndex = list.indexOf(draggable.id);
             that.scrollOffsetX = __pageX(e) - e.clientX;
 
             list.forEach((id) => {

package/src/DroppableList.js

@@ -39,6 +39,37 @@ class DroppableList extends Component {
         let oldIndex;
         let newIndex;
 
+        const onHover = (e, draggable) => {
+            const y = __pageY(e) - that.scrollOffsetY;
+            const transformUp = 'translateY(' + __height(draggable) + 'px)';
+            const transformDown = 'translateY(-' + __height(draggable) + 'px)';
+            list.forEach((id, i) => {
+                if (i !== oldIndex) {
+                    const d = draggables[id];
+                    const bounds = d.bounds;
+                    const style = d.element.style;
+                    if (i > oldIndex) {
+                        if (y >= __top(bounds))
+                            style.transform = transformDown;
+                        else
+                            style.transform = '';
+                    } else {
+                        if (y <= bounds.bottom)
+                            style.transform = transformUp;
+                        else
+                            style.transform = '';
+                    }
+                }
+            });
+
+            let i = list.findIndex(id => {
+                let bounds = draggables[id].bounds;
+                return y >= __top(bounds) && y <= bounds.bottom
+            });
+
+            newIndex = i !== -1 ? i : __length(list);
+        };
+
         that[ReactConstants[0]] = () => {
             let inTransition = false;
             orNoop(props().provideDraggableEnhancer)(initializer => it => {
@@ -46,7 +77,8 @@ class DroppableList extends Component {
                 it.createPositionListener = (e, style) => {
                     const offsetTop = __pageY(e);
                     return e => {
-                        __pageY(e) && (style.transform = 'translateY(' + (__pageY(e) - offsetTop - that.scrollDiff) + 'px)');
+                        onHover(e, it)
+                        __pageY(e) && (style.transform = 'translateY(' + (__pageY(e) - offsetTop) + 'px)');
                     };
                 };
                 it.initDraggedStyles = NOOP;
@@ -79,52 +111,13 @@ class DroppableList extends Component {
                 draggables[getProps(it).id] = it;
             })
 
-            orNoop(props().provideScrollListener)(e => {
-                if (!dragging)
-                    return
-
-                that.scrollDiff = that.scroll - orNoop(props().getScrollPosition)() || 0;
-            })
-        };
-
-        const onHover = (e, draggable) => {
-            const y = __pageY(e) - that.scrollOffsetY - that.scrollDiff;
-            const transformUp = 'translateY(' + __height(draggable) + 'px)';
-            const transformDown = 'translateY(-' + __height(draggable) + 'px)';
-            list.forEach((id, i) => {
-                if (i !== oldIndex) {
-                    const d = draggables[id];
-                    const bounds = d.bounds;
-                    const style = d.element.style;
-                    if (i > oldIndex) {
-                        if (y >= __top(bounds))
-                            style.transform = transformDown;
-                        else
-                            style.transform = '';
-                    } else {
-                        if (y <= bounds.bottom)
-                            style.transform = transformUp;
-                        else
-                            style.transform = '';
-                    }
-                }
-            });
-
-            let i = list.findIndex(id => {
-                let bounds = draggables[id].bounds;
-                return y >= __top(bounds) && y <= bounds.bottom
-            });
-
-            newIndex = i !== -1 ? i : __length(list);
         };
 
         const onDragStart = (e, draggable) => {
             dragging = true;
             dropped = false;
-            oldIndex = list.indexOf(getProps(draggable).id);
+            oldIndex = list.indexOf(draggable.id);
             that.scrollOffsetY = __pageY(e) - e.clientY;
-            that.scroll = orNoop(props().getScrollPosition)() || 0;
-            that.scrollDiff = 0;
 
             list.forEach((id) => {
                 draggables[id].bounds = draggables[id].element.getBoundingClientRect();

package/src/Dropzone.tsx

@@ -91,7 +91,7 @@ class Dropzone extends PureComponent<DropzoneProps> {
             prevent(e)
         };
 
-        const inputRef = createRef()
+        const inputRef = createRef<HTMLInputElement>()
 
         that[render] = () => {
             const {

package/src/ReactConstants.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useReducer, useRef} from 'react';
 
 const EMPTY = {};
 export const props: <P>(that: React.Component<P>) => P = that => that.props;
@@ -29,6 +29,26 @@ export const stateGSs = (that, num) => {
     return result;
 };
 
+type GetSnapshot<T> = () => T;
+type Subscribe = (onStoreChange: () => void) => () => void;
+const useSyncExternalStoreShim = <T>(subscribe: Subscribe, getSnapshot: GetSnapshot<T>) => {
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    const cb = useRef<GetSnapshot<T>>();
+    cb.current = getSnapshot;
+    let value = getSnapshot()
+
+    useEffect(() => subscribe(() => {
+        let next = cb.current()
+        if (value !== next) {
+            value = next
+            forceUpdate()
+        }
+    }), []);
+    return value
+}
+
+export const useSyncExternalStore = React['useSyncExternalStore'] || useSyncExternalStoreShim
+
 export const componentDidMount = 'componentDidMount';
 export const componentWillUnmount = 'componentWillUnmount';
 export const componentDidUpdate = 'componentDidUpdate';

package/src/ScrollableTable.tsx

@@ -13,13 +13,17 @@ export interface ScrollableTableProps<T> extends TableProps<T> {
     scrollableProps?: any
 }
 
-class ScrollableTable<T> extends PureComponent<ScrollableTableProps<T>, TableState<T>> implements WithScrollable {
+abstract class AbstractScrollableTable<T> extends PureComponent<ScrollableTableProps<T>, TableState<T>> {
+    getScrollable: () => Scrollable
+}
+
+class ScrollableTable<T> extends AbstractScrollableTable<T> implements WithScrollable {
 
     constructor(properties) {
         super(properties);
         const that = this;
 
-        const scrollableRef = createRef();
+        const scrollableRef = createRef<Scrollable>();
 
         that[render] = () => {
             return <div className={`ScrollableTable`}>
@@ -28,11 +32,7 @@ class ScrollableTable<T> extends PureComponent<ScrollableTableProps<T>, TableSta
                 </Scrollable>
             </div>;
         }
-        that.getScrollable = () => scrollableRef()
-    }
-
-    getScrollable(): Scrollable {
-        return undefined;
+        that.getScrollable = scrollableRef
     }
 }
 

package/src/Table.tsx

@@ -123,14 +123,14 @@ class Table<T> extends Component<TableProps<T>, TableState<T>> {
         super(properties);
         const props = propsGetter(this);
 
-        const headers = createRef();
+        const headers = createRef<HTMLTableRowElement>();
         let updateHeadersInterval = 0;
 
         const updateHeaders = () => {
             const hidden = headers().querySelectorAll('.hidden');
             const fixed = headers().querySelectorAll('.fixed');
             for (let i = 0; i < hidden.length; i++) {
-                fixed[i].style.width = hidden[i].offsetWidth + 'px'
+                (fixed[i] as HTMLElement).style.width = (hidden[i] as HTMLElement).offsetWidth + 'px'
             }
         };
 
@@ -339,7 +339,7 @@ class Row<T> extends PureComponent<RowProps<T>> {
                         onClick={onClick}>
                         {displayEditor && !column.editor && (
                             <TextField
-                                value={value}
+                                value={String(value)}
                                 focused={editing.focused}
                                 onFocus={() => {
                                     setEditing(item, i, j, value, true)