@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/button/simpleButton.tsx

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

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

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

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

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

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

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