@dvrd/dvr-controls 0.0.29 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "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/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/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 => {