@dvrd/dvr-controls 1.0.4 → 1.0.7

package/src/js/button/simpleButton.tsx

@@ -1,163 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/simpleButton.scss';
-
-import React, {CSSProperties, PureComponent, ReactNode} from 'react';
-import {ControlContext} from "../util/controlContext";
-import {colorIsWhite, convertColor, editColor} from "../util/colorUtil";
-import {ControlPadding, ElementPosition, OrnamentShape} from "../util/interfaces";
-import classNames from "classnames";
-import {voidFunction} from "../util/controlUtil";
-
-interface Props {
-    onClick: any;
-    onMouseEnter: any;
-    onMouseLeave: any;
-    onMouseDown: any;
-    label: string;
-    containerClass: string;
-    labelClass: string;
-    id: string;
-    padding: ControlPadding;
-    disabled: boolean;
-    isHovered: boolean;
-    baseColor?: string;
-    textColor?: string;
-    title?: string;
-    withRipple: boolean;
-    primary: boolean;
-    tabIndex?: number;
-    children?: ReactNode | ReactNode[] | OrnamentShape | OrnamentShape[];
-}
-
-export default class SimpleButton extends PureComponent<Props> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getBaseColor = (trueBase: boolean = false): string => {
-        const {baseColor, textColor, primary} = this.props;
-        let color: string;
-        if (baseColor && baseColor.length) return convertColor(baseColor);
-        else color = this.context.baseColor;
-        color = convertColor(color);
-        if (colorIsWhite(color) && !trueBase && primary) {
-            if (textColor && textColor.length) color = textColor;
-            else color = this.context.contrastColor;
-            color = convertColor(color);
-        }
-        return color;
-    };
-
-    getContrastColor = (allowWhite: boolean = true) => {
-        const {textColor, primary, isHovered} = this.props, {baseColor, contrastColor} = this.context;
-        if (textColor && textColor.length) return convertColor(textColor);
-        const trueBase = this.getBaseColor(true);
-        if (colorIsWhite(trueBase) && primary) return trueBase;
-
-        let color: string;
-        if (textColor && textColor.length) color = textColor;
-        else {
-            color = convertColor(contrastColor);
-            if (!primary && !isHovered) {
-                color = convertColor(baseColor);
-                if (colorIsWhite(color) && !allowWhite)
-                    color = convertColor(contrastColor);
-            }
-        }
-        return color;
-    };
-
-    getContainerClass = (): string => {
-        const {containerClass, padding, disabled, withRipple, primary} = this.props;
-        return classNames('dvr-simple-button', padding, disabled && 'disabled', withRipple && 'ripple',
-            primary && 'primary', containerClass);
-    };
-
-    getContainerStyle = (): CSSProperties => {
-        const {disabled, isHovered, primary} = this.props, baseColor = this.getBaseColor();
-        let backgroundColor: string;
-        if (disabled) backgroundColor = 'color-gray-6';
-        else if (isHovered) {
-            if (primary) backgroundColor = editColor(-.2, baseColor);
-            else backgroundColor = editColor(-.2, baseColor);
-        } else if (!primary) backgroundColor = 'transparent';
-        else backgroundColor = baseColor;
-        return {backgroundColor: convertColor(backgroundColor)};
-    };
-
-    getLabelStyle = (): CSSProperties => {
-        const {disabled} = this.props, textColor = this.getContrastColor(false),
-            style: CSSProperties = {};
-        let color: string;
-        if (disabled) color = 'gray';
-        else color = textColor;
-        style.color = convertColor(color);
-
-        const childCount = this.getLabelChildCount();
-        style.gridTemplateColumns = `repeat(${childCount}, auto)`;
-        return style;
-    };
-
-    getLabelChildCount = () => {
-        const {label, children} = this.props;
-        let childCount = 0;
-        if (label && label.length) childCount++;
-        if (Array.isArray(children)) {
-            for (const child of children) {
-                if (this.isOrnament(child)) childCount++;
-            }
-        } else if (this.isOrnament(children)) childCount++;
-        return Math.min(3, childCount);
-    };
-
-    isOrnament = (obj: any) => obj && obj.hasOwnProperty('element');
-
-    placementIsMatch = (ornament: OrnamentShape, placement: ElementPosition) => ornament.placement === placement;
-
-    renderOrnament = (placement: ElementPosition) => {
-        const {children, onClick} = this.props;
-        let ornament: OrnamentShape | null = null;
-        if (Array.isArray(children)) {
-            for (const child of children) {
-                if (this.isOrnament(child) && this.placementIsMatch(child as OrnamentShape, placement)) {
-                    ornament = child as OrnamentShape;
-                    break;
-                }
-            }
-        } else if (this.isOrnament(children) && this.placementIsMatch(children as OrnamentShape, placement)) {
-            ornament = children as OrnamentShape;
-        }
-        if (ornament !== null) return (
-            <div className={classNames('dvr-simple-button-ornament', placement)}
-                 onClick={ornament.allowPropagation ? onClick : voidFunction}>
-                {ornament.element}
-            </div>
-        );
-        return null;
-    };
-
-    renderLabel = () => {
-        const {label, labelClass} = this.props;
-        return <label className={classNames('dvr-simple-button-label', labelClass)}>{label}</label>;
-    };
-
-    render = () => {
-        const {onClick, onMouseEnter, onMouseLeave, id, onMouseDown, withRipple, title, disabled, tabIndex} = this.props,
-            titleProp = title !== undefined ? {title} : {};
-        return (
-            <div className={this.getContainerClass()} style={this.getContainerStyle()}
-                 onClick={disabled ? voidFunction : onClick}
-                 onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onMouseDown={onMouseDown}
-                 id={id} tabIndex={tabIndex} {...titleProp}>
-                <div className='dvr-simple-button-label-container' style={this.getLabelStyle()}>
-                    {this.renderOrnament(ElementPosition.LEFT)}
-                    {this.renderLabel()}
-                    {this.renderOrnament(ElementPosition.RIGHT)}
-                </div>
-                {withRipple && <div className='ripple' style={{backgroundColor: this.getContrastColor()}}/>}
-            </div>
-        )
-    };
-}

package/src/js/button/style/button.scss

@@ -1,95 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.buttonController {
-  overflow: hidden;
-  display: inline-block;
-
-  &:not(.disabled) {
-    @include backgroundShadow;
-  }
-
-  border-radius: .3rem;
-  position: relative;
-  padding: .5rem 1rem;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: background-color .2s ease-in-out;
-
-  .buttonLabel {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: inherit;
-    pointer-events: none;
-    font-size: .9rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
-
-    &.singleChild {
-      justify-content: center;
-    }
-
-    .buttonLabel {
-      text-align: center;
-    }
-
-    * {
-      user-select: none;
-      margin-right: .5rem;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .ripple {
-    border-radius: 50%;
-    position: absolute;
-    opacity: .5;
-    width: 10%;
-    padding-top: 10%;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &.rippling {
-    .ripple {
-      visibility: visible;
-      opacity: 0;
-      transform: scale(15);
-      transition: opacity .5s ease-in-out, transform .5s ease-in-out, opacity .5s ease;
-    }
-  }
-
-  &.sp {
-    padding: .4rem .5rem;
-
-    .buttonLabel {
-      font-size: .8rem;
-    }
-  }
-
-  &.lp {
-    padding: .8rem 1.5rem;
-  }
-
-  &.disabled {
-    background-color: $color-gray-6 !important;
-    cursor: not-allowed;
-
-    .buttonLabel {
-      color: $color-gray-2 !important;
-    }
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-}

package/src/js/button/style/closeButton.scss

@@ -1,15 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.close-button {
-  cursor: pointer;
-  transition: color .2s ease-in-out;
-  font-size: .8rem;
-
-  &:hover {
-    color: red !important;
-  }
-}

package/src/js/button/style/dvrdButton.scss

@@ -1,30 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvrd-button {
-  @include backgroundShadow2;
-  padding: .7rem 1rem;
-  cursor: pointer;
-  transition: background-color .2s ease-in-out;
-  display: inline-grid;
-  align-items: center;
-  grid-column-gap: .5rem;
-  justify-content: center;
-  justify-items: center;
-
-  &, * {
-    user-select: none;
-  }
-
-  .dvrd-button-label {
-    transition: color .2s ease-in-out;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-}

package/src/js/button/style/outlinedButton.scss

@@ -1,84 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.outlinedButtonContainer {
-  @include borderRadius(.3rem);
-  position: relative;
-  padding: .37rem 1rem;
-  cursor: pointer;
-  box-sizing: border-box;
-  border: 2px solid transparent;
-  transition: border-color .2s ease-in-out;
-  overflow: hidden;
-  display: inline-block;
-
-  .outlinedButtonLabel {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: inherit;
-    pointer-events: none;
-    font-size: .9rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
-    transition: color .2s ease-in-out;
-
-    &.singleChild {
-      justify-content: center;
-    }
-
-    .buttonLabel {
-      text-align: center;
-    }
-
-    * {
-      user-select: none;
-      margin-right: .5rem;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .ripple {
-    @include borderRadius(50%);
-    position: absolute;
-    opacity: .7;
-    width: 10%;
-    padding-top: 10%;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &.rippling {
-    .ripple {
-      visibility: visible;
-      opacity: 0;
-      transform: scale(15);
-      transition: opacity .5s ease-in-out, transform .5s ease-in-out, opacity .5s ease;
-    }
-  }
-
-  &.sp {
-    padding: .2rem .5rem;
-  }
-
-  &.lp {
-    padding: .8rem 1.5rem;
-  }
-
-  &.disabled {
-    border-color: $color-gray-6 !important;
-    cursor: not-allowed;
-
-    .outlinedButtonLabel {
-      color: $color-gray-2 !important;
-    }
-  }
-}

package/src/js/button/style/simpleButton.scss

@@ -1,80 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-@import '../../../style/variables';
-
-.dvr-simple-button {
-  position: relative;
-  overflow: hidden;
-  border-radius: 1rem;
-  cursor: pointer;
-  padding: .5rem 1rem;
-  transition: background-color .2s ease-in-out;
-  display: inline-block;
-
-  &, * {
-    user-select: none;
-  }
-
-  .dvr-simple-button-label-container {
-    display: inline-grid;
-    grid-column-gap: .25rem;
-
-    .dvr-simple-button-ornament {
-      font-size: .9rem;
-    }
-
-    .dvr-simple-button-label {
-      font-size: .9rem;
-      cursor: inherit;
-      font-weight: 500;
-      text-align: center;
-      transition: color .2s ease-in-out;
-      white-space: nowrap;
-
-      &:only-child {
-        grid-column-start: 1;
-        grid-column-end: 4;
-      }
-    }
-  }
-
-  .ripple {
-    @include borderRadius(50%);
-    position: absolute;
-    opacity: .5;
-    width: 10%;
-    padding-top: 10%;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &.rippling {
-    .ripple {
-      visibility: visible;
-      opacity: 0;
-      transform: scale(15);
-      transition: opacity .5s ease-in-out, transform .5s ease-in-out, opacity .5s ease;
-    }
-  }
-
-  &, * {
-    box-sizing: border-box;
-  }
-
-  &.primary {
-    @include backgroundShadow;
-  }
-
-  &.disabled {
-    box-shadow: none !important;
-    cursor: not-allowed !important;
-  }
-
-  &.sp {
-    padding: .25rem .5rem;
-  }
-}

package/src/js/carousel/DVRCarousel.tsx

@@ -1,163 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/DVRCarousel.scss';
-
-import React, {MouseEventHandler} from 'react';
-import {PureComponent, ReactElement} from "react";
-import AwesomeIcon from "../icon/awesomeIcon";
-import classNames from "classnames";
-import {voidFunction} from "../util/controlUtil";
-import isEqual from 'lodash/isEqual';
-import {debug} from "../../..";
-
-interface Props {
-    onClickNext: MouseEventHandler;
-    onClickPrev: MouseEventHandler;
-    children: ReactElement[];
-    currentIndex: number;
-    visibleItems: number;
-    lazy: boolean;
-    className: string;
-    showControls: boolean;
-    infinite: boolean;
-    variableWidth: boolean;
-}
-
-interface State {
-    initialRendered: boolean;
-}
-
-export default class DVRCarousel extends PureComponent<Props, State> {
-    state: State = {
-        initialRendered: false,
-    }
-    carousel: HTMLDivElement;
-
-    getMaxWidth = (): number => {
-        const {children, visibleItems} = this.props;
-        let width = 0;
-        for (let i = 0; i < children.length; i++) {
-            let combinedWidth = 0;
-            for (let j = i; j < i + visibleItems && j < children.length; j++) {
-                const container = this.getItemContainer(j);
-                if (container) combinedWidth += container.offsetWidth;
-            }
-            if (combinedWidth > width) width = combinedWidth;
-        }
-        return width;
-    };
-
-    getVisibleIndexes = (): { firstIndex: number, lastIndex: number } => {
-        const {currentIndex, visibleItems, infinite, children} = this.props,
-            itemsBefore = Math.floor((visibleItems - 1) / 2), itemsAfter = Math.ceil((visibleItems - 1) / 2)
-        let firstIndex = currentIndex - itemsBefore, lastIndex = currentIndex + itemsAfter;
-        if (firstIndex < 0) {
-            lastIndex = visibleItems - 1;
-            firstIndex = 0;
-        }
-        if (lastIndex > children.length - 1) {
-            if (infinite) lastIndex -= (children.length - 1)
-            else {
-                lastIndex = children.length - -1;
-                firstIndex = Math.max(0, lastIndex - visibleItems);
-            }
-        }
-        return {firstIndex, lastIndex};
-    };
-
-    getItemContainer = (index: number): HTMLDivElement | null => {
-        return document.querySelector(`div[data-name=dvr-carousel-${index}]`);
-    }
-
-    getVisibleWidth = (): number => {
-        const {firstIndex, lastIndex} = this.getVisibleIndexes();
-        let width: number = 0;
-        for (let i = firstIndex; i <= lastIndex; i++) {
-            const container: HTMLDivElement | null = this.getItemContainer(i);
-            if (container) width += container.offsetWidth;
-        }
-        return width;
-    };
-
-    setStyle = () => {
-        if (this.carousel) {
-            const {variableWidth} = this.props, {firstIndex} = this.getVisibleIndexes();
-            let left: number = 0;
-            if (firstIndex > 0) {
-                for (let i = 0; i < firstIndex; i++) {
-                    const container: HTMLDivElement | null = this.getItemContainer(i);
-                    if (container) left -= container.offsetWidth;
-                }
-            }
-            const itemsContainer: HTMLDivElement | null = this.carousel.querySelector('div.items-container');
-            if (variableWidth)
-                this.carousel.style.width = this.getVisibleWidth() + 'px';
-            else this.carousel.style.width = this.getMaxWidth() + 'px';
-
-            if (itemsContainer)
-                itemsContainer.style.transform = `translateX(${left}px)`;
-
-        }
-        if (!this.state.initialRendered) this.setState({initialRendered: true});
-    }
-
-    renderPrevControl = () => {
-        const {showControls, onClickPrev, currentIndex, infinite} = this.props;
-        if (!showControls) return null;
-        const disabled = currentIndex === 0 && !infinite;
-        return <AwesomeIcon name='chevron-left'
-                            className={classNames('carousel-control', 'prev', disabled && 'disabled')}
-                            onClick={disabled ? voidFunction : onClickPrev}/>;
-    };
-
-    renderNextControl = () => {
-        const {showControls, onClickNext, currentIndex, infinite, children, visibleItems} = this.props;
-        if (!showControls) return null;
-        const disabled = currentIndex === (children.length - 1) - visibleItems && !infinite;
-        return <AwesomeIcon name='chevron-right'
-                            className={classNames('carousel-control', 'next', disabled && 'disabled')}
-                            onClick={disabled ? voidFunction : onClickNext}/>;
-    };
-
-    renderItems = () => {
-        const {lazy, children} = this.props, {initialRendered} = this.state, {firstIndex, lastIndex} = this.getVisibleIndexes();
-        return (
-            <div className='carousel-items-container' ref={(ref: HTMLDivElement) => {
-                this.carousel = ref;
-            }}>
-                <div className='items-container'>
-                    {children.map((child: ReactElement, index: number) => {
-                        const hidden = !initialRendered || index < firstIndex || index > lastIndex;
-                        return (
-                            <div key={index} className={classNames('carousel-item', hidden && 'hidden')}
-                                 data-name={`dvr-carousel-${index}`}>
-                                {(!hidden || !lazy) && child}
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        )
-    };
-
-    componentDidMount = () => {
-        window.setTimeout(this.setStyle, 0);
-    };
-
-    componentDidUpdate = (prevProps: Props, prevState: State) => {
-        const {currentIndex, visibleItems, children} = this.props, {initialRendered} = this.state;
-        if (currentIndex !== prevProps.currentIndex || visibleItems !== prevProps.visibleItems || !isEqual(children, prevProps.children) || initialRendered !== prevState.initialRendered)
-            window.setTimeout(this.setStyle, 0);
-    };
-
-    render = () => {
-        return (
-            <div className='dvr-carousel'>
-                {this.renderPrevControl()}
-                {this.renderItems()}
-                {this.renderNextControl()}
-            </div>
-        )
-    };
-}