@dvrd/dvr-controls 0.0.29 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.29",
+  "version": "0.0.34",
   "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/button/dvrdButton.tsx

@@ -67,7 +67,7 @@ export default function DvrdButton(props: DvrdButtonProps) {
         else if (customBaseColor) color = customBaseColor;
         else if (red) {
             if (secondary) color = 'color-red-secondary';
-            else color = 'red';
+            else color = 'rgb(255,0,0)';
         } else if (secondary) color = context.contrastColor;
         else color = context.baseColor;
         color = convertColor(color);

package/src/js/select/dvrdSelect.tsx

@@ -3,7 +3,7 @@
  */
 import './style/dvrdSelect.scss';
 
-import React, {MouseEventHandler, PureComponent} from 'react';
+import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
 import classNames from 'classnames';
 import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
 import {hasHover, stopPropagation } from '../util/controlUtil';
@@ -27,6 +27,7 @@ interface Props {
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
     searchValue: string;
+    optionsContainerHeight: number | string;
 }
 
 interface State {
@@ -84,6 +85,12 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         return '';
     }
 
+    getItemsContainerStyle = (): CSSProperties => {
+        let {optionsContainerHeight} = this.props;
+        if(typeof optionsContainerHeight === 'number') optionsContainerHeight = `${optionsContainerHeight}px`;
+        return {maxHeight: optionsContainerHeight};
+    }
+
     renderLabel = () => {
         const {labelClassName, label} = this.props;
         if (!label) return null;
@@ -118,7 +125,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         return (
             <div
                 className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
-                    itemContainerClassName)}>
+                    itemContainerClassName)} style={this.getItemsContainerStyle()}>
                 {items.filter((item) => item.label.toString().length > 0 && item.selectable !== false)
                     .map((item: SelectItemShape, index: number) => (
                         <label key={index} className={classNames('dvrd-select-item', itemClassName)}

package/src/js/select/dvrdSelectController.tsx

@@ -23,6 +23,7 @@ interface Props {
     itemClassName?: string;
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
+    optionsContainerHeight: number | string;
 }
 
 interface State {
@@ -35,6 +36,7 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
     static defaultProps = {
         itemsPosition: 'bottom',
         selectOnly: true,
+        optionsContainerHeight: '15rem',
     };
 
     state: State = {
@@ -63,7 +65,7 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
     render = () => {
         const {
             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly
+            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly, optionsContainerHeight
         } = this.props, {searchValue} = this.state;
         return (
             <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
@@ -72,7 +74,8 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
                         labelClassName={labelClassName} className={className} error={error} label={label}
                         arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
                 this.select = ref
-            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}/>
+            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
+                        optionsContainerHeight={optionsContainerHeight}/>
         );
     }
 };

package/src/js/select/style/dvrdSelect.scss

@@ -65,6 +65,7 @@
     flex-direction: column;
     min-width: 100%;
     border-radius: .5rem;
+    overflow-y: auto;
 
     .dvrd-select-item {
       padding: .75rem;

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 => {