@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/carousel/DVRCarouselController.tsx

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

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

@@ -0,0 +1,148 @@
+/*
+ * 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";
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+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: IconName | 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 as React.ReactElement), {
+            className: classNames(checkIcon.props.className, this.getCheckClass()),
+            style: {...checkIcon.props.style, ...this.getCheckStyle()}
+        });
+        const checkName: IconName = typeof checkIcon === 'string' ? checkIcon as IconName : '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

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

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

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

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