@dvrd/dvr-controls 0.0.27 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.27",
+  "version": "0.0.31",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},
@@ -10,98 +10,33 @@
   },
   "author": "Dave van Rijn",
   "license": "ISC",
-  "dependencies": {
-    "@sentry/browser": "^6.2.1",
-    "@types/js-cookie": "^2.2.6",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "14.14.32",
-    "@types/react": "~17.0.2",
-    "@types/react-dom": "17.0.1",
-    "@types/react-router-dom": "~5.1.6",
-    "@types/uuid": "^8.3.0",
-    "@types/react-color": "^3.0.4",
-    "@types/dompurify": "2.2.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "classnames": "^2.2.6",
-    "compression-webpack-plugin": "^7.1.2",
-    "cross-env": "^7.0.3",
-    "css-loader": "^5.1.1",
-    "cssnano": "^4.1.10",
-    "cssnano-preset-advanced": "^4.0.7",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.0",
-    "js-cookie": "^2.2.1",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.3.9",
-    "moment": "^2.29.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "prerender-spa-plugin": "^3.4.0",
-    "query-string": "^6.14.1",
-    "react": "^17.0.1",
-    "react-color": "^2.19.3",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "sass-loader": "^11.0.1",
-    "seamless-scroll-polyfill": "^1.2.3",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.2.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "uuid": "^8.3.2",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0",
-    "source-map-loader": "^2.0.1",
-    "@types/react-helmet": "^6.1.0",
-    "react-helmet": "^6.1.0",
-    "@sentry/react": "^6.2.1",
-    "dompurify": "^2.2.6",
-    "react-rnd": "^10.2.4"
-  },
   "browserslist": {
     "0": ">0.2%",
     "1": "not dead",
     "2": "ie >= 11"
   },
   "devDependencies": {
-    "@sentry/react": "^6.2.2",
     "@types/js-cookie": "^2.2.6",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/uuid": "^8.3.0",
-    "awesome-typescript-loader": "^5.2.1",
+    "@types/react-color": "^3.0.6",
+    "@types/dompurify": "^2.2.3",
     "classnames": "^2.2.6",
-    "compression-webpack-plugin": "^7.1.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.1.2",
-    "cssnano": "^4.1.10",
-    "cssnano-preset-advanced": "^4.0.7",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.3.9",
     "moment": "^2.29.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "prerender-spa-plugin-next": "^4.1.5",
-    "query-string": "^6.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-helmet": "^6.1.0",
+    "react-color": "^2.19.3",
     "react-router-dom": "^5.2.0",
-    "sass-loader": "^11.1.0",
-    "seamless-scroll-polyfill": "^1.2.3",
-    "source-map-loader": "^2.0.1",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
+    "react-rnd": "^10.3.5",
     "typescript": "^4.2.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
     "uuid": "^8.3.2",
-    "webpack": "^5.25.1",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.3.1"
+    "dompurify": "^2.3.3"
   }
 }

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -31,6 +31,30 @@ function getBottomItems(items: SidebarItem[]): SidebarItem[] {
     return items.filter((item: SidebarItem) => item.onBottom)
 }
 
+function getActiveItem(items: SidebarItem[], pathname: string): SidebarItem | null {
+    for (const item of items) {
+        if (itemIsActive(item, pathname)) return item;
+        if (Array.isArray(item.children)) {
+            const activeItem = getActiveItem(item.children, pathname);
+            if (activeItem) return activeItem;
+        }
+    }
+    return null;
+}
+
+function itemIsActive(item: SidebarItem, pathname: string): boolean {
+    if (Array.isArray(item.route) && item.route.includes(pathname)) return true;
+    else if (item.route === pathname) return true;
+    else if (typeof item.route === 'string' && item.exactRoute === false && pathname.includes(item.route)) return true;
+    return false;
+}
+
+function itemHasActiveId(item: SidebarItem, activeId: string): boolean {
+    if (item.id === activeId) return true;
+    else if (Array.isArray(item.children) && item.children.find((child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
+    return false;
+}
+
 export default function SidebarMenu(props: Props) {
     const context = useContext(ControlContext),
         location = useLocation(),
@@ -42,27 +66,56 @@ export default function SidebarMenu(props: Props) {
 
     function _onClickItem(item: SidebarItem) {
         return function (evt: React.MouseEvent) {
+            evt.stopPropagation();
             setActiveItem(item.id);
             onClickItem(item)(evt);
         }
     }
 
-    function renderItem(item: SidebarItem) {
-        const {className, icon, id, label} = item,
-            cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
-                activeItem === id && 'active');
-        return (
-            <div key={id} className={cls} onClick={_onClickItem(item)}>
-                {renderIcon(label, icon)}
-                {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                <span className='item-label'>{label}</span>
-            </div>
-        )
+    function renderItem(isChild: boolean = false) {
+        return function (item: SidebarItem) {
+            const {className, icon, id, label, children} = item,
+                isActive = itemHasActiveId(item, activeItem),
+                cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
+                    isChild && 'child', children !== undefined && 'with-children');
+            return (
+                <div key={id} className={cls} onClick={_onClickItem(item)}>
+                    {renderIcon(isActive, isChild, label, icon)}
+                    {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
+                    <span className={classNames('item-label', isActive && 'active')}>{label}</span>
+                    {children !== undefined && (
+                        <>
+                            {isActive && <div className='line'/>}
+                            {renderChildren(isActive)(children)}
+                        </>
+                    )}
+                </div>
+            )
+        }
     }
 
-    function renderIcon(label: string, icon?: string | ReactNode): ReactNode {
-        if (icon) return typeof icon === 'string' ? <AwesomeIcon name={icon} className='item-icon'/> : icon;
-        if (label.length) return <span className='item-icon letter'>{label[0]}</span>
+    function renderChildren(isActive: boolean) {
+        return function (children: SidebarItem[]) {
+            const display = isActive ? 'block' : 'none';
+            return (
+                <div className='children-container' style={{display}}>
+                    {children.map(renderItem(true))}
+                </div>
+            )
+        }
+    }
+
+    function renderIcon(isActive: boolean, isChild: boolean, label: string, icon?: string | ReactNode): ReactNode {
+        const className = classNames('item-icon', isActive && 'active');
+        if (icon) {
+            if (typeof icon === 'string') return <AwesomeIcon name={icon} className={className}/>;
+            else if (React.isValidElement(icon))
+                return React.cloneElement(icon, {className: classNames(className, icon.props.className)});
+        }
+        if (label.length) {
+            if (isChild) return <span/>;
+            return <span className={classNames(className, 'letter')}>{label[0]}</span>
+        }
         return null;
     }
 
@@ -78,26 +131,10 @@ export default function SidebarMenu(props: Props) {
 
     function _setActiveItem() {
         const {pathname} = location;
-        console.log(pathname);
-        for (const item of items) {
-            let found: boolean = false;
-            if (item.route) {
-                if (Array.isArray(item.route) && item.route.includes(pathname)) found = true;
-                else if (item.route === pathname) found = true;
-                else if (typeof item.route === 'string' && item.exactRoute === false && pathname.includes(item.route)) found = true;
-                if (found) {
-                    setActiveItem(item.id);
-                    return;
-                }
-            }
-        }
+        const activeItem = getActiveItem(items, pathname);
+        if (activeItem) setActiveItem(activeItem.id);
     }
 
-    // function getBarWidth(): number {
-    //     if (sideBar.current) return sideBar.current.getBoundingClientRect().width;
-    //     return 0;
-    // }
-
     useEffect(() => {
         setColors();
         defer(_setActiveItem);
@@ -111,112 +148,11 @@ export default function SidebarMenu(props: Props) {
         <div className={classNames(className, 'dvr-side-bar-menu', mode === SideMenuMode.FULL && 'full')}
              ref={sideBar} id={componentId.current}>
             <div>
-                {getTopItems(items).map(renderItem)}
+                {getTopItems(items).map(renderItem())}
             </div>
             <div>
-                {getBottomItems(items).map(renderItem)}
+                {getBottomItems(items).map(renderItem())}
             </div>
         </div>
     )
-}
-
-// class SidebarMenu extends PureComponent<Props, State> {
-//     static contextType = ControlContext;
-//     static defaultProps = {
-//         controlled: false,
-//         mode: SideMenuMode.COMPACT,
-//     }
-//
-//     private bar: HTMLDivElement;
-//     private readonly id = generateComponentId(this.props.id);
-//     state: State = {
-//         activeItem: this.props.activeItem || '',
-//     };
-//
-//     getTopItems = (): SidebarItem[] => this.props.items.filter((item: SidebarItem) => !item.onBottom)
-//     getBottomItems = (): SidebarItem[] => this.props.items.filter((item: SidebarItem) => item.onBottom)
-//
-//     renderItem = (item: SidebarItem) => {
-//         const {className, icon, id, label} = item, {onClickItem, mode} = this.props, {activeItem} = this.state;
-//         return (
-//             <div key={id}
-//                  className={classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full', activeItem === id && 'active')}
-//                  onClick={onClickItem(item)}>
-//                 {this.renderIcon(label, icon)}
-//                 {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-//                 <span className='item-label'>{label}</span>
-//             </div>
-//         )
-//     };
-//
-//     renderIcon = (label: string, icon?: string | React.ReactNode): React.ReactNode => {
-//         if (icon) return typeof icon === 'string' ? <AwesomeIcon name={icon} className='item-icon'/> : icon;
-//         if (label.length) return <span className='item-icon letter'>{label[0]}</span>
-//         return null;
-//     };
-//
-//     setColorVars = () => {
-//         const {baseColor, contrastColor} = this.props;
-//         if (this.bar) {
-//             const base: string = baseColor || this.context.baseColor,
-//                 contrast: string = contrastColor || this.context.contrastColor;
-//             this.bar.style.setProperty('--base-color', base);
-//             this.bar.style.setProperty('--contrast-color', contrast);
-//         }
-//     };
-//
-//     setActiveItem = () => {
-//         const route = this.props.location.pathname, {items} = this.props;
-//         for (const item of items) {
-//             let found: boolean = false;
-//             if (item.route) {
-//                 if (Array.isArray(item.route) && item.route.includes(route)) found = true;
-//                 else if (item.route === route) found = true;
-//                 else if (typeof item.route === 'string' && item.exactRoute === false && route.includes(item.route)) found = true;
-//                 if (found) {
-//                     this.setState({activeItem: item.id});
-//                     return;
-//                 }
-//             }
-//         }
-//     }
-//
-//     getWidth = (): number => {
-//         if (this.bar) return this.bar.getBoundingClientRect().width;
-//         return 0;
-//     };
-//
-//     componentDidMount = () => {
-//         this.setColorVars();
-//         directTimeout(this.setActiveItem);
-//     };
-//
-//     componentDidUpdate = (prevProps: Props) => {
-//         const {activeItem, controlled, location} = this.props, prevItem = prevProps.activeItem,
-//             prevLocation = prevProps.location;
-//         if (controlled) {
-//             if (activeItem !== prevItem) this.setState({activeItem: activeItem || ''});
-//         } else {
-//             if (location.pathname !== prevLocation.pathname) this.setActiveItem();
-//         }
-//     }
-//
-//     render = () => {
-//         const {className, mode} = this.props;
-//         return (
-//             <div className={classNames(className, 'dvr-side-bar-menu', mode === SideMenuMode.FULL && 'full')}
-//                  ref={(ref: HTMLDivElement) => {
-//                      this.bar = ref
-//                  }} id={this.id}>
-//                 <div>
-//                     {this.getTopItems().map(this.renderItem)}
-//                 </div>
-//                 <div>
-//                     {this.getBottomItems().map(this.renderItem)}
-//                 </div>
-//             </div>
-//         )
-//     };
-// }
-//
-// export default withRouter(SidebarMenu);
+}

package/src/js/sidebarMenu/style/sidebarMenu.scss

@@ -98,6 +98,7 @@
       margin: 2rem 1rem;
       align-items: center;
       cursor: pointer;
+      position: relative;
 
       .item-icon {
         color: #686869;
@@ -105,23 +106,44 @@
         transition: color .2s ease-in-out;
         justify-self: center;
         opacity: .5;
+
+        &.active {
+          color: var(--contrast-color);
+          opacity: 1;
+        }
       }
 
       .item-label {
         color: #686869;
         transition: color .2s ease-in-out;
         white-space: nowrap;
-      }
 
-      &.active {
-        .item-icon {
-          color: var(--contrast-color);
-          opacity: 1;
+        &.active {
+          font-weight: 600;
+          color: black;
         }
+      }
 
+      .line {
+        width: 2px;
+        position: absolute;
+        height: calc(100% - 1.5rem);
+        top: 2rem;
+        left: 1rem;
+        background-color: var(--contrast-color);
+      }
+
+      &.child {
         .item-label {
-          font-weight: 600;
-          color: black;
+          padding-left: 1rem;
+        }
+      }
+
+      .children-container {
+        padding-top: 1rem;
+
+        .side-bar-item-full {
+          margin: 0;
         }
       }
 
@@ -130,6 +152,10 @@
           color: black;
         }
       }
+
+      &.with-children {
+        margin-bottom: -.5rem;
+      }
     }
   }
 }

package/src/js/snackbar/snackbarController.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import {Snackbar} from "./snackbar";
 import {CustomAppEvent, DialogConfig, Snack} from "../util/interfaces";
 import WithEvents from '../events/withEvents';
+import { delay } from 'lodash';
 
 interface Props {
     containerClass: string;
@@ -13,6 +14,8 @@ interface Props {
     activeTime: number;
     backgroundColor?: string;
     textColor?: string;
+    maxSnacks?: number;
+    noDuplicates?: boolean;
 }
 
 interface State {
@@ -28,7 +31,7 @@ export default class SnackbarController extends React.Component<Props, State> {
         textClass: '',
     };
 
-    state = {
+    state: State = {
         active: false,
         snack: null,
         config: {}
@@ -38,7 +41,12 @@ export default class SnackbarController extends React.Component<Props, State> {
     timeout: number | null = null;
 
     onAddSnack = (snack: Snack) => {
+        const {maxSnacks, noDuplicates} = this.props;
+        if (noDuplicates && this.isDuplicate(snack)) return;
         this.snackQueue.push(snack);
+        if (maxSnacks !== undefined)
+            while (this.snackQueue.length > maxSnacks - 1)
+                this.snackQueue.shift();
         if (!this.state.active)
             this.activate();
     };
@@ -49,10 +57,19 @@ export default class SnackbarController extends React.Component<Props, State> {
         this.deactivate();
     };
 
+    isDuplicate = (snack: Snack): boolean => {
+        return this.state.snack?.text === snack.text || this.snackQueue.pop()?.text === snack.text;
+    }
+
     deactivate = () => {
         this.setState({active: false}, () => {
-            if (this.snackQueue.length > 0)
-                this.timeout = window.setTimeout(this.activate, 500);
+            delay(() => {
+                // Clear snack after 200ms (css transition)
+                this.setState({snack: null}, () => {
+                    if (this.snackQueue.length > 0)
+                        this.timeout = window.setTimeout(this.activate, 500);
+                })
+            }, 200);
         })
     };
 

package/src/js/textField/dvrdInput.tsx

@@ -8,14 +8,14 @@ import React, {
     PureComponent
 } from 'react';
 import classNames from "classnames";
-import {ElementPosition, ErrorType, OrnamentShape } from '../util/interfaces';
+import {ElementPosition, ErrorType, OrnamentShape} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
-import { directTimeout } from '../util/componentUtil';
+import {directTimeout} from '../util/componentUtil';
 
 interface Props {
     onChange: ChangeEventHandler;
-    onFocus: FocusEventHandler;
-    onBlur: FocusEventHandler;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
     onKeyDown: KeyboardEventHandler;
     onClearInput?: MouseEventHandler;
     value: string | number;
@@ -62,13 +62,15 @@ export default class DvrdInput extends PureComponent<Props, State> {
                 this.input.selectionEnd = value.toString().length;
             }
         }
-        onFocus(evt);
+        if (onFocus)
+            onFocus(evt);
     };
 
     onBlurInput = (evt: React.FocusEvent) => {
         const {disabled, onBlur} = this.props;
         if (!disabled) this.setState({active: false});
-        onBlur(evt);
+        if (onBlur)
+            onBlur(evt);
     };
 
     hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;

package/src/js/textField/dvrdInputController.tsx

@@ -3,8 +3,14 @@
  */
 
 import React, {
-    FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, PureComponent,
-    TextareaHTMLAttributes
+    FocusEventHandler,
+    InputHTMLAttributes,
+    KeyboardEventHandler,
+    MouseEventHandler,
+    TextareaHTMLAttributes,
+    useEffect,
+    useRef,
+    useState
 } from 'react';
 import {generateComponentId} from '../util/componentUtil';
 import {enterPressed} from '../util/controlUtil';
@@ -40,62 +46,52 @@ export interface InputControllerProps {
     step?: number;
     area?: boolean;
     noResize?: boolean;
+    unControlled?: boolean;
 }
 
-export default class DvrdInputController extends PureComponent<InputControllerProps> {
-    private readonly id: string = generateComponentId(this.props.id);
+export default function DvrdInputController(props: InputControllerProps) {
+    const {
+            disabled, onChange, onEnter, onKeyDown, inputProps, placeholder, type, max, min, step, onFocus, onBlur,
+            autoFocus, error, label, ornaments, className, inputClassName, labelClassName, ornamentClassName, fullWidth,
+            errorClassName, autoSelect, area, noResize, onClearInput, unControlled
+        } = props,
+        componentId = useRef(generateComponentId(props.id)),
+        [value, setValue] = useState(props.value);
 
-    // noinspection JSUnusedGlobalSymbols
-    public getInput = (): HTMLInputElement | null =>
-        document.getElementById(`${this.id}-input`) as HTMLInputElement | null;
-
-    onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-        const {value} = evt.target, {disabled, onChange} = this.props;
-        if (!disabled) onChange(value, evt);
-    };
-
-    onKeyDown = (evt: React.KeyboardEvent) => {
-        const {onEnter, disabled, onKeyDown} = this.props;
-        if (!disabled) {
-            if (enterPressed(evt) && onEnter) onEnter(evt);
-            else if (onKeyDown) onKeyDown(evt);
-        }
-    };
-
-    onFocus = (evt: React.FocusEvent) => {
-        const {onFocus} = this.props;
-        if (onFocus) onFocus(evt);
-    };
+    function _onChange(evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+        if (disabled) return;
+        const {value} = evt.target;
+        setValue(value);
+        onChange(value, evt);
+    }
 
-    onBlur = (evt: React.FocusEvent) => {
-        const {onBlur} = this.props;
-        if (onBlur) onBlur(evt);
-    };
+    function _onKeyDown(evt: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
+        if (disabled) return;
+        if (onEnter && enterPressed(evt)) onEnter(evt);
+        else if (onKeyDown) onKeyDown(evt);
+    }
 
-    getInputProps = (): InputHTMLAttributes<any> | undefined => {
-        const {inputProps, placeholder, type, max, min, step} = this.props;
+    function getInputProps(): InputHTMLAttributes<any> | undefined {
         if (!inputProps && !placeholder && !type) return undefined;
         const props: InputHTMLAttributes<any> = inputProps ?? {};
-        props.placeholder = placeholder ?? props.placeholder;
-        props.type = type ?? props.type;
-        props.max = max ?? props.max;
-        props.min = min ?? props.min;
-        props.step = step ?? props.step;
+        if (placeholder !== undefined) props.placeholder = placeholder;
+        if (type !== undefined) props.type = type;
+        if (max !== undefined) props.max = max;
+        if (min !== undefined) props.min = min;
+        if (step !== undefined) props.step = step;
         return props;
-    };
-
-    render = () => {
-        const {
-            value, label, ornaments, disabled, autoFocus, className, inputClassName, labelClassName,
-            ornamentClassName, error, errorClassName, autoSelect, fullWidth, area, noResize, onClearInput
-        } = this.props;
-        return (
-            <DvrdInput onChange={this.onChange} onFocus={this.onFocus} onKeyDown={this.onKeyDown} value={value}
-                       disabled={disabled} autoFocus={autoFocus} error={error} label={label} ornaments={ornaments}
-                       inputProps={this.getInputProps()} className={className} inputClassName={inputClassName}
-                       labelClassName={labelClassName} ornamentClassName={ornamentClassName} fullWidth={fullWidth}
-                       errorClassName={errorClassName} id={this.id} onBlur={this.onBlur} autoSelect={autoSelect}
-                       area={area} noResize={noResize} onClearInput={onClearInput}/>
-        )
     }
+
+    useEffect(() => {
+        if(!unControlled) setValue(props.value);
+    }, [props.value])
+
+    return (
+        <DvrdInput onChange={_onChange} onFocus={onFocus} onKeyDown={_onKeyDown} value={value}
+                   disabled={disabled} autoFocus={autoFocus} error={error} label={label} ornaments={ornaments}
+                   inputProps={getInputProps()} className={className} inputClassName={inputClassName}
+                   labelClassName={labelClassName} ornamentClassName={ornamentClassName} fullWidth={fullWidth}
+                   errorClassName={errorClassName} id={componentId.current} onBlur={onBlur} autoSelect={autoSelect}
+                   area={area} noResize={noResize} onClearInput={onClearInput}/>
+    );
 }

package/src/js/textField/dvrdNumberInput.tsx

@@ -31,6 +31,7 @@ interface Props {
     wholeNumbers: boolean;
     asNumber?: boolean;
     asCurrency: boolean;
+    autoSelect?: boolean;
 }
 
 export default class DvrdNumberInput extends PureComponent<Props> {

package/src/js/util/miscUtil.ts

@@ -156,14 +156,11 @@ export const copyClipboard = (text: string): Promise<void> => {
     return window.navigator.clipboard.writeText(text);
 }
 
-export const getImg = (imgName: string, fallbackExtension: string = 'png'): string => {
-    const webpSupported = webpIsSupported(), extension = webpSupported ? 'webp' : fallbackExtension;
+export function webpSupported(): boolean {
     try {
-        return require(`../../res/img/${imgName}.${extension}`).default;
+        return document.createElement('canvas').toDataURL('image/webp')
+            .indexOf('data:image/webp') === 0;
     } catch {
-        return require(`../../res/img/${imgName}.${fallbackExtension}`).default;
+        return false;
     }
-};
-
-const webpIsSupported = (): boolean => document.createElement('canvas').toDataURL('image/webp')
-    .indexOf('data:image/webp') === 0;
+}

package/src/js/util/requestUtil.ts

@@ -26,16 +26,21 @@ let abortController: AbortController;
 let signal: AbortSignal;
 let defaultHeaders: OutgoingHttpHeaders = {};
 
-const getSignal = (): AbortSignal | null => {
-    if ("AbortController" in window) {
-        if (!abortController)
-            abortController = new AbortController;
-        if (!signal)
-            signal = abortController.signal;
-        return signal;
-    }
-    return null;
-};
+// const getSignal = (): AbortSignal | null => {
+//     if ("AbortController" in window) {
+//         if (!abortController)
+//             abortController = new AbortController;
+//         if (!signal)
+//             signal = abortController.signal;
+//         return signal;
+//     }
+//     return null;
+// };
+
+function getAbortController(): AbortController | null {
+    if (!('AbortController' in window)) return null;
+    return new AbortController();
+}
 
 const responseDataIsSuccess = (data: ResponseData): boolean => data.status === 'success';
 
@@ -54,7 +59,7 @@ export const cancelAllFetch = () => {
     }
 };
 
-export const sendFetch = (config: FetchOptions, legacySupport: boolean = false) => {
+export const sendFetch = (config: FetchOptions, legacySupport: boolean = false): AbortController | null => {
     config = createFetchConfig(config, legacySupport);
     const {url, method, headers, data} = config, options: { [index: string]: any } = {
         headers,
@@ -63,7 +68,9 @@ export const sendFetch = (config: FetchOptions, legacySupport: boolean = false)
         cache: 'no-store',
     }, baseUrl = config.baseUrl || window.settings.platformUrl;
     if (!baseUrl) throw new Error('Base url is not set!');
-    if (getSignal()) options['signal'] = getSignal();
+    const abortController = getAbortController();
+    if(abortController) options.signal = abortController.signal;
+    // if (getSignal()) options['signal'] = getSignal();
     options['mode'] = 'cors';
     fetch(baseUrl + url, options).then((response: Response) => {
         const {status} = response;
@@ -101,10 +108,12 @@ export const sendFetch = (config: FetchOptions, legacySupport: boolean = false)
             }
         }
     }).catch((reason: any) => {
-        if (reason.code === DOMException.ABORT_ERR) {/*Request aborted*/} else if (config.errorCallback) {
+        if (reason.code === DOMException.ABORT_ERR) {/*Request aborted*/
+        } else if (config.errorCallback) {
             config.errorCallback(reason);
         }
     });
+    return abortController;
 };
 
 const createFetchConfig = (options: FetchOptions, legacySupport: boolean = true): FetchOptions => {