react-ui-basics 0.0.175 → 0.0.178

package/src/index.js

@@ -0,0 +1,84 @@
+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 Animated from "./Animated";
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import AutocompleteSelect from "./AutocompleteSelect";
+import Button from "./Button";
+import CalendarMonthView from "./CalendarMonthView";
+import Checkbox from "./Checkbox";
+import CircleProgress from "./CircleProgress";
+import * as CommonFields from "./CommonFields";
+import DatePicker from "./DatePicker";
+import * as DateTools from "./DateTools";
+import Dialog from "./Dialog";
+import DNDContainer from "./DNDContainer";
+import DNDDraggable from "./DNDDraggable";
+import DNDDroppable from "./DNDDroppable";
+import DropFileInput from "./DropFileInput";
+import Dropzone from "./Dropzone";
+import FilteredList from "./FilteredList";
+import FloatingActionButton from "./FloatingActionButton";
+import FormUploadProgress from "./FormUploadProgress";
+import ImageGallery from "./ImageGallery";
+import {ImageGalleryContainer} from "./ImageGallery";
+import MaterialIcon from "./MaterialIcon";
+import Modal from "./Modal";
+import ModalMenu from "./ModalMenu";
+import Router from "./router";
+import Scrollable from "./Scrollable";
+import Size from "./Size";
+import Snackbar from "./Snackbar";
+import SpinningProgress from "./SpinningProgress";
+import Switch from "./Switch";
+import ReactConstants from './ReactConstants'
+import ReactCreateElement from './ReactCreateElement'
+import * as ReadyListener from './ReadyListener'
+import TextField from "./TextField";
+import Table from "./Table";
+import ScrollableTable from "./ScrollableTable";
+import DroppableList from "./DroppableList";
+import DroppableHorizontalList from "./DroppableHorizontalList";
+import * as StoreTools from "./store/Store";
+
+export {
+    Animated,
+    AutocompleteSelect,
+    Button,
+    CalendarMonthView,
+    Checkbox,
+    CircleProgress,
+    CommonFields,
+    DatePicker,
+    DateTools,
+    Dialog,
+    DNDContainer,
+    DNDDraggable,
+    DNDDroppable,
+    DroppableList,
+    DroppableHorizontalList,
+    DropFileInput,
+    Dropzone,
+    FilteredList,
+    FloatingActionButton,
+    FormUploadProgress,
+    ImageGallery,
+    ImageGalleryContainer,
+    MaterialIcon,
+    Modal,
+    ModalMenu,
+    Router,
+    Scrollable,
+    ScrollableTable,
+    Size,
+    Snackbar,
+    SpinningProgress,
+    Switch,
+    ReactConstants,
+    ReactCreateElement,
+    ReadyListener,
+    Table,
+    TextField,
+    StoreTools,
+};

package/src/router/HistoryTools.js

@@ -0,0 +1,32 @@
+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 {DOCUMENT, WINDOW} from "../Tools";
+
+const history = WINDOW.history;
+
+const events = ['pushState', 'replaceState'];
+events.forEach(e => {
+    var original = history[e];
+    history[e] = function () {
+        original.apply(history, arguments);
+        fireEvent(e);
+    }
+});
+
+const fireEvent = (name) => {
+    const event = DOCUMENT.createEvent('Event');
+    event.initEvent(name, true, true);
+    WINDOW.dispatchEvent(event);
+};
+
+export const pushLocation = (path) => path !== WINDOW.location.pathname && history[events[0]](null, null, path);
+
+export const replaceLocation = (path) => history[events[1]](null, null, path);
+
+if (process.env.NODE_ENV !== 'production') {
+    // will be removed in production build
+    // needed only to prevent bundler to remove 'unused' functions
+    window['history-tools'] = {
+        replaceLocation
+    }
+}

package/src/router/Link.js

@@ -0,0 +1,27 @@
+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 React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from '../ReactCreateElement';
+import PropTypes from 'prop-types';
+import './HistoryTools'
+import {pushLocation} from "./HistoryTools";
+import {preventDefault} from "../Tools";
+
+const Link = ({children, href, className}) =>
+    <a href={href} className={className} onClick={(e) => {
+        if (!e.ctrlKey) {
+            preventDefault(e);
+            pushLocation(href);
+        }
+    }}>{children}</a>;
+
+if (process.env.NODE_ENV !== 'production') {
+    Link.propTypes = {
+        href: PropTypes.string.isRequired,
+    };
+}
+
+export default Link;

package/src/router/NavLink.js

@@ -0,0 +1,25 @@
+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 React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from '../ReactCreateElement';
+import PropTypes from 'prop-types';
+import './HistoryTools'
+import Route from "./Route";
+import Link from "./Link";
+import {classNames} from "../Tools";
+
+const NavLink = ({children, href, highlightPath, className, activeClassName}) =>
+    <Route path={highlightPath || href}
+           controller={matches => <Link href={href} className={classNames(className, matches && activeClassName)}>
+               {children}
+           </Link>}
+    />;
+
+if(process.env.NODE_ENV !== 'production') {
+    NavLink.propTypes = Link.propTypes;
+}
+
+export default NavLink;

package/src/router/README.md

@@ -0,0 +1,55 @@
+
+# Router
+
+#### Basic usage:
+
+```javascript
+const A = ()=> <div>A</div>;
+<Route path="/a"> <A/> </Route>;
+```
+
+#### With variables:
+
+```javascript
+const AB = ({a, b})=> <div>{a} {b}</div>;
+<Route path="/:a/:b"> <AB/> </Route>;
+```
+
+#### With optional variables:
+
+```javascript
+const AB = ({a = 'a', b = 'b'})=> <div>{a} {b}</div>;
+<Route path="/:a?/:b?"> <AB/> </Route>;
+```
+
+#### With not matcher:
+
+```javascript
+const A = ()=> <div>A</div>;
+const NotA = ()=> <div>not A</div>;
+<div>
+    <Route path="/a"> <A/> </Route>
+    <Route path="/!a"> <NotA/> </Route>
+</div>
+```
+
+#### With any matcher:
+
+```javascript
+const A = ()=> <div>A</div>;
+<div>
+    <Route path="/*"> <A/> </Route>
+</div>
+```
+
+#### With nested routes:
+
+```javascript
+const A = (a)=> <div>{a}</div>;
+const Nested = ()=> <Route path="/*/:a"> <A/> </Route>;
+
+<div>
+    <Route path="/nested/*"> <Nested/> </Route>
+</div>
+```
+

package/src/router/Route.js

@@ -0,0 +1,209 @@
+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 React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from '../ReactCreateElement';
+import PropTypes from 'prop-types';
+import './HistoryTools'
+import {allPropsExcept, isDifferent, orNoop, setOf, WINDOW, addEventListener, removeEventListener} from "../Tools";
+import {componentDidUpdate, render, PureComponent, componentDidMount, componentWillUnmount, propsGetter, stateGSs, setState} from "../ReactConstants";
+
+const historyEvents = ['popstate', 'pushState', 'replaceState'];
+
+const cleanPath = (path) => {
+    if (__length(path) > 1 && path.lastIndexOf('/') === __length(path) - 1)
+        return path.substring(0, __length(path) - 1);
+
+    return path;
+};
+
+const createUrlMatcher = path => {
+    let matcher;
+    const segments = path.split('/');
+    const optionals = segments.map(it => it === '*' || it.indexOf('?') === __length(it) - 1);
+    const containsVariables = path.indexOf(':') !== -1;
+    const containsAnySegment = path.indexOf('*') !== -1;
+    const containsNot = path.indexOf('!') !== -1;
+
+    if (!containsAnySegment && !containsVariables && !containsNot) {
+        matcher = (p) => p === path
+    } else {
+        const endsWithAny = path.lastIndexOf('*') === __length(path) - 1;
+        const matchers = segments.map((segment, i) => {
+            let matcher;
+            const variableNameIndex = segment.indexOf(':');
+            if (segment === '*')
+                matcher = () => true;
+            else if (variableNameIndex !== -1) {
+                let variable = segment.substring(variableNameIndex + 1);
+                let regex = null
+                if (variable.indexOf('?') !== -1)
+                    variable = variable.substring(0, variable.indexOf('?'));
+                if (variable.indexOf('(') !== -1) {
+                    let regexStart = variable.indexOf('(');
+                    regex = new RegExp(variable.substring(regexStart))
+                    variable = variable.substring(0, regexStart);
+                }
+
+                const prefix = variableNameIndex && segment.substring(0, variableNameIndex);
+                matcher = (p, params) => {
+                    if (regex && !!p && !p.match(regex))
+                        return false
+
+                    if (!p && !optionals[i])
+                        return false;
+                    if (prefix) {
+                        if (p.indexOf(prefix) === 0)
+                            p = p.substring(variableNameIndex);
+                        else
+                            return false;
+                    }
+
+                    params[variable] = p;
+                    return true;
+                }
+            } else if (segment.indexOf('!') === 0) {
+                const not = segment.substring(1);
+                matcher = (p) => p !== not;
+            } else
+                matcher = (p) => p === segment;
+            return matcher;
+        });
+
+        matcher = (path, params) => {
+            const segments = path.split('/');
+            const length = Math.min(__length(matchers), __length(segments));
+
+            // only exact match if mapping not ends with *
+            if (!endsWithAny && __length(matchers) < __length(segments))
+                return false;
+
+            // check that each segment matches
+            for (let i = 0; i < length; i++) {
+                if (!matchers[i](segments[i], params))
+                    return false;
+            }
+
+            // check that all other segments are optional
+            for (let i = length; i < __length(optionals); i++) {
+                if (!optionals[i])
+                    return false;
+            }
+
+            return true;
+        };
+    }
+    return matcher
+};
+
+const createUrlMatchers = path => {
+    if (Array.isArray(path)) {
+        const matchers = path.map(it => createUrlMatcher(it));
+        return (path, params) => {
+            for (let i = 0; i < __length(matchers); i++) {
+                let props = {};
+                if (matchers[i](path, props)) {
+                    __extends(params, props);
+                    return true;
+                }
+            }
+            return false;
+        }
+    } else {
+        return createUrlMatcher(path);
+    }
+};
+
+const selfProps = setOf([
+    'children',
+    'path',
+    'controller',
+    'onToggle',
+]);
+
+class Route extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+        let matcher;
+
+        const props = propsGetter(that);
+        const [
+            isRendering,
+            paramsState,
+            mergedPropsState,
+        ] = stateGSs(that, 3);
+
+        const process = () => {
+            let params = {};
+            let nextState = {};
+            let isMatching = matcher(cleanPath(WINDOW.location.pathname), params);
+
+            const toggle = isMatching !== isRendering();
+            toggle && (nextState[isRendering] = isMatching);
+
+            if (isDifferent(paramsState(), params)) {
+                nextState[mergedPropsState] = __extends(allPropsExcept(props(), selfProps), params);
+                nextState[paramsState] = params;
+            }
+
+            //set new state just once to avoid several renders
+            setState(that, nextState, () => {
+                toggle && orNoop(props().onToggle)(isMatching);
+            })
+        };
+
+        that[ReactConstants[2]] = (prevProps, prevState) => {
+            if (props() !== prevProps) {
+                let mergedProps = __extends(allPropsExcept(props(), selfProps), paramsState());
+                if (isDifferent(mergedProps, mergedPropsState()))
+                    mergedPropsState(mergedProps);
+            }
+        };
+
+        that[ReactConstants[3]] = () => {
+            const {children, controller} = props();
+            return (controller || DefaultController)(isRendering(), children, mergedPropsState());
+        };
+
+        that[ReactConstants[0]] = () => {
+            matcher = createUrlMatchers(props().path);
+
+            historyEvents.forEach(it => {
+                addEventListener(WINDOW, it, process);
+            });
+            process();
+        };
+
+        that[ReactConstants[1]] = () => {
+            historyEvents.forEach(it => {
+                removeEventListener(WINDOW, it, process);
+            });
+        };
+    }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+    Route.propTypes = {
+        path: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string)
+        ]).isRequired,
+        controller: PropTypes.func,
+        onToggle: PropTypes.func,
+    };
+}
+
+const DefaultController = (matches, children, props) => {
+    if (!matches || !children) return null;
+    if (Object.keys(props).length > 0) {
+        return React.Children.map(children, child => React.cloneElement(child, props));
+    }
+    return children;
+};
+
+export default Route;

package/src/router/Route.test.js

@@ -0,0 +1,139 @@
+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 React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import Route from "./Route";
+import {mount} from 'enzyme';
+import {pushLocation} from './HistoryTools'
+
+it('renders exact path', () => {
+    pushLocation('/test');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders exact path with / on the end', () => {
+    pushLocation('/test/');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders not url', () => {
+    const wrapper = mount(<div>
+        <Route path="/!test">
+            not test
+        </Route>
+        <Route path="/test">
+            test
+        </Route>
+    </div>);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div>not test</div>');
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>test</div>');
+});
+
+it('do not render not matching url', () => {
+    pushLocation('/');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).not.toContainReact(<div>test</div>);
+});
+
+it('renders /*', () => {
+    expect(mount(<Route path="/*">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+
+    pushLocation('/test');
+    expect(mount(<Route path="/*">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders path with variable', () => {
+    pushLocation('/test');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/:id">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('do not render if require variable', () => {
+    pushLocation('/');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<div>
+        <Route path="/:id">
+            <WithVariable/>
+        </Route>
+    </div>)).toHaveHTML('<div></div>');
+});
+
+it('renders path with variable and prefix', () => {
+    pushLocation('/test-123');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/test-:id">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>123</div>);
+});
+
+it('renders path with optional variable', () => {
+    const WithVariable = ({id}) => <div>optional: {id || 'default value'}</div>;
+
+    const wrapper = mount(<Route path="/:id?">
+        <WithVariable/>
+    </Route>);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div>optional: default value</div>');
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>optional: test</div>');
+});
+
+it('simple check for log urls', () => {
+    pushLocation('/a/b/c');
+    expect(mount(<div><Route path="/:a">
+        <div>test</div>
+    </Route></div>)).toHaveHTML('<div></div>');
+});
+
+it('test call onToggle', () => {
+    let onToggleMatches = false;
+
+    const wrapper = mount(<div><Route path="/test" onToggle={matches => onToggleMatches = matches}>
+        test
+    </Route></div>);
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>test</div>');
+    expect(onToggleMatches).toBe(true);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div></div>');
+    expect(onToggleMatches).toBe(false);
+});
+
+it('renders path with variable and regex', () => {
+    pushLocation('/123');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/:id([0-9]+)">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>123</div>);
+});
+
+it('do not render if regex does not match ', () => {
+    pushLocation('/test');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<div>
+        <Route path="/:id([0-9]+)">
+            <WithVariable/>
+        </Route>
+    </div>)).toHaveHTML('<div></div>');
+});

package/src/router/index.js

@@ -0,0 +1,14 @@
+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 Link from "./Link";
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import NavLink from "./NavLink";
+import Route from "./Route";
+
+export default {
+    Link,
+    NavLink,
+    Route
+};

package/src/store/ProxyTools.js

@@ -0,0 +1,91 @@
+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 {UNDEFINED} from "../Tools";
+
+export const createProxy = (target) => {
+    if(!target)
+        return target
+    if (target.__isProxy)
+        return target;
+
+    let changedValue = UNDEFINED;
+    let deletedKeys = UNDEFINED;
+    let innerProxies = UNDEFINED
+    const isChanged = () => changedValue || (innerProxies && Object.values(innerProxies).some(it => it.__changed));
+
+    return new Proxy(target, {
+        get: function (target, prop) {
+            if (prop === '__isProxy')
+                return true
+            if (prop === '__changed')
+                return isChanged();
+            if (prop === 'bake')
+                return () => {
+                    // console.log('bake', changedValue, innerProxies)
+                    if (!isChanged())
+                        return target
+
+                    if (changedValue && !innerProxies)
+                        return changedValue
+
+                    if (innerProxies) {
+                        const result = changedValue || (Array.isArray(target) ? [...target] : {...target});
+
+                        for (let key in innerProxies) {
+                            result[key] = innerProxies[key].bake()
+                        }
+                        return result
+                    }
+
+                    throw new Error('state not implemented yet')
+                }
+
+            // console.log('get', {target, prop})
+            const innerProxy = innerProxies && innerProxies[prop];
+            if (innerProxy)
+                return innerProxy
+
+            const changed = changedValue && changedValue[prop]
+            if (changed !== UNDEFINED)
+                return changed
+
+            if (deletedKeys && deletedKeys[prop])
+                return null
+
+            const value = target[prop];
+            if (value && typeof value === 'object') {
+                !innerProxies && (innerProxies = {})
+                return innerProxies[prop] = createProxy(value)
+            }
+
+            return value;
+        },
+        set: function (target, prop, newval) {
+            // console.log('set', {target, prop, newval})
+            if (!changedValue) changedValue = Array.isArray(target) ? [...target] : {...target}
+
+            if (newval && typeof newval === 'object') {
+                !innerProxies && (innerProxies = {})
+                innerProxies[prop] = newval = createProxy(newval)
+            } else {
+                innerProxies && (delete innerProxies[prop])
+            }
+            changedValue[prop] = newval
+            // console.log('changedValue', changedValue)
+            return true;
+        },
+        deleteProperty: function (target, prop) {
+            // console.log('delete', {target, prop})
+            !changedValue && (changedValue = Array.isArray(target) ? [...target] : {...target})
+
+            if (!prop in changedValue)
+                return false;
+
+            delete changedValue[prop]
+            innerProxies && delete innerProxies[prop]
+            !deletedKeys && (deletedKeys = {})
+            deletedKeys[prop] = true;
+            return true;
+        }
+    })
+}