@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/image/imageUpload.tsx

@@ -1,69 +0,0 @@
-/*
- * 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

@@ -1,11 +0,0 @@
-/*!
- * 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

@@ -1,136 +0,0 @@
-/*
- * 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

@@ -1,39 +0,0 @@
-/*!
- * 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

@@ -1,159 +0,0 @@
-/*
- * 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}}/>;
-    };
-}