react-ui-basics 0.0.219 → 0.0.221

package/src/{Modal.js → Modal.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 './Modal.css'; import React from 'react';
+import React, {ReactElement, ReactNode} from 'react';
 import ReactDOM from 'react-dom';
 import ReactCreateElement from './ReactCreateElement';
 import './Modal.css'
@@ -6,7 +6,6 @@ import Button from "./Button";
 import {classNames, orNoop, setTimeout, DOCUMENT, addEventListener, removeEventListener, createRef, UNDEFINED, stopPropagation} from "./Tools";
 import {PureComponent, componentDidMount, render, propsGetter, stateGSs, componentDidUpdate} from "./ReactConstants";
 import MaterialIcon from "./MaterialIcon";
-import PropTypes from "prop-types";
 
 let listenerRef;
 let zIndex = 100;
@@ -26,7 +25,32 @@ const addListener = (modal, listener) => {
     addEventListener(DOCUMENT, EVENT_TYPE, listenerRef = listener);
 };
 
-class Modal extends PureComponent {
+type VoidFunction = () => void;
+
+export interface ModalProps {
+    className?: string
+    top?: number
+    container?: Element | DocumentFragment
+    children?: ReactNode
+    closeIcon?: string | ReactElement
+    beforeClose?: (close: VoidFunction) => void
+    onOpen?: VoidFunction
+    onClose?: VoidFunction
+    open?: (open: VoidFunction) => void
+    close?: (open: VoidFunction) => void
+    show?: boolean
+}
+
+abstract class AbstractModal extends PureComponent<ModalProps> {
+    close: VoidFunction
+    open: VoidFunction
+}
+
+class Modal extends AbstractModal {
+
+    static defaultContainer = UNDEFINED
+    static pollListener = pollListener
+    static addListener = addListener
 
     static defaultProps = {
         closeIcon: <MaterialIcon icon="close"/>,
@@ -41,22 +65,22 @@ class Modal extends PureComponent {
             isShow,
             getMenu,
             getBeforeClose,
-        ] = stateGSs(that, 3);
-        const overlay = createRef();
-        const el = createRef();
-        const content = createRef();
+        ] = stateGSs<[boolean, any, (close: VoidFunction) => void]>(that, 3);
+        const overlay = createRef<HTMLDivElement>();
+        const el = createRef<HTMLDivElement>();
+        const content = createRef<HTMLDivElement>();
         const props = propsGetter(that);
 
         const beforeClose = (e) => {
             stopPropagation(e);
             const bc = getBeforeClose() || props().beforeClose;
             if (!bc || bc(that.close))
-                that.close(e);
+                that.close();
         };
 
         const shouldClose = (e) => {
-            const isSameModal = __style(el()).zIndex == zIndex - 1;
-            !(e && content().contains(__target(e))) && isSameModal && beforeClose(e);
+            const isSameModal = el().style.zIndex == (zIndex - 1) + '';
+            !(e && content().contains(e.target)) && isSameModal && beforeClose(e);
         };
 
         const addTransitionListener = () => {
@@ -64,11 +88,11 @@ class Modal extends PureComponent {
             let listener = () => {
                 removeEventListener(overlay(), transitionend, listener);
                 orNoop(isShow() ? props().onOpen : orNoop(props().onClose))();
-                el() && (__style(el()).paddingBottom = isShow() ? '1px' : '0px'); // force invalidate scroll
+                el() && (el().style.paddingBottom = isShow() ? '1px' : '0px'); // force invalidate scroll
             };
             addEventListener(overlay(), transitionend, listener);
         };
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const {className, top, container = Modal.defaultContainer, children, closeIcon} = props();
             const menu = getMenu();
             const show = isShow();
@@ -79,10 +103,13 @@ class Modal extends PureComponent {
                      style={top && {top: top + 'px'}}
                      ref={content}
                 >
-                    {React.Children.map(children, child => React.cloneElement(child, {
-                        modalMenuConsumer: getMenu,
-                        modalBeforeCloseConsumer: getBeforeClose
-                    }))}
+                    {React.Children.map(children, child => {
+                        // @ts-ignore
+                        return React.cloneElement(child, {
+                            modalMenuConsumer: getMenu,
+                            modalBeforeCloseConsumer: getBeforeClose
+                        });
+                    })}
                     {menu}
                     <Button className="close" flat={true} round={true} onClick={beforeClose}>
                         {closeIcon}
@@ -107,20 +134,20 @@ class Modal extends PureComponent {
             if (isShow())
                 return;
 
-            el() && (__style(el()).zIndex = zIndex++);
+            el() && (el().style.zIndex = '' + (zIndex++));
             addTransitionListener();
             isShow(true);
 
             let listener = event => {
                 if (!event.defaultPrevented && event.keyCode === 27/*escape*/)
-                    beforeClose();
+                    beforeClose(event);
                 return true;
             };
 
             addListener(that, listener)
         };
 
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             const _props = props();
             orNoop(_props.open)(() => {
                 setTimeout(open, 0);
@@ -130,7 +157,7 @@ class Modal extends PureComponent {
             });
             _props.show && setTimeout(open, 0)
         };
-        that[ReactConstants[2]] = (prevProps) => {
+        that[componentDidUpdate] = (prevProps) => {
             const show = props().show;
             if (show !== prevProps.show) {
                 show ? open() : close();
@@ -139,16 +166,4 @@ class Modal extends PureComponent {
     }
 }
 
-Modal.defaultContainer = UNDEFINED;
-Modal.pollListener = pollListener;
-Modal.addListener = addListener;
-
-export default Modal;
-
-if (process.env.NODE_ENV !== 'production') {
-    Modal.propTypes = {
-        [ReactConstants[5]]: PropTypes.string,
-        top: PropTypes.number,
-        container: PropTypes.node,
-    };
-}
+export default Modal;

package/src/ReactConstants.ts

@@ -11,7 +11,9 @@ export const setState = (that: React.Component, data, cb?) => {
 export const stateFieldSetter = (that, key, cb?: () => void) => (value, cb2?) => {
     setState(that, {[key]: value}, cb2 || cb);
 };
-export const stateGS: (<T>(that: React.Component) => (v?: T, cb?: () => void) => T) = (that) => {
+
+type GetterSetter<T> = (v?: T, cb?: () => void) => T;
+export const stateGS: (<T>(that: React.Component) => GetterSetter<T>) = (that) => {
     !that['sfc'] && (that['sfc'] = 0);
     const key = '_' + (that['sfc']++);
     const setter = stateFieldSetter(that, key);
@@ -21,17 +23,23 @@ export const stateGS: (<T>(that: React.Component) => (v?: T, cb?: () => void) =>
     result.toString = () => key;
     return result;
 };
-export const stateGSs = (that, num) => {
+
+type TupleToGetterSetter<T extends any[]> = {
+    [K in keyof T]: GetterSetter<T[K]>;
+};
+export const stateGSs = <T extends any[]>(that, num): TupleToGetterSetter<T> => {
     const result = [];
     for (let i = 0; i < num; i++) {
         result.push(stateGS(that));
     }
-    return result;
+    return result as TupleToGetterSetter<T>;
 };
 
-const useSyncExternalStoreShim = (subscribe, getSnapshot) => {
+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();
+    const cb = useRef<GetSnapshot<T>>();
     cb.current = getSnapshot;
     let value = getSnapshot()
 
@@ -45,7 +53,7 @@ const useSyncExternalStoreShim = (subscribe, getSnapshot) => {
     return value
 }
 
-export const useSyncExternalStore = React.useSyncExternalStore || useSyncExternalStoreShim
+export const useSyncExternalStore = React['useSyncExternalStore'] || useSyncExternalStoreShim
 
 export const componentDidMount = 'componentDidMount';
 export const componentWillUnmount = 'componentWillUnmount';

package/src/ReactCreateElement.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createElement;

package/src/ReadyListener.tsx

@@ -0,0 +1,58 @@
+import React, {ReactNode} from 'react';
+import ReactCreateElement from './ReactCreateElement';
+import {componentDidMount, render, componentWillUnmount, setState, props, state, componentDidUpdate, children, PureComponent} from "./ReactConstants";
+import {orNoop} from "./Tools";
+
+export interface NotReadyIndicatorProps {
+    onChange?: (ready: boolean) => void
+    render?: (ready: boolean) => JSX.Element | ReactNode
+    children?: ReactNode
+}
+
+interface NotReadyIndicatorState {
+    r: boolean
+}
+
+export const createReadyListener = () => {
+    let indicator,
+        count = 0;
+
+    class NotReadyIndicator extends PureComponent<NotReadyIndicatorProps, NotReadyIndicatorState> {
+        constructor(properties) {
+            super(properties);
+            const that = this;
+            that.state = {r: true};
+            indicator = that;
+            that[render] = () => {
+                const _props = props(that),
+                    renderer = _props[render],
+                    ready = state(that).r;
+
+                if (renderer)
+                    return renderer(ready);
+                else
+                    return (!ready && _props[children]) || null;
+            };
+            that[componentDidMount] = that[componentDidUpdate] = () => {
+                orNoop(props(that).onChange)(state(that).r);
+            }
+        }
+    }
+
+    class NotReady extends PureComponent {
+        constructor(props) {
+            super(props);
+            const that = this;
+            that[componentDidMount] = () => {
+                count++;
+                setState(indicator, {r: false});
+            };
+            that[componentWillUnmount] = () => {
+                setState(indicator, {r: --count === 0});
+            };
+            that[render] = () => null;
+        }
+    }
+
+    return [NotReadyIndicator, NotReady]
+};

package/src/Scrollable.css

@@ -16,7 +16,6 @@
   overflow-y: scroll;
   overflow-x: scroll;
   max-height: 100%;
-  scroll-behavior: smooth;
   scrollbar-width: none;
 }
 .Scrollable .viewport::-webkit-scrollbar {

package/src/Scrollable.scss

@@ -17,7 +17,6 @@
     overflow-y: scroll;
     overflow-x: scroll;
     max-height: 100%;
-    scroll-behavior: smooth;
 
     scrollbar-width: none;
 

package/src/{Scrollable.js → Scrollable.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 './Scrollable.css'; import React from 'react';
+import React, {CSSProperties, ReactNode} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import PropTypes from 'prop-types';
 import './Scrollable.css'
@@ -40,7 +40,32 @@ const scrollBarModeOf = createFieldGetter('scrollBarMode');
 const onScroll = createFieldGetter('onScroll');
 const horizontalScrollBarModeOf = createFieldGetter('horizontalScrollBarMode');
 
-class Scrollable extends PureComponent {
+type ScrollbarMode = typeof SCROLLBAR_MODE_HIDDEN | typeof SCROLLBAR_MODE_VISIBLE | typeof SCROLLBAR_MODE_AUTO | typeof SCROLLBAR_RESIZE_DISABLED;
+
+export interface ScrollableProps {
+    scrollBarMode?: ScrollbarMode
+    horizontalScrollBarMode?: ScrollbarMode
+    className?: string
+    style?: CSSProperties
+    onScrolledToBottom?: () => void
+    onScrolledToTop?: () => void
+    autoScrollTop?: boolean
+    children?: ReactNode
+}
+
+abstract class AbstractScrollable extends PureComponent<ScrollableProps> {
+    el: HTMLDivElement
+    setScroll: (y) => void
+    getScroll: () => number
+    getScrollHeight: () => number
+    getHeight: () => number
+}
+
+class Scrollable extends AbstractScrollable {
+    static defaultProps = {
+        autoScrollTop: true,
+        horizontalScrollBarMode: SCROLLBAR_MODE_HIDDEN
+    }
 
     constructor(properties) {
         super(properties);
@@ -48,14 +73,14 @@ class Scrollable extends PureComponent {
         that.state = {};
 
         const props = propsGetter(that);
-        const status = stateGS(that);
-        const statusH = stateGS(that);
+        const status = stateGS<typeof WITHOUT_SCROLL | typeof WITH_SCROLL>(that);
+        const statusH = stateGS<typeof WITHOUT_SCROLL | typeof WITH_SCROLL>(that);
 
-        const viewportRef = createRef();
-        const scrollbarRef = createRef();
-        const horizontalScrollbarRef = createRef();
-        const thumbRef = createRef();
-        const horizontalThumbRef = createRef();
+        const viewportRef = createRef<HTMLDivElement>();
+        const scrollbarRef = createRef<HTMLDivElement>();
+        const horizontalScrollbarRef = createRef<HTMLDivElement>();
+        const thumbRef = createRef<HTMLDivElement>();
+        const horizontalThumbRef = createRef<HTMLDivElement>();
 
         let resizeInterval;
         let initTimeout;
@@ -81,7 +106,7 @@ class Scrollable extends PureComponent {
             const thumb = thumbRef();
             const thumbH = horizontalThumbRef();
 
-            let scrolling = false;
+            let scrolling = '';
             let scrolledToBottom = false;
             let scrolledToTop = false;
             let adjustedScrollWidth = false;
@@ -98,8 +123,8 @@ class Scrollable extends PureComponent {
                 const offsetWidth = offsetWidthOf(viewport);
                 const scrollbarHeight = offsetHeightOf(scrollbar);
                 const scrollbarWidth = offsetWidthOf(scrollbarH);
-                let position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
-                const positionH = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+                let position = viewport.scrollTop / (scrollHeight - offsetHeight);
+                const positionH = viewport.scrollLeft / (scrollWidth - offsetWidth);
 
                 if (position > 1) {
                     viewport.scrollTop = scrollHeight - offsetHeight;
@@ -128,8 +153,8 @@ class Scrollable extends PureComponent {
             const reset = () => {
                 removeEventListener(WINDOW, 'mouseup', reset);
                 removeEventListener(WINDOW, 'mousemove', moveListener);
-                __style(viewport).scrollBehavior = ''
-                scrolling = false;
+                viewport.style.scrollBehavior = ''
+                scrolling = '';
             };
             const moveListener = (e) => {
                 if (!scrolling)
@@ -147,7 +172,7 @@ class Scrollable extends PureComponent {
                 lastY = e.clientY;
                 scrolling = 'v';
                 ratio = scrollHeightOf(viewport) / offsetHeightOf(viewport);
-                __style(viewport).scrollBehavior = 'unset'
+                viewport.style.scrollBehavior = 'unset'
 
                 addEventListener(WINDOW, 'mouseup', reset);
                 addEventListener(WINDOW, 'mousemove', moveListener);
@@ -159,7 +184,7 @@ class Scrollable extends PureComponent {
                 lastX = e.clientX;
                 scrolling = 'h';
                 ratioH = scrollWidthOf(viewport) / offsetWidthOf(viewport);
-                __style(viewport).scrollBehavior = 'unset'
+                viewport.style.scrollBehavior = 'unset'
 
                 addEventListener(WINDOW, 'mouseup', reset);
                 addEventListener(WINDOW, 'mousemove', moveListener);
@@ -168,27 +193,27 @@ class Scrollable extends PureComponent {
             thumbH.onmouseup = reset;
 
             scrollbar.onclick = (e) => {
-                if (__target(e) === scrollbar) {
-                    let thumbPosition = parseInt(__top(styleOf(thumb)));
+                if (e.target === scrollbar) {
+                    let thumbPosition = parseInt(styleOf(thumb).top);
                     viewport.scrollTop += offsetHeightOf(viewport) * 0.9 * (e.offsetY < thumbPosition ? -1 : 1);
                 }
             };
             scrollbarH.onclick = (e) => {
-                if (__target(e) === scrollbarH) {
-                    let thumbPosition = parseInt(__left(styleOf(thumbH)));
+                if (e.target === scrollbarH) {
+                    let thumbPosition = parseInt(styleOf(thumbH).left);
                     viewport.scrollLeft += offsetWidthOf(viewport) * 0.9 * (e.offsetX < thumbPosition ? -1 : 1);
                 }
             };
 
             const adjustScrollWidth = () => {
                 if (NATIVE_SCROLL_WIDTH < 0) {
-                    NATIVE_SCROLL_WIDTH = viewport.offsetWidth - __clientWidth(viewport);
+                    NATIVE_SCROLL_WIDTH = viewport.offsetWidth - viewport.clientWidth;
                     if (NATIVE_SCROLL_WIDTH === 0 && scrollHeightOf(viewport) !== offsetHeightOf(viewport)) {
                         NATIVE_SCROLL_WIDTH = -1;
                     }
                 }
                 if (NATIVE_SCROLL_HEIGHT < 0) {
-                    NATIVE_SCROLL_HEIGHT = viewport.offsetHeight - __clientHeight(viewport);
+                    NATIVE_SCROLL_HEIGHT = viewport.offsetHeight - viewport.clientHeight;
                     if (NATIVE_SCROLL_HEIGHT === 0 && scrollWidthOf(viewport) !== offsetWidthOf(viewport)) {
                         NATIVE_SCROLL_HEIGHT = -1;
                     }
@@ -196,12 +221,12 @@ class Scrollable extends PureComponent {
 
                 if (!adjustedScrollWidth) {
                     if (NATIVE_SCROLL_WIDTH >= 0 && status() !== WITHOUT_SCROLL) {
-                        styleOf(viewport).paddingRight = (NATIVE_SCROLL_WIDTH) + __clientWidth(scrollbar) + 'px';
-                        styleOf(viewport).marginRight = -(NATIVE_SCROLL_WIDTH) - __clientWidth(scrollbar) + 'px';
+                        styleOf(viewport).paddingRight = (NATIVE_SCROLL_WIDTH) + scrollbar.clientWidth + 'px';
+                        styleOf(viewport).marginRight = -(NATIVE_SCROLL_WIDTH) - scrollbar.clientWidth + 'px';
                     }
                     if (NATIVE_SCROLL_HEIGHT >= 0 && statusH() !== WITHOUT_SCROLL) {
-                        styleOf(viewport).paddingBottom = (NATIVE_SCROLL_HEIGHT) + __clientHeight(scrollbarH) + 'px';
-                        styleOf(viewport).marginBottom = -(NATIVE_SCROLL_HEIGHT) - __clientHeight(scrollbarH) + 'px';
+                        styleOf(viewport).paddingBottom = (NATIVE_SCROLL_HEIGHT) + scrollbarH.clientHeight + 'px';
+                        styleOf(viewport).marginBottom = -(NATIVE_SCROLL_HEIGHT) - scrollbarH.clientHeight + 'px';
                     }
                     adjustedScrollWidth = true;
                 }
@@ -252,13 +277,13 @@ class Scrollable extends PureComponent {
                 if (!containerHeight || (ratio === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio)) return;
 
                 const offsetHeight = offsetHeightOf(viewport);
-                const horizontalScrollBarOffset = statusH() !== WITHOUT_SCROLL ? __clientHeight(scrollbarH) + Math.max(NATIVE_SCROLL_HEIGHT, 0) : 0;
+                const horizontalScrollBarOffset = statusH() !== WITHOUT_SCROLL ? scrollbarH.clientHeight + Math.max(NATIVE_SCROLL_HEIGHT, 0) : 0;
 
                 let containerOffsetHeight = containerHeight + horizontalScrollBarOffset;
-                if (containerOffsetHeight > scrollHeight && status() === WITHOUT_SCROLL)
+                if (containerOffsetHeight === scrollHeight && status() === WITHOUT_SCROLL)
                     return;
 
-                if (props().autoScrollTop && scrollHeight - offsetHeight - __scrollTop(viewport) <= 20 && newRatio < ratio && Number.isFinite(newRatio) && Number.isFinite(ratio)) {
+                if (props().autoScrollTop && scrollHeight - offsetHeight - viewport.scrollTop <= 20 && newRatio < ratio && Number.isFinite(newRatio) && Number.isFinite(ratio)) {
                     viewport.scrollTop = 0; // scroll to top if scrollbar gets smaller
                 }
 
@@ -276,7 +301,7 @@ class Scrollable extends PureComponent {
                     return
                 }
 
-                if (containerOffsetHeight <= scrollHeight) {
+                if (containerOffsetHeight < scrollHeight) {
                     adjustedScrollWidth = false;
                     showScrollbar(scrollbar, viewport, adjustScrollWidth);
                 } else {
@@ -286,7 +311,7 @@ class Scrollable extends PureComponent {
                 scrolledToBottom = false;
                 scrolledToTop = false;
 
-                const position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
+                const position = viewport.scrollTop / (scrollHeight - offsetHeight);
                 styleOf(thumb).top = (position * (scrollbarHeight - offsetHeightOf(thumb))) + 'px';
             };
 
@@ -301,10 +326,10 @@ class Scrollable extends PureComponent {
                 if (!containerWidth || (ratioH === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio)) return;
 
                 const offsetWidth = offsetWidthOf(viewport);
-                const verticalScrollBarOffset = status() !== WITHOUT_SCROLL ? __clientWidth(scrollbar) + Math.max(NATIVE_SCROLL_WIDTH, 0) : 0;
+                const verticalScrollBarOffset = status() !== WITHOUT_SCROLL ? scrollbar.clientWidth + Math.max(NATIVE_SCROLL_WIDTH, 0) : 0;
 
                 let containerOffsetWidth = containerWidth + verticalScrollBarOffset;
-                if (containerOffsetWidth > scrollWidth && statusH() === WITHOUT_SCROLL)
+                if (containerOffsetWidth === scrollWidth && statusH() === WITHOUT_SCROLL)
                     return;
 
                 ratioH = newRatio;
@@ -322,21 +347,21 @@ class Scrollable extends PureComponent {
                 styleOf(container).width = (scrollWidth - verticalScrollBarOffset) + 'px';
                 containerOffsetWidth = containerWidth + verticalScrollBarOffset;
 
-                if (containerOffsetWidth <= scrollWidth) {
+                if (containerOffsetWidth < scrollWidth) {
                     adjustedScrollWidth = false;
                     showHorizontalScrollbar(scrollbarH, viewport, adjustScrollWidth);
                 } else {
                     hideHorizontalScrollbar(scrollbarH, viewport);
                 }
 
-                const position = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+                const position = viewport.scrollLeft / (scrollWidth - offsetWidth);
                 styleOf(thumbH).left = (position * (scrollbarWidth - offsetWidthOf(thumbH))) + 'px';
             };
 
             let update;
             let sbm = scrollBarModeOf(props());
             let hsbm = horizontalScrollBarModeOf(props());
-            if (sbm !== SCROLLBAR_RESIZE_DISABLED && !hsbm === SCROLLBAR_RESIZE_DISABLED) {
+            if (sbm !== SCROLLBAR_RESIZE_DISABLED && hsbm !== SCROLLBAR_RESIZE_DISABLED) {
                 update = () => {
                     updateVerticalScrollbar();
                     updateHorizontalScrollbar();
@@ -353,10 +378,10 @@ class Scrollable extends PureComponent {
             }
         };
 
-        that[ReactConstants[0]] = init;
-        that[ReactConstants[1]] = clear;
+        that[componentDidMount] = init;
+        that[componentWillUnmount] = clear;
 
-        that[ReactConstants[2]] = (prevProps) => {
+        that[componentDidUpdate] = (prevProps) => {
             if (scrollBarModeOf(props()) !== scrollBarModeOf(prevProps))
                 init();
             else if (onScroll(props()) !== onScroll(prevProps))
@@ -366,15 +391,19 @@ class Scrollable extends PureComponent {
         that.setScroll = (y) => {
             viewportRef().scrollTop = y
         };
-        that.getScroll = () => __scrollTop(viewportRef());
+        that.getScroll = () => viewportRef().scrollTop;
         that.getScrollHeight = () => scrollHeightOf(viewportRef());
         that.getHeight = () => that.el.clientHeight;
 
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const _props = props();
             const {className, children} = _props;
+
             return (
-                <div className={classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal')} style={styleOf(_props)} ref={ref('el', this)}>
+                <div className={classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal')}
+                     style={styleOf(_props)}
+                     ref={ref('el', this)}
+                >
                     <div className="viewport" ref={viewportRef}>
                         {children}
                     </div>
@@ -390,21 +419,4 @@ class Scrollable extends PureComponent {
     }
 }
 
-export default Scrollable
-
-Scrollable.defaultProps = {
-    autoScrollTop: true,
-    horizontalScrollBarMode: SCROLLBAR_MODE_HIDDEN
-};
-
-if (process.env.NODE_ENV !== 'production') {
-    Scrollable.propTypes = {
-        scrollBarMode: PropTypes.oneOf([SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_MODE_VISIBLE, SCROLLBAR_RESIZE_DISABLED]),
-        horizontalScrollBarMode: PropTypes.oneOf([SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_MODE_VISIBLE, SCROLLBAR_RESIZE_DISABLED]),
-        [ReactConstants[5]]: PropTypes.string,
-        style: PropTypes.object,
-        onScrolledToBottom: PropTypes.func,
-        onScrolledToTop: PropTypes.func,
-        autoScrollTop: PropTypes.bool,
-    }
-}
+export default Scrollable

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)