@dvrd/dvr-controls 1.0.6 → 1.0.9

package/src/js/carousel/DVRCarouselController.tsx

@@ -1,95 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React, {PureComponent, ReactElement} from 'react';
-import DVRCarousel from "./DVRCarousel";
-import {debug} from "../../..";
-
-interface Props {
-    children: ReactElement[];
-    showControls: boolean;
-    infinite: boolean;
-    lazy: boolean;
-    autoPlay: boolean;
-    variableWidth: boolean;
-    visibleItems?: number;
-    slidePer: number;
-    autoPlayInterval: number;
-    className: string;
-}
-
-interface State {
-    currentIndex: number;
-}
-
-export default class DVRCarouselController extends PureComponent<Props, State> {
-    static defaultProps = {
-        showControls: true,
-        infinite: true,
-        lazy: true,
-        autoPlay: false,
-        variableWidth: true,
-        autoPlayInterval: 3000,
-        className: '',
-        slidePer: 1,
-    }
-
-    state: State = {
-        currentIndex: 0,
-    };
-
-    private playTimeout: number | null = null;
-
-    onClickNext = () => {
-        const {children, slidePer} = this.props, {currentIndex} = this.state;
-        let nextIndex = currentIndex + slidePer;
-        if (currentIndex + this.getActualVisibleItems() > children.length) nextIndex = 0;
-        this.setState({currentIndex: nextIndex});
-    };
-
-    onClickPrev = () => {
-        const {slidePer} = this.props, {currentIndex} = this.state;
-        this.setState({currentIndex: Math.max(0, currentIndex - slidePer)});
-    };
-
-    getActualVisibleItems = (): number => {
-        const {visibleItems, children} = this.props;
-        return visibleItems === undefined ? Math.min(children.length, 3) : visibleItems;
-    };
-
-    play = () => {
-        const {autoPlayInterval} = this.props;
-        this.playTimeout = window.setTimeout(this.slide, autoPlayInterval);
-    };
-
-    stop = () => {
-        if (this.playTimeout !== null) {
-            window.clearTimeout(this.playTimeout);
-            this.playTimeout = null;
-        }
-    };
-
-    slide = () => {
-        this.onClickNext();
-        if (this.props.autoPlay) this.play();
-    }
-
-    componentDidMount = () => {
-        if (this.props.autoPlay) this.play();
-    };
-
-    componentWillUnmount = () => {
-        this.stop();
-    }
-
-    render = () => {
-        const {currentIndex} = this.state, {variableWidth, lazy, className, showControls, infinite, children} = this.props;
-        return (
-            <DVRCarousel onClickNext={this.onClickNext} onClickPrev={this.onClickPrev} currentIndex={currentIndex}
-                         visibleItems={this.getActualVisibleItems()} lazy={lazy} className={className}
-                         showControls={showControls} variableWidth={variableWidth}
-                         infinite={infinite}>{children}</DVRCarousel>
-        )
-    };
-}

package/src/js/carousel/style/DVRCarousel.scss

@@ -1,38 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvr-carousel {
-  display: grid;
-  grid-template-columns: 2rem auto 2rem;
-  align-items: center;
-  justify-items: center;
-
-  .carousel-control {
-    color: $color-gray-5;
-    font-size: 1rem;
-  }
-
-  .carousel-items-container {
-    //transition: width .2s ease-in-out;
-    overflow: hidden;
-
-    .items-container {
-      display: flex;
-      align-items: center;
-      transition: transform .2s ease-in-out;
-
-      .carousel-item {
-        padding: .5rem;
-        transition: visibility;
-
-        &.hidden {
-          visibility: hidden;
-          transition-delay: .2s;
-        }
-      }
-    }
-  }
-}

package/src/js/checkbox/checkbox.tsx

@@ -1,147 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/checkbox.scss';
-
-import React from 'react';
-import {MouseEventHandler} from 'react';
-import classNames from 'classnames';
-import AwesomeIcon from '../icon/awesomeIcon';
-import {findDarkestColor, convertColor, editColor} from "../util/colorUtil";
-import {isNotNull, isNull} from "../util/controlUtil";
-import {ControlContext} from "../util/controlContext";
-
-interface CheckboxProps {
-    onCheck: MouseEventHandler;
-    onMouseEnter: any,
-    onMouseLeave: any,
-    checked: boolean,
-    disabled: boolean,
-    isHovered: boolean,
-    label: string,
-    labelPosition: 'left' | 'right',
-    containerClass: string,
-    labelClass: string,
-    checkboxClass: string,
-    checkClass: string,
-    errorClass: string,
-    id: string,
-    error: string | null,
-    checkIcon: React.ReactNode
-    baseColor?: string;
-    contrastColor?: string;
-    title?: string;
-    useDarkestColor: boolean;
-}
-
-export class Checkbox extends React.Component<CheckboxProps> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getContainerClass = (): string => {
-        const {disabled, containerClass, error, label} = this.props, classes = ['checkboxContainer'];
-
-        if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        if (!label.length) classes.push('no-label');
-
-        classes.push(containerClass);
-        return classNames(classes);
-    };
-
-    getLabelClass = (position: 'left' | 'right'): string => {
-        const {disabled, labelClass, error} = this.props, classes = ['checkboxLabel', position];
-        if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        classes.push(labelClass);
-        return classNames(classes);
-    };
-
-    getCheckboxClass = (): string => {
-        const {disabled, checkboxClass} = this.props, classes = ['checkbox'];
-        if (disabled) classes.push('disabled');
-        classes.push(checkboxClass);
-        return classNames(classes);
-    };
-
-    getCheckClass = (): string => {
-        const {disabled, checkClass, checked} = this.props, classes = ['checkbox-check'];
-        if (disabled) classes.push('disabled');
-        if (checked) classes.push('checked');
-        classes.push(checkClass);
-        return classNames(classes);
-    };
-
-    getCheckboxStyle = (): object => {
-        const {isHovered, error, disabled, useDarkestColor} = this.props;
-        let color: string;
-        if (isNotNull(error)) color = 'red';
-        else if (disabled) color = 'color-gray-4';
-        else {
-            if (useDarkestColor)
-                color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-            else color = this.getBaseColor();
-            if (isHovered) color = editColor(-.2, color);
-        }
-        return {borderColor: convertColor(color)};
-    };
-
-    getCheckStyle = (): object => {
-        const {error, disabled, useDarkestColor} = this.props;
-        let color: string;
-        if (isNotNull(error)) color = 'red';
-        else if (disabled) color = 'color-gray-4';
-        else if (useDarkestColor) color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-        else color = this.getBaseColor();
-        return {color: convertColor(color)};
-    };
-
-    getBaseColor = (): string => convertColor(this.props.baseColor || this.context.baseColor);
-    getContrastColor = (): string => convertColor(this.props.contrastColor || this.context.contrastColor);
-
-    getMainColor = () => this.props.useDarkestColor ? findDarkestColor(this.getBaseColor(), this.getContrastColor()) : this.getBaseColor();
-
-    renderLabel = (position: 'left' | 'right'): React.ReactNode => {
-        const {label, labelPosition} = this.props;
-        if (isNull(label) || labelPosition !== position) return null;
-        return <label className={this.getLabelClass(position)}>{label}</label>
-    };
-
-    renderCheckbox = (): React.ReactNode => {
-        return (
-            <div className={this.getCheckboxClass()} style={this.getCheckboxStyle()}>
-                <div className='ripple' style={{backgroundColor: this.getMainColor()}}/>
-                {this.renderCheck()}
-            </div>
-        )
-    };
-
-    renderCheck = () => {
-        const {checkIcon} = this.props;
-        if (React.isValidElement(checkIcon)) return React.cloneElement(checkIcon, {
-            className: classNames(checkIcon.props.className, this.getCheckClass()),
-            style: {...checkIcon.props.style, ...this.getCheckStyle()}
-        });
-        const checkName = typeof checkIcon === 'string' ? checkIcon : 'check';
-        return <AwesomeIcon name={checkName} className={this.getCheckClass()} style={this.getCheckStyle()}/>;
-    };
-
-    renderError = (): React.ReactNode => {
-        const {error, errorClass} = this.props;
-        return <label className={classNames('error', errorClass)}>{error}</label>;
-    };
-
-    render = () => {
-        const {id, onCheck, onMouseLeave, onMouseEnter, title} = this.props;
-        return (
-            <div className={this.getContainerClass()} id={id} onClick={onCheck} onMouseEnter={onMouseEnter}
-                 title={title} onMouseLeave={onMouseLeave}>
-                {this.renderLabel('left')}
-                {this.renderCheckbox()}
-                {this.renderLabel('right')}
-                {this.renderError()}
-            </div>
-        )
-    }
-}

package/src/js/checkbox/checkboxController.tsx

@@ -1,131 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React from 'react';
-import {Checkbox} from "./checkbox";
-import {ControlContext} from "../util/controlContext";
-import {generateComponentId} from '../../..';
-
-interface Props {
-    onCheck: Function;
-    onMouseEnter?: Function;
-    onMouseLeave?: Function;
-    checked: boolean;
-    disabled: boolean;
-    label: string;
-    labelPosition: 'left' | 'right';
-    containerClass: string;
-    labelClass: string;
-    checkboxClass: string;
-    checkClass: string;
-    errorClass: string;
-    baseColor?: string;
-    contrastColor?: string;
-    error: string | null;
-    id?: string;
-    checkIcon: React.ReactNode;
-    unControlled: boolean;
-    title?: string;
-    useDarkestColor: boolean;
-}
-
-interface CheckboxState {
-    isHovered: boolean;
-    internalValue: boolean;
-}
-
-export default class CheckboxController extends React.Component<Props, CheckboxState> {
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        disabled: false,
-        label: '',
-        labelPosition: 'right',
-        containerClass: '',
-        labelClass: '',
-        checkboxClass: '',
-        checkClass: '',
-        errorClass: '',
-        checkIcon: null,
-        error: null,
-        unControlled: false,
-        useDarkestColor: true,
-    };
-
-    private getContainer = (): HTMLElement | null => {
-        return document.getElementById(this.id);
-    };
-
-    private getRipple = (): HTMLElement | null => {
-        const container = this.getContainer();
-        if (container === null) return null;
-        return container.querySelector('div.ripple');
-    };
-
-    private id: string = generateComponentId(this.props.id);
-
-    state = {isHovered: false, internalValue: this.props.checked};
-
-    onCheck = (evt: React.MouseEvent<Element, Event>) => {
-        const {checked, onCheck, disabled, unControlled} = this.props;
-        if (disabled) return;
-        if (unControlled) {
-            evt.stopPropagation();
-            evt.persist();
-            this.setState({internalValue: !this.state.internalValue}, () => {
-                onCheck(this.state.internalValue, evt);
-            });
-        } else onCheck(!checked, evt);
-        this.addRipple();
-    };
-
-    onMouseEnter = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: true});
-    };
-
-    onMouseLeave = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: false});
-    };
-
-    addRipple = () => {
-        const container = this.getContainer();
-        if (container !== null) {
-            const ripple = this.getRipple();
-            if (ripple !== null) {
-                if (container.classList.contains('rippling'))
-                    container.classList.remove('rippling');
-                ripple.addEventListener('transitionend', this.removeRipple);
-                container.classList.add('rippling');
-            }
-        }
-    };
-
-    removeRipple = () => {
-        const ripple = this.getRipple();
-        const container = this.getContainer();
-        if (ripple !== null && container !== null) {
-            ripple.removeEventListener('transitionend', this.removeRipple);
-            container.classList.remove('rippling');
-        }
-    };
-
-    componentWillUnmount = () => {
-        this.removeRipple();
-    };
-
-    render = () => {
-        const {
-            checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
-            error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
-        } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
-        return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                         checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
-                         labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
-                         checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
-                         error={error} errorClass={errorClass} title={title} baseColor={baseColor}
-                         contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
-    }
-}

package/src/js/checkbox/style/checkbox.scss

@@ -1,109 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.checkboxContainer {
-  display: grid;
-  grid-template-columns: 22px auto;
-  grid-column-gap: .5rem;
-  align-items: center;
-  //padding: .2rem;
-  cursor: pointer;
-  position: relative;
-  margin-bottom: 0;
-  transition: margin-bottom .2s ease-in-out;
-
-  .checkboxLabel {
-    font-size: .9rem;
-    color: $color-gray-5;
-    cursor: inherit;
-    user-select: none;
-    transition: color .2s ease;
-    margin-bottom: -.2rem;
-
-    &.error {
-      color: red;
-    }
-  }
-
-  .checkbox {
-    @include borderRadius(.2rem);
-    position: relative;
-    height: 22px;
-    width: 22px;
-    border: 2px solid;
-    cursor: inherit;
-    background-color: white;
-    box-sizing: border-box;
-
-    .checkboxCheck, .checkbox-check {
-      @include centerXY;
-      top: 55%;
-      font-size: .9rem;
-      cursor: inherit;
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity .1s ease-in-out, visibility .1s ease-in-out;
-      user-select: none;
-
-      &.checked {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    .ripple {
-      @include centerXY;
-      @include borderRadius(50%);
-      opacity: 1;
-      width: 8px;
-      height: 8px;
-      visibility: hidden;
-      pointer-events: none;
-    }
-  }
-
-  .error {
-    position: absolute;
-    left: 0;
-    bottom: -1.4rem;
-    color: red;
-    font-size: .9rem;
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-  }
-
-  &.rippling {
-    .checkbox {
-      .ripple {
-        width: 56px;
-        height: 56px;
-        visibility: visible;
-        opacity: 0;
-        transition: opacity .5s ease-in-out, opacity .5s ease, width .5s ease-in-out, height .5s ease-in-out;
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.error {
-    margin-bottom: 1.4rem;
-
-    .error {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  &.no-label {
-    grid-template-columns: 22px;
-    grid-column-gap: unset;
-  }
-}

package/src/js/colorPicker/colorPicker.tsx

@@ -1,118 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/colorPicker.scss';
-
-import React from 'react';
-import {MouseEventHandler, PureComponent} from 'react';
-import {
-    BlockPicker, ChromePicker, CirclePicker, Color, ColorPickerProps, ColorResult, CompactPicker, PhotoshopPicker,
-    SketchPicker, TwitterPicker,
-} from "react-color";
-import {ColorPickerResultType, ColorPickerType} from "../util/interfaces";
-import WithBackground from "../popup/withBackground";
-import {Button} from "../../../index";
-
-interface Props extends ColorPickerProps<any> {
-    onSubmit: (color: Color) => void;
-    onPreChange?: (color: Color) => void;
-    onClose: MouseEventHandler;
-    pickerType: ColorPickerType;
-    resultType: ColorPickerResultType;
-    visible: boolean;
-    transparent: boolean;
-    closeable: boolean;
-}
-
-interface State {
-    color: Color;
-}
-
-export default class ColorPicker extends PureComponent<Props, State> {
-    static defaultProps = {
-        pickerType: ColorPickerType.SKETCH,
-        resultType: ColorPickerResultType.HEX,
-        transparent: false,
-        closeable: true,
-    };
-
-    state: State = {
-        color: this.props.color || '#000',
-    };
-
-    onSubmit = () => {
-        const {onSubmit} = this.props, {color} = this.state;
-        onSubmit(color);
-    };
-
-    onChange = (color: ColorResult) => {
-        let newColor: Color;
-        switch (this.props.resultType) {
-            case ColorPickerResultType.HEX:
-                newColor = color.hex;
-                break;
-            case ColorPickerResultType.HSL:
-                newColor = color.hsl;
-                break;
-            case ColorPickerResultType.RGB:
-                newColor = color.rgb;
-                break;
-        }
-        this.setState({color: newColor});
-    };
-
-    onPreChange = (color: ColorResult) => {
-        const {onPreChange} = this.props;
-        if (!onPreChange) return;
-        switch (this.props.resultType) {
-            case ColorPickerResultType.HEX:
-                onPreChange(color.hex);
-                break;
-            case ColorPickerResultType.HSL:
-                onPreChange(color.hsl);
-                break;
-            case ColorPickerResultType.RGB:
-                onPreChange(color.rgb);
-                break;
-        }
-    };
-
-    getPicker = () => {
-        const {pickerType} = this.props, {color} = this.state,
-            props = {color, onChangeComplete: this.onChange, onChange: this.onPreChange};
-        switch (pickerType) {
-            case ColorPickerType.BLOCK:
-                return <BlockPicker {...props}/>;
-            case ColorPickerType.CHROME:
-                return <ChromePicker {...props}/>;
-            case ColorPickerType.CIRCLE:
-                return <CirclePicker {...props}/>;
-            case ColorPickerType.COMPACT:
-                return <CompactPicker {...props}/>;
-            case ColorPickerType.PHOTOSHOP:
-                return <PhotoshopPicker {...props}/>;
-            case ColorPickerType.SKETCH:
-                return <SketchPicker {...props}/>;
-            case ColorPickerType.TWITTER:
-                return <TwitterPicker {...props}/>;
-            default:
-                return <SketchPicker {...props}/>;
-        }
-    };
-
-    render = () => {
-        const {onClose, visible, transparent, className, closeable} = this.props;
-        return (
-            <WithBackground onClose={onClose} active={visible} transparent={transparent} backgroundClass={className}>
-                <div className='color-picker-container'>
-                    {this.getPicker()}
-                    <div className='buttons-container'>
-                        {closeable && <Button onClick={onClose} label='Sluit' type='outlined'/>}
-                        <Button onClick={this.onSubmit} label='Kies' containerClass='submit-color'/>
-                    </div>
-                </div>
-            </WithBackground>
-        )
-    };
-}

package/src/js/colorPicker/style/colorPicker.scss

@@ -1,20 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.color-picker-container {
-  display: flex;
-  flex-direction: column;
-
-  .buttons-container {
-    display: flex;
-    justify-content: space-between;
-    padding: .5rem;
-    margin-top: -.2rem;
-    background-color: rgba(white, 1);
-    border-bottom-left-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-  }
-}