@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/image/imageUpload.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/imageUpload.scss';
+
+import React, {PureComponent} from "react";
+import classNames from "classnames";
+import {voidFunction} from "../util/controlUtil";
+
+interface Props {
+    className?: string;
+    onChange: (files: FileList | null) => void;
+    files: string[] | string;
+    disabled: boolean;
+    multiple?: boolean;
+    accept?: string;
+}
+
+export default class ImageUpload extends PureComponent<Props> {
+    private input: HTMLInputElement;
+
+    static defaultProps = {
+        multiple: false,
+        accept: 'image/*',
+    };
+
+    onClickUpload = () => {
+        if (this.input) this.input.click();
+    }
+
+    onDrag = (evt: React.DragEvent) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+
+    onDrop = (evt: React.DragEvent) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        const {onChange} = this.props, files = evt.dataTransfer.files;
+        if (files?.length) {
+            onChange(files);
+        }
+    };
+
+    renderFile = () => {
+        const {files} = this.props;
+        if (typeof files === 'string') return <img src={files} alt='' className='upload-img'/>;
+        else if (files.length) return (
+            <div className='files-list'>
+                {files.map((file: string, index: number) => <label className='file' key={index}>{file}</label>)}
+            </div>
+        );
+    }
+
+    render = () => {
+        const {disabled, className, multiple, accept} = this.props;
+        return (
+            <div
+                className={classNames('dvr-upload-container', disabled && 'disabled', className)}
+                onClick={disabled ? voidFunction : this.onClickUpload} onDrop={this.onDrop} onDragOver={this.onDrag}
+                onDrag={this.onDrag}>
+                <input alt='' ref={(ref: HTMLInputElement) => {
+                    this.input = ref
+                }} style={{display: 'none'}} type='image' accept={accept} multiple={multiple}/>
+                {this.renderFile()}
+            </div>
+        )
+    }
+};

package/src/js/image/style/imageUpload.scss

@@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvr-upload-container {
+  border: 1px dashed #2A435F;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 2rem;
+}

package/src/js/info/info.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/info.scss';
+
+import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
+import {ControlContext} from "../util/controlContext";
+import {colorIsWhite, convertColor, editColor} from "../util/colorUtil";
+import classNames from 'classnames';
+import {getScreenHeight, getScreenWidth} from '../util/responsiveUtil';
+import { directTimeout } from '../util/componentUtil';
+import AwesomeIcon from '../icon/awesomeIcon';
+
+type LimitBox = Partial<{ top: number, bottom: number, left: number, right: number }>;
+
+interface Props {
+    onClick?: MouseEventHandler;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+    message: React.ReactNode;
+    title?: string;
+    className?: string;
+    messageClassName?: string;
+    iconClassName?: string;
+    disabled?: boolean;
+    limitBox?: LimitBox;
+}
+
+interface State {
+    hovered: boolean;
+}
+
+export default class Info extends PureComponent<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    private messageContainer: HTMLDivElement;
+
+    state: State = {
+        hovered: false,
+    };
+
+    getColor = (): string => {
+        const {baseColor, contrastColor} = this.context, {hovered} = this.state, {disabled} = this.props;
+        let color = convertColor(baseColor);
+        if (colorIsWhite(color)) color = convertColor(contrastColor);
+        if (hovered) color = editColor(-.2, color);
+        if (disabled) color = '#ccc';
+        return color;
+    };
+
+    onMouseEnter = (evt: React.MouseEvent) => {
+        const {onMouseEnter} = this.props;
+        this.setState({hovered: true});
+        if (onMouseEnter) onMouseEnter(evt);
+    };
+
+    onMouseLeave = (evt: React.MouseEvent) => {
+        const {onMouseLeave} = this.props;
+        this.setState({hovered: false});
+        if (onMouseLeave) onMouseLeave(evt);
+    };
+
+    getIconStyle = (): CSSProperties => {
+        return {color: this.getColor()};
+    };
+
+    setMessagePosition = () => {
+        if (this.messageContainer) {
+            let {width, height, bottom, left, right, top} = this.messageContainer.getBoundingClientRect(),
+                screenWidth = getScreenWidth(), screenHeight = getScreenHeight(), {limitBox} = this.props;
+            top = top - (limitBox?.top || 0);
+            left = left - (limitBox?.left || 0);
+            bottom = bottom + (limitBox?.bottom || 0);
+            right = right + (limitBox?.right || 0);
+            let translateX: number = 0, translateY: number = 0;
+            if (top < 0) translateY = top;
+            else if (bottom > screenHeight) translateY = screenHeight - bottom;
+            if (left < 0) translateX = left;
+            else if (right > screenWidth) translateX = screenWidth - right;
+
+            let transform: string = this.messageContainer.style.transform;
+            const {x, y} = this.getCurrentTranslates(transform);
+            if (translateX) {
+                translateX = this.getCalculatedTranslate(x, translateX, width);
+                transform = transform.replace(/translateX\(-?\d*(%|px|rem)?\)/, `translateX(${translateX}%)`);
+            }
+            if (translateY) {
+                translateY = this.getCalculatedTranslate(y, translateY, height);
+                transform = transform.replace(/translateY\(-?\d*(%|px|rem)?\)/, `translateY(${translateY}%)`);
+            }
+            this.messageContainer.style.transform = transform;
+        }
+    };
+
+    getCalculatedTranslate = (initial: number, value: number, dimension: number) => {
+        return initial - Math.round((value / dimension) * 100);
+    };
+
+    getCurrentTranslates = (transform: string): { x: number, y: number } => {
+        let x = 100, y = -100;
+        const translateX = transform.match(/translateX\(-?\d*(%|px|rem)?\)/),
+            translateY = transform.match(/translateY\(-?\d*(%|px|rem)?\)/);
+        if (translateX) x = Number(translateX[0].match(/\(-?\d*(%|px|rem)?\)/)![0].replace(/[()%]|rem|px/g, ''));
+        if (translateY) y = Number(translateY[0].match(/\(-?\d*(%|px|rem)?\)/)![0].replace(/[()%]|rem|px/g, ''));
+        return {x, y};
+    };
+
+    renderMessage = (): React.ReactNode => {
+        const {message} = this.props;
+        if (typeof message === 'string') return <p className='dvr-info-message'>{message}</p>;
+        return message;
+    };
+
+    componentDidUpdate = (prevProps: Props, prevState: State) => {
+        const {hovered} = this.state, prevHovered = prevState.hovered;
+        if (hovered && hovered !== prevHovered)
+            directTimeout(this.setMessagePosition);
+    };
+
+    render = () => {
+        const {className, messageClassName, iconClassName} = this.props;
+        return (
+            <div className={classNames('dvr-info-container', className)} onMouseEnter={this.onMouseEnter}
+                 onMouseLeave={this.onMouseLeave}>
+                <AwesomeIcon name='info-circle' style={this.getIconStyle()}
+                             className={classNames('dvr-info-icon', iconClassName)}/>
+                <div className={classNames('dvr-message-container', messageClassName)}
+                     ref={(ref: HTMLDivElement) => {this.messageContainer = ref}}
+                     style={{transform: 'translateX(100%) translateY(-100%)'}}>
+                    {this.renderMessage()}
+                </div>
+            </div>
+        )
+    };
+};

package/src/js/info/style/info.scss

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvr-info-container {
+  position: relative;
+  display: inline-block;
+  justify-self: start;
+
+  .dvr-info-icon {
+    cursor: help;
+    transition: color .2s ease-in-out;
+    font-size: 1.1rem;
+  }
+
+  .dvr-message-container {
+    @include backgroundShadow;
+    padding: .2rem;
+    border-radius: .2rem;
+    background-color: white;
+    position: absolute;
+    z-index: $z-index-high;
+    top: 0;
+    right: 0;
+    width: 15rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+  }
+
+  &:hover {
+    .dvr-message-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/src/js/input/animated/animatedTextField.tsx

@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {CSSProperties, PureComponent, ReactElement} from 'react';
+import {DefaultInputProps} from "../v2/inputController_v2";
+import {TextField} from "../../../../index";
+import {DVRInputControllerProps} from "../v2/inputController_v2";
+
+interface Props extends DVRInputControllerProps {
+    animatedTexts: string[];
+    typingTime: number;
+    randomise: boolean;
+    doBackspace: boolean;
+    Input?: ReactElement;
+    className?: string;
+}
+
+interface State {
+    value: string;
+}
+
+export default class AnimatedTextField extends PureComponent<Props, State> {
+    static defaultProps = {
+        ...DefaultInputProps,
+        typingTime: 150,
+        randomise: true,
+        doBackspace: true,
+    };
+
+    state: State = {
+        value: '',
+    };
+
+    private timer: null | number = null;
+    private currentWord: string = '';
+    private words: string[] = [];
+    private isFocused: boolean = false;
+
+    onFocus = (evt: React.FocusEvent) => {
+        const {onFocus} = this.props;
+        this.isFocused = true;
+        this.stopAnimate();
+        if (onFocus) onFocus(evt);
+    };
+
+    onBlur = (evt: React.FocusEvent) => {
+        const {onBlur, value} = this.props;
+        this.isFocused = false;
+        if(!value?.toString().length) {
+            this.animate();
+        }
+        if (onBlur) onBlur(evt);
+    };
+
+    onChangeNative = (evt: React.ChangeEvent<HTMLInputElement>) => {
+        const target = evt.target, value = target.value;
+        this.onChange(value, evt);
+    };
+
+    onChange = (value: string, evt: React.ChangeEvent) => {
+        if (value.length) this.stopAnimate();
+        else if (!this.isFocused) this.animate();
+        this.props.onChange(value, evt);
+    };
+
+    getRandomTexts = (): string[] => {
+        const texts = this.props.animatedTexts.slice(), randomised: string[] = [];
+        while (texts.length > 0)
+            randomised.push(texts.splice(Math.round(Math.random() * (texts.length - 1)), 1)[0]);
+        return randomised;
+    };
+
+    private animate = () => {
+        const {randomise, animatedTexts} = this.props;
+        if (randomise) this.words = this.getRandomTexts();
+        else this.words = animatedTexts.slice();
+        this.currentWord = this.words.pop() || '';
+        this.doType();
+    };
+
+    private stopAnimate = () => {
+        this.setState({value: ''});
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.words = [];
+        this.currentWord = '';
+    };
+
+    private randomiseTimeout = () => {
+        const {typingTime} = this.props, variations: number[] = [1, .8, .4];
+        return typingTime * variations[Math.round(Math.random() * 2)];
+    };
+
+    private doType = () => {
+        const {value} = this.state, {doBackspace, randomise, animatedTexts} = this.props;
+        let newValue: string, timeout: number = this.randomiseTimeout();
+        if (this.currentWord.length === 0) {
+            if (value.length > 0) {
+                if (doBackspace) {
+                    newValue = value.substr(0, value.length - 1);
+                    timeout = Math.round(timeout / 2);
+                    if (!newValue.length) timeout = 300;
+                } else newValue = '';
+            } else {
+                if (!this.words.length) {
+                    if (randomise) this.words = this.getRandomTexts();
+                    else this.words = animatedTexts.slice();
+                }
+                this.currentWord = this.words.pop() as string;
+                newValue = value + this.getNextLetter();
+                if (!this.currentWord.length) timeout = 300;
+            }
+        } else {
+            newValue = value + this.getNextLetter();
+            if (!this.currentWord.length) timeout = 300;
+        }
+        this.setState({value: newValue});
+        this.timer = window.setTimeout(this.doType, timeout);
+    };
+
+    private getNextLetter = () => {
+        const letter = this.currentWord.substr(0, 1);
+        this.currentWord = this.currentWord.substr(1, this.currentWord.length);
+        return letter;
+    };
+
+    componentDidMount = () => {
+        if (!this.props.autoFocus)
+            this.animate();
+    };
+
+    componentWillUnmount = () => {
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
+
+    render = () => {
+        const value = this.props.value?.toString(), {Input} = this.props;
+        let textValue: string, style: CSSProperties;
+        if (value?.length) {
+            textValue = value;
+            style = {};
+        } else {
+            textValue = this.state.value + (this.state.value.length > 1 ? '|' : '');
+            style = {color: "gray"};
+        }
+        if (Input)
+            return React.cloneElement(Input,
+                {onChange: this.onChangeNative, value: textValue, onFocus: this.onFocus, onBlur: this.onBlur, style});
+        return <TextField {...this.props} onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur}
+                                value={textValue} inputProps={{style}}/>;
+    };
+}