@dvrd/dvr-controls 1.0.15 → 1.0.17

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Custom web controls",
   "main": "index.ts",
+  "files": ["src/**/*"],
   "scripts": {},
   "repository": {
     "type": "git",

package/src/js/button/button.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/button.scss';
+
+import React, { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import {convertColor, editColor, ThemeShape} from "../../..";
+import {isNotNull, isNull} from "../util/controlUtil";
+
+interface Props {
+    onClick: any;
+    onMouseEnter: any;
+    onMouseLeave: any;
+    onMouseDown: any;
+    label: string;
+    containerClass: string;
+    labelClass: string;
+    id: string;
+    padding: 'small' | 'normal' | 'large';
+    disabled: boolean;
+    withRipple: boolean;
+    isHovered: boolean;
+    baseColor: string;
+    textColor: string;
+    contextStyle: ThemeShape;
+    title?: string;
+    tabIndex?: number;
+}
+
+export class Button extends React.Component<PropsWithChildren<Props>> {
+    getContainerClass = (): string => {
+        const {disabled, withRipple, padding, containerClass} = this.props,
+            classes = ['buttonController'];
+        if (disabled) classes.push('disabled');
+        else if (withRipple) classes.push('ripple');
+
+        if (padding === 'small') classes.push('sp');
+        else if (padding === 'large') classes.push('lp');
+
+        classes.push(containerClass);
+        return classNames(classes);
+    };
+
+    getContainerStyle = (): object => {
+        const {isHovered, baseColor} = this.props;
+        let hexColor = convertColor(baseColor);
+        if (isHovered) hexColor = editColor(-.2, hexColor);
+        return {backgroundColor: hexColor};
+    };
+
+    getLabelStyle = (): object => {
+        const {textColor} = this.props;
+        return {color: convertColor(textColor)};
+    };
+
+    getRippleColor = (): string => {
+        const {contextStyle, textColor} = this.props;
+        if(textColor) return convertColor(textColor);
+        return convertColor(contextStyle.contrastColor);
+    };
+
+    renderLabel = (): React.ReactNode => {
+        const {children, labelClass, label} = this.props, leftElements = [], rightElements = [];
+        if (Array.isArray(children)) {
+            for (let child of children) {
+                if (child !== undefined && child !== null) {
+                    //@ts-ignore
+                    const {placement, element} = child;
+                    if (placement === 'left') leftElements.push(element);
+                    else rightElements.push(element);
+                }
+            }
+        } else if (isNotNull(children)) {
+            //@ts-ignore
+            const {placement, element} = children;
+            if (placement === 'left') leftElements.push(element);
+            else rightElements.push(element);
+        }
+        return (
+            <span className={classNames('buttonLabel', isNull(children) && 'singleChild', labelClass)}
+                  style={this.getLabelStyle()}>
+                {leftElements.map((element, key) => ({...element, key}))}
+                {isNotNull(label) && <span className='buttonLabel'>{label}</span>}
+                {rightElements.map((element, key) => ({...element, key}))}
+            </span>)
+    };
+
+    render = () => {
+        const {onClick, onMouseEnter, onMouseLeave, id, onMouseDown, withRipple, title, tabIndex} = this.props,
+            titleProps = isNotNull(title) ? {title} : {};
+        return (
+            <div className={this.getContainerClass()} style={this.getContainerStyle()} onClick={onClick}
+                 onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onMouseDown={onMouseDown}
+                 id={id} tabIndex={tabIndex} {...titleProps}>
+                {this.renderLabel()}
+                {withRipple && <div className='ripple' style={{backgroundColor: this.getRippleColor()}}/>}
+            </div>
+        )
+    };
+}

package/src/js/button/buttonController.tsx

@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {MouseEventHandler, ReactNode} from 'react';
+import {Button} from "./button";
+import {OutlinedButton} from "./outlinedButton";
+import {ControlContext, ThemeShape} from "../util/controlContext";
+import {ControlPadding, ControlVariant} from "../util/interfaces";
+import SimpleButton from "./simpleButton";
+import {generateComponentId} from '../util/componentUtil';
+
+interface Props extends Readonly<{ children?: ReactNode }> {
+    onClick: MouseEventHandler;
+    label: string;
+    containerClass: string;
+    className: string;
+    labelClass: string;
+    id?: string;
+    padding: 'small' | 'normal' | 'large';
+    type: ControlVariant | string;
+    disabled: boolean;
+    withRipple: boolean;
+    baseColor?: string;
+    textColor?: string;
+    contextStyle?: ThemeShape;
+    title?: string;
+    primary: boolean;
+    tabIndex?: number;
+}
+
+interface State {
+    isHovered: boolean;
+}
+
+export default class ButtonController extends React.Component<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    static defaultProps = {
+        containerClass: '',
+        className: '',
+        labelClass: '',
+        padding: 'normal',
+        disabled: false,
+        withRipple: true,
+        type: ControlVariant.STANDARD,
+        primary: true,
+    };
+
+    state = {
+        isHovered: false,
+    };
+
+    private getProps = (): Props => {
+        const origProps = this.props;
+        return {
+            ...origProps,
+            type: this.context.controlVariant || this.props.type,
+        };
+    };
+
+    private id: string = generateComponentId(this.props.id);
+
+    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');
+    };
+
+    onClick = (evt: any) => {
+        if (!this.props.disabled)
+            this.props.onClick(evt);
+    };
+
+    onMouseEnter = () => {
+        this.setState({isHovered: true});
+    };
+
+    onMouseLeave = () => {
+        this.setState({isHovered: false});
+    };
+
+    onMouseDown = (evt: any) => {
+        if (this.props.withRipple && !this.props.disabled)
+            this.addRipple(evt);
+    };
+
+    addRipple = (evt: any) => {
+        const container = this.getContainer();
+        if (container !== null) {
+            const ripple = this.getRipple();
+            if (ripple !== null) {
+                if (container.classList.contains('rippling'))
+                    container.classList.remove('rippling');
+                const rect = evt.target.getBoundingClientRect();
+                ripple.style.setProperty('left', evt.clientX - rect.left + 'px');
+                ripple.style.setProperty('top', evt.clientY - rect.top + 'px');
+                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');
+        }
+    };
+
+    getBaseColor = (): string => {
+        const {baseColor} = this.props;
+        if (baseColor !== undefined && baseColor !== null) return baseColor;
+        return this.getContextStyle().baseColor;
+    };
+
+    getTextColor = (): string => {
+        const {textColor} = this.props;
+        if (textColor !== null && textColor !== undefined) return textColor;
+        return this.getContextStyle().contrastColor;
+    };
+
+    getContextStyle = (): ThemeShape => {
+        const {contextStyle} = this.props;
+        if (contextStyle !== null && contextStyle !== undefined) return contextStyle;
+        // noinspection JSDeprecatedSymbols
+        return this.context;
+    };
+
+    componentWillUnmount = () => {
+        this.removeRipple();
+    };
+
+    render = () => {
+        const {
+                labelClass, containerClass, disabled, padding, withRipple, label, type, title, baseColor, textColor,
+                primary, children, tabIndex, className
+            } = this.getProps(),
+            {isHovered} = this.state, controlType = type === 'standard' ? ControlVariant.STANDARD :
+            type === 'outlined' ? ControlVariant.OUTLINED : ControlVariant.SIMPLE;
+        const controlPadding = padding === 'small' ? ControlPadding.SMALL :
+            padding === 'normal' ? ControlPadding.NORMAL : ControlPadding.LARGE;
+        if (controlType === ControlVariant.STANDARD)
+            return (
+                <Button labelClass={labelClass} containerClass={containerClass + className} disabled={disabled}
+                        id={this.id} onClick={this.onClick} padding={padding} withRipple={withRipple}
+                        baseColor={this.getBaseColor()} textColor={this.getTextColor()} label={label}
+                        onMouseEnter={this.onMouseEnter} contextStyle={this.getContextStyle()} title={title}
+                        isHovered={isHovered} onMouseLeave={this.onMouseLeave} onMouseDown={this.onMouseDown}
+                        tabIndex={tabIndex}>
+                    {children}
+                </Button>
+            );
+        else if (controlType === ControlVariant.OUTLINED) return (
+            <OutlinedButton onClick={this.onClick} onMouseEnter={this.onMouseEnter}
+                            onMouseLeave={this.onMouseLeave} onMouseDown={this.onMouseDown} label={label}
+                            containerClass={containerClass + className} labelClass={labelClass} id={this.id}
+                            title={title} padding={padding} disabled={disabled} withRipple={withRipple}
+                            isHovered={isHovered} baseColor={this.getBaseColor()} contextStyle={this.getContextStyle()}
+                            tabIndex={tabIndex}>
+                {children}
+            </OutlinedButton>
+        );
+        else return (
+                <SimpleButton onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+                              onMouseDown={this.onMouseDown} label={label} containerClass={containerClass + className}
+                              labelClass={labelClass} id={this.id} padding={controlPadding} disabled={disabled}
+                              isHovered={isHovered} baseColor={baseColor} textColor={textColor} withRipple={withRipple}
+                              primary={primary} title={title} tabIndex={tabIndex}>{children}</SimpleButton>
+            );
+    };
+}

package/src/js/button/closeButton.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/closeButton.scss';
+
+import React, {CSSProperties, PureComponent} from 'react';
+import {MouseEventHandler} from "react";
+import classNames from "classnames";
+import {voidFunction} from "../util/controlUtil";
+import AwesomeIcon from "../icon/awesomeIcon";
+
+interface Props {
+    onClick: MouseEventHandler;
+    className?: string;
+    disabled?: boolean;
+    style?: CSSProperties;
+    title?: string;
+}
+
+export default class CloseButton extends PureComponent<Props> {
+    render = () => {
+        const {className, title, disabled, onClick, style} = this.props;
+        return (
+            <AwesomeIcon name='times' className={classNames('close-button', className)} title={title} style={style}
+                         onClick={disabled ? voidFunction : onClick}/>
+        )
+    }
+}

package/src/js/button/dvrdButton.tsx

@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdButton.scss';
+
+import React, {CSSProperties, MouseEventHandler, useContext, useState} from "react";
+import classNames from "classnames";
+import {ElementPosition, OrnamentShape} from "../util/interfaces";
+import {ControlContext} from "../util/controlContext";
+import {convertColor, editColor} from "../util/colorUtil";
+
+export interface DvrdButtonProps {
+    onClick: MouseEventHandler;
+    label: string;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+    ornamentClassName?: string;
+    secondary?: boolean;
+    red?: boolean;
+    customBaseColor?: string;
+    customContrastColor?: string;
+}
+
+export default function DvrdButton(props: DvrdButtonProps) {
+    const context = useContext(ControlContext),
+        {
+            className, disabled, label, labelClassName, onClick, ornamentClassName, ornaments, red, secondary,
+            customBaseColor, customContrastColor
+        } = props,
+        [hover, setHover] = useState(false);
+
+    function onMouseEnter() {
+        setHover(true);
+    }
+
+    function onMouseLeave() {
+        setHover(false);
+    }
+
+    function getContainerStyle(): CSSProperties {
+        const style: CSSProperties = {
+            gridTemplateColumns: '1fr', backgroundColor: getBackgroundColor(), color: getColor()
+        };
+        let hasLeft: boolean = false, hasRight: boolean = false;
+        if (Array.isArray(ornaments))
+            for (const ornament of ornaments) {
+                if (!ornament.placement || ornament.placement === ElementPosition.LEFT) hasLeft = true;
+                else if (ornament.placement === ElementPosition.RIGHT) hasRight = true;
+                if (hasLeft && hasRight) break;
+            }
+        else if (ornaments) {
+            hasLeft = !ornaments.placement || ornaments.placement === ElementPosition.LEFT;
+            hasRight = ornaments.placement === ElementPosition.RIGHT;
+        }
+        let columns: string = '1fr';
+        if (hasRight) columns = `${columns} fit-content(100%)`
+        if (hasLeft) columns = `fit-content(100%) ${columns}`;
+        style.gridTemplateColumns = columns;
+        return style;
+    }
+
+    function getBackgroundColor(): string {
+        let color: string;
+        if (disabled) color = 'color-gray-4';
+        else if (customBaseColor) color = customBaseColor;
+        else if (red) {
+            if (secondary) color = 'color-red-secondary';
+            else color = 'rgb(255,0,0)';
+        } else if (secondary) color = context.contrastColor;
+        else color = context.baseColor;
+        color = convertColor(color);
+        if (hover) color = editColor(-.2, color);
+        return color;
+    }
+
+    function getColor(): string {
+        let color: string;
+        if (disabled) color = 'color-gray-3';
+        else if (customContrastColor) color = customContrastColor;
+        else if (red) {
+            if (secondary) color = 'red';
+            else color = 'white';
+        } else if (secondary) color = context.baseColor;
+        else color = context.contrastColor;
+        return convertColor(color);
+    }
+
+    return (
+        <div
+            className={classNames('dvrd-button', disabled && 'disabled', secondary && 'secondary', red && 'red', className)}
+            style={getContainerStyle()} onClick={disabled ? undefined : onClick} onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}>
+            <Ornament position={ElementPosition.LEFT} ornamentClassName={ornamentClassName} ornaments={ornaments}/>
+            <label className={classNames('dvrd-button-label', labelClassName)}>{label}</label>
+            <Ornament position={ElementPosition.RIGHT} ornamentClassName={ornamentClassName} ornaments={ornaments}/>
+        </div>
+    )
+}
+
+interface OrnamentProps {
+    position: ElementPosition;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    ornamentClassName?: string;
+}
+
+function Ornament(props: OrnamentProps) {
+    const {ornaments, position, ornamentClassName} = props;
+    if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) return null;
+    let ornament: OrnamentShape | null = null;
+    if (Array.isArray(ornaments)) {
+        for (const orn of ornaments) {
+            if (!orn.placement || orn.placement === position) {
+                ornament = orn;
+                break;
+            }
+        }
+    } else if ((!ornaments.placement && position === ElementPosition.LEFT) || ornaments.placement === position)
+        ornament = ornaments;
+    if (!ornament) return null;
+
+    if (typeof ornament.element === 'string')
+        return <span className={classNames('dvrd-button-ornament', ornamentClassName)}>{ornament.element}</span>;
+    else return React.cloneElement(ornament.element, {
+        className: classNames('dvrd-button-ornament', ornament.element.props.className, ornamentClassName)
+    });
+}

package/src/js/button/outlinedButton.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/outlinedButton.scss';
+
+import React, { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import {colorIsWhite, convertColor, editColor} from "../util/colorUtil";
+import {isNotNull, isNull} from "../util/controlUtil";
+import {ThemeShape} from "../util/controlContext";
+
+interface ButtonProps {
+    onClick: any,
+    onMouseEnter: any,
+    onMouseLeave: any,
+    onMouseDown: any,
+    label: string,
+    containerClass: string,
+    labelClass: string,
+    id: string,
+    padding: 'small' | 'normal' | 'large',
+    disabled: boolean,
+    withRipple: boolean,
+    isHovered: boolean,
+    baseColor: string,
+    contextStyle: ThemeShape,
+    title?: string,
+    tabIndex?: number;
+}
+
+export class OutlinedButton extends React.Component<PropsWithChildren<ButtonProps>> {
+    getContainerClass = (): string => {
+        const {containerClass, disabled, padding} = this.props, classes: string[] = ['outlinedButtonContainer'];
+        if (disabled) classes.push('disabled');
+
+        if (padding === 'small') classes.push('sp');
+        else if (padding === 'large') classes.push('lp');
+
+        classes.push(containerClass);
+        return classNames(classes);
+    };
+
+    getContainerStyle = (): object => {
+        const {baseColor, isHovered, contextStyle} = this.props;
+        let color = convertColor(baseColor);
+        if (colorIsWhite(color)) color = convertColor(contextStyle.contrastColor);
+        if (isHovered) color = editColor(-.2, color);
+        return {borderColor: color};
+    };
+
+    getLabelStyle = () => {
+        const {baseColor, isHovered, contextStyle} = this.props;
+        let color = convertColor(baseColor);
+        if (colorIsWhite(color)) color = convertColor(contextStyle.contrastColor);
+        if (isHovered) color = editColor(-.2, color);
+        return {color};
+    };
+
+    getRippleColor = (): string => {
+        const {baseColor, contextStyle} = this.props;
+        let color = baseColor;
+        if (colorIsWhite(baseColor)) color = contextStyle.contrastColor;
+        return convertColor(color);
+    };
+
+    renderLabel = (): React.ReactNode => {
+        const {children, labelClass, label} = this.props, leftElements = [], rightElements = [];
+        if (Array.isArray(children)) {
+            for (let child of children) {
+                if (child !== undefined && child !== null) {
+                    //@ts-ignore
+                    const {placement, element} = child;
+                    if (placement === 'left') leftElements.push(element);
+                    else rightElements.push(element);
+                }
+            }
+        } else if (isNotNull(children)) {
+            //@ts-ignore
+            const {placement, element} = children;
+            if (placement === 'left') leftElements.push(element);
+            else rightElements.push(element);
+        }
+        return (
+            <span className={classNames('outlinedButtonLabel', isNull(children) && 'singleChild', labelClass)}
+                  style={this.getLabelStyle()}>
+                {leftElements.map((element, key) => ({...element, key}))}
+                {isNotNull(label) && <span className='buttonLabel'>{label}</span>}
+                {rightElements.map((element, key) => ({...element, key}))}
+            </span>)
+    };
+
+    render = () => {
+        const {id, onClick, onMouseEnter, onMouseLeave, onMouseDown, withRipple, title, tabIndex} = this.props,
+            titleProps = isNotNull(title) ? {title} : {};
+        return (
+            <div className={this.getContainerClass()} id={id} style={this.getContainerStyle()} onClick={onClick}
+                 onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onMouseDown={onMouseDown}
+                 tabIndex={tabIndex} {...titleProps}>
+                {this.renderLabel()}
+                {withRipple && <div className='ripple' style={{backgroundColor: this.getRippleColor()}}/>}
+            </div>
+        )
+    };
+}