react-ui-basics 0.0.246 → 0.0.248

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

@@ -1,35 +1,42 @@
-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 './Animated.css'; import React from 'react';
-import ReactCreateElement from './ReactCreateElement';
-import PropTypes from 'prop-types';
+import React, {CSSProperties} from 'react';
 import './Animated.css'
-import {allPropsExcept, classNames, setOf, setTimeout, requestAnimationFrame, clearTimeout} from "./Tools";
-import {props, state, setState, componentWillUnmount, componentDidMount, render, componentDidUpdate, className, children, PureComponent} from "./ReactConstants";
-
-let mounting = 'mounting',
+import {allPropsExcept, classNames, clearTimeout, requestAnimationFrame, setOf, setTimeout} from "./Tools";
+import {
+    children,
+    className,
+    componentDidMount,
+    componentDidUpdate,
+    componentWillUnmount,
+    props,
+    PureComponent,
+    render,
+    setState,
+    state
+} from "./ReactConstants";
+
+const mounting = 'mounting',
     unmounting = 'unmounting',
     mounted = 'mounted',
     enabled = 'enabled',
     mountingDelay = 'mountingDelay',
     unmountingDelay = 'unmountingDelay',
     timeout = 'timeout',
-    value = 'value'
-;
-
-const selfProps = setOf([
-    children,
-    className,
-    'styles',
-    mountingDelay,
-    unmountingDelay,
-    mounting,
-    unmounting,
-    value,
-]);
+    value = 'value',
+    selfProps = setOf([
+        children,
+        className,
+        'styles',
+        mountingDelay,
+        unmountingDelay,
+        mounting,
+        unmounting,
+        value,
+    ]);
 
 const clearTimer = that => clearTimeout(that[timeout]);
 
-const animatedState = (isEnabled, isMounting, isMounted, isUnMounting) => {
-    const r = {};
+const animatedState = (isEnabled: boolean, isMounting?: boolean, isMounted?: boolean, isUnMounting?: boolean): AnimatedState => {
+    const r = {} as AnimatedState;
     r[enabled] = isEnabled;
     r[mounting] = isMounting;
     r[mounted] = isMounted;
@@ -37,13 +44,13 @@ const animatedState = (isEnabled, isMounting, isMounted, isUnMounting) => {
     return r;
 };
 
-const doMounting = (that, duration) => {
+const doMounting = (that, duration: number) => {
     setState(that, animatedState(true, true, false, false));
 
     that[timeout] = setTimeout(setState, duration, that, animatedState(true, false, true, false))
 };
 
-const processMounting = (that, duration, mountingDelay) => {
+const processMounting = (that, duration: number, mountingDelay: number) => {
     const _state = state(that);
     if (_state[mounting] || _state[mounted]) return;
     clearTimer(that);
@@ -61,12 +68,12 @@ const processMounting = (that, duration, mountingDelay) => {
     }
 };
 
-const doUnmounting = (that, duration) => {
+const doUnmounting = (that, duration: number) => {
     setState(that, animatedState(true, false, false, true));
     that[timeout] = setTimeout(setState, duration, that, animatedState(false, false, false, false));
 };
 
-const processUnmounting = (that, duration, unmountingDelay) => {
+const processUnmounting = (that, duration: number, unmountingDelay: number) => {
     const _state = state(that);
     if (_state[unmounting]) return;
     clearTimer(that);
@@ -84,24 +91,56 @@ const processUnmounting = (that, duration, unmountingDelay) => {
     }
 };
 
-class Animated extends PureComponent {
+export interface AnimatedStyles {
+    mounting?: CSSProperties,
+    mounted?: CSSProperties,
+    unmounting?: CSSProperties,
+    default?: CSSProperties,
+}
+
+export interface AnimatedProps {
+    value: boolean,
+    className?: string,
+    styles?: AnimatedStyles,
+    mountingDelay?: number,
+    unmountingDelay?: number,
+    mounting?: number,
+    unmounting?: number,
+}
+
+export interface AnimatedState {
+    enabled: boolean
+    mounting: boolean,
+    unmounting: boolean,
+    mounted: boolean,
+}
+
+class Animated extends PureComponent<AnimatedProps, AnimatedState> {
+    static defaultProps = {
+        [className]: 'animated',
+        [mounting]: 250,
+        [unmounting]: 250,
+        styles: {},
+        [mountingDelay]: 0,
+        [unmountingDelay]: 0,
+    }
 
     constructor(properties) {
         super(properties);
         const that = this;
         that.state = animatedState(!!properties[value]);
 
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             const _props = props(that);
             if (!!_props[value])
                 processMounting(that, _props[mounting], _props[mountingDelay])
         };
 
-        that[ReactConstants[1]] = () => {
+        that[componentWillUnmount] = () => {
             clearTimer(that)
         };
 
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const _state = state(that);
             if (!_state[enabled]) return null;
 
@@ -122,24 +161,23 @@ class Animated extends PureComponent {
                 childStyles = styles[mounted] || styles[mounting];
 
             const otherProps = allPropsExcept(_props, selfProps);
-            return React.Children.map(_props[ReactConstants[4]], child =>
+            return React.Children.map(_props[children], child =>
                 child && React.cloneElement(child, {
-                    [ReactConstants[5]]: classNames(
-                        props(child)[ReactConstants[5]],
-                        _props[ReactConstants[5]],
+                    [className]: classNames(
+                        props(child)[className],
+                        _props[className],
                         isMounting && mounting,
                         isMounted && mounted,
                         isUnMounting && unmounting
                     ),
-                    style: {...__style(props(child)), ...childStyles},
+                    // @ts-ignore
+                    style: {...props(child).style, ...childStyles},
                     ...otherProps,
                 }));
         };
 
-        that[ReactConstants[2]] = () => {
-            const p = props;
-            const t = that;
-            const _props = p(t)||props(that),
+        that[componentDidUpdate] = () => {
+            const _props = props(that),
                 _state = state(that),
                 {
                     [value]: v,
@@ -175,39 +213,4 @@ class Animated extends PureComponent {
     }
 }
 
-if (process.env.NODE_ENV !== 'production') {
-    Animated.propTypes = {
-        [value]: PropTypes.bool,
-        [ReactConstants[5]]: PropTypes.string,
-        styles: PropTypes.shape({
-            [mounting]: PropTypes.object,
-            [mounted]: PropTypes.object,
-            [unmounting]: PropTypes.object,
-        }),
-        [mountingDelay]: PropTypes.number,
-        [unmountingDelay]: PropTypes.number,
-        [mounting]: PropTypes.number,
-        [unmounting]: PropTypes.number,
-    };
-}
-
-Animated.defaultProps = {
-    [ReactConstants[5]]: 'animated',
-    [mounting]: 250,
-    [unmounting]: 250,
-    styles: {},
-    [mountingDelay]: 0,
-    [unmountingDelay]: 0,
-};
-
-// forcing webpack to NOT inline constant fields
-// mounting = mounting || 1;
-// mounted = mounted || 1;
-// unmounting = unmounting || 1;
-// enabled = enabled || 1;
-// mountingDelay = mountingDelay || 1;
-// unmountingDelay = unmountingDelay || 1;
-// value = value || 1;
-// timeout = timeout || 1;
-
 export default Animated

package/src/AutocompleteSelect.js

@@ -170,6 +170,7 @@ class AutocompleteSelect extends PureComponent {
         selectCustomOnClickOutside: true,
         withReset: false,
         scrollToValue: false,
+        disabled: false,
         mode: MODE_DEFAULT,
         selectedMode: 'full',
         listPortalPosition: 'left',
@@ -204,6 +205,7 @@ class AutocompleteSelect extends PureComponent {
             className,
             scrollToValue,
             scroll,
+            disabled,
             required,
             allowCustom,
             inlineSelected,
@@ -227,17 +229,21 @@ class AutocompleteSelect extends PureComponent {
         const selectedIds = Object.values(selected);
         const hasSelected = __length(selectedIds) !== 0;
         const setActive = (e) => {
-            stopPropagation(e);
-            this.setState({isActive: true}, () => {
-                scrollToValue && __length(selectedIds) > 0 && data.includes(selectedIds[0]) && this.list.selected(selectedIds[0]);
-            });
+            if (!disabled) {
+                stopPropagation(e);
+                this.setState({isActive: true}, () => {
+                    scrollToValue && __length(selectedIds) > 0 && data.includes(selectedIds[0]) && this.list.selected(selectedIds[0]);
+                });
+            }
         };
         const toggle = (e) => {
-            if (!__state(this).isActive) {
-                setActive(e);
-            } else {
-                stopPropagation(e);
-                this.setState({isActive: false});
+            if (!disabled) {
+                if (!__state(this).isActive) {
+                    setActive(e);
+                } else {
+                    stopPropagation(e);
+                    this.setState({isActive: false});
+                }
             }
         };
 
@@ -278,6 +284,7 @@ class AutocompleteSelect extends PureComponent {
                      errored && 'errored',
                      inlineSelected && 'inlineSelected',
                      hasSelected && 'hasSelected',
+                     disabled && 'disabled',
                  )}
                  ref={ref('el', this)}>
                 {label && <label className={classNames(`label`, (hasSelected || filterValue) && 'active', hasSelected && 'hasSelected')}
@@ -297,6 +304,7 @@ class AutocompleteSelect extends PureComponent {
                     <div
                         className={classNames('selected',
                             !label && 'nolabel',
+                            disabled && 'disabled',
                             (mode === MODE_MULTIPLE_MINI || mode === MODE_MINI || mode === MODE_MULTIPLE_MINI_INLINE) && 'clickable',
                             selectedMode)}
                         onClick={toggle}>
@@ -305,8 +313,10 @@ class AutocompleteSelect extends PureComponent {
                             <div className="value" key={id}>
                                 {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
                                 <div className="button remove" onClick={e => {
-                                    stopPropagation(e);
-                                    this.remove(id);
+                                    if (!disabled) {
+                                        stopPropagation(e);
+                                        this.remove(id);
+                                    }
                                 }}>
                                     {removeIcon}
                                 </div>
@@ -319,7 +329,7 @@ class AutocompleteSelect extends PureComponent {
                             </React.Fragment>
                         )}
                         {!label && withArrow && <span className="arrow"/>}
-                        {withReset && <Button className="reset" raised={false} onClick={this.clean}>
+                        {withReset && <Button className="reset" disabled={disabled} raised={false} onClick={this.clean}>
                             {removeIcon}
                         </Button>}
                     </div>
@@ -330,8 +340,10 @@ class AutocompleteSelect extends PureComponent {
                         <div className="value" key={id}>
                             {React.createElement(selectedComponent, {...childProps, id, label: getLabel(labels, id), [ReactConstants[6]]: setActive})}
                             <div className="button remove" onClick={e => {
-                                stopPropagation(e);
-                                this.remove(id);
+                                if (!disabled) {
+                                    stopPropagation(e);
+                                    this.remove(id);
+                                }
                             }}>
                                 {removeIcon}
                             </div>
@@ -352,6 +364,7 @@ class AutocompleteSelect extends PureComponent {
                                                   focused={isActive}
                                                   value={filterValue}
                                                   label={inputLabel}
+                                                  disabled={disabled}
                                                   onChange={this[ReactConstants[7]]}
                                                   onFocus={e => this.setState({isActive: true})}
                                                   check={__props(this).filterCheck}

package/src/ReactConstants.ts

@@ -12,6 +12,18 @@ export const stateFieldSetter = (that, key, cb?: () => void) => (value, cb2?) =>
     setState(that, {[key]: value}, cb2 || cb);
 };
 
+export type Callback = () => void;
+export const createStateGetterSetter = <C extends React.Component, K extends keyof C["state"]>(that: C, key: K, cb?: Callback): {
+    (): C["state"][K];
+    (value: C["state"][K], cb2?: Callback): void;
+} => (function (value?: C["state"][K], cb2?: Callback): C["state"][K] {
+    return arguments.length === 0 ?
+        // @ts-ignore
+        state(that)[key]
+        :
+        setState(that, {[key]: value} as any, cb2 ?? cb)
+});
+
 type GetterSetter<T> = (v?: T, cb?: () => void) => T;
 export const stateGS: (<T>(that: React.Component) => GetterSetter<T>) = (that) => {
     !that['sfc'] && (that['sfc'] = 0);

package/src/router/{Route.js → Route.tsx}

@@ -1,15 +1,17 @@
-import ReactConstants from "./ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields"; import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers"; import React from 'react';
+import React, {ReactNode} from 'react';
 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 indexOf = (src: string, search: string) => src.indexOf(search);
+const substring = (src: string, start: number, end?: number) => src.substring(start, end);
+
 const historyEvents = ['popstate', 'pushState', 'replaceState'];
 
 const cleanPath = (path) => {
-    if (__length(path) > 1 && path.lastIndexOf('/') === __length(path) - 1)
-        return path.substring(0, __length(path) - 1);
+    if (path.length > 1 && path.lastIndexOf('/') === path.length - 1)
+        return substring(path, 0, path.length - 1);
 
     return path;
 };
@@ -17,32 +19,32 @@ const cleanPath = (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;
+    const optionals = segments.map(it => it === '*' || indexOf(it, '?') === it.length - 1);
+    const containsVariables = indexOf(path, ':') !== -1;
+    const containsAnySegment = indexOf(path, '*') !== -1;
+    const containsNot = indexOf(path, '!') !== -1;
 
     if (!containsAnySegment && !containsVariables && !containsNot) {
         matcher = (p) => p === path
     } else {
-        const endsWithAny = path.lastIndexOf('*') === __length(path) - 1;
+        const endsWithAny = path.lastIndexOf('*') === path.length - 1;
         const matchers = segments.map((segment, i) => {
             let matcher;
-            const variableNameIndex = segment.indexOf(':');
+            const variableNameIndex = indexOf(segment, ':');
             if (segment === '*')
                 matcher = () => true;
             else if (variableNameIndex !== -1) {
-                let variable = segment.substring(variableNameIndex + 1);
+                let variable = substring(segment, 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);
+                if (indexOf(variable, '?') !== -1)
+                    variable = substring(variable, 0, indexOf(variable, '?'));
+                if (indexOf(variable, '(') !== -1) {
+                    let regexStart = indexOf(variable, '(');
+                    regex = new RegExp(substring(variable, regexStart))
+                    variable = substring(variable, 0, regexStart);
                 }
 
-                const prefix = variableNameIndex && segment.substring(0, variableNameIndex);
+                const prefix = variableNameIndex && substring(segment, 0, variableNameIndex);
                 matcher = (p, params) => {
                     if (regex && !!p && !p.match(regex))
                         return false
@@ -50,8 +52,8 @@ const createUrlMatcher = path => {
                     if (!p && !optionals[i])
                         return false;
                     if (prefix) {
-                        if (p.indexOf(prefix) === 0)
-                            p = p.substring(variableNameIndex);
+                        if (indexOf(p, prefix) === 0)
+                            p = substring(p, variableNameIndex);
                         else
                             return false;
                     }
@@ -59,8 +61,8 @@ const createUrlMatcher = path => {
                     params[variable] = p;
                     return true;
                 }
-            } else if (segment.indexOf('!') === 0) {
-                const not = segment.substring(1);
+            } else if (indexOf(segment, '!') === 0) {
+                const not = substring(segment, 1);
                 matcher = (p) => p !== not;
             } else
                 matcher = (p) => p === segment;
@@ -69,10 +71,10 @@ const createUrlMatcher = path => {
 
         matcher = (path, params) => {
             const segments = path.split('/');
-            const length = Math.min(__length(matchers), __length(segments));
+            const length = Math.min(matchers.length, segments.length);
 
             // only exact match if mapping not ends with *
-            if (!endsWithAny && __length(matchers) < __length(segments))
+            if (!endsWithAny && matchers.length < segments.length)
                 return false;
 
             // check that each segment matches
@@ -82,7 +84,7 @@ const createUrlMatcher = path => {
             }
 
             // check that all other segments are optional
-            for (let i = length; i < __length(optionals); i++) {
+            for (let i = length; i < optionals.length; i++) {
                 if (!optionals[i])
                     return false;
             }
@@ -97,10 +99,10 @@ 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++) {
+            for (let i = 0; i < matchers.length; i++) {
                 let props = {};
                 if (matchers[i](path, props)) {
-                    __extends(params, props);
+                    Object.assign(params, props);
                     return true;
                 }
             }
@@ -118,7 +120,16 @@ const selfProps = setOf([
     'onToggle',
 ]);
 
-class Route extends PureComponent {
+export type Controller = (matches: boolean, children: ReactNode, props: any) => ReactNode;
+
+export interface RouteProps {
+    path: string | string[],
+    controller?: Controller,
+    onToggle?: (matches: boolean) => void,
+    children?: ReactNode,
+}
+
+class Route extends PureComponent<RouteProps> {
 
     constructor(properties) {
         super(properties);
@@ -139,10 +150,13 @@ class Route extends PureComponent {
             let isMatching = matcher(cleanPath(WINDOW.location.pathname), params);
 
             const toggle = isMatching !== isRendering();
+            // @ts-ignore
             toggle && (nextState[isRendering] = isMatching);
 
             if (isDifferent(paramsState(), params)) {
-                nextState[mergedPropsState] = __extends(allPropsExcept(props(), selfProps), params);
+                // @ts-ignore
+                nextState[mergedPropsState] = Object.assign(allPropsExcept(props(), selfProps), params);
+                // @ts-ignore
                 nextState[paramsState] = params;
             }
 
@@ -152,20 +166,20 @@ class Route extends PureComponent {
             })
         };
 
-        that[ReactConstants[2]] = (prevProps, prevState) => {
+        that[componentDidUpdate] = (prevProps, prevState) => {
             if (props() !== prevProps) {
-                let mergedProps = __extends(allPropsExcept(props(), selfProps), paramsState());
+                let mergedProps = Object.assign(allPropsExcept(props(), selfProps), paramsState());
                 if (isDifferent(mergedProps, mergedPropsState()))
                     mergedPropsState(mergedProps);
             }
         };
 
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const {children, controller} = props();
             return (controller || DefaultController)(isRendering(), children, mergedPropsState());
         };
 
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             matcher = createUrlMatchers(props().path);
 
             historyEvents.forEach(it => {
@@ -174,7 +188,7 @@ class Route extends PureComponent {
             process();
         };
 
-        that[ReactConstants[1]] = () => {
+        that[componentWillUnmount] = () => {
             historyEvents.forEach(it => {
                 removeEventListener(WINDOW, it, process);
             });
@@ -182,20 +196,10 @@ class Route extends PureComponent {
     }
 }
 
-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) => {
+const DefaultController: Controller = (matches, children, props) => {
     if (!matches || !children) return null;
     if (Object.keys(props).length > 0) {
+        // @ts-ignore
         return React.Children.map(children, child => React.cloneElement(child, props));
     }
     return children;

package/src/router/index.ts

@@ -0,0 +1,9 @@
+import Link from "./Link";
+import NavLink from "./NavLink";
+import Route from "./Route";
+
+export default {
+    Link,
+    NavLink,
+    Route
+};

package/src/router/index.js

@@ -1,9 +0,0 @@
-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 Link from "./Link";
-import NavLink from "./NavLink";
-import Route from "./Route";
-
-export default {
-    Link,
-    NavLink,
-    Route
-};