@dvrd/dvr-controls 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},

package/src/js/button/button.tsx

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

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

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

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

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