react-ui-basics 0.0.247 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.247",
+  "version": "0.0.249",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/router/HistoryTools.d.ts

@@ -2,8 +2,8 @@ declare const history: History;
 export type HistoryAction = 'pushState' | 'replaceState';
 export type HistoryActionArgs = Parameters<typeof history[HistoryAction]>;
 export type HistoryMiddleware = (action: HistoryAction, args: HistoryActionArgs) => HistoryActionArgs;
-export declare const pushLocation: (path: string) => void;
-export declare const replaceLocation: (path: string) => void;
+export declare const pushLocation: (path: string | URL) => void;
+export declare const replaceLocation: (path: string | URL) => void;
 export declare const addMiddleware: (middleware: HistoryMiddleware) => void;
 export declare const removeMiddleware: (middleware: HistoryMiddleware) => void;
 export {};

package/router/HistoryTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryTools.js","sources":["../src/router/HistoryTools.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAM/B,MAAM,WAAW,GAAwB,EAAE,CAAA;AAE3C,MAAM,MAAM,GAAoB,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;AAC9D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG;AACf,IAAA,IAAI,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,OAAO,CAAC,CAAC,CAAC,GAAG,YAAA;QACT,IAAI,IAAI,GAAG,SAAqC,CAAC;AACjD,QAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AAClC,YAAA,IAAI,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;AAC1B,YAAA,IAAI,CAAC,IAAI;gBAAE,MAAK;AACnB,SAAA;QACD,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACtC,SAAS,CAAC,CAAC,CAAC,CAAC;AACjB,KAAC,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,CAAC,IAAI,KAAI;AACvB,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AACnE,IAAA,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,IAAY,KAAK,IAAI,KAAK,MAAM,CAAC,QAAQ,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;MAE3G,eAAe,GAAG,CAAC,IAAY,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAEzE,MAAA,aAAa,GAAG,CAAC,UAA6B,KAAI;AAC3D,IAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACjC,EAAE;AACW,MAAA,gBAAgB,GAAG,CAAC,UAA6B,KAAI;IAC9D,IAAI,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAC5C,IAAA,KAAK,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACjD,EAAE;AAEF,IAAI,MAAM,CAAC,4BAA4B,CAAC,EAAE;;;IAGtC,MAAM,CAAC,eAAe,CAAC,GAAG;QACtB,eAAe;QACf,aAAa;QACb,gBAAgB;KACnB,CAAA;AACJ;;;;"}
+{"version":3,"file":"HistoryTools.js","sources":["../src/router/HistoryTools.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAM/B,MAAM,WAAW,GAAwB,EAAE,CAAA;AAE3C,MAAM,MAAM,GAAoB,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;AAC9D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG;AACf,IAAA,IAAI,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,OAAO,CAAC,CAAC,CAAC,GAAG,YAAA;QACT,IAAI,IAAI,GAAG,SAAqC,CAAC;AACjD,QAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AAClC,YAAA,IAAI,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;AAC1B,YAAA,IAAI,CAAC,IAAI;gBAAE,MAAK;AACnB,SAAA;QACD,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACtC,SAAS,CAAC,CAAC,CAAC,CAAC;AACjB,KAAC,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,CAAC,IAAI,KAAI;AACvB,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AACnE,IAAA,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,IAAkB,KAAK,IAAI,KAAK,MAAM,CAAC,QAAQ,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;MAEjH,eAAe,GAAG,CAAC,IAAkB,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAE/E,MAAA,aAAa,GAAG,CAAC,UAA6B,KAAI;AAC3D,IAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACjC,EAAE;AACW,MAAA,gBAAgB,GAAG,CAAC,UAA6B,KAAI;IAC9D,IAAI,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAC5C,IAAA,KAAK,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACjD,EAAE;AAEF,IAAI,MAAM,CAAC,4BAA4B,CAAC,EAAE;;;IAGtC,MAAM,CAAC,eAAe,CAAC,GAAG;QACtB,eAAe;QACf,aAAa;QACb,gBAAgB;KACnB,CAAA;AACJ;;;;"}

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/MaterialIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {CSSProperties} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import {classNames} from "./Tools";
 
@@ -13,6 +13,7 @@ export interface MaterialIconProps {
     icon: MaterialIconType
     className?: string
     type?: 'Outlined' | 'Filled' | 'Rounded' | 'Sharp' | 'TwoTone'
+    style?: CSSProperties
 }
 
 let DEFAULT_CLASS_NAME = 'material-icons';
@@ -24,7 +25,7 @@ const typeToClass = {
     'TwoTone': DEFAULT_CLASS_NAME + '-two-tone',
 }
 
-const MaterialIcon = ({icon, className, type = 'Filled'}: MaterialIconProps) => (
-    <i className={classNames('MaterialIcon', typeToClass[type] || DEFAULT_CLASS_NAME, className)} translate="no">{icon}</i>
+const MaterialIcon = ({icon, className, type = 'Filled', style}: MaterialIconProps) => (
+    <i className={classNames('MaterialIcon', typeToClass[type] || DEFAULT_CLASS_NAME, className)} style={style} translate="no">{icon}</i>
 );
 export default MaterialIcon;

package/src/ModalMenu.tsx

@@ -5,10 +5,9 @@ import {PureComponent, stateGS, render} from "./ReactConstants";
 import {classNames} from "./Tools";
 import Animated from "./Animated";
 import Button from "./Button";
-import MaterialIcon, {MaterialIconType} from "./MaterialIcon";
+import MaterialIcon, {MaterialIconProps} from "./MaterialIcon";
 
-export interface ModalMenuItem {
-    icon: MaterialIconType,
+export interface ModalMenuItem extends MaterialIconProps {
     action: MouseEventHandler
 }
 
@@ -45,7 +44,7 @@ class ModalMenu extends PureComponent<ModalMenuProps> {
                                                    }}
                 >
                     <Button flat={true} round={true} onClick={it.action}>
-                        <MaterialIcon icon={it.icon}/>
+                        <MaterialIcon {...it}/>
                     </Button>
                 </Animated>)}
 

package/src/ReactConstants.ts

@@ -13,21 +13,16 @@ export const stateFieldSetter = (that, key, cb?: () => void) => (value, cb2?) =>
 };
 
 export type Callback = () => void;
-export function createStateGetterSetter<C extends React.Component, K extends keyof C["state"]>(that: C, key: K, cb?: Callback): {
+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;
-} {
-    return ((value?: C["state"][K], cb2?: Callback): C["state"][K] => {
-        if (arguments.length === 0) {
-            // getter
-            // @ts-ignore
-            return that.state[key];
-        } else {
-            // setter
-            that.setState({[key]: value} as any, cb2 ?? cb);
-        }
-    }) as any;
-}
+} => (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) => {

package/src/router/HistoryTools.ts

@@ -27,9 +27,9 @@ const fireEvent = (name) => {
     WINDOW.dispatchEvent(event);
 };
 
-export const pushLocation = (path: string) => path !== WINDOW.location.pathname && history[events[0]](null, null, path);
+export const pushLocation = (path: string | URL) => path !== WINDOW.location.pathname && history[events[0]](null, null, path);
 
-export const replaceLocation = (path: string) => history[events[1]](null, null, path);
+export const replaceLocation = (path: string | URL) => history[events[1]](null, null, path);
 
 export const addMiddleware = (middleware: HistoryMiddleware) => {
     middlewares.push(middleware);