react-ui-basics 0.0.219 → 0.0.221

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/{FilteredList.js → FilteredList.tsx}

@@ -1,13 +1,39 @@
-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 './FilteredList.css'; import React from 'react';
+import React, {CSSProperties, MouseEventHandler} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import './FilteredList.css'
 import Scrollable from "./Scrollable";
 import {classNames, orNoop, ref, stopPropagation, isFunction, isObject} from "./Tools";
 import {PureComponent} from "./ReactConstants";
 
-export const getLabel = (labels, id) => isFunction(labels) ? labels(id) : labels[id]
+type Labels<T> = ((item: T) => string) | { [key: string]: string } | { [key: number]: string };
+
+// @ts-ignore
+export const getLabel: (<T extends string | number>(labels: Labels<T>, id: T) => string) = (labels, id) => isFunction(labels) ? labels(id) : labels[id]
+
+export interface FilteredListProps<T> {
+    nextProvider?: (cb: () => void) => void
+    prevProvider?: (cb: () => void) => void
+    resetProvider?: (cb: () => void) => void
+    selectedProvider?: (cb: () => void) => void
+    data: T[]
+    labels?: Labels<T>
+    filter?: (item: T) => boolean
+    className?: string
+    selected?: T | { [key: string]: boolean } | { [key: number]: boolean }
+    inline?: boolean
+    childComponent
+    childProps
+    style?: CSSProperties
+    scroll
+    onSelect: (selected: T) => void
+    selectSingle?: boolean
+}
+
+export interface FilteredListState<T> {
+    selected: T
+}
 
-class FilteredList extends PureComponent {
+class FilteredList<T extends string|number> extends PureComponent<FilteredListProps<T>, FilteredListState<T>> {
 
     static defaultProps = {
         data: [],
@@ -18,59 +44,66 @@ class FilteredList extends PureComponent {
         filter: () => true,
     };
 
+    hidden:Map<T, boolean> = new Map();
+    elements :Map<T, HTMLDivElement> = new Map();
+    list:T[] = [];
+    el: Scrollable
+
     constructor(props) {
         super(props);
-        this.state = {selected: -1};
-        this.hidden = {};
-        this.elements = {};
+        this.state = {selected: null};
     }
 
     componentDidMount() {
-        orNoop(__props(this).nextProvider)(this.next);
-        orNoop(__props(this).prevProvider)(this.prev);
-        orNoop(__props(this).selectedProvider)(this.selected);
-        orNoop(__props(this).resetProvider)(this.reset);
+        orNoop(this.props.nextProvider)(this.next);
+        orNoop(this.props.prevProvider)(this.prev);
+        orNoop(this.props.selectedProvider)(this.selected);
+        orNoop(this.props.resetProvider)(this.reset);
 
-        this.updateList(__props(this))
+        this.updateList(this.props)
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if (__props(this).data === __data(prevProps))
+        if (this.props.data === prevProps.data)
             return;
 
-        this.updateList(__props(this))
+        this.updateList(this.props)
     }
 
     updateList = (props) => {
         const {data} = props;
-        const {selected} = __state(this);
+        const {selected} = this.state;
         this.list = data || [];
 
         if (!this.list.includes(selected))
-            this.setState({selected: -1})
+            this.setState({selected: null})
     };
 
     render() {
-        const {data, labels, filter, className, selected, inline, childComponent, childProps, style, scroll} = __props(this);
+        const {data, labels, filter, className, selected, inline, childComponent, childProps, style, scroll} = this.props;
         return (
             <Scrollable className={classNames('FilteredList', className, inline ? 'inline' : 'popup')}
                         autoScrollTop={false}
                         ref={ref('el', this)} style={style} scrollBarMode={scroll}>
-                {(data || []).filter(id => id !== false && id != null).map(id => <ItemWrapper
+                {(data || []).filter(id => !!id || id === 0).map(id => <ItemWrapper
                     id={id}
                     key={id}
                     label={getLabel(labels, id)}
                     childComponent={childComponent}
                     childProps={childProps}
-                    element={el => this.elements[id] = el}
+                    element={el => this.elements.set(id, el)}
                     onClick={e => {
                         stopPropagation(e);
                         this.onSelect(id);
                     }}
                     onMouseEnter={e => this.setState({selected: id})}
-                    onMouseLeave={e => id === __state(this).selected && this.setState({selected: -1})}
-                    className={classNames('child', __state(this).selected === id && 'active', selected === id || (isObject(selected) && selected[id]) && 'selected')}
-                    classProvider={it => (this.hidden[id] = !filter(it)) && 'hidden'}
+                    onMouseLeave={e => id === this.state.selected && this.setState({selected: null})}
+                    className={classNames('child', this.state.selected === id && 'active', selected === id || (isObject(selected) && selected[id as (string | number)]) && 'selected')}
+                    classProvider={it => {
+                        const hidden = !filter(it);
+                        this.hidden.set(id, hidden)
+                        return hidden && 'hidden';
+                    }}
                 />)}
             </Scrollable>
         )
@@ -78,17 +111,17 @@ class FilteredList extends PureComponent {
 
     onSelect = (id) => {
         this.setState({selected: id});
-        __props(this).onSelect(id);
+        this.props.onSelect(id);
     };
 
-    selected = () => {
-        const {selected: value} = __state(this);
-        const {selectSingle} = __props(this);
+    selected = (): T => {
+        const {selected: value} = this.state;
+        const {selectSingle} = this.props;
 
 
-        if (value === -1 || this.hidden[value]) {
-            let filtered = this.list.filter(id => !this.hidden[id]);
-            if (selectSingle && __length(filtered) === 1)
+        if (value === -1 || this.hidden.get(value)) {
+            let filtered = this.list.filter(id => !this.hidden.get(id));
+            if (selectSingle && filtered.length === 1)
                 return filtered[0];
 
             return null;
@@ -99,16 +132,16 @@ class FilteredList extends PureComponent {
 
     next = () => {
         const list = this.list;
-        const selected = __state(this).selected;
+        const selected = this.state.selected;
         let position = list.findIndex(id => selected === id);
-        if (this.hidden[list[position]])
+        if (this.hidden.get(list[position]))
             position = -1;
 
-        while (++position < __length(list)) {
-            if (!this.hidden[list[position]])
+        while (++position < list.length) {
+            if (!this.hidden.get(list[position]))
                 break
         }
-        if (position < __length(list)) {
+        if (position < list.length) {
             let id = list[position];
             this.setState({selected: id});
             this.updateScroll(id)
@@ -117,13 +150,13 @@ class FilteredList extends PureComponent {
 
     prev = () => {
         const list = this.list;
-        const selected = __state(this).selected;
+        const selected = this.state.selected;
         let position = list.findIndex(id => selected === id);
-        if (this.hidden[list[position]])
-            position = __length(list);
+        if (this.hidden.get(list[position]))
+            position = list.length;
 
         while (--position >= 0) {
-            if (!this.hidden[list[position]])
+            if (!this.hidden.get(list[position]))
                 break
         }
         if (position >= 0) {
@@ -138,9 +171,9 @@ class FilteredList extends PureComponent {
         let container = this.el;
         const scrollTop = container.getScroll();
         const height = container.getHeight();
-        let isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + __clientHeight(child);
+        let isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + child.clientHeight;
         if (!isVisible) {
-            let scrollToBottom = child.offsetTop + __clientHeight(child) - height;
+            let scrollToBottom = child.offsetTop + child.clientHeight - height;
             let scrollToTop = child.offsetTop;
             if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
                 container.setScroll(scrollToTop)
@@ -151,8 +184,8 @@ class FilteredList extends PureComponent {
     };
 
     reset = () => {
-        this.setState({selected: -1});
-        this.el.scrollTop = 0;
+        this.setState({selected: null});
+        this.el.setScroll(0)
     };
 
     scrollTo = (id) => this.el.setScroll(this.elements[id] && this.elements[id].offsetTop);
@@ -160,9 +193,26 @@ class FilteredList extends PureComponent {
 
 export default FilteredList;
 
-class ItemWrapper extends React.Component {
+interface ItemWrapperProps {
+    id
+    label
+    onClick?: MouseEventHandler
+    onMouseDown?: MouseEventHandler
+    onMouseEnter?: MouseEventHandler
+    onMouseLeave?: MouseEventHandler
+    classProvider?: (data) => string
+    className?: string
+    childComponent
+    childProps
+    element?: (el: HTMLDivElement) => void
+}
+
+class ItemWrapper extends React.Component<ItemWrapperProps> {
+    data
+    el: HTMLDivElement
+
     render() {
-        const {id, label, onClick, onMouseDown, onMouseEnter, onMouseLeave, classProvider, className, childComponent, childProps} = __props(this);
+        const {id, label, onClick, onMouseDown, onMouseEnter, onMouseLeave, classProvider, className, childComponent, childProps} = this.props;
         const child = React.createElement(childComponent, {
             ...childProps,
             id,
@@ -170,7 +220,7 @@ class ItemWrapper extends React.Component {
             dataConsumer: (data) => this.data = data,
         });
 
-        const cssClass = orNoop(classProvider)(__data(this));
+        const cssClass = orNoop(classProvider)(this.data);
         return (
             <div className={classNames('ItemWrapper', cssClass, className)}
                  onMouseEnter={onMouseEnter}
@@ -185,7 +235,7 @@ class ItemWrapper extends React.Component {
     }
 
     componentDidMount() {
-        orNoop(__props(this).element)(this.el);
+        orNoop(this.props.element)(this.el);
         this.forceUpdate();
     }
 }

package/src/{FormUploadProgress.js → FormUploadProgress.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 './FormUploadProgress.css'; import React from 'react';
+import React, {ReactNode} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import './FormUploadProgress.css'
 import Button from "./Button";
@@ -6,11 +6,10 @@ import Animated from "./Animated";
 import CircleProgress from "./CircleProgress";
 import SpinningProgress from "./SpinningProgress";
 import {formatAbbreviation, formatNumberWithMaxLength} from "./Size";
-import PropTypes from "prop-types";
 import {preventDefault} from "./Tools";
 
 
-const defaultValueFormat = (value, loaded, total) => {
+const defaultValueFormat = (value: number, loaded: number, total: number) => {
     if (total == null)
         return Math.floor(Number.isFinite(value) ? value : 0) + '%';
 
@@ -24,6 +23,16 @@ const defaultValueFormat = (value, loaded, total) => {
     </>
 };
 
+export interface FormUploadProgressProps {
+    value: number
+    loaded: number
+    total: number
+    formatValue?: (value: number, loaded: number, total: number) => ReactNode
+    processingLabel?: ReactNode
+    cancelLabel?: ReactNode
+    cancel?: () => void
+}
+
 const FormUploadProgress = ({
                                 value,
                                 cancel,
@@ -32,7 +41,7 @@ const FormUploadProgress = ({
                                 formatValue,
                                 processingLabel,
                                 cancelLabel,
-                            }) => {
+                            }: FormUploadProgressProps) => {
     return (
         <Animated value={total > 0}>
             <div className="FormUploadProgress">
@@ -60,22 +69,4 @@ FormUploadProgress.defaultProps = {
     formatValue: defaultValueFormat,
 };
 
-if (process.env.NODE_ENV !== 'production') {
-    FormUploadProgress.propTypes = {
-        value: PropTypes.number,
-        loaded: PropTypes.number,
-        total: PropTypes.number,
-        formatValue: PropTypes.func,
-        processingLabel: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element
-        ]),
-        cancelLabel: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element
-        ]),
-        cancel: PropTypes.func,
-    };
-}
-
 export default FormUploadProgress;