react-ui-basics 0.0.173 → 0.0.176

package/src/TextField.scss

@@ -0,0 +1,160 @@
+@import "./global.scss";
+
+$focusColor: rgb(0, 188, 212);
+$redColor: rgb(244, 67, 54);
+
+.TextField {
+  position: relative;
+  width: 100%;
+
+  > label {
+    font-family: $font;
+    color: rgba(0, 0, 0, 0.3);
+
+    font-size: 16px;
+    position: absolute;
+    left: 0px;
+    top: 16px;
+    margin-top: -16px;
+    transition: all 0.2s ease;
+    user-select: none;
+    cursor: text;
+  }
+
+  > input {
+    font-family: $font;
+    color: $colorInput;
+
+    height: 19px;
+    font-size: 16px;
+    width: 100%;
+    border: 0px;
+    padding-bottom: 4px;
+    padding-top: 0;
+    outline-color: rgba(0, 0, 0, 0);
+
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      color: gray;
+      background-color: white;
+    }
+
+    &:disabled + .border {
+      height: 0px;
+      border-bottom: 2px dotted rgb(224, 224, 224);
+    }
+
+    &::placeholder {
+      font-family: $font;
+      color: rgba(0, 0, 0, 0.3);
+      opacity: 1;
+    }
+  }
+
+  > .border {
+    border-bottom: 1px solid rgb(224, 224, 224);
+    height: 1px;
+    position: relative;
+
+    .line {
+      left: 50%;
+      width: 0;
+      height: 2px;
+      min-height: 2px;
+      background-color: $focusColor;
+      transition: all 0.2s ease;
+      position: absolute;
+    }
+  }
+
+  > .error {
+    text-align: left;
+    font-size: 10px;
+    min-height: 0;
+    line-height: 14px;
+    color: $redColor;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.2s ease;
+  }
+
+  &.focused, &.withValue {
+    > label {
+      top: 4px;
+      font-size: 12px;
+      line-height: 14px;
+    }
+  }
+
+  &.errored {
+    > .error {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    > .border {
+      border-bottom-color: $redColor;
+    }
+
+    > label {
+      color: $redColor;
+    }
+  }
+
+  &.focused {
+    > label {
+      color: $focusColor;
+    }
+
+    > .border {
+      .line {
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
+
+  &.disabled {
+    label, input {
+      cursor: not-allowed;
+    }
+  }
+
+  &.withLabel {
+    margin-top: 15px;
+  }
+
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    display: none !important;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+  }
+
+  input:-webkit-autofill {
+    -webkit-box-shadow: inset 0 0 0px 9999px white;
+  }
+
+  @keyframes shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    20%, 60% {
+      transform: translateX(-5px);
+    }
+    40%, 80% {
+      transform: translateX(5px);
+    }
+  }
+
+  .shake {
+    animation-duration: .5s;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in-out;
+    animation-name: shake;
+  }
+}

package/src/Tools.test.js

@@ -0,0 +1,105 @@
+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 {isDifferent} from "./Tools";
+
+const toString = (it) => {
+    if (typeof it === 'object')
+        return JSON.stringify(it)
+    else
+        `${it}`
+}
+
+expect.extend({
+    toBeDifferentTo(a, b) {
+        return isDifferent(a, b) ? ({
+            pass: true,
+            message: () => `Expected ${toString(a)} to be same as ${toString(b)}`
+        }) : ({
+            pass: false,
+            message: () => `Expected ${toString(a)} not to be same as ${toString(b)}`
+        });
+    }
+});
+expect.extend({
+    toBeSameAs(a, b) {
+        return !isDifferent(a, b) ? ({
+            pass: true,
+            message: () => `Expected ${toString(a)} to be different to ${toString(b)}`
+        }) : ({
+            pass: false,
+            message: () => `Expected ${toString(a)} not to be different to ${toString(b)}`
+        });
+    }
+});
+
+
+const same = (a, b) => {
+    expect(a).toBeSameAs(b)
+};
+
+const different = (a, b) => {
+    expect(a).toBeDifferentTo(b)
+};
+
+it('test isDifferent', () => {
+    same(1, 1);
+    different(1, 2);
+    different(1, []);
+    different(1, '1');
+    same(Infinity, Infinity);
+    different(Infinity, -Infinity);
+    different(NaN, undefined);
+    different(NaN, null);
+    different(NaN, NaN);
+    different(1, -1);
+    same(0, -0);
+
+    same(null, null);
+    same(void 0, undefined);
+    same(undefined, undefined);
+    different(null, undefined);
+    different('', null);
+    different(0, null);
+
+    same(true, true);
+    same(false, false);
+    different(true, false);
+    different(0, false);
+    different(1, true);
+
+    same('a', 'a');
+    different('a', 'b');
+
+
+    same({}, {});
+    same({a: 1, b: 2}, {a: 1, b: 2});
+    same({b: 2, a: 1}, {a: 1, b: 2});
+
+    different({a: 1, b: 2, c: []}, {a: 1, b: 2});
+    different({a: 1, b: 2}, {a: 1, b: 2, c: []});
+    different({a: 1, c: 3}, {a: 1, b: 2});
+
+    same({a: [{b: 1}]}, {a: [{b: 1}]});
+    different({a: [{b: 2}]}, {a: [{b: 1}]});
+    different({a: [{c: 1}]}, {a: [{b: 1}]});
+
+    different([], {});
+    different({}, []);
+    different({}, null);
+    different({}, undefined);
+
+    different({a: void 0}, {});
+    different({}, {a: undefined});
+    different({a: undefined}, {b: undefined});
+
+
+    same([], []);
+    same([1, 2, 3], [1, 2, 3]);
+    different([1, 2, 4], [1, 2, 3]);
+    different([1, 2], [1, 2, 3]);
+
+    same([{a: 1}, {b: 2}], [{a: 1}, {b: 2}]);
+    different([{a: 2}, {b: 2}], [{a: 1}, {b: 2}]);
+
+    different({'0': 0, '1': 1, length: 2}, [0, 1]);
+});

package/src/Tools.ts

@@ -0,0 +1,231 @@
+var global = global || window;
+export const WINDOW = global;
+export const DOCUMENT = WINDOW.document;
+
+export function classNames(...classes: Array<string | number | boolean | null | void>) {
+    const filtered = [];
+    const length = classes.length;
+    for (let i = 0; i < length; i++) {
+        let it = classes[i];
+        !!it && filtered.push(it);
+    }
+    return filtered.join(' ');
+}
+
+export const NOOP = () => {
+};
+
+export const orNoop = <T>(f: (...a: any) => T) => f || NOOP;
+
+export const getRandomId = (prefix) => prefix + Math.random();
+
+export const ref = (name, component) => {
+    const refKey = "__" + name;
+    return component[refKey] || (component[refKey] = (it) => component[name] = it)
+};
+
+export const createRef = (initialValue?: any) => {
+    let v = initialValue;
+    return function (value?: any) {
+        if (value != UNDEFINED)
+            v = value
+        return v;
+    };
+};
+
+export const createAccessor = (field: string) => (o: any, value?: any) => {
+    return !o ? null : value != UNDEFINED ? o[field] = value : o[field]
+}
+
+export const setOf = (list) => (list || []).reduce((map, key) => {
+    map[key] = TRUE;
+    return map;
+}, {});
+
+export const allPropsExcept = (obj, except) => {
+    let result = {};
+    for (let key in obj) {
+        if (!except[key]) result[key] = obj[key];
+    }
+    return result;
+};
+
+export const continuousIncludes = (value, inc) => {
+    const length = inc.length;
+    let from = -1;
+    for (let i = 0; i < length; i++) {
+        from = value.indexOf(inc[i], from + 1);
+        if (from === -1)
+            return FALSE
+    }
+    return TRUE;
+};
+
+const isArrayShallowEqual = (a, b) => {
+    if (a === b) return TRUE;
+    if (a == null || b == null) return FALSE;
+    if (a.length !== b.length) return FALSE;
+
+    let i = a.length - 1;
+    let result = TRUE;
+    while (i >= 0 && (result = (a[i] === b[i]))) {
+        i--;
+    }
+    return result;
+}
+
+export const debounce = (func, delay) => {
+    let inDebounce;
+    return function () {
+        const context = this;
+        const args = arguments;
+        clearTimeout(inDebounce);
+        inDebounce = setTimeout(() => {
+            func.apply(context, args);
+        }, delay)
+    }
+};
+
+export const memo = (func) => {
+    let prevArgs
+    let prevResult
+    return function () {
+        const context = this;
+        const args = arguments;
+        if (!isArrayShallowEqual(prevArgs, args)) {
+            prevArgs = args
+            prevResult = func.apply(context, args);
+        }
+        return prevResult
+    }
+}
+
+export const constructorOf = (v) => v && v.constructor;
+export const typeOf = (v) => typeof v;
+export const isFunction = (v) => typeOf(v) === 'function';
+export const isString = (v) => typeOf(v) === 'string';
+export const isObject = (v) => typeOf(v) === 'object';
+
+const FALSE = false;
+const TRUE = true;
+
+export const isDifferent = (a, b) => {
+    if (a === null && b === null) return FALSE;
+    if (a === null || b === null) return TRUE;
+    if (a === b) return FALSE;
+
+    const constructorA = constructorOf(a);
+    const constructorB = constructorOf(b);
+    if (constructorA !== constructorB) {
+        return TRUE;
+    }
+
+    let i;
+    if (constructorA === Array) {
+        if ((i = a.length) === b.length) {
+            while (i-- && !isDifferent(a[i], b[i])) {
+            }
+        }
+    } else if (constructorA === Object) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if ((i = keysA.length) === keysB.length) {
+            let key;
+            while (i-- && ((key = keysA[i]) in b) && !isDifferent(a[key], b[key])) {
+            }
+        }
+    }
+
+    return i !== -1;
+};
+
+export const preventDefault = e => {
+    e && e.preventDefault();
+};
+export const stopPropagation = e => {
+    e && e.stopPropagation();
+};
+
+export const setTimeout = function (callback: (...args: any[]) => void, ms?: number, ...args: any[]) {
+    return WINDOW.setTimeout.apply(WINDOW, arguments);
+};
+export const clearTimeout = (id) => {
+    WINDOW.clearTimeout(id);
+};
+export const setInterval = function (callback: (...args: any[]) => void, ms?: number, ...args: any[]) {
+    return WINDOW.setInterval.apply(WINDOW, arguments);
+};
+export const clearInterval = (id) => {
+    WINDOW.clearInterval(id);
+};
+export const requestAnimationFrame = (cb) => WINDOW.requestAnimationFrame(cb);
+export const addEventListener = (el, type, listener, options?) => {
+    el && el.addEventListener(type, listener, options);
+};
+export const removeEventListener = (el, type, listener, options?) => {
+    el && el.removeEventListener(type, listener, options);
+};
+
+export const UNDEFINED = undefined;
+export const isUndefined = a => a === UNDEFINED;
+
+
+export class Comparators {
+    static SORT_ASC = 'ASC';
+    static SORT_DESC = 'DESC';
+
+    static of = (field, order, data) => {
+        let comparator;
+        if (Array.isArray(field)) {
+            const isOrderArray = Array.isArray(order);
+            comparator = Comparators.chain(field.map((it, i) => Comparators.of(it, (isOrderArray && order[i]) || Comparators.SORT_ASC, data)));
+        } else if (isFunction(field)) {
+            if (data && data[0] && isString(field(data[0]))) {
+                const collator = new Intl.Collator('default', {sensitivity: 'base'});
+                comparator = (a, b) => {
+                    return collator.compare(field(a), field(b));
+                }
+            } else
+                comparator = (a, b) => {
+                    const A = field(a);
+                    const B = field(b);
+                    return (A < B ? -1 : (A > B ? 1 : 0));
+                };
+        } else if (isString(field))
+            comparator = Comparators.of(it => it[field], Comparators.SORT_ASC, data);
+        else
+            comparator = Comparators.of(it => it, Comparators.SORT_ASC, data);
+
+        if (order && order === Comparators.SORT_DESC) {
+            return Comparators.inverse(comparator);
+        }
+
+        return addComparatorMethods(comparator);
+    };
+    static chain = (comparators) => addComparatorMethods((a, b) => {
+            let result;
+            for (let i = 0; i < comparators.length; i++) {
+                result = comparators[i](a, b);
+                if (result !== 0)
+                    return result;
+            }
+            return result;
+        }
+    );
+
+    static inverse = (comparator) => addComparatorMethods((a, b) => -comparator(a, b));
+}
+
+const addComparatorMethods = function (comparator) {
+    comparator.inverse = () => Comparators.inverse(comparator);
+    comparator.and = (another) => Comparators.chain([comparator, another]);
+    return comparator;
+};
+
+if (window['isNotProductionEnvironment']) {
+    // will be removed in production build
+    // needed only to prevent bundler to remove 'unused' functions
+    window['tools'] = {
+        memo
+    }
+}

package/src/global.css

@@ -0,0 +1 @@
+

package/src/global.scss

@@ -0,0 +1,6 @@
+$colorBlack: #1e252d;
+$colorBlue: #2196F3;
+
+$colorInput: $colorBlack;
+$fontSizeInput: 14px;
+$font: Roboto, sans-serif;

package/src/index.js

@@ -0,0 +1,78 @@
+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 Checkbox from "./Checkbox";
+import CircleProgress from "./CircleProgress";
+import * as CommonFields from "./CommonFields";
+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,
+    Checkbox,
+    CircleProgress,
+    CommonFields,
+    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;